/* ==========================================================================
   TMA Oradea — showcase
   Every colour below was measured out of the campaign photography, not picked.
   #f0f0dc was 22% of all pixels across the set; #00a86c is the saturated
   accent that actually appears; #143c3c is the true shadow value; #9090c0 is
   the bloc-amurg dusk sky; #d8a860 the Oradea golden hour.
   ========================================================================== */

:root {
  --paper:      #f0f0dc;
  --paper-pure: #faf9f2;
  --green:      #00a86c;
  --green-deep: #008c5a;
  --teal:       #143c3c;
  --teal-deep:  #0d2826;
  --dusk:       #9090c0;
  --amber:      #d8a860;
  --oak:        #b4a08c;

  --ink:   #14201e;
  --body:  #5b6360;
  --line:  rgba(20, 60, 60, .13);

  --display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --text:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --wrap: 1200px;
  --gut: clamp(1.25rem, 5vw, 5rem);

  /* Teal-tinted elevation — a neutral grey shadow reads dirty on cream. */
  --e1: 0 2px 8px -2px rgba(20,60,60,.10);
  --e2: 0 14px 34px -14px rgba(20,60,60,.22);
  --e3: 0 40px 80px -32px rgba(20,60,60,.34);

  --ease: cubic-bezier(.22,.7,.28,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-weight: 300;
  font-size: clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

/* ---------------------------------------------------------------- type ---- */
h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.028em;
  color: var(--teal);
}
h1 { font-size: clamp(2.4rem, 1.2rem + 5vw, 5.1rem); }
h2 { font-size: clamp(1.9rem, 1.1rem + 3vw, 3.4rem); }
h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); letter-spacing: -.018em; }

.eyebrow {
  font-family: var(--text);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--green);
  display: flex; align-items: center; gap: .8rem;
}
.eyebrow::before {
  content: ""; width: 34px; height: 1px; background: var(--green); flex: none;
}
.lede { font-size: clamp(1.05rem, 1rem + .45vw, 1.3rem); color: var(--body); max-width: 56ch; }

/* Romanian hyphenated compounds ("dintr-o", "să-ți") must never break at the
   hyphen — it reads as a typo at display size. */
.nb { white-space: nowrap; }

/* -------------------------------------------------------------- wordmark --- */
/* Live HTML, never baked into a generated image — stays sharp at any size. */
.mark { display: inline-flex; align-items: baseline; gap: .62rem; text-decoration: none; }
.mark b {
  font-family: var(--display); font-weight: 800; font-size: 1.44rem;
  letter-spacing: .012em; color: var(--teal); line-height: 1;
}
.mark i {
  width: 1px; height: 19px; background: var(--green); align-self: center;
  display: block; flex: none; opacity: .9;
}
.mark span {
  font-size: .58rem; font-weight: 500; letter-spacing: .34em;
  text-transform: uppercase; color: var(--body);
}
.mark--light b { color: var(--paper-pure); }
.mark--light span { color: rgba(250,249,242,.72); }
.mark--light i { background: var(--green); }

/* ---------------------------------------------------------------- nav ----- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; padding: 1.15rem var(--gut);
  transition: background .45s var(--ease), box-shadow .45s var(--ease),
              padding .45s var(--ease), backdrop-filter .45s var(--ease);
}
.nav.solid {
  background: rgba(240,240,220,.86);
  backdrop-filter: saturate(1.5) blur(14px);
  box-shadow: 0 1px 0 var(--line);
  padding-top: .8rem; padding-bottom: .8rem;
}
.nav-links { display: flex; gap: 2rem; align-items: center; }
.nav-links a {
  font-size: .74rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(250,249,242,.82); text-decoration: none; position: relative;
  transition: color .3s var(--ease);
}
.nav.solid .nav-links a { color: var(--body); }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0;
  background: var(--green); transition: width .38s var(--ease);
}
.nav-links a:hover { color: var(--green); }
.nav-links a:hover::after { width: 100%; }
/* Six links + a five-language switcher + the CTA stop fitting well before the
   old 940px breakpoint — the bar was wrapping to two rows at 1000px. */
@media (max-width: 1150px) { .nav-links { display: none; } }

/* At 375px the bar carries wordmark + language select + CTA. The CTA label is
   the widest element and its length varies by language ("Valutazione
   gratuita" is ~20% longer than the Romanian), so everything is trimmed and
   the 2rem gap — the biggest single waste — comes right down. */
@media (max-width: 620px) {
  .nav { gap: .55rem; }
  .nav .btn { padding: .66rem .85rem; font-size: .72rem; }
  .nav .btn svg { display: none; }
  .mark b { font-size: 1.22rem; }
  .mark { gap: .45rem; }
  .mark span { letter-spacing: .2em; font-size: .5rem; }
  .langs select { padding: .38rem 1.2rem .38rem .5rem; font-size: .68rem; }
}
/* Below ~400px even that is not enough for the longer languages, so the CTA
   label gives way — the hero's own primary CTA is one scroll away. */
@media (max-width: 400px) {
  .nav .btn { display: none; }
  .nav { gap: 1rem; }
}

/* ------------------------------------------------------ language switcher -- */
.langs { display: flex; align-items: center; gap: .1rem; }
.langs select { display: none; }

.langs button {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--text); font-size: .7rem; font-weight: 600;
  letter-spacing: .1em; padding: .34rem .42rem; border-radius: 6px;
  color: rgba(250,249,242,.62);
  transition: color .28s var(--ease), background .28s var(--ease);
}
.nav.solid .langs button { color: var(--body); }
.langs button:hover { color: var(--green); }
.langs button[aria-current="true"] { color: var(--green); }
.nav.solid .langs button[aria-current="true"] { color: var(--green); }
.langs button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.langs i {
  width: 1px; height: 10px; background: currentColor; opacity: .22;
  display: block; flex: none;
}

/* Below this the five pills, the wordmark and the CTA cannot share one row,
   so swap to a native select — compact, and accessible for free. */
@media (max-width: 1150px) {
  .langs button, .langs i { display: none; }
  .langs select {
    display: block; appearance: none; cursor: pointer;
    font-family: var(--text); font-size: .72rem; font-weight: 600;
    letter-spacing: .08em; padding: .42rem 1.35rem .42rem .6rem;
    border-radius: 999px; border: 1px solid rgba(250,249,242,.28);
    background: transparent; color: var(--paper-pure);
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 13px) 52%, calc(100% - 9px) 52%;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
  }
  .nav.solid .langs select { border-color: var(--line); color: var(--teal); }
  .langs select option { color: #16151a; background: #fff; }
}

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.7rem; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--text); font-size: .88rem; font-weight: 600; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .32s var(--ease), background .32s var(--ease),
              box-shadow .32s var(--ease), color .32s var(--ease);
}
.btn svg { width: 15px; height: 15px; transition: transform .32s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(3px); }
.btn--primary { background: var(--green); color: #fff; box-shadow: var(--e2); }
.btn--primary:hover { background: var(--green-deep); }
.btn--ghost { border-color: rgba(250,249,242,.38); color: var(--paper-pure); }
.btn--ghost:hover { border-color: var(--paper-pure); background: rgba(250,249,242,.1); }
.btn--dark { border-color: var(--line); color: var(--teal); background: var(--paper-pure); }
.btn--dark:hover { border-color: var(--green); color: var(--green); }

/* ---------------------------------------------------------------- hero ---- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end;
        overflow: hidden; background: var(--teal-deep); }
.hero-media { position: absolute; inset: 0; }
.hero-media video, .hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  /* Parallax drift is applied to this element only, never to the text. */
  will-change: transform;
}
/* Two scrims: a vertical one for text contrast, a teal wash to pull the
   footage into brand instead of leaving it neutral blue. */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    /* Left-weighted: the copy column stays legible while the right side of
       the frame keeps its highlights. Cheaper than dimming the whole plate. */
    linear-gradient(to right, rgba(13,40,38,.80) 0%, rgba(13,40,38,.52) 38%,
                    rgba(13,40,38,.10) 72%, rgba(13,40,38,0) 100%),
    linear-gradient(to top, rgba(13,40,38,.92) 0%, rgba(13,40,38,.55) 36%,
                    rgba(13,40,38,.16) 66%, rgba(13,40,38,.40) 100%),
    linear-gradient(120deg, rgba(20,60,60,.34), rgba(144,144,192,.12));
}
@media (max-width: 780px) {
  /* No room for a copy column on phones — go back to an even wash. */
  .hero-media::after {
    background:
      linear-gradient(to top, rgba(13,40,38,.94) 0%, rgba(13,40,38,.72) 40%,
                      rgba(13,40,38,.44) 100%),
      linear-gradient(120deg, rgba(20,60,60,.34), rgba(144,144,192,.12));
  }
}
.hero-inner { position: relative; z-index: 2; width: 100%;
              padding-bottom: clamp(3.5rem, 7vh, 7rem); padding-top: 8rem; }
.hero h1 { color: var(--paper-pure); max-width: 17ch; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--green); }
.hero .lede { color: rgba(250,249,242,.84); margin-top: 1.6rem; max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.4rem; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.8rem;
  padding: .42rem .95rem .42rem .6rem; border-radius: 999px;
  background: rgba(250,249,242,.1); border: 1px solid rgba(250,249,242,.2);
  backdrop-filter: blur(8px);
  font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--paper-pure);
}
.hero-badge s { width: 6px; height: 6px; border-radius: 50%; background: var(--green);
                display: block; text-decoration: none; }

.hero-foot {
  position: relative; z-index: 2; display: flex; gap: 2.5rem; flex-wrap: wrap;
  margin-top: 3.2rem; padding-top: 1.7rem; border-top: 1px solid rgba(250,249,242,.16);
}
.hero-foot div { color: rgba(250,249,242,.8); font-size: .82rem; }
.hero-foot b { display: block; font-family: var(--display); font-weight: 700;
               font-size: 1.5rem; color: var(--paper-pure); letter-spacing: -.02em; }

/* ------------------------------------------------------------- sections --- */
section { position: relative; }
.pad { padding: clamp(5rem, 11vh, 9.5rem) 0; }
.pad-sm { padding: clamp(3.5rem, 7vh, 6rem) 0; }
.cream { background: var(--paper); }
.pure { background: var(--paper-pure); }
.dark { background: var(--teal-deep); color: rgba(250,249,242,.8); }
.dark h2, .dark h3 { color: var(--paper-pure); }
.dark .lede { color: rgba(250,249,242,.72); }

.head { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vh, 4rem); }
.head h2 { margin: 1.1rem 0 1.2rem; text-wrap: balance; }

/* ---------------------------------------------------------------- trust --- */
.trust { border-block: 1px solid var(--line); }
.trust-line {
  font-size: .68rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--body); text-align: center; opacity: .78;
}
.trust-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  margin-top: 2.4rem; background: var(--line);
}
.trust-grid > div { background: var(--paper); padding: 1.9rem 1.4rem; text-align: center; }
.trust-grid b { display: block; font-family: var(--display); font-weight: 700;
                font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); color: var(--teal);
                letter-spacing: -.03em; }
.trust-grid span { font-size: .8rem; color: var(--body); }
@media (max-width: 720px) { .trust-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- steps --- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: 2.2rem; border-top: 1px solid var(--line); }
.step .n {
  font-family: var(--display); font-weight: 800; font-size: .78rem; letter-spacing: .14em;
  color: var(--green); display: block; margin-bottom: .9rem;
}
.step p { color: var(--body); margin-top: .7rem; font-size: .96rem; }

/* -------------------------------------------------------------- editorial - */
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
}
.split.flip > .split-media { order: 2; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split.flip > .split-media { order: 0; }
}
.split-media { position: relative; }
.frame {
  position: relative; overflow: hidden; border-radius: 20px; box-shadow: var(--e3);
  background: var(--teal-deep);
}
.frame img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3;
             transition: transform 1.1s var(--ease); }
.frame:hover img { transform: scale(1.035); }
.frame--tall img { aspect-ratio: 4/5; }
.frame--wide img { aspect-ratio: 16/9; }

/* A small floating stat card over the photo — the site's own type, so it
   stays crisp where a baked-in caption would not. */
.float {
  position: absolute; z-index: 3; background: var(--paper-pure);
  border-radius: 15px; padding: 1.05rem 1.3rem; box-shadow: var(--e3);
  display: flex; align-items: center; gap: .9rem; max-width: 15rem;
}
.float .chip {
  width: 38px; height: 38px; border-radius: 50%; background: var(--green);
  display: grid; place-items: center; flex: none;
}
.float .chip svg { width: 17px; height: 17px; stroke: #fff; }
.float b { display: block; font-family: var(--display); font-weight: 700;
           font-size: .92rem; color: var(--teal); line-height: 1.25; }
.float span { font-size: .74rem; color: var(--body); line-height: 1.35; }
.float--br { right: -14px; bottom: -20px; }
/* Sits inside the media column. A negative left here spilled the card into the
   text column's gutter, which read as a collision rather than a layered look. */
.float--tl { left: 16px; top: -22px; }
@media (max-width: 560px) { .float { position: static; margin-top: 1rem; max-width: none; } }

.h2-tight { margin: 1.1rem 0 1.2rem; }
.mt-lg { margin-top: clamp(2.5rem, 5vh, 4rem); }

/* A full-width band that resets the eye between the step grid and the section
   below. 16:9 matches the plate — a 21:9 letterbox cropped 23% off a
   two-person composition, which is exactly where the subjects live. */
.frame--pano { margin: 0; }
.frame--pano img { aspect-ratio: 16/9; }

/* One office frame under the portrait, at the plate's own ratio. */
.team-pair { margin-top: 1.1rem; }

/* The banks graphic carries its own headline, so it gets no heading above it.
   Width is capped deliberately: the plate's micro-labels are the weakest type
   in the set, and at full bleed they invite reading. */
.banci {
  margin: 0 auto; max-width: 980px; border-radius: 20px; overflow: hidden;
  background: var(--paper-pure); box-shadow: var(--e2);
}
.banci video { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.banci-note {
  margin: 1.6rem auto 0; max-width: 44ch; text-align: center;
  font-size: .95rem; color: var(--body);
}

/* A square still-life beside the disclaimer — gives the calculator column a
   visual anchor without competing with the numbers. */
.calc-photo { margin: 2rem 0 1.4rem; max-width: 260px; }
.calc-photo img { aspect-ratio: 1; }
@media (max-width: 900px) { .calc-photo { display: none; } }

/* ---------------------------------------------------------------- mosaic -- */
/* Three plates in a row, the middle one taller — stops the page reading as a
   stack of identical rectangles. */
/* Column widths and ratios follow each plate's native shape. Forcing a common
   ratio here cropped the office interior by more than half. The portrait tile
   sits second so the row has a tall anchor rather than reading as a strip. */
.mosaic { display: grid; grid-template-columns: 1.05fr .8fr 1.2fr .8fr; gap: 1rem;
          align-items: center; }
.mosaic figure { margin: 0; }
.mosaic .frame:nth-child(1) img { aspect-ratio: 4/3; }   /* chei-macro */
.mosaic .frame:nth-child(2) img { aspect-ratio: 4/5; }   /* receptie   */
.mosaic .frame:nth-child(3) img { aspect-ratio: 16/9; }  /* birou      */
.mosaic .frame:nth-child(4) img { aspect-ratio: 1; }     /* detaliu    */
@media (max-width: 1040px) {
  .mosaic { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .mosaic { grid-template-columns: 1fr 1fr; gap: .7rem; }
}

/* An overlapping second photo — depth without another full-width band. */
.inset-photo {
  position: absolute; right: -11%; bottom: -9%; width: 56%; margin: 0;
  border: 8px solid var(--paper); border-radius: 20px; box-shadow: var(--e3);
  z-index: 3;
}
/* 16:9 — matches the plate, and stays clearly subordinate to the 4:5 main
   image rather than ending up taller than it. */
.inset-photo img { aspect-ratio: 16/9; }
@media (max-width: 900px) { .inset-photo { right: -4%; width: 52%; } }

/* Smaller variant for panels where the main image is itself 16:9 — keeps the
   inset clearly secondary instead of competing. */
.inset-photo--sm { width: 44%; right: -8%; bottom: -14%; }
.inset-photo--sm img { aspect-ratio: 4/3; }
.inset-photo--left { width: 42%; right: auto; left: -9%; bottom: -13%; }
.inset-photo--left img { aspect-ratio: 16/9; }
@media (max-width: 900px) {
  .inset-photo--sm { width: 42%; right: -3%; }
  .inset-photo--left { width: 40%; left: -3%; }
}
@media (max-width: 560px) {
  .inset-photo--sm, .inset-photo--left { position: static; width: 100%; margin-top: 1rem; }
}

/* The address card must clear the left-hand inset on the Oradea panel. */
.split-media:has(.inset-photo--left) .float--br { bottom: -20px; right: -14px; }
@media (max-width: 560px) {
  .inset-photo { position: static; width: 100%; margin-top: 1rem; border-width: 0; }
}

/* The office door sits under the portrait as a second, smaller frame. */
.team-door { margin: 1.1rem 0 0; border-radius: 16px; overflow: hidden;
             box-shadow: var(--e2); }
/* 4:3 matches the plate exactly — a wider box crops inward and would clip the
   etched wordmark, which is the one thing in this photo that must stay whole. */
.team-door img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* ------------------------------------------------------------ full bleed -- */
.bleed { position: relative; min-height: 78svh; display: grid; place-items: center;
         overflow: hidden; background: var(--teal-deep); }
.bleed img, .bleed video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; will-change: transform;
}
/* The poster sits under the video so there is never a dark gap while the
   first frames decode, and it is what remains if autoplay is refused. */
.bleed video { z-index: 1; }
.bleed::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(13,40,38,.9), rgba(13,40,38,.5) 55%,
                              rgba(144,144,192,.2));
}
.bleed .wrap { position: relative; z-index: 2; text-align: center; }
.bleed h2 { color: var(--paper-pure); max-width: 20ch; margin: 1.2rem auto;
            text-wrap: balance; }
.bleed .lede { color: rgba(250,249,242,.82); margin: 0 auto; }
.bleed .eyebrow { justify-content: center; color: var(--green); }

/* ------------------------------------------------------------- services --- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 960px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } }
.card {
  background: var(--paper-pure); border: 1px solid var(--line); border-radius: 18px;
  padding: 1.9rem 1.7rem 1.7rem; position: relative; overflow: hidden;
  transition: transform .42s var(--ease), box-shadow .42s var(--ease),
              border-color .42s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--e2); border-color: transparent; }
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--green); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.card:hover::before { transform: scaleX(1); }
.card .chip {
  width: 42px; height: 42px; border-radius: 12px; background: rgba(0,168,108,.11);
  display: grid; place-items: center; margin-bottom: 1.2rem;
}
.card .chip svg { width: 19px; height: 19px; stroke: var(--green); }
.card p { color: var(--body); font-size: .93rem; margin-top: .55rem; }
.card--feature { grid-column: span 1; background: var(--teal-deep); border-color: transparent; }
.card--feature h3, .card--feature b { color: var(--paper-pure); }
.card--feature p { color: rgba(250,249,242,.74); }
.card--feature .chip { background: rgba(0,168,108,.22); }

/* ----------------------------------------------------------- calculator --- */
.calc {
  background: var(--paper-pure); border: 1px solid var(--line); border-radius: 22px;
  padding: clamp(1.6rem, 3vw, 2.6rem); box-shadow: var(--e2);
}
/* Currency toggle — a segmented control, not a dropdown: two options that the
   user should be able to compare at a glance. */
.cur {
  display: inline-flex; padding: 3px; margin-bottom: 1.8rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
}
.cur button {
  appearance: none; border: 0; background: none; cursor: pointer;
  font-family: var(--text); font-size: .78rem; font-weight: 600;
  padding: .42rem 1.05rem; border-radius: 999px; color: var(--body);
  transition: color .26s var(--ease), background .26s var(--ease),
              box-shadow .26s var(--ease);
}
.cur button:hover { color: var(--teal); }
.cur button[aria-current="true"] {
  background: var(--green); color: #fff; box-shadow: var(--e1);
}
.cur button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.directions { margin-top: 1.8rem; }
.directions svg { width: 15px; height: 15px; }

.calc-row { margin-bottom: 1.7rem; }
.calc-row label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .8rem; color: var(--body); margin-bottom: .75rem; font-weight: 500;
}
.calc-row output {
  font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: var(--teal);
}
input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 3px;
  border-radius: 3px; background: var(--line); outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 21px; height: 21px; border-radius: 50%;
  background: var(--green); cursor: grab; border: 3px solid var(--paper-pure);
  box-shadow: var(--e1); transition: transform .2s var(--ease);
}
input[type=range]::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; }
input[type=range]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%; background: var(--green);
  cursor: grab; border: 3px solid var(--paper-pure);
}
.calc-out {
  margin-top: 2rem; padding-top: 1.7rem; border-top: 1px solid var(--line);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
}
.calc-out .big {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.2rem, 1.5rem + 3vw, 3.6rem); color: var(--green);
  letter-spacing: -.035em; line-height: 1;
}
.calc-out small { display: block; font-size: .76rem; color: var(--body); margin-top: .4rem; }
.disclaimer {
  margin-top: 1.4rem; font-size: .72rem; line-height: 1.6; color: var(--body);
  opacity: .85; border-left: 2px solid var(--line); padding-left: .9rem;
}

/* ----------------------------------------------------------------- team --- */
.team { display: grid; grid-template-columns: 380px 1fr; gap: clamp(2rem, 5vw, 4.5rem);
        align-items: center; }
@media (max-width: 860px) { .team { grid-template-columns: 1fr; } }
.team-photo { position: relative; }
.team-photo > img {
  width: 100%; border-radius: 20px; box-shadow: var(--e3);
  /* The source portrait is square. Forcing 4:5 here cropped the subject's
     face, so the frame follows the photograph rather than the other way up. */
  aspect-ratio: 1; object-fit: cover; object-position: 50% 30%;
}
.team dl { margin-top: 1.8rem; display: grid; gap: .55rem; }
.team dl div { display: flex; gap: .8rem; align-items: center; font-size: .93rem; }
.team dl svg { width: 16px; height: 16px; stroke: var(--green); flex: none; }
.team dl a { color: var(--teal); text-decoration: none; border-bottom: 1px solid var(--line); }
.team dl a:hover { color: var(--green); border-color: var(--green); }

/* --------------------------------------------------------------- footer --- */
.foot { background: var(--teal-deep); color: rgba(250,249,242,.62); }
.foot-top { display: flex; justify-content: space-between; gap: 2.5rem; flex-wrap: wrap;
            padding-bottom: 2.5rem; border-bottom: 1px solid rgba(250,249,242,.12); }
.foot-nav { display: flex; gap: 2rem; flex-wrap: wrap; }
.foot a { color: rgba(250,249,242,.7); text-decoration: none; font-size: .86rem; }
.foot a:hover { color: var(--green); }
.foot-bottom { padding-top: 1.8rem; display: flex; justify-content: space-between;
               gap: 1.5rem; flex-wrap: wrap; font-size: .76rem; }
.foot-legal { max-width: 62ch; line-height: 1.7; opacity: .8; }

/* ------------------------------------------------------------- reveals ---- */
/* Opt-in only after JS confirms support, so content is never trapped hidden. */
.js .reveal { opacity: 0; transform: translateY(26px); }
.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .95s var(--ease), transform .95s var(--ease);
}
.js .reveal.d1.in { transition-delay: .09s; }
.js .reveal.d2.in { transition-delay: .18s; }
.js .reveal.d3.in { transition-delay: .27s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .frame img, .bleed img, .hero-media video { transition: none !important; transform: none !important; }
  .btn:hover, .card:hover { transform: none; }
}

/* Touch targets: phone, e-mail and footer links were 24–27px tall, under the
   44px guideline. Padding buys the height without moving anything visually. */
@media (pointer: coarse), (max-width: 760px) {
  .foot-nav { gap: .4rem 1.6rem; }
  .foot-nav a, .team dl a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .team dl div { min-height: 44px; }
  .foot-top .mark { min-height: 44px; }
}

/* Scroll cue */
.cue { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
       z-index: 3; display: grid; place-items: center; gap: .5rem;
       color: rgba(250,249,242,.5); font-size: .62rem; letter-spacing: .22em;
       text-transform: uppercase; }
.cue s { display: block; width: 1px; height: 42px; text-decoration: none;
         background: linear-gradient(to bottom, rgba(250,249,242,.5), transparent);
         animation: cue 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0%,100% { transform: scaleY(.35); opacity: .3; }
                 50%     { transform: scaleY(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cue s { animation: none; } }