/* ═══════════════════════════════════════════════════════════════════════
   KILOMEE — MARKETING SITE
   The marketing site's own design language. It shares the brand primitives
   (violet #7B2FF7, Sora, IBM Plex Mono) with the app deck and the admin
   panel because those are the identity of record (DEC-136).

   The LAYOUT here follows the client's reference art direction; the COLOUR
   does not. A teal/ivory repaint was built and reverted on 17 Oct: the
   layout was kept, the palette returned to Kilomee's own.

   THE IDEA. The mark is a junction — two things meeting. So is the business:
   somebody already going, somebody who needs. The whole site is built on a
   SEAM that runs the length of the page with those two parties either side
   of it, and violet marks the junction and nothing else. Scroll down the
   seam and you are reading a list of meetings.

   THE NEUTRALS carry a violet bias so the brand sits inside the palette
   rather than on top of it. Measured on this ramp:
     ink  17.8:1 on paper · ink-2 7.9 · ink-3 5.1 · brand 5.6
     on the night field: white 19.1 · mist 16.2 · lilac 10.9
     brand on night is 3.3 — a LARGE mark only, never body text.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* brand — locked, shared with the app (DEC-136) */
  --brand:        #7B2FF7;
  --brand-press:  #6E10E5;
  --brand-wash:   #F0EAFE;
  --brand-edge:   #C9AEFB;

  /* neutrals — this site's own, biased violet */
  --paper:        #FAF9FC;
  --paper-2:      #F2F0F7;
  --night:        #120B24;
  --night-2:      #1D1336;
  --ink:          #14101F;
  --ink-2:        #514B63;
  --ink-3:        #625B75;
  --rule:         #E2DEEC;
  --rule-strong:  #C8C1D8;
  --on-night:     #FFFFFF;
  --on-night-2:   #C9BEE4;
  --on-brand:     #FFFFFF;

  /* the tinted band the layout uses for trust — the brand wash */
  --tint:         #F0EAFE;
  --tint-edge:    #D9C9FB;

  /* the four services — the lane colours this site already used */
  --c-carry:      #3F58C4;  --c-carry-bg: #E9EDFB;
  --c-task:       #A0137C;  --c-task-bg:  #FBE7F5;
  --c-buy:        #8A5104;  --c-buy-bg:   #FBF0DE;
  --c-take:       #0B7A63;  --c-take-bg:  #E0F3EE;

  --ok:           #0F7A52;
  --warn:         #9A4808;
  --stop:         #B8241C;

  --sans: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --seam-w: clamp(52px, 7vw, 104px);
  --page:   1180px;
  --pad:    clamp(20px, 4vw, 40px);

  --s1: 6px;  --s2: 10px; --s3: 16px; --s4: 24px;
  --s5: 36px; --s6: 54px; --s7: 80px; --s8: 120px;

  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px;
  --sh-1: 0 1px 2px rgba(20,16,31,.05);
  --sh-2: 0 2px 4px rgba(20,16,31,.04), 0 12px 28px -18px rgba(20,16,31,.28);
  --sh-3: 0 2px 6px rgba(20,16,31,.05), 0 22px 48px -26px rgba(20,16,31,.34);
}

*,*::before,*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--pad); }
.sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
      clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ── TYPE ───────────────────────────────────────────────────────────────
   Two registers, deliberately far apart. The LIGHT register (Sora 300/400
   at display size) is the human voice — somebody is going somewhere. The
   HEAVY register (Sora 800, tight) is reserved for the thing being claimed.
   Mono is the ledger: every figure, time, weight and route. */

.d1 { font-size: clamp(38px, 6.4vw, 86px);  line-height: 1.02; letter-spacing: -.035em;
      font-weight: 300; margin: 0; text-wrap: balance; }
.d1 b, .d1 strong { font-weight: 800; letter-spacing: -.045em; }

.d2 { font-size: clamp(29px, 4.2vw, 54px);  line-height: 1.06; letter-spacing: -.032em;
      font-weight: 300; margin: 0; text-wrap: balance; }
.d2 b { font-weight: 800; letter-spacing: -.04em; }

.d3 { font-size: clamp(20px, 2.2vw, 27px);  line-height: 1.25; letter-spacing: -.02em;
      font-weight: 700; margin: 0; }

.lede { font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.62; color: var(--ink-2);
        margin: var(--s4) 0 0; max-width: 46ch; }
.sm   { font-size: 15px; line-height: 1.58; color: var(--ink-2); margin: 0; }

.tag { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .2em;
       text-transform: uppercase; color: var(--ink-3); margin: 0; }
.tag--brand { color: var(--brand); }

.fig { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums;
       letter-spacing: -.01em; }
.fig--xl { font-family: var(--sans); font-weight: 800; letter-spacing: -.045em;
           font-size: clamp(40px, 6vw, 76px); line-height: .92; }

/* ── NAV ────────────────────────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 60;
       background: color-mix(in srgb, var(--paper) 90%, transparent);
       backdrop-filter: blur(16px); border-bottom: 1px solid var(--rule); }
.nav__in { display: flex; align-items: center; gap: var(--s5);
           padding: 15px 0; max-width: var(--page); margin: 0 auto;
           padding-left: var(--pad); padding-right: var(--pad); }
/* 26px, up from 20px. The header CTA is 44px tall, so the lockup can grow
   this far without becoming the tallest thing in the bar — the header height
   is unchanged at every width. `width: auto` lets the SVG's own 4.01:1 ratio
   decide the width; it is never set explicitly.

   `flex: 0 0 auto` and `max-width: none` are what keep it HONEST. The mark is
   a flex item, and the global `img { max-width: 100% }` plus flex shrinking
   will happily compress it horizontally while the fixed height holds — at
   320px the enlarged lockup measured 3.75:1 against its true 4.01:1, a
   visibly narrower wordmark. A logo that silently distorts is worse than a
   small one, so it is allowed to keep its width and the gap gives way
   instead (see the narrow-width rule below). */
.nav__mark { flex: 0 0 auto; }
.nav__mark img { height: 26px; width: auto; max-width: none; }
.nav__links { display: flex; gap: var(--s4); margin-left: auto; align-items: center; }
/* :not(.btn) so this never out-specifies a button that happens to sit in the
   nav — .nav__links a is 0,2,0 and would otherwise beat .btn--brand at 0,1,0,
   which is exactly how the CTA ended up dark-on-violet the first time. */
.nav__links a:not(.btn) { font-size: 15px; font-weight: 600; text-decoration: none; color: var(--ink-2); }
.nav__links a:not(.btn):hover { color: var(--ink); }
.nav__links a:not(.btn)[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav__cta { margin-left: var(--s3); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
       font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1;
       padding: 13px 20px; border-radius: 999px; border: 1px solid transparent;
       text-decoration: none; cursor: pointer; white-space: nowrap;
       transition: background-color .14s ease, color .14s ease, transform .14s ease; }
.btn--brand { background: var(--brand); color: var(--on-brand); }
.btn--brand:hover { background: var(--brand-press); }
/* on the navy closing band a dark teal is indistinguishable from the ground */
.sec--close .btn--brand { background: #A77BFF; color: var(--night); }
.sec--close .btn--brand:hover { background: #6FDDD1; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn--ghost:hover { background: var(--paper-2); }
.btn--night { background: var(--on-night); color: var(--night); }
.btn--night:hover { background: var(--on-night-2); }
.btn:active { transform: translateY(1px); }
.btn--lg { padding: 16px 26px; font-size: 16px; }
/* the dominant CTA. Carry Me, the hero and the nav own this; nothing else
   on a light section may use it. */
.btn--navy { background: var(--brand); color: var(--on-brand); }
.btn--navy:hover { background: var(--brand-press); }
.btn--navy .ico { width: 15px; height: 15px; }
/* a quiet text-level action beside it */
.btn--plain { background: transparent; color: var(--ink); padding-left: 4px; padding-right: 4px; }
.btn--plain:hover { color: var(--brand-press); }
.btn--plain .ico { width: 15px; height: 15px; }
/* outlined, for use ON the navy closing band */
.btn--ghostlight { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--ghostlight:hover { background: rgba(255,255,255,.1); }

/* ── THE SEAM ────────────────────────────────────────────────────────────
   One rule, the length of the page, with the two parties either side. The
   junction node is the only violet on a light section. On narrow screens
   the seam moves to the left edge and the pair becomes a sequence, because
   two columns at 380px is two columns of nothing. */

.jx { display: grid; grid-template-columns: 1fr var(--seam-w) 1fr;
      align-items: stretch; }
.jx__side { padding: var(--s6) 0; min-width: 0; }
.jx__side--l { padding-right: clamp(4px, 1.6vw, 20px); }
.jx__side--r { padding-left:  clamp(4px, 1.6vw, 20px); }

.jx__seam { position: relative; }
.jx__seam::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
                    width: 1px; background: var(--rule); transform: translateX(-.5px); }
.jx__node { position: absolute; left: 50%; top: 50%; width: 13px; height: 13px;
            margin: -6.5px 0 0 -6.5px; background: var(--brand); border-radius: 3px;
            transform: rotate(45deg); }
.jx__node::after { content: ''; position: absolute; inset: -7px; border: 1px solid var(--brand-edge);
                   border-radius: 5px; }
/* the short arms that reach into each column — the actual "meeting" */
.jx__arm { position: absolute; top: 50%; height: 1px; background: var(--brand-edge); }
.jx__arm--l { right: calc(50% + 10px); left: 0; }
.jx__arm--r { left:  calc(50% + 10px); right: 0; }

.jx--head .jx__side { padding-top: var(--s7); }
.jx--tail .jx__side { padding-bottom: var(--s7); }

/* a party: who they are, what they have or want, and the number that follows */
.party__role { display: flex; align-items: center; gap: 9px; margin: 0 0 var(--s3); }
.party__role .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.party--supply .dot { background: var(--ink); }
.party--demand .dot { background: var(--brand); }
.party__line { font-size: clamp(19px, 2vw, 25px); line-height: 1.3; letter-spacing: -.018em;
               font-weight: 400; margin: 0; max-width: 24ch; }
.party__line b { font-weight: 700; }
.party__meta { margin: var(--s3) 0 0; display: flex; flex-wrap: wrap; gap: 7px 18px;
               font-family: var(--mono); font-size: .76rem; letter-spacing: .12em;
               text-transform: uppercase; color: var(--ink-3); }
.jx__side--r .party__role,
.jx__side--r .party__meta { justify-content: flex-end; }
.jx__side--r .party__line { margin-left: auto; text-align: right; }
.jx__side--r .party__role { flex-direction: row-reverse; }

/* the outcome sits ON the seam, under the node */
.jx__out { grid-column: 1 / -1; display: flex; justify-content: center;
           padding-bottom: var(--s6); }
.jx__outbox { display: inline-flex; align-items: baseline; gap: var(--s3);
              border: 1px solid var(--rule); background: #FFFFFF; border-radius: 999px;
              padding: 11px 22px; }
.jx__outbox .fig { font-size: 19px; font-weight: 600; color: var(--ink); }
.jx__outbox .lbl { font-family: var(--mono); font-size: .72rem; letter-spacing: .15em;
                   text-transform: uppercase; color: var(--ink-3); }

/* ── SECTIONS ───────────────────────────────────────────────────────────── */
.sec { padding: var(--s8) 0; }
.sec--tight { padding: var(--s7) 0; }
.sec--night { background: var(--night); color: var(--on-night); }
.sec--night .lede, .sec--night .sm { color: var(--on-night-2); }
.sec--night .tag { color: var(--on-night-2); }
.sec--night .jx__seam::before { background: #2E2448; }
.sec--night .jx__outbox { background: var(--night-2); border-color: #2E2448; }
.sec--night .jx__outbox .fig { color: var(--on-night); }
.sec--night .jx__outbox .lbl { color: var(--on-night-2); }
.sec--night .party--supply .dot { background: var(--on-night); }
.sec--night .party__meta { color: var(--on-night-2); }
.sec--wash { background: var(--paper-2); }

/* The head is a pair too: the claim on the left, the qualification on the
   right, sharing a baseline. Held in one narrow column it left two thirds of
   the page empty above rows that span all of it. */
.sec__head { display: grid; grid-template-columns: 1.1fr 1fr;
             column-gap: clamp(28px, 6vw, 96px); align-items: end;
             margin-bottom: var(--s6); max-width: none; }
.sec__head .tag  { grid-column: 1 / -1; margin-bottom: var(--s3); }
.sec__head .d2   { grid-column: 1; max-width: 15ch; }
.sec__head .lede { grid-column: 2; max-width: 44ch; margin-top: 0; }
@media (max-width: 860px) {
  .sec__head { grid-template-columns: 1fr; }
  .sec__head .d2, .sec__head .lede { grid-column: 1; max-width: 26ch; }
  .sec__head .lede { max-width: 46ch; margin-top: var(--s4); }
}

/* ── THE RAIL: how it works, read down the seam ─────────────────────────── */
.rail { display: grid; grid-template-columns: var(--seam-w) 1fr; }
.rail__seam { position: relative; }
.rail__seam::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:1px;
                      background: var(--rule); transform: translateX(-.5px); }
.rail__step { display: contents; }
.step { padding: var(--s5) 0 var(--s5) clamp(14px, 2.4vw, 34px);
        border-top: 1px solid var(--rule); }
.step:first-of-type { border-top: 0; }
.step h3 { font-size: clamp(19px, 1.9vw, 23px); font-weight: 700; letter-spacing: -.02em;
           margin: 0 0 7px; }
.step p { margin: 0; color: var(--ink-2); font-size: 16px; max-width: 54ch; }
.step__n { position: relative; display: flex; align-items: flex-start;
           justify-content: center; padding-top: var(--s5);
           border-top: 1px solid var(--rule); }
.step__n:first-of-type { border-top: 0; }
.step__n span { position: relative; z-index: 1; background: var(--paper);
                font-family: var(--mono); font-size: .76rem; font-weight: 500;
                letter-spacing: .1em; color: var(--brand); padding: 3px 0; }
.sec--wash .step__n span { background: var(--paper-2); }

/* ── THE LEDGER: where the money actually goes ──────────────────────────── */
.ledger { border-top: 2px solid var(--ink); max-width: 560px; }
.ledger__row { display: flex; justify-content: space-between; align-items: baseline;
               gap: var(--s4); padding: 14px 0; border-bottom: 1px solid var(--rule); }
.ledger__row span { color: var(--ink-2); font-size: 16px; }
.ledger__row .fig { font-size: 17px; color: var(--ink); }
.ledger__row--sum { border-bottom: 0; border-top: 2px solid var(--ink); margin-top: 4px;
                    padding-top: 16px; }
.ledger__row--sum span { color: var(--ink); font-weight: 600; }
.ledger__row--sum .fig { font-family: var(--sans); font-weight: 800; letter-spacing: -.035em;
                         font-size: clamp(28px, 3.2vw, 40px); }
.sec--night .ledger { border-top-color: var(--on-night); }
.sec--night .ledger__row { border-bottom-color: #2E2448; }
.sec--night .ledger__row span { color: var(--on-night-2); }
.sec--night .ledger__row .fig { color: var(--on-night); }
.sec--night .ledger__row--sum { border-top-color: var(--on-night); }
.sec--night .ledger__row--sum span { color: var(--on-night); }

/* ── CORRIDORS ──────────────────────────────────────────────────────────── */
.corr { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.corr__row { display: grid; grid-template-columns: 1fr auto; gap: var(--s4);
             align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.corr__from { font-size: clamp(18px, 1.9vw, 23px); font-weight: 600; letter-spacing: -.018em; }
.corr__from em { font-style: normal; color: var(--ink-3); font-weight: 400;
                 padding: 0 .45em; }
.corr__meta { font-family: var(--mono); font-size: .76rem; letter-spacing: .13em;
              text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }

/* ── WAITLIST ───────────────────────────────────────────────────────────── */
.join { display: flex; gap: var(--s2); flex-wrap: wrap; margin: var(--s5) 0 0; max-width: 480px; }
.join input { flex: 1 1 230px; min-width: 0; font-family: var(--sans); font-size: 16px;
              color: var(--on-night); background: #231741; border: 1px solid #3A2A62;
              border-radius: 999px; padding: 15px 20px; }
.join input::placeholder { color: #8E82AE; }
.join input[aria-invalid="true"] { border-color: #F2766B; }
.join__msg { margin: var(--s3) 0 0; font-size: 15px; min-height: 22px; color: var(--on-night-2); }
.join__msg[data-tone="error"] { color: #F2A79E; }
.join__done { display: none; }
.is-joined .join__ask { display: none; }
.is-joined .join__done { display: block; }

/* ── FOOTER ─────────────────────────────────────────────────────────────── */
.foot { background: var(--night); color: var(--on-night-2); padding: var(--s7) 0 var(--s6); }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s5); }
.foot h4 { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .18em;
           text-transform: uppercase; color: #8E82AE; margin: 0 0 var(--s3); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot a { color: var(--on-night-2); text-decoration: none; font-size: 15px; }
.foot a:hover { color: var(--on-night); }
.foot img { height: 20px; }
.foot__end { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid #2E2448;
             display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
             font-size: 14px; color: #8E82AE; }
/* The address inherits the footer's 14px rather than the 15px the nav links
   use, so the closing line stays one size throughout; underlined because it
   is the only link down here that does something other than navigate. */
.foot__end a { font-size: inherit; color: var(--on-night-2); text-decoration: underline;
               text-underline-offset: 3px; text-decoration-color: #4A3C6E; }
.foot__end a:hover { color: var(--on-night); text-decoration-color: currentColor; }

/* ── MOTION ─────────────────────────────────────────────────────────────
   One idea, used once per junction: the two sides arrive from their own
   side of the seam and lock. Nothing loops, nothing floats. */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transition: opacity .5s cubic-bezier(.22,.7,.28,1),
                                transform .5s cubic-bezier(.22,.7,.28,1); }
  .rv--l { transform: translateX(-14px); }
  .rv--r { transform: translateX(14px); }
  .rv--u { transform: translateY(14px); }
  .rv.in { opacity: 1; transform: none; }
  .jx__node { transform: rotate(45deg) scale(.4); opacity: 0;
              transition: transform .42s cubic-bezier(.3,1.4,.5,1) .12s, opacity .3s ease .12s; }
  .jx.in .jx__node { transform: rotate(45deg) scale(1); opacity: 1; }
  .jx__arm { transform: scaleX(0); transition: transform .42s cubic-bezier(.22,.7,.28,1); }
  .jx__arm--l { transform-origin: left; }
  .jx__arm--r { transform-origin: right; }
  .jx.in .jx__arm { transform: scaleX(1); }
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────
   Below 860 the seam leaves the middle and runs down the left edge: the
   junction becomes a sequence, which is what a phone can actually show. */
@media (max-width: 860px) {
  .jx { grid-template-columns: 30px 1fr; position: relative; }
  /* The rows here are IMPLICIT, so `grid-row: 1 / -1` resolves -1 against the
     explicit grid — which is line 1 — and the seam spanned nothing. Draw it on
     the junction itself instead, where full height is simply full height. */
  .jx::before { content:''; position:absolute; left:15px; top:0; bottom:0; width:1px;
                background: var(--rule); }
  .sec--night .jx::before { background: #2E2448; }
  .jx__seam { grid-row: 1; }
  .jx__seam::before { display: none; }
  .jx__node { left: 15px; top: 46px; }
  .jx__arm--l { display: none; }
  .jx__arm--r { left: 15px; right: auto; width: 16px; top: 46px; }
  .jx__side { grid-column: 2; padding: var(--s4) 0 var(--s4) var(--s4); }
  .jx__side--l { padding-top: var(--s5); padding-right: 0; }
  .jx__side--r { padding-left: var(--s4); padding-bottom: var(--s5); }
  .jx__side--r .party__line { margin-left: 0; text-align: left; }
  .jx__side--r .party__role { flex-direction: row; justify-content: flex-start; }
  .jx__side--r .party__meta { justify-content: flex-start; }
  .jx__out { grid-column: 2; justify-content: flex-start; padding-left: var(--s4); }
  /* a pill that wraps to three ragged lines is not a pill */
  .jx__outbox { flex-direction: column; align-items: flex-start; gap: 3px;
                border-radius: 12px; padding: 13px 18px; }
  .jx__outbox .fig { font-size: 22px; }
  .jx--head .jx__side { padding-top: var(--s5); }
  .rail { grid-template-columns: 34px 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .nav__links { display: none; }
  .nav__links.nav__links--cta { display: flex; margin-left: auto; }
  .corr__row { grid-template-columns: 1fr; gap: 4px; }
  .foot__grid { grid-template-columns: 1fr; gap: var(--s5); }
}

/* the prohibited lists sit side by side until there is no room for two */
@media (max-width: 760px) { .split2 { grid-template-columns: 1fr !important; } }

/* ── MOBILE NAVIGATION ──────────────────────────────────────────────────
   Five routes and, below the tablet breakpoint, nowhere to go: the link row
   was simply hidden and only the CTA survived, which left the footer as the
   only way to reach another page. A disclosure panel instead, with tap
   targets at 48px and the button reachable by keyboard. */
.nav__toggle { display: none; margin-left: auto; width: 48px; height: 48px;
  align-items: center; justify-content: center; background: transparent;
  border: 1px solid var(--rule-strong); border-radius: 12px; cursor: pointer;
  padding: 0; color: var(--ink); }
.nav__toggle:hover { background: var(--paper-2); }
.nav__bars, .nav__bars::before, .nav__bars::after {
  display: block; width: 17px; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform .22s cubic-bezier(.22,.7,.28,1), opacity .16s ease; }
.nav__bars { position: relative; }
.nav__bars::before, .nav__bars::after { content: ''; position: absolute; left: 0; }
.nav__bars::before { top: -5.5px; }
.nav__bars::after  { top:  5.5px; }
[aria-expanded="true"] .nav__bars { background: transparent; }
[aria-expanded="true"] .nav__bars::before { transform: translateY(5.5px) rotate(45deg); }
[aria-expanded="true"] .nav__bars::after  { transform: translateY(-5.5px) rotate(-45deg); }

.nav__panel { display: none; border-top: 1px solid var(--rule); background: var(--paper); }
.nav__panel nav { display: flex; flex-direction: column;
  max-width: var(--page); margin: 0 auto; padding: var(--s2) var(--pad) var(--s4); }
.nav__panel a { display: flex; align-items: center; min-height: 48px;
  font-size: 18px; font-weight: 600; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--rule); }
.nav__panel a:last-child { border-bottom: 0; }
.nav__panel a[aria-current="page"] { color: var(--brand); }

@media (max-width: 767px) {
  .nav__links[aria-label="Main"] { display: none; }
  .nav__toggle { display: flex; }
  .nav__cta { margin-left: var(--s2); }
  .nav__cta .btn { padding: 12px 16px; font-size: 14.5px; }
  .nav__panel { display: block; }
  .nav__panel[hidden] { display: none; }
  .nav__in { gap: var(--s3); }
}

/* At 320 the enlarged lockup, the toggle and the CTA together need about 6px
   more than the bar has. The gap yields rather than the logo: measured at
   320, 360 and 375, this keeps all three on one row, undistorted, with the
   header height unchanged. */
@media (max-width: 374px) {
  .nav__in { gap: var(--s2); }
}
@media (prefers-reduced-motion: reduce) {
  .nav__bars, .nav__bars::before, .nav__bars::after { transition: none; }
}

/* ── TOUCH TARGETS ──────────────────────────────────────────────────────
   Measured at eight widths: the nav lockup was a 20px-tall target, footer
   links 19px, the header CTA 41px and the toggle squeezed to 36px wide at
   320. All of those are things people actually tap. 44px minimum, bought
   with padding so nothing moves visually. */
.nav__mark { display: inline-flex; align-items: center; min-height: 44px; }
.nav__toggle { flex: 0 0 auto; min-width: 44px; min-height: 44px; }

@media (max-width: 767px) {
  .nav__cta .btn { min-height: 44px; }
  /* the short home page added its own standalone controls: measured at 375,
     the chips were 38px, the "in detail" links 32px and the step-by-step
     link 19px. Bought with padding so nothing shifts visually. */
  .btn { min-height: 44px; }
  .trust__more { min-height: 44px; }
  .chip { min-height: 44px; padding-top: 0; padding-bottom: 0; }
  .svc__more { min-height: 44px; align-items: center; }
  .flow__note a { display: inline-flex; align-items: center; min-height: 44px; }
  /* the footer is the other place a phone navigates from */
  .foot ul { gap: 0; }
  .foot ul a { display: flex; align-items: center; min-height: 44px; }
  .foot__end { padding-top: var(--s3); }
  /* an 11.5px uppercase mono label with wide tracking is hard work on a phone */
  .tag { font-size: .78rem; }
  .party__meta { font-size: .78rem; }
  .jx__outbox .lbl { font-size: .78rem; }
  .corr__meta { font-size: .78rem; }
  .foot h4 { font-size: .78rem; }
}

/* ── ICONS ──────────────────────────────────────────────────────────────
   Lucide (DEC-109). A lane colour appears on the icon that names its
   service and nowhere else — never a surface, a button or body text. */
.ico { width: 22px; height: 22px; stroke: currentColor; fill: none;
       stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
       flex: 0 0 auto; display: block; }
.ico--lg { width: 28px; height: 28px; }
.lane { display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; border-radius: 13px; flex: 0 0 auto;
        border: 1px solid var(--rule); background: #fff;
        transition: transform .2s cubic-bezier(.3,1.3,.5,1), border-color .2s ease; }
.lane--carry { color: #3F58C4; } .lane--take { color: #0B7A63; }
.lane--task  { color: #A0137C; } .lane--buy  { color: #9A5B05; }
.party:hover .lane { transform: translateY(-2px); border-color: currentColor; }
.sec--night .lane { background: var(--night-2); border-color: #2E2448; }
.sec--night .lane--carry { color: #9DB0FF; } .sec--night .lane--take { color: #4FCBAE; }
.sec--night .lane--task  { color: #EA89C7; } .sec--night .lane--buy  { color: #F0B65F; }
.party__role .lane + .tag { margin-left: 2px; }
.step__ico { color: var(--brand); margin-bottom: 11px; }
.sec--night .step__ico { color: #A77BFF; }

/* ── THE SEAM FILLS AS YOU PASS IT ──────────────────────────────────────
   The signature stops being a static rule: the part of the seam you have
   already scrolled past is violet, the part ahead is not. One idea, the
   length of the page. */
.jx { position: relative; }
.jx__seam::after { content: ''; position: absolute; left: 50%; top: 0; width: 1px;
                   height: 0; background: var(--brand); transform: translateX(-.5px);
                   transition: height .45s cubic-bezier(.22,.7,.28,1); }
.jx.in .jx__seam::after { height: 50%; }
.sec--night .jx__seam::after { background: #A77BFF; }
@media (prefers-reduced-motion: reduce) { .jx__seam::after { display: none; } }

@media (max-width: 860px) {
  .jx__seam::after { left: 15px; }
  .jx.in .jx__seam::after { height: 46px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   THE HOME PAGE
   Six bands: hero, services, process, trust, coverage + waitlist, closing.
   Carry Me is primary by SIZE and by CTA weight — it gets the wide card and
   the only solid navy button on the page. The other three are equal to each
   other and visibly smaller than it, each with one restrained accent.
   ═══════════════════════════════════════════════════════════════════════ */

/* TYPE SCALE for this page. The display sizes were built for a full-width
   hero and run to 86px; in a split hero at ~50% width that wrapped the
   headline onto four lines. These are proportioned to the two-column
   layout instead, and keep one consistent step between levels. */
.home .hero__copy .d1 { font-size: clamp(31px, 3.35vw, 46px); line-height: 1.1; max-width: 24ch; }
.home .bar h2 { font-size: clamp(21px, 2.3vw, 30px); font-weight: 700; letter-spacing: -.022em; }
.home .trust__copy .d2,
.home .cov__ask .d2,
.home .sec--close .d2 { font-size: clamp(26px, 2.9vw, 38px); line-height: 1.12; }
.home .join__done .d2 { font-size: clamp(24px, 2.6vw, 34px); }

/* Tightened for the client reference pass: the page carries nine sections and
   the rhythm is where its height is. Type is untouched; only the gaps move. */
.home .sec { padding: clamp(38px, 3.4vw, 52px) 0; }
.home .sec--tight { padding: clamp(28px, 2.6vw, 38px) 0; }
.home .lede { margin-top: var(--s3); }

/* a section's eyebrow + title sitting on one line, as the reference does */
.bar { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap;
       margin-bottom: var(--s5); }
.bar h2 { margin: 0; }
.bar p { margin: 0; font-size: .92rem; color: var(--ink-3); }
.bar--split { justify-content: space-between; }

/* ── hero ─────────────────────────────────────────────────────────────── */
.home .hero-sec { padding: clamp(28px, 3.4vw, 46px) 0 clamp(36px, 4vw, 58px); }
.hero { display: grid; gap: clamp(var(--s5), 4vw, var(--s7));
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: center; }
.hero__art { position: relative; }
.hero__copy .d1 { margin: var(--s3) 0 0; max-width: 19ch; }
.hero__copy .lede { max-width: 44ch; }
.hero__cta { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
             margin-top: var(--s5); }
.hero__note { margin: var(--s4) 0 0; font-size: .84rem; color: var(--ink-3); }

/* the four services as chips — Carry first and filled, the rest tinted */
.chips { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s5); }
.chip { display: inline-flex; align-items: center; gap: var(--s2);
        padding: 8px 15px 8px 10px; border-radius: 999px; font-size: .86rem;
        font-weight: 600; text-decoration: none; border: 1px solid transparent;
        transition: transform .16s, box-shadow .16s; }
.chip:hover { transform: translateY(-1px); box-shadow: var(--sh-1); }
.chip .ico { width: 15px; height: 15px; }
.chip--carry { background: var(--c-carry-bg); color: var(--c-carry); border-color: #CBD3F2; }
.chip--task  { background: var(--c-task-bg);  color: var(--c-task); border-color: #F2C9E6; }
.chip--buy   { background: var(--c-buy-bg);   color: var(--c-buy); border-color: #EDD9B4; }
.chip--take  { background: var(--c-take-bg);  color: var(--c-take); border-color: #BCE0D7; }

/* ── the photograph slot ──────────────────────────────────────────────
   Sized and cornered for a real photograph. Until one is supplied it draws
   its own panel rather than a broken frame, so the page is presentable
   either way. Drop an <img> inside and the layout does not move. */
.ph { position: relative; width: 100%; border-radius: var(--r-xl); overflow: hidden;
      background: linear-gradient(145deg, var(--brand-wash) 0%, #E7E0F8 48%, var(--paper-2) 100%);
      box-shadow: var(--sh-3); isolation: isolate; }
.ph::after { content: ""; position: absolute; inset: 0; pointer-events: none;
             background: radial-gradient(120% 90% at 78% 12%, rgba(255,255,255,.55), transparent 60%); }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph--hero { aspect-ratio: 4 / 3; }
.ph--card { aspect-ratio: 16 / 10; border-radius: 0; box-shadow: none; }
.ph__mark { position: absolute; inset: 0; display: grid; place-items: center; gap: var(--s2);
            align-content: center; text-align: center; padding: var(--s4); z-index: 1; }
.ph__mark .ico { width: 30px; height: 30px; color: var(--brand); opacity: .65; }
.ph--card .ph__mark .ico { width: 22px; height: 22px; }
.ph__mark span { font: 500 .68rem/1.3 var(--mono); letter-spacing: .12em;
                 text-transform: uppercase; color: var(--ink-3); opacity: .8; }
.ph--card .ph__mark span { font-size: .6rem; }

/* the reference's handwritten aside */
.scribble { position: absolute; right: 10px; top: -14px; z-index: 2; max-width: 11ch;
            font-family: var(--mono); font-size: .76rem; line-height: 1.5;
            color: var(--ink-2); text-align: right; transform: rotate(-5deg);
            background: var(--paper); padding: 8px 12px; border-radius: var(--r-sm);
            box-shadow: var(--sh-2); }
.scribble b { display: block; font-weight: 600; color: var(--brand-press); }

/* ── services: Carry Me wide, the other three equal and smaller ───────── */
/* FOUR EQUAL CARDS. The reference makes this the focal point of the page and
   gives every service the same weight; the previous layout promoted Carry Me
   to a full-width lead above three smaller cards, which both buried the other
   three and cost about 300px of height on a page that needs to fit into two
   screens. Order is fixed by the brief: Carry, Task, Buy, Take. */
.svc { display: grid; gap: var(--s3); grid-template-columns: repeat(4, minmax(0,1fr)); }
.svc__card { background: var(--card-bg, #fff); border: 1px solid var(--card-edge, var(--rule)); border-radius: var(--r-lg);
             overflow: hidden; display: flex; flex-direction: column;
             transition: transform .18s, box-shadow .18s, border-color .18s; }
.svc__card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--rule-strong); }
.svc__body { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.svc__k { display: inline-flex; align-items: center; gap: var(--s2); margin: 0;
          font-size: .95rem; font-weight: 700; letter-spacing: -.01em; }
.svc__card h3 { margin: 0; font-size: .98rem; font-weight: 600; line-height: 1.4; color: var(--ink-2); }
.svc__card p { margin: 0; font-size: .89rem; line-height: 1.56; color: var(--ink-3); }
.svc__more { margin-top: auto; padding-top: var(--s3); display: inline-flex; align-items: center;
             gap: var(--s2); font-size: .85rem; font-weight: 600; text-decoration: none; }
.svc__more .ico { width: 15px; height: 15px; transition: transform .16s; }
.svc__more:hover .ico { transform: translateX(3px); }
.svc__note { font: 400 .66rem/1.4 var(--mono); letter-spacing: .07em;
             text-transform: uppercase; color: var(--ink-3); }

/* the icon badge that sits over each card's image, as in the reference */
.svc__badge { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
              position: absolute; left: var(--s4); bottom: -21px; z-index: 2;
              border: 3px solid #fff; box-shadow: var(--sh-1); }
.svc__badge .ico { width: 19px; height: 19px; color: #fff; }
.svc__top { position: relative; }
.svc__body--badged { padding-top: calc(var(--s4) + 14px); }

/* Carry Me: the primary. Full width above the other three, navy CTA. */
.svc--lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
             border-color: var(--rule-strong); box-shadow: var(--sh-2); }
.svc--lead .svc__top { order: 2; }
.svc--lead .ph--card { height: 100%; aspect-ratio: auto; min-height: 260px; }
.svc--lead .svc__body { order: 1; padding: clamp(var(--s4), 3vw, var(--s6)); gap: var(--s3); justify-content: center; }
.svc--lead .svc__k { font-size: 1.05rem; }
.svc--lead h3 { font-size: clamp(1.35rem, 2.3vw, 1.85rem); font-weight: 700;
                color: var(--ink); line-height: 1.18; letter-spacing: -.02em; }
.svc--lead p { font-size: .98rem; color: var(--ink-2); max-width: 46ch; }
.svc--lead .svc__badge { position: static; border: 0; box-shadow: none; width: 34px; height: 34px;
                         border-radius: 10px; }
.svc--lead .svc__cta { margin-top: var(--s3); display: flex; gap: var(--s4);
                       align-items: center; flex-wrap: wrap; }

.c-carry { background: var(--c-carry); } .t-carry { color: var(--c-carry); }
.c-task  { background: var(--c-task); }  .t-task  { color: var(--c-task); }
.c-buy   { background: var(--c-buy); }   .t-buy   { color: var(--c-buy); }
.c-take  { background: var(--c-take); }  .t-take  { color: var(--c-take); }

/* ── process strip ────────────────────────────────────────────────────── */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3);
        grid-template-columns: repeat(5, minmax(0,1fr)); text-align: center; }
.flow__step { display: flex; flex-direction: column; align-items: center; gap: var(--s1);
              position: relative; }
.flow__ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
             margin-bottom: var(--s2); background: var(--brand-wash); border: 1px solid var(--brand-edge); }
.flow__ico .ico { width: 23px; height: 23px; color: var(--brand-press); }
.flow__step b { font-size: .94rem; font-weight: 700; }
.flow__step span:not(.flow__ico) { font-size: .85rem; line-height: 1.5; color: var(--ink-3); max-width: 22ch; }
.flow__step::after { content: ""; position: absolute; top: 28px; left: calc(50% + 40px);
                     width: calc(100% - 80px); height: 1px; background: var(--rule-strong); }
.flow__step::before { content: ""; position: absolute; top: 25px; right: calc(-1 * var(--s3) - 3px);
                      width: 6px; height: 6px; border-top: 1px solid var(--rule-strong);
                      border-right: 1px solid var(--rule-strong); transform: rotate(45deg); }
.flow__step:last-child::after, .flow__step:last-child::before { display: none; }

/* ── trust: the mint band ─────────────────────────────────────────────── */
.sec--tint { background: var(--tint); }
.trust { display: grid; gap: clamp(var(--s5), 4vw, var(--s7));
         grid-template-columns: minmax(0,.9fr) minmax(0,1.3fr); align-items: center; }
.trust__copy .d2 { margin: 0; }
.trust__copy .lede { color: var(--ink-2); max-width: 40ch; }
.trust__list { list-style: none; margin: 0; padding: 0; display: grid;
               grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--s3); text-align: center; }
.trust__list li { display: flex; flex-direction: column; align-items: center; gap: var(--s2);
                  font-size: .8rem; font-weight: 600; color: var(--ink-2); line-height: 1.35; }
.trust__badge { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
                background: #fff; border: 1px solid var(--tint-edge); box-shadow: var(--sh-1); }
.trust__badge .ico { width: 20px; height: 20px; color: var(--brand); }
.trust__status { margin-top: var(--s5); max-width: 62ch; color: var(--ink-3); }
.trust__more { display: inline-flex; align-items: center; gap: var(--s2); margin-top: var(--s4);
               font-weight: 600; font-size: .9rem; color: var(--brand-press); text-decoration: none; }
.trust__more .ico { width: 15px; height: 15px; }

/* ── coverage + waitlist, one band ────────────────────────────────────── */
.cov { display: grid; gap: clamp(var(--s5), 4vw, var(--s6));
       grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; }
.panel { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-lg);
         padding: clamp(var(--s4), 3vw, var(--s5)); box-shadow: var(--sh-1); }
.panel h3 { margin: 0 0 var(--s2); font-size: 1.05rem; font-weight: 700; }
.panel .corr__row { padding: 13px 0; }
.panel .corr__from { font-size: 1rem; }
.cov__ask .d2 { margin: 0; max-width: 16ch; }
.cov__ask .lede { max-width: 40ch; }

/* ── referral announcement ────────────────────────────────────────────
   A band between the hero and the services, not a card floating in its own
   section: it sits on the brand wash so it reads as a Kilomee aside rather
   than a fifth service. Padding is cut hard because a full `.sec` rhythm here
   would push Our Services below the fold on a laptop. */
.sec--ref { padding: 0 0 var(--s6); }

.ref { display: flex; align-items: center; gap: clamp(var(--s3), 2.4vw, var(--s5));
       background: var(--brand-wash); border: 1px solid var(--tint-edge);
       border-radius: var(--r-lg); padding: clamp(var(--s4), 2.6vw, var(--s5)); }

.ref__mark { flex: none; display: grid; place-items: center; width: 46px; height: 46px;
             border-radius: 14px; background: var(--brand); color: var(--on-brand); }
.ref__mark .ico { width: 22px; height: 22px; }

.ref__copy { flex: 1 1 auto; min-width: 0; }
.ref__eyebrow { font-family: var(--mono); font-size: .68rem; font-weight: 500;
                letter-spacing: .18em; text-transform: uppercase;
                color: var(--brand-press); margin: 0 0 var(--s1); }
.ref__title { font-size: clamp(20px, 2.1vw, 26px); line-height: 1.2; letter-spacing: -.02em;
              font-weight: 300; margin: 0; color: var(--ink); text-wrap: balance; }
.ref__title b { font-weight: 800; letter-spacing: -.03em; }
.ref__text { font-size: 15px; line-height: 1.55; color: var(--ink-2);
             margin: var(--s2) 0 0; max-width: 52ch; }

.ref__cta { flex: none; }

/* Below the fold of a phone the row cannot hold three columns, so the mark
   and the copy pair up and the button takes the full width — a 44px target
   rather than a cramped one squeezed beside the text. */
@media (max-width: 720px) {
  .ref { flex-wrap: wrap; gap: var(--s3); }
  .ref__mark { width: 40px; height: 40px; border-radius: 12px; }
  .ref__copy { flex: 1 1 200px; }
  .ref__cta { width: 100%; }
}

/* ── closing band ─────────────────────────────────────────────────────── */
.sec--close { background: var(--night); color: var(--on-night); text-align: center; }
.sec--close .d2 { margin: 0 auto; max-width: 18ch; }
.sec--close .lede { color: var(--on-night-2); margin-left: auto; margin-right: auto; max-width: 48ch; }
.close__cta { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; margin-top: var(--s5); }

/* ── narrow ───────────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .trust { grid-template-columns: minmax(0,1fr); }
  .trust__list { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .flow { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s5) var(--s3); }
  .flow__step::after, .flow__step::before { display: none; }
}
@media (max-width: 900px) {
  .hero, .cov { grid-template-columns: minmax(0,1fr); }
  .hero__art { order: 2; }
  .svc { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .svc--lead { grid-template-columns: minmax(0,1fr); }
  .svc--lead .svc__top { order: 1; } .svc--lead .svc__body { order: 2; }
  .svc--lead .ph--card { min-height: 0; aspect-ratio: 16/9; }
}
@media (max-width: 620px) {
  .svc, .flow, .trust__list { grid-template-columns: minmax(0,1fr); }
  .trust__list li { flex-direction: row; text-align: left; gap: var(--s3); font-size: .9rem; }
  .scribble { display: none; }
  .hero__cta .btn, .svc--lead .svc__cta .btn { width: 100%; justify-content: center; }
  .flow__step span:not(.flow__ico) { max-width: none; }
}

/* ── the inner pages ──────────────────────────────────────────────────
   How it works and Trust & safety reuse the home page's card, panel and
   band vocabulary so the three read as one site. Only the pieces they
   need that the home page does not are below. */

/* numbered step cards (How it works) */
.stepgrid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.svc__body--num { gap: var(--s2); }
.num { display: inline-grid; place-items: center; width: 34px; height: 34px;
       border-radius: 50%; margin-bottom: var(--s1);
       background: var(--brand-wash); border: 1px solid var(--brand-edge);
       color: var(--brand-press); font: 700 .92rem/1 var(--sans); }
.stepgrid .svc__card h3 { font-size: 1.02rem; color: var(--ink); }

/* icon pill on the trust pillars */
.svc--four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.pill { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
        background: var(--brand-wash); border: 1px solid var(--brand-edge); margin-bottom: var(--s1); }
.pill .ico { width: 19px; height: 19px; color: var(--brand-press); }
.svc--four .svc__card h3 { font-size: 1rem; color: var(--ink); }

/* the two restriction panels read at a glance */
.panel h3 .dot-no, .panel h3 .dot-ok {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 9px;
  vertical-align: middle; }
.panel h3 .dot-no { background: var(--stop); }
.panel h3 .dot-ok { background: var(--ok); }
.panel .corr__row:last-child { border-bottom: 0; padding-bottom: 0; }
.panel .corr { border-top: 0; }
.panel .corr__from { font-size: .95rem; font-weight: 500; line-height: 1.5; }
.panel .ledger__row:last-child { border-bottom: 0; }

@media (max-width: 1040px) { .svc--four { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 900px)  { .stepgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px)  { .stepgrid, .svc--four { grid-template-columns: minmax(0,1fr); } }

/* ── corridor rows on a very narrow screen ────────────────────────────
   `1fr auto` with a nowrap mono meta column: neither track can shrink, so
   below ~340px the two together are wider than the viewport and the page
   scrolls sideways. Stack them instead. Affects every page using .corr. */
@media (max-width: 420px) {
  .corr__row { grid-template-columns: 1fr; gap: 2px; align-items: start; }
  .corr__meta { white-space: normal; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE TYPE FLOOR — must stay LAST in this file.
   These selectors have the same specificity as the component rules they
   override, so order is the only thing deciding them. An earlier attempt sat
   ABOVE the components it was meant to override and lost silently. Twice.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .xch__role, .chips__lbl { font-size: .64rem; }
  .xch__foot { font-size: .72rem; }
  .svc__note { font-size: .7rem !important; }
  .flow__step span:not(.flow__ico) { font-size: .88rem; }
}


/* ═══════════════════════════════════════════════════════════════════════
   CLIENT REFERENCE PASS — warm, photographic, community-led.
   The reference the client supplied keeps this site's structure and asks for
   a warmer surface, four equal service cards, a lifestyle collage and a
   corridor panel. Brand primitives are untouched: #7B2FF7 is still the brand
   (DEC-136) and #A0137C is still the Task Me lane (DEC-137). Nothing below
   introduces a colour that is not derived from a token already in this file.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* A WARM surface, asked for by the reference. Derived from the existing
     Buy Me lane tint (--c-buy-bg #FBF0DE) rather than invented: lightened to
     sit beside --paper without fighting the violet ramp. */
  --cream:     #FDF8F1;
  --cream-2:   #F8F1E6;
  --cream-rule:#EFE3D2;
}

/* each service card wears its own lane, as the reference does */
.svc--carry { --card-bg: var(--c-carry-bg); --card-edge: #CBD6F5; }
.svc--task  { --card-bg: var(--c-task-bg);  --card-edge: #F2CBE6; }
.svc--buy   { --card-bg: var(--c-buy-bg);   --card-edge: #EFDCBB; }
.svc--take  { --card-bg: var(--c-take-bg);  --card-edge: #BFE3D9; }
.svc__card .ph--card { aspect-ratio: 16 / 10; }

/* warm grounds */
.sec--cream { background: var(--cream); }
.hero-sec   { background: var(--cream); }

/* ── ORNAMENT ─────────────────────────────────────────────────────────
   The reference edges its sections with mandala line art. Drawn in CSS from
   repeating radial gradients rather than shipped as an image: a background
   image here would be the largest asset on the page for pure decoration. */
.orn { position: relative; overflow: hidden; }
.orn::before, .orn::after {
  content: ""; position: absolute; width: 320px; height: 320px; pointer-events: none;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 13px,
      color-mix(in srgb, var(--brand) 11%, transparent) 13px 14px, transparent 14px 27px);
  opacity: .5;
}
.orn::before { top: -120px; left: -110px; }
.orn::after  { bottom: -140px; right: -120px; }
@media (max-width: 767px) { .orn::before, .orn::after { display: none; } }

/* ── LIFESTYLE COLLAGE ────────────────────────────────────────────────
   One large landscape and two companions, per the reference. Deliberately
   NOT a row of equal tiles: at this width equal thirds read as a stock
   strip, and the reference's rhythm comes from the size difference. */
.collage { display: grid; gap: var(--s3);
           grid-template-columns: 1.55fr 1fr; align-items: stretch; }
.collage__stack { display: grid; gap: var(--s3); }
.collage .ph { border-radius: var(--r-lg); overflow: hidden; margin: 0; }
.collage .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.collage__big img { aspect-ratio: 4 / 3; }
.collage__stack .ph img { aspect-ratio: 16 / 10; }
@media (max-width: 767px) {
  .collage { grid-template-columns: minmax(0,1fr); }
  .collage__stack { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* handwritten annotation — real text, never baked into an image */
.scrib { font-family: var(--sans); font-weight: 300; font-style: italic;
         font-size: clamp(.95rem, 1.5vw, 1.12rem); line-height: 1.45;
         color: var(--brand-press); transform: rotate(-3deg); display: inline-block; }

/* ── CORRIDOR PANEL (India <-> UAE) ───────────────────────────────────
   Compact and horizontal. States only what is confirmed, and says plainly
   which service crosses the border and which do not. */
.corridor { display: grid; grid-template-columns: auto 1fr; gap: var(--s5);
            align-items: center; background: var(--cream-2);
            border: 1px solid var(--cream-rule); border-radius: var(--r-lg);
            padding: var(--s4) var(--s5); }
.corridor__pair { display: flex; align-items: center; gap: var(--s3); }
.corridor__cty { display: grid; justify-items: center; gap: 6px; }
.corridor__flag { width: 46px; height: 32px; border-radius: 5px; display: block;
                  border: 1px solid var(--cream-rule); }
.corridor__cty b { font-size: .92rem; font-weight: 600; }
/* The region side carries six small flags rather than one large one; the row
   is centred against India's 32px flag so both captions sit on one baseline. */
.corridor__flags { display: flex; flex-wrap: wrap; justify-content: center;
                   align-items: center; gap: 4px; min-height: 32px; max-width: 190px; }
.corridor__flags .corridor__flag { width: 26px; height: 18px; border-radius: 3px; }
.corridor__arrows { color: var(--brand); font-size: 1.1rem; }
.corridor__list { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s3); }
.corridor__item { display: grid; gap: 3px; }
.corridor__item b { font-size: .9rem; font-weight: 600; }
.corridor__item span { font: 400 .72rem/1.35 var(--mono); letter-spacing: .05em;
                       text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 900px) {
  .corridor { grid-template-columns: minmax(0,1fr); gap: var(--s4); }
  .corridor__list { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 420px) { .corridor__list { grid-template-columns: minmax(0,1fr); } }
/* Six flags need 176px on one line, which the narrow corridor cannot give,
   so they wrapped 5 + 1 and left Bahrain stranded. Cap the row at three. */
@media (max-width: 560px) { .corridor__flags { max-width: 90px; } }

/* ── FOOTER SOCIAL ────────────────────────────────────────────────────── */
.soc { display: flex; gap: var(--s3); align-items: center; }
.soc a { display: grid; place-items: center; width: 36px; height: 36px;
         border-radius: 10px; border: 1px solid #2E2448; color: var(--on-night-2);
         transition: background .16s, color .16s, border-color .16s; }
.soc a:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.soc .ico { width: 17px; height: 17px; }


/* ── DENSITY ──────────────────────────────────────────────────────────
   The client's note is that the reference "fits into about two page
   lengths". Measured, the reference image is 640x1600, which at 1440 wide
   is 3600px — four viewports at 900, not two. Nine mandated sections at
   readable type cannot be half that without deleting required content, so
   the target taken here is the REFERENCE'S OWN proportion, reached by
   tightening rhythm rather than shrinking type. No font-size is reduced
   anywhere in this block. */
@media (min-width: 1041px) {
  /* Measured first: 1,130px of a 4,900px page was section padding alone.
     Rhythm is where the height is, so rhythm is where it comes from. */
  .sec--ref   { padding: 0 0 var(--s4); }
  .svc__body  { padding: var(--s3) var(--s4) var(--s4); gap: 7px; }
  /* The badge hangs 21px below the photo (bottom:-21px on a 42px box), so a
     badged body has to keep that clearance plus a readable gap. The shorthand
     on the line above sets padding-top too and, being later in the file at
     equal specificity, was silently winning over .svc__body--badged — which
     put the service label 5px INSIDE the badge at this breakpoint. */
  .svc__body--badged { padding-top: calc(var(--s3) + 22px); }
  .svc__card .ph--card { aspect-ratio: 16 / 9; }
  .foot       { padding: var(--s6) 0 var(--s5); }

  /* The collage's big frame is the single tallest element on the page.
     Capped rather than reshaped, so the crop stays editorial. */
  .collage__big img       { aspect-ratio: 3 / 2; max-height: 420px; }
  .collage__stack .ph img { aspect-ratio: 16 / 9; max-height: 198px; }

  /* the referral note becomes a strip, not a band */
  .sec--ref .ref { padding: var(--s3) var(--s4); }
}

/* The closing band is dark; the ornament needs its own ink there or it
   vanishes into the ground. */
.sec--close.orn::before, .sec--close.orn::after {
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 13px,
    rgba(255,255,255,.07) 13px 14px, transparent 14px 27px);
  opacity: 1;
}


/* ══ FINAL CTA BANNER ═══════════════════════════════════════════════════
   One wide lifestyle frame with the closing line on top. The scrim is not
   decoration: white type has to stay legible over a photograph whose own
   brightness varies across the frame, and the sunset here is bright at the
   horizon. Gradient rather than flat so the sky keeps its colour. ════════ */
.ctab {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-xl);
  min-height: clamp(252px, 26vw, 392px);
  display: grid; place-items: center;
  padding: clamp(34px, 4.4vw, 64px) clamp(20px, 4vw, 56px);
  text-align: center;
}
.ctab > img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%;
}
.ctab::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,16,31,.26) 0%, rgba(20,16,31,.70) 100%);
}
.ctab__in { display: grid; gap: var(--s4); justify-items: center; max-width: 52ch; }
.ctab h2 { color: #fff; margin: 0; }
.ctab p  { color: rgba(255,255,255,.90); margin: 0; }
.ctab .btn { box-shadow: 0 10px 30px rgba(0,0,0,.30); }