/* ===========================================================================
   HYPER PROPERTY SERVICES
   Design tokens adapted from spyglass.so, extracted from live computed styles.
   See PLAN/02-LANDING-PAGE-SPEC.md section 1.

   Rule: components never hardcode a colour, radius or shadow. Tokens only.
   =========================================================================== */

:root{
  /* Neutral ramp.
     Biased a few degrees warm rather than a true grey. Against the amber
     accent a pure #f5f5f5 reads as unfinished, the way a cool grey mount
     reads wrong around a warm print. The shift is small enough that nothing
     looks tinted and large enough that the page looks chosen. */
  --background:#ffffff;
  --foreground:#0a0a0a;
  --card:#ffffff;
  --primary:#171717;
  --primary-foreground:#fafafa;
  --secondary:#f6f4f1;
  --muted:#f6f4f1;
  --muted-foreground:#6f6a64;
  --border:#e9e5df;
  --border-strong:#dcd6cc;
  --ring:#a1a1a1;

  /* The signature dark slab */
  --panel:#0a0a0a;
  --panel-fg:#ffffff;
  --panel-fg-dim:rgba(255,255,255,.70);
  --panel-fg-faint:rgba(255,255,255,.40);
  --panel-hairline:rgba(255,255,255,.08);
  --panel-chip:rgba(255,255,255,.035);
  --panel-chip-border:rgba(255,255,255,.06);

  /* Body copy on white is not pure black. This detail carries the whole look. */
  --body-on-white:rgba(10,10,10,.70);

  /* Accent: high vis amber, the trade's own colour language.
     One element per section, never a wash. */
  --accent:#ff7a00;
  --accent-ink:#7a3800;
  --accent-soft:#fff3e6;
  --accent-deep:#e04e00;
  /* The lightest amber that still clears 3:1 against white, which is the WCAG
     threshold for large text. Full --accent sits at 2.6:1 and fails, so it is
     used for fills, borders and glows but never for words on white. */
  --accent-on-white:#ee6a00;
  --accent-line:rgba(255,122,0,.28);
  --accent-glow:rgba(255,122,0,.20);
  --accent-bloom:rgba(255,122,0,.32);

  /* The cool counterweight in the hero mesh. Derived from --info, heavily
     diluted. Amber on its own reads as a single wash across a whole ground;
     one cool stop opposite it gives the light somewhere to travel. */
  --mesh-cool:rgba(16,78,100,.10);

  /* Semantic */
  --ok:#00786d;
  --warn:#fcbb00;
  --danger:#e40014;
  --info:#104e64;

  /* Radii */
  --r-base:.625rem;
  --r-card:1rem;
  --r-chip:.875rem;
  --r-slab:2rem;
  --r-full:9999px;

  /* Elevation.
     Layered rather than single. A real shadow is a tight contact edge plus a
     wide ambient fall, and one blurred box never reads as either. Each level
     stacks a hairline, a close shadow and a diffuse one. */
  --shadow-card:inset 0 1px 0 rgba(255,255,255,.07), 0 18px 40px rgba(0,0,0,.08);
  --shadow-sm:
    0 1px 2px rgba(16,12,8,.05),
    0 4px 10px -2px rgba(16,12,8,.05);
  --shadow-md:
    0 1px 2px rgba(16,12,8,.05),
    0 8px 20px -6px rgba(16,12,8,.09),
    0 20px 44px -16px rgba(16,12,8,.10);
  --shadow-lg:
    0 1px 3px rgba(16,12,8,.05),
    0 14px 32px -10px rgba(16,12,8,.11),
    0 40px 80px -28px rgba(16,12,8,.16);
  --shadow-float:0 24px 60px rgba(0,0,0,.12);
  --shadow-lift:
    0 2px 4px rgba(16,12,8,.06),
    0 12px 28px -8px rgba(16,12,8,.14),
    0 32px 64px -24px rgba(16,12,8,.18);

  /* Glass. One blur value everywhere, so no two frosted surfaces disagree. */
  --glass:rgba(255,255,255,.72);
  --glass-strong:rgba(255,255,255,.86);
  --glass-border:rgba(255,255,255,.60);
  --glass-blur:blur(16px) saturate(1.4);

  /* Motion. Named so a component asks for an intent, not a curve. */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:.14s;
  --dur:.24s;
  --dur-slow:.5s;

  /* Layout */
  --container:1120px;
  --container-wide:1280px;

  /* Type */
  --font-display:"Familjen Grotesk","Segoe UI",system-ui,sans-serif;
  --font-body:Geist,"Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
}

/* --- reset ---------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.5;
  color:var(--foreground);
  background:var(--background);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;                 /* the body never scrolls sideways */
}
img,picture,svg{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}

/* --- type ----------------------------------------------------------------- */

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;line-height:1.05}

.display{
  font-size:clamp(2.125rem,6.5vw,3.5rem);
  line-height:1;
  transform:translateY(-.02em);     /* optical nudge, h1 only */
}
.h2{font-size:clamp(1.75rem,5vw,2.5rem);line-height:1.02}
.h3{font-size:1.25rem;line-height:1.15;letter-spacing:-.02em}

.lead{font-size:1.0625rem;line-height:1.5;color:var(--body-on-white)}
.small{font-size:.8125rem;line-height:1.4}
.eyebrow{
  font-family:var(--font-mono);font-size:.6875rem;font-weight:500;
  line-height:1;letter-spacing:.08em;text-transform:uppercase;
}
.dim{color:var(--panel-fg-dim)}
.faint{color:var(--panel-fg-faint)}
.mute{color:var(--muted-foreground)}
.center{text-align:center}
.measure{max-width:39rem;margin-inline:auto}

/* --- layout --------------------------------------------------------------- */

.container{max-width:var(--container);margin-inline:auto;padding-inline:1rem}
.container--wide{max-width:var(--container-wide)}
@media(min-width:640px){.container{padding-inline:1.5rem}}

.section{padding-block:3rem}
@media(min-width:768px){.section{padding-block:5rem}}
.section--tight{padding-block:2.5rem}
.section--grey{background:var(--secondary)}

.stack>*+*{margin-top:var(--stack,1rem)}
.grid{display:grid;gap:1rem}
.row{display:flex;flex-wrap:wrap;gap:.75rem}
.row--center{justify-content:center;align-items:center}

/* --- the signature slab --------------------------------------------------- */

.slab{
  background:var(--panel);
  color:var(--panel-fg);
  border-radius:var(--r-slab);
  overflow:hidden;
  position:relative;
}
@media(max-width:640px){.slab{border-radius:1.25rem}}
.slab__inner{padding:3rem 1.5rem}
@media(min-width:768px){.slab__inner{padding:4rem 2.5rem}}
.slab__inner--tall{padding:4rem 1.5rem}
@media(min-width:768px){.slab__inner--tall{padding:6rem 2.5rem}}

/* --- surfaces ------------------------------------------------------------- */

.card{
  border-radius:var(--r-card);
  border:1px solid var(--panel-hairline);
  padding:1.5rem;
  box-shadow:var(--shadow-card);
}
.card--light{
  border-color:var(--border);background:var(--card);
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),border-color var(--dur) ease;
}
.card--interactive:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:var(--accent-line);
}

.chip{
  border-radius:var(--r-chip);
  background:var(--panel-chip);
  border:1px solid var(--panel-chip-border);
  padding:.75rem;
}
.chip--light{background:var(--secondary);border-color:var(--border)}

/* --- buttons -------------------------------------------------------------- */

.btn{
  position:relative;
  border-radius:var(--r-full);
  font-family:var(--font-body);font-size:.9375rem;font-weight:500;line-height:1;
  padding:.875rem 1.5rem;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:44px;                   /* tap target floor */
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    background var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    color var(--dur-fast) ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0);transition-duration:var(--dur-fast)}

.btn--primary{
  background:var(--foreground);color:#fff;
  box-shadow:var(--shadow-sm);
}
/* The lift carries a warm bloom rather than a bigger grey shadow. On a near
   black button a grey shadow just makes it look smudged. */
.btn--primary:hover{
  background:#1c1917;
  box-shadow:var(--shadow-lift),0 10px 30px -12px var(--accent-bloom);
}
.btn--secondary{
  background:var(--card);
  color:var(--foreground);border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.btn--secondary:hover{background:#fff;border-color:var(--accent-line);box-shadow:var(--shadow-md)}
.btn--onslab{background:#fff;color:var(--foreground)}
.btn--ghost{background:transparent;color:var(--panel-fg);border:1px solid var(--panel-hairline)}
.btn--ghost:hover{background:var(--panel-chip)}
.btn--lg{padding:1.0625rem 2rem;font-size:1rem}
.btn--block{width:100%}

.pill{
  display:inline-flex;align-items:center;gap:.4rem;
  border-radius:var(--r-full);
  font-size:.75rem;font-weight:500;line-height:1;
  padding:.5rem .75rem;
}
.pill--accent{background:var(--accent-soft);color:var(--accent-ink)}
.pill--onslab{background:var(--panel-chip);border:1px solid var(--panel-chip-border);color:var(--panel-fg-dim)}
.pill--live{background:rgba(0,120,109,.14);color:#8ff0e4}

/* --- icons ---------------------------------------------------------------- */

.ico{flex:none;vertical-align:middle}
.ico-tile{
  width:2.5rem;height:2.5rem;flex:none;
  display:grid;place-items:center;
  border-radius:var(--r-chip);
  background:var(--panel-chip);
  border:1px solid var(--panel-chip-border);
}
.ico-tile--light{background:var(--secondary);border-color:var(--border)}

/* --- inputs --------------------------------------------------------------- */

.field{
  width:100%;
  border-radius:var(--r-base);
  border:1px solid var(--border);
  background:#fff;
  padding:.875rem 1rem;
  min-height:48px;
  font-size:1rem;
  box-shadow:inset 0 1px 2px rgba(16,12,8,.04);
  transition:border-color var(--dur-fast) ease,box-shadow var(--dur) var(--ease-out);
}
.field:hover{border-color:var(--border-strong)}
.field:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:transparent}
.field::placeholder{color:var(--muted-foreground)}

/* --- accessibility -------------------------------------------------------- */

.skip{
  position:absolute;left:.5rem;top:.5rem;z-index:200;
  transform:translateY(-200%);
  background:var(--foreground);color:#fff;
  padding:.75rem 1.25rem;border-radius:var(--r-base);
  transition:transform .15s ease;
}
.skip:focus{transform:translateY(0)}

:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-base);
}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --- motion --------------------------------------------------------------- */

/* Entrance. One shared keyframe, staggered by a custom property on the element,
   so a sequence is declared in the markup instead of in a chain of nth-child
   rules that break the moment somebody inserts a line.

   Two deliberate limits:

   The headline never gets this. It is the largest paint on the page and the
   thing the visitor came to read, so animating it means the hero is measurably
   empty for as long as the animation runs. The supporting cast arrives around
   a headline that is already there.

   Total settle is kept under half a second. A stagger long enough to admire is
   a stagger the second visitor resents.

   `forwards` matters: under reduced motion the global rule below collapses the
   duration to nothing, and the fill is what leaves the element at its finished
   state rather than invisible. */
.reveal{
  opacity:0;
  animation:reveal-up .42s var(--ease-out) forwards;
  animation-delay:var(--reveal-delay,0s);
}
@keyframes reveal-up{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}