/* =============================================================
   uptimerobotics.ai — landing and contact

   One onyx sheet with a hairline plate drawn on its outer margin,
   registered at the corners. The mark at the top, the statement
   at the base. On the right, two fields share one survey: a Dusk
   Blue duotone loop of field machines bleeding off the
   top and right, and below it the blueprint mesh, anchored to the
   plate's bottom-right corner and bleeding off the bottom and
   right. The mesh covers one region, never the whole ground.

   One small inline script, for the video. No third-party request. Nothing on this page
   phones anyone.

   Every value here resolves to a design-system token (corrected
   in ds-overrides.css where the export disagrees with the brand
   system). Page-level decisions are scoped to page classes.
   ============================================================= */

/* --- page scale ------------------------------------------------------- *
   --pad-outer   the outer margin; the plate's frame is drawn on it
   --pad-plate   the plate's own padding
   --cell        the mesh lattice, anchored to the plate's corner
   --photo-cells the footage panel's width, in lattice cells from the frame */
:root {
  --pad-outer: var(--space-64);
  --pad-plate: var(--space-64);
  --gutter: var(--space-24);
  --cell: calc(var(--space-64) * 2);
  --photo-cells: 4;
  --lede-pad: var(--space-64);
  --frame: color-mix(in srgb, var(--ur-steel-blue) 30%, transparent);
  --hero: clamp(var(--type-subheading), 5vw, var(--type-hero));
}
@media (max-width: 1359px) { :root { --photo-cells: 3; } }
@media (max-width: 1024px) {
  :root { --pad-outer: var(--space-32); --pad-plate: var(--space-32); --cell: calc(var(--space-48) * 2); }
}
/* Short laptop windows: tighten the vertical ladder so the sheet stays
   exactly one screen, then the outer margin, then the headline. */
@media (min-width: 801px) and (max-height: 860px) {
  :root { --pad-plate: var(--space-32); --lede-pad: var(--space-32); }
}
@media (min-width: 801px) and (max-height: 740px) {
  :root { --pad-outer: var(--space-32); --cell: calc(var(--space-48) * 2); --hero: clamp(var(--type-subheading), 5vw, calc(var(--type-hero) - var(--space-8))); }
}

/* --- reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ur-onyx); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  padding: var(--pad-outer);
  background: var(--ur-onyx);
  font-family: var(--font-text);
  color: var(--ur-soft-linen);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* The footage and the mesh bleed past the plate to the viewport edge;
     nothing may scroll sideways because of it. */
  overflow-x: hidden;
  overflow-x: clip;
}
::selection { background: var(--ur-dusk-blue); color: var(--ur-soft-linen); }

/* --- the plate -------------------------------------------------------- */
.plate {
  position: relative;
  isolation: isolate;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* flex-grow would otherwise defeat a width cap, so the ceiling is a
     max-width: past 1312 the ground keeps bleeding and the plate centres,
     like a plaque mounted on a wall. */
  max-width: var(--content-width);
  margin-inline: auto;
  padding: var(--pad-plate);
}
/* The frame: a 1px Steel Blue rule on the outer margin, drawn above the
   footage so the sheet reads as one drawing. Square corners. */
.plate::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border: var(--border-width) solid var(--frame);
  pointer-events: none;
}
.head, .statement, .foot { position: relative; z-index: 3; }

/* Registration marks on the plate's corners: the brand crosshair at hero
   scale, 24px across, 2px strokes, butt ends, full Steel Blue. The
   bottom-right one is also the mesh's corner, so the two read as one
   survey. */
.reg {
  position: absolute;
  z-index: 2;
  width: var(--space-24);
  height: var(--space-24);
  background-color: var(--ur-steel-blue);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 0v24M0 12h24' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 0v24M0 12h24' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
}
.reg--tl { top: calc(var(--border-width) - var(--space-12)); left: calc(var(--border-width) - var(--space-12)); }
.reg--tr { top: calc(var(--border-width) - var(--space-12)); right: calc(var(--border-width) - var(--space-12)); }
.reg--bl { bottom: calc(var(--border-width) - var(--space-12)); left: calc(var(--border-width) - var(--space-12)); }
.reg--br { bottom: calc(var(--border-width) - var(--space-12)); right: calc(var(--border-width) - var(--space-12)); }

/* --- the footage ----------------------------------------------------- *
   Four field machines on one seamless 24 s loop (sprayer, drone, mower,
   dairy cleaner), Dusk Blue duotone baked in at encode, the same files as
   staging. A hard-edged panel: its left and bottom edges sit on the mesh
   lattice, its top and right bleed off the sheet. The still (the loop's
   first frame) shows until the video plays, so its arrival is a state
   change, not a cut. A flat 60% Onyx layer holds Soft Linen type on it
   at 5.3:1 or better across every frame. No mask, no gradient, no
   filter.                                                             */
.photo {
  position: absolute;
  z-index: 0;
  top: calc(var(--pad-outer) * -1);
  right: calc(max(var(--pad-outer), (100vw - var(--content-width)) / 2) * -1);
  bottom: calc(var(--cell) * 2);
  left: calc(100% - var(--photo-cells) * var(--cell) - var(--border-width));
  overflow: hidden;
  background-color: var(--ur-onyx);
  background-image: url('/assets/media/hero/hero-desktop-v1.jpg');
  background-image: image-set(url('/assets/media/hero/hero-desktop-v1.webp') type('image/webp'),
                              url('/assets/media/hero/hero-desktop-v1.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: 50% 50%;
}
.photo__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--motion-slow) linear;
}
.photo[data-state='playing'] .photo__video { opacity: 1; }
.photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ur-onyx) 60%, transparent);
}
/* Pause control (WCAG 2.2.2): bottom-left of the panel, clear of the
   mesh crosshairs on its bottom edge. */
.photo__toggle {
  position: absolute;
  z-index: 1;
  left: var(--space-16);
  bottom: var(--space-16);
  min-height: var(--space-32);
  padding: 0 var(--space-16);
  border: var(--border-width) solid var(--frame);
  background: var(--ur-onyx);
  font-family: var(--font-mono); font-weight: var(--weight-medium);
  font-size: var(--type-mono-sm);
  letter-spacing: var(--track-mono-sm);
  text-transform: uppercase;
  color: var(--ur-soft-linen);
  cursor: pointer;
  transition: border-color var(--motion-fast) linear;
}
.photo__toggle[hidden] { display: none; }
.photo__toggle:hover { border-color: var(--ur-steel-blue); }
.photo__toggle:focus-visible { outline: var(--space-2) solid var(--ur-steel-blue); outline-offset: var(--space-2); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- the mesh --------------------------------------------------------- *
   One region, anchored to the plate's bottom-right corner: two rows, the
   lower as wide as the footage above it, the upper one cell narrower,
   so the boundary steps. Its outer lines are the frame itself; its rules
   run on past the frame to the viewport edge. Crosshairs 2px at full
   Steel Blue over 1px rules at 18%. One instance per scale; none on
   phones, where the statement takes the whole width.                  */
.mesh {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  display: none;
  overflow: visible;
  fill: none;
  stroke: var(--ur-steel-blue);
  stroke-width: var(--border-width);
  pointer-events: none;
}
@media (min-width: 1360px) and (min-height: 741px) { .mesh--xl { display: block; } }
@media (min-width: 1025px) and (max-width: 1359px) and (min-height: 741px) { .mesh--lg { display: block; } }
@media (min-width: 1360px) and (max-height: 740px) { .mesh--xl-short { display: block; } }
@media (min-width: 801px) and (max-width: 1024px),
       (min-width: 801px) and (max-width: 1359px) and (max-height: 740px) { .mesh--md { display: block; } }

/* --- head ------------------------------------------------------------- */
.head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); }
/* The supplied Soft Linen horizontal lockup, inlined unmodified. Clear
   space: a shield's height either side, half above and below. */
.head__brand { display: block; line-height: 0; border: 0; }
.head__brand svg { display: block; height: var(--space-32); width: auto; }

/* Tertiary action: the label and a 1px underline, nothing else. The
   arrow is Steel Blue and carries no underline; the hit area is 48px. */
.head__link {
  display: inline-flex; align-items: center; gap: var(--space-8);
  min-height: var(--space-48);
  font-family: var(--font-mono); font-weight: var(--weight-medium);
  font-size: var(--type-label-sm);
  letter-spacing: var(--track-mono-sm);
  text-transform: uppercase;
  color: var(--ur-soft-linen);
  text-decoration: none;
  border: 0;
}
.head__label {
  text-decoration: underline;
  text-decoration-thickness: var(--border-width);
  text-decoration-color: var(--ur-steel-blue);
  text-underline-offset: var(--space-6);
  transition: text-decoration-color var(--motion-fast) linear;
}
.head__arrow { color: var(--ur-steel-blue); }
.head__link:hover .head__label { text-decoration-color: var(--ur-soft-linen); }

/* --- the statement ---------------------------------------------------- *
   margin-top:auto is the composition: it pushes the mass to the base and
   leaves the empty ground above it. The column stops a gutter short of
   the footage and the mesh, so neither ever sits behind type.     */
.statement {
  margin-top: auto;
  padding-top: var(--lede-pad);
  max-width: calc(100% + var(--pad-plate) - var(--photo-cells) * var(--cell) - var(--gutter));
}

.eyebrow {
  display: block; margin: 0 0 var(--space-16);
  font-family: var(--font-mono); font-weight: var(--weight-medium);
  font-size: var(--type-mono-sm);
  letter-spacing: var(--track-mono-sm);
  text-transform: uppercase;
  color: var(--ur-steel-blue);
}

.headline {
  margin: 0;
  font-family: var(--font-display); font-weight: var(--weight-black);
  font-size: var(--hero);
  line-height: var(--leading-tight);
  letter-spacing: -.02em;
  color: var(--ur-soft-linen);
  text-wrap: balance;
}

.scope {
  margin: var(--space-24) 0 0;
  font-size: var(--type-body-md);
  line-height: var(--leading-loose);
  color: var(--ur-soft-linen);
  max-width: 62ch;
}

/* --- the action ------------------------------------------------------- *
   The brand's primary button: square, 48px, Dusk Blue with a Soft Linen
   label in 13px Mono Medium. Hover inverts to Steel Blue with an Onyx
   label (6.9:1), a step that reads at a glance; the skill's Dusk Blue
   400 step was too close to the rest state to see.                  */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-8);
  min-height: var(--space-48);
  margin-top: var(--space-32);
  padding: var(--space-8) var(--space-24);
  background: var(--ur-dusk-blue);
  border: 0;
  border-radius: var(--radius-none);
  font-family: var(--font-mono); font-weight: var(--weight-medium);
  font-size: var(--type-label-sm);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-mono-sm);
  text-transform: uppercase;
  color: var(--ur-soft-linen);
  text-decoration: none;
  transition: background-color var(--motion-fast) linear, color var(--motion-fast) linear;
}
.btn:hover { background: var(--ur-steel-blue); color: var(--ur-onyx); }
.btn__label { overflow-wrap: anywhere; }

/* --- colophon --------------------------------------------------------- *
   The anchor label along the bottom edge: 11px Mono, Steel Blue.       */
.foot {
  margin-top: var(--space-48);
  font-family: var(--font-mono); font-weight: var(--weight-medium);
  font-size: var(--type-mono-sm);
  letter-spacing: var(--track-mono-sm);
  text-transform: uppercase;
  color: var(--ur-steel-blue);
}

/* --- focus ------------------------------------------------------------ *
   Obvious with nothing to soften it: a 2px Steel Blue ring.           */
a:focus-visible {
  outline: var(--space-2) solid var(--ur-steel-blue);
  outline-offset: var(--space-2);
}

@media (prefers-reduced-motion: reduce) {
  .btn, .head__label, .photo__video, .photo__toggle { transition: none; }
}

/* =============================================================
   Phones and portrait tablets: the fields stack. The footage
   becomes a band across the top of the sheet, bleeding off the
   top and both sides, with the head on it. It fills whatever
   height the statement leaves free, so it never runs under type:
   tall phones get a deep band, an iPhone SE a strip behind the
   head. The statement takes the full width of the onyx below.
   ============================================================= */
@media (max-width: 800px), (max-aspect-ratio: 4/5) {
  :root { --photo-cells: 0; }
  .plate { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto auto; }
  .head, .statement, .foot { grid-column: 1; }
  .head { grid-row: 1; }
  .statement { grid-row: 3; max-width: none; }
  .foot { grid-row: 4; }
  .photo {
    position: relative;
    grid-row: 1 / 3;
    grid-column: 1;
    inset: auto;
    margin: calc((var(--pad-outer) + var(--pad-plate)) * -1);
    margin-bottom: 0;
    background-position: 50% 50%;
  }
  .photo__toggle { left: calc(var(--pad-outer) + var(--pad-plate)); }
  .mesh { display: none !important; }
}
@media (max-width: 700px) {
  :root { --pad-outer: var(--space-16); --pad-plate: var(--space-24); --lede-pad: var(--space-48); }
  .head__brand svg { height: var(--space-24); }
  .scope { margin-top: var(--space-16); }
  .btn { margin-top: var(--space-24); }
  .foot { margin-top: var(--space-32); }
}
/* Very small phones (iPhone SE 1 and similar, 320x568): tighten the
   vertical ladder one step so the sheet stays a single screen. */
@media (max-width: 700px) and (max-height: 620px) {
  :root { --lede-pad: var(--space-24); --hero: var(--type-subheading); }
  .scope { font-size: var(--type-body-sm); }
  .btn   { margin-top: var(--space-16); }
  .foot  { margin-top: var(--space-24); }
}

/* =============================================================
   Contact form (Reevo), the only way in. Until the form reports
   ready the page keeps the statement and the footage, with a status
   line where the action would sit: loading, or a plain sentence if
   the form could not load. Once ready, the form takes the footage's
   place as a flat panel on columns 7-12 and the sheet grows to fit.
   ============================================================= */
.contact { display: contents; }
.contact__form { display: none; }
.contact__status { margin-top: var(--space-32); }
.contact__status-label {
  display: block; margin-bottom: var(--space-8);
  font-family: var(--font-mono); font-weight: var(--weight-medium);
  font-size: var(--type-mono-sm);
  letter-spacing: var(--track-mono-sm);
  text-transform: uppercase;
  color: var(--ur-steel-blue);
}
.contact__status-text {
  margin: 0;
  font-size: var(--type-body-md);
  line-height: var(--leading-loose);
  color: var(--ur-soft-linen);
}
.has-form .photo, .has-form .mesh, .has-form .contact__status { display: none !important; }
.has-form .plate { display: flex; flex-direction: column; }
.has-form .statement, .has-form .foot { grid-row: auto; }
.has-form .contact {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-48);
  align-items: start;
  margin-top: var(--space-64);
}
.has-form .statement { grid-column: 1 / span 5; margin-top: 0; padding-top: 0; max-width: none; }
.has-form .contact__form { display: block; grid-column: 7 / -1; }
.contact__form iframe { display: block; width: 100%; border: 0; }
/* Reevo pads its card 16px either side and 48px above and below inside
   the frame. Pull the frame out by the same amounts so the card itself
   sits on the column edges and its top lines up with the eyebrow. The
   SDK sets width inline, hence !important. */
.has-form .contact__form iframe {
  width: calc(100% + var(--space-32)) !important;
  margin: calc(var(--space-48) * -1) calc(var(--space-16) * -1);
}
@media (max-width: 1024px) {
  .has-form .contact__form { grid-column: 6 / -1; }
}
@media (max-width: 800px), (max-aspect-ratio: 4/5) {
  .has-form .contact { margin-top: var(--space-48); }
  .has-form .statement, .has-form .contact__form { grid-column: 1 / -1; }
}

/* =============================================================
   Colophon link and the document page (privacy). The document is
   one reading column on columns 1-7 so the mesh, anchored to the
   plate's bottom-right corner, never sits behind it.
   ============================================================= */
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-24); }
.foot__link {
  color: var(--ur-steel-blue);
  text-decoration: underline;
  text-decoration-thickness: var(--border-width);
  text-underline-offset: var(--space-4);
}
.foot__link:hover { color: var(--ur-soft-linen); }

.page--doc .statement { max-width: none; }
.doc {
  margin-top: var(--space-64);
  max-width: calc((100% + var(--gutter)) * 7 / 12 - var(--gutter));
  padding-bottom: calc(var(--cell) * 2);
}
.doc .scope { margin-top: var(--space-24); max-width: 62ch; }
.doc__meta {
  margin: var(--space-24) 0 0;
  font-family: var(--font-mono); font-weight: var(--weight-medium);
  font-size: var(--type-mono-sm);
  letter-spacing: var(--track-mono-sm);
  text-transform: uppercase;
  color: var(--ur-steel-blue);
}
.doc__toc { margin-top: var(--space-48); border-top: var(--border-width) solid var(--frame); padding-top: var(--space-24); }
.doc__toc ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: var(--gutter); }
.doc__toc li { break-inside: avoid; padding: var(--space-4) 0; font-size: var(--type-body-sm); counter-increment: toc; }
.doc__toc li::before {
  content: counter(toc, decimal-leading-zero);
  display: inline-block; width: var(--space-32);
  font-family: var(--font-mono); font-size: var(--type-mono-sm); color: var(--ur-steel-blue);
}
.doc__toc a, .doc__section a {
  color: var(--ur-soft-linen);
  text-decoration: underline;
  text-decoration-thickness: var(--border-width);
  text-decoration-color: var(--ur-steel-blue);
  text-underline-offset: var(--space-4);
}
.doc__toc a:hover, .doc__section a:hover { text-decoration-color: var(--ur-soft-linen); }
.doc__section { margin-top: var(--space-48); scroll-margin-top: var(--space-32); }
.doc__h2 {
  display: flex; align-items: baseline; gap: var(--space-16);
  margin: 0 0 var(--space-16);
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--type-heading);
  line-height: var(--leading-tight);
  color: var(--ur-soft-linen);
}
.doc__n { font-family: var(--font-mono); font-weight: var(--weight-medium); font-size: var(--type-mono-sm); letter-spacing: var(--track-mono-sm); color: var(--ur-steel-blue); }
.doc__section h3 {
  margin: var(--space-24) 0 var(--space-8);
  font-family: var(--font-mono); font-weight: var(--weight-medium);
  font-size: var(--type-mono-sm); letter-spacing: var(--track-mono-sm);
  text-transform: uppercase; color: var(--ur-steel-blue);
}
.doc__section p, .doc__section li {
  font-size: var(--type-body-md);
  line-height: var(--leading-loose);
  color: var(--ur-soft-linen);
  max-width: 68ch;
}
.doc__section p { margin: 0 0 var(--space-16); }
.doc__section ul { margin: 0 0 var(--space-16); padding-left: var(--space-24); }
.doc__section li { margin-bottom: var(--space-8); }
.doc__section li::marker { color: var(--ur-steel-blue); }
.doc__section strong { font-weight: var(--weight-semibold); }
.doc__table { overflow-x: auto; margin: var(--space-16) 0 var(--space-24); }
.doc__table table { width: 100%; border-collapse: collapse; font-size: var(--type-body-sm); }
.doc__table th {
  text-align: left; padding: var(--space-8) var(--space-16) var(--space-8) 0;
  font-family: var(--font-mono); font-weight: var(--weight-medium);
  font-size: var(--type-mono-sm); letter-spacing: var(--track-mono-sm);
  text-transform: uppercase; color: var(--ur-steel-blue);
  border-bottom: var(--border-width) solid var(--frame);
}
.doc__table td { padding: var(--space-8) var(--space-16) var(--space-8) 0; color: var(--ur-soft-linen); border-bottom: var(--border-width) solid var(--frame); vertical-align: top; }
.doc__table code { font-family: var(--font-mono); font-size: var(--type-mono); }
.doc__table:focus-visible { outline: var(--space-2) solid var(--ur-steel-blue); outline-offset: var(--space-2); }
@media (max-width: 800px), (max-aspect-ratio: 4/5) {
  .page--doc .plate { display: flex; flex-direction: column; }
  .page--doc .foot { grid-row: auto; }
  .doc { max-width: none; margin-top: var(--space-48); padding-bottom: 0; }
  .doc__toc ol { columns: 1; }
}
.doc__address { font-style: normal; font-size: var(--type-body-md); line-height: var(--leading-loose); color: var(--ur-soft-linen); }
.doc__address a { color: var(--ur-soft-linen); text-decoration: underline; text-decoration-thickness: var(--border-width); text-decoration-color: var(--ur-steel-blue); text-underline-offset: var(--space-4); }