/* ═══════════════════════════════════════════════════════════
   pages.css — inner pages.

   The home page carries the full cinematic treatment. These
   pages inherit the same palette and type but run calmer and
   denser, because they have to be read rather than admired.
   ═══════════════════════════════════════════════════════════ */

/* ── masthead ─────────────────────────────────────────────── */

.mast{
  padding:clamp(130px,17vh,210px) var(--pad) clamp(46px,6vw,80px);
  border-bottom:1px solid var(--line);
}
.mast__head{
  margin:14px 0 0;
  font-family:var(--display);
  /* one size on every page. the old 15ch cap is what pushed longer
     service names like "Mobile Application" onto a second line */
  font-size:clamp(30px,4.6vw,68px);
  line-height:.96;
  letter-spacing:-.035em;
}
.mast__lede{
  margin:clamp(20px,2.4vw,32px) 0 0;
  max-width:56ch;
  font-size:clamp(18px,1.6vw,26px);
  font-style:italic;
  color:rgba(232,227,217,.78);
}
.mast__back{
  display:inline-block;
  margin-bottom:18px;
  font-family:var(--util);
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--dim);
  transition:color .3s;
}
.mast__back:hover{ color:var(--bone); }

.mast__facts{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(28px,5vw,72px);
  margin:clamp(30px,4vw,52px) 0 0;
  padding-top:26px;
  border-top:1px solid var(--line);
}
.mast__facts dt{
  font-family:var(--util);
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--dim);
}
.mast__facts dd{
  margin:6px 0 0;
  font-family:var(--display);
  font-size:clamp(20px,2.2vw,30px);
  letter-spacing:-.02em;
}

/* ── prose ────────────────────────────────────────────────── */

.prose{ padding:clamp(56px,8vw,110px) var(--pad) 0; }
.prose__intro{
  margin:0;
  max-width:64ch;
  font-size:clamp(20px,2.1vw,30px);
  line-height:1.5;
  color:rgba(232,227,217,.86);
}

/* ── service cards grid (services.php + related) ──────────── */

.sgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr));
  gap:1px;
  margin:0 var(--pad);
  background:var(--line);
  border:1px solid var(--line);
}
.scard{
  position:relative;
  display:block;
  padding:clamp(28px,3vw,44px);
  background:var(--ink);
  transition:background .45s;
}
.scard:hover{ background:#0c0c0c; }

.scard__n{
  display:block;
  margin-bottom:22px;
  font-family:var(--util);
  font-size:11px;
  font-weight:600;
  letter-spacing:.2em;
  color:var(--dimmer);
}
.scard__name{
  margin:0 0 12px;
  font-family:var(--display);
  font-size:clamp(23px,2.4vw,34px);
  line-height:1.02;
  letter-spacing:-.03em;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.scard:hover .scard__name{ transform:translateX(8px); }

.scard__short{
  margin:0 0 26px;
  max-width:36ch;
  color:var(--dim);
  transition:color .45s;
}
.scard:hover .scard__short{ color:var(--bone); }

.scard__meta{
  display:block;
  font-family:var(--util);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dimmer);
}
.scard__go{
  position:absolute;
  right:clamp(28px,3vw,44px);
  bottom:clamp(28px,3vw,44px);
  font-size:22px;
  color:var(--dimmer);
  transition:color .4s, transform .4s cubic-bezier(.2,.8,.2,1);
}
.scard:hover .scard__go{ color:var(--bone); transform:translateX(7px); }

/* ── what's included ──────────────────────────────────────── */

.incl, .steps, .deliv, .values, .rel{ padding:clamp(70px,9vw,130px) 0 0; }

.incl__list{ margin:0; padding:0 var(--pad); }
.incl__row{
  display:grid;
  grid-template-columns:minmax(220px,.85fr) 1.5fr;
  gap:clamp(14px,4vw,64px);
  padding:clamp(20px,2.6vw,34px) 0;
  border-top:1px solid var(--line);
}
.incl__row:last-child{ border-bottom:1px solid var(--line); }
.incl__t{
  margin:0;
  font-family:var(--display);
  font-size:clamp(17px,1.7vw,24px);
  line-height:1.15;
  letter-spacing:-.02em;
}
.incl__d{ margin:0; max-width:60ch; color:var(--dim); }

@media (max-width:760px){
  .incl__row{ grid-template-columns:1fr; }
}

/* ── process steps ────────────────────────────────────────── */

.steps__list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  gap:1px;
  margin:0 var(--pad);
  padding:0;
  list-style:none;
  background:var(--line);
  border:1px solid var(--line);
}
.steps__item{ padding:clamp(26px,3vw,40px); background:var(--ink); }
.steps__n{
  display:block;
  margin-bottom:20px;
  font-family:var(--util);
  font-size:11px;
  font-weight:600;
  letter-spacing:.2em;
  color:var(--dimmer);
}
.steps__t{
  margin:0 0 10px;
  font-family:var(--display);
  font-size:clamp(19px,1.9vw,26px);
  letter-spacing:-.02em;
}
.steps__d{ margin:0; color:var(--dim); }

/* ── deliverables ─────────────────────────────────────────── */

.deliv__list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));
  gap:0 clamp(24px,4vw,64px);
  margin:0;
  padding:0 var(--pad);
  list-style:none;
}
.deliv__list li{
  padding:16px 0 16px 26px;
  border-bottom:1px solid var(--line);
  position:relative;
  color:rgba(232,227,217,.8);
}
.deliv__list li::before{
  content:"";
  position:absolute;
  left:0; top:26px;
  width:12px; height:1px;
  background:var(--dim);
}

/* ── call-to-action band ──────────────────────────────────── */

.band{
  margin:clamp(80px,10vw,150px) var(--pad) 0;
  padding:clamp(46px,6vw,86px);
  border:1px solid var(--line);
  text-align:center;
}
.band__q{
  margin:0;
  font-family:var(--display);
  font-size:clamp(25px,3.6vw,54px);
  line-height:1.02;
  letter-spacing:-.03em;
}
.band__a{
  margin:18px auto 0;
  max-width:52ch;
  color:var(--dim);
}
.band .btn{ margin-top:30px; }

/* ── related services ─────────────────────────────────────── */

.rel__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:1px;
  margin:0 var(--pad);
  background:var(--line);
  border:1px solid var(--line);
}

/* ── portfolio ────────────────────────────────────────────── */

.filters{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  padding:clamp(34px,4vw,54px) var(--pad) 0;
}
.chip{
  padding:10px 18px;
  border:1px solid var(--line);
  background:none;
  color:var(--dim);
  font-family:var(--util);
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .3s, color .3s, border-color .3s;
}
.chip:hover{ color:var(--bone); border-color:var(--dim); }
.chip.is-on{ background:var(--bone); color:var(--ink); border-color:var(--bone); }

.pgrid{
  display:grid;
  gap:clamp(46px,6vw,96px);
  padding:clamp(40px,5vw,70px) var(--pad) 0;
}
.pcase{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:clamp(24px,3.5vw,60px);
  align-items:center;
  scroll-margin-top:110px;
}
.pcase:nth-child(even) .pcase__media{ order:2; }
.pcase[hidden]{ display:none; }

.pcase__media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:#050505;
  border:1px solid var(--line);
}
.pcase__media .slot__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.pcase__meta{
  display:flex;
  gap:18px;
  margin:0 0 12px;
  font-family:var(--util);
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dim);
}
.pcase__client{
  margin:0 0 8px;
  font-family:var(--display);
  font-size:clamp(28px,3.6vw,54px);
  line-height:1;
  letter-spacing:-.03em;
}
.pcase__head{
  margin:0 0 16px;
  font-size:clamp(18px,1.7vw,25px);
  font-style:italic;
  color:var(--bone);
}
.pcase__sum{ margin:0 0 26px; max-width:52ch; color:var(--dim); }

.pcase__res{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(20px,3vw,44px);
  margin:0 0 22px;
  padding:20px 0 0;
  border-top:1px solid var(--line);
  list-style:none;
}
.pcase__res b{
  display:block;
  font-family:var(--display);
  font-size:clamp(19px,2.1vw,28px);
  font-weight:400;
  letter-spacing:-.02em;
}
.pcase__res span{
  font-family:var(--util);
  font-size:10px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dim);
}

.pcase__svc{ margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.pcase__svc a{
  padding:7px 14px;
  border:1px solid var(--line);
  font-family:var(--util);
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dim);
  transition:color .3s, border-color .3s;
}
.pcase__svc a:hover{ color:var(--bone); border-color:var(--dim); }

.pgrid__empty{
  padding:60px var(--pad);
  text-align:center;
  font-style:italic;
  color:var(--dim);
}

@media (max-width:860px){
  .pcase{ grid-template-columns:1fr; }
  .pcase:nth-child(even) .pcase__media{ order:0; }
}

/* ── about values ─────────────────────────────────────────── */

.studio--page{ min-height:0; }

.values__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));
  gap:1px;
  margin:0 var(--pad);
  background:var(--line);
  border:1px solid var(--line);
}
.value{ padding:clamp(28px,3vw,44px); background:var(--ink); }
.value__t{
  margin:0 0 12px;
  font-family:var(--display);
  font-size:clamp(19px,2vw,27px);
  letter-spacing:-.02em;
}
.value__d{ margin:0; color:var(--dim); }

/* ── packages ─────────────────────────────────────────────── */

.tiers{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:1px;
  margin:clamp(46px,6vw,86px) var(--pad) 0;
  background:var(--line);
  border:1px solid var(--line);
}
.tier{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:clamp(30px,3.2vw,48px);
  background:var(--ink);
}
.tier--featured{ background:#0c0c0c; }
.tier__flag{
  position:absolute;
  top:0; right:0;
  padding:8px 16px;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--util);
  font-size:10px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.tier__name{
  margin:0 0 14px;
  font-family:var(--display);
  font-size:clamp(26px,3vw,40px);
  letter-spacing:-.03em;
}
.tier__price{
  margin:0;
  font-family:var(--display);
  font-size:clamp(30px,3.6vw,50px);
  line-height:1;
  letter-spacing:-.035em;
}
.tier__note{
  margin:8px 0 0;
  font-family:var(--util);
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dim);
}
.tier__best{
  margin:22px 0 0;
  padding-top:22px;
  border-top:1px solid var(--line);
  font-style:italic;
  color:rgba(232,227,217,.8);
}
.tier__list{
  margin:22px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:11px;
}
.tier__list li{
  position:relative;
  padding-left:24px;
  color:rgba(232,227,217,.82);
}
.tier__list li::before{
  content:"";
  position:absolute;
  left:0; top:.72em;
  width:11px; height:1px;
  background:var(--dim);
}
.tier__list--no li{ color:var(--dimmer); text-decoration:line-through; }

/* margin-top:auto pins the CTA to the bottom so all three tiers
   line up regardless of how many rows each one lists */
.tier__list:last-of-type{ margin-bottom:34px; }
.tier .btn{ margin-top:auto; text-align:center; }

/* ── contact ──────────────────────────────────────────────── */

.cwrap{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:clamp(36px,6vw,110px);
  padding:clamp(50px,6vw,90px) var(--pad) 0;
}

.cform{ display:grid; gap:26px; }

.field{ display:grid; gap:9px; }
.field label,
.field legend{
  font-family:var(--util);
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--dim);
  padding:0;
}
.field .opt{ text-transform:none; letter-spacing:.04em; color:var(--dimmer); }

.field input,
.field select,
.field textarea{
  width:100%;
  padding:15px 16px;
  background:#0a0a0a;
  border:1px solid var(--line);
  color:var(--bone);
  font-family:var(--body);
  font-size:17px;
  transition:border-color .3s, background .3s;
}
.field textarea{ resize:vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--bone);
  background:#0e0e0e;
}
.field input.is-bad,
.field textarea.is-bad{ border-color:#a8443c; }

.field__err{
  font-family:var(--util);
  font-size:11px;
  letter-spacing:.06em;
  color:#d0655c;
  min-height:1em;
}

.field--set{ border:0; margin:0; padding:0; }
.checks{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));
  gap:10px;
  margin-top:4px;
}
.check{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--line);
  cursor:pointer;
  transition:border-color .3s, background .3s;
}
.check:hover{ border-color:var(--dim); }
.check input{ width:15px; height:15px; accent-color:#c8a44d; flex:0 0 auto; }
.check span{
  font-family:var(--util);
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--dim);
}
.check:has(input:checked){ border-color:var(--bone); }
.check:has(input:checked) span{ color:var(--bone); }

.cform__note{
  margin:0;
  min-height:1.4em;
  font-style:italic;
  color:var(--dim);
}
.cform__note.is-good{ color:var(--bone); }

.cinfo{ display:grid; gap:30px; align-content:start; }
.cinfo__block p{ margin:8px 0 0; color:var(--dim); }
.cinfo__block a{ color:var(--dim); transition:color .3s; }
.cinfo__block a:hover{ color:var(--bone); }
.cinfo__mail{
  display:inline-block;
  max-width:100%;
  margin-top:8px;
  font-family:var(--display);
  font-size:clamp(15px,1.3vw,19px);
  letter-spacing:-.01em;
  color:var(--bone) !important;
  white-space:nowrap;
  overflow-wrap:normal;
}

@media (max-width:860px){
  .cwrap{ grid-template-columns:1fr; }
}

/* ── inner pages end flush against the footer ─────────────── */

main > section:last-child{ padding-bottom:clamp(80px,10vw,150px); }

/* ── service banner: full-bleed image behind the type ────── */

.mast--service,
.mast--shot{
  position:relative;
  overflow:hidden;
}

.mast__media{ position:absolute; inset:0; z-index:0; }
.mast__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
/* same idea as the studio veil: opaque where the type sits, sheer on
   the right so the picture is only ever a backdrop, never competition */
.mast__veil{
  position:absolute; inset:0;
  background:linear-gradient(100deg,
    rgba(0,0,0,.95) 0%,
    rgba(0,0,0,.88) 38%,
    rgba(0,0,0,.45) 100%);
}

.mast__copy{
  position:relative;
  z-index:2;
  max-width:720px;
}

@media (max-width:700px){
  /* the picture loses the room to breathe, so lean harder on the veil */
  .mast__veil{ background:rgba(0,0,0,.86); }
}

/* a service name is short — it should never break onto two lines */
@media (min-width:900px){
  .mast--service .mast__head{ white-space:nowrap; }
}

/* ── packages: service tabs ───────────────────────────────── */

.filters--tabs{
  padding-bottom:clamp(10px,1.5vw,18px);
}
/* the studio-wide set stays visually distinct from the eight services,
   but must not out-specify .chip.is-on or the active chip goes blank */
.filters--tabs .chip[data-pack="all"]:not(.is-on){
  border-color:var(--dimmer);
  color:var(--bone);
}
.tiers[hidden]{ display:none; }

/* a masthead carrying a shot gets a wider column, so the headline has
   room to sit on one line instead of being broken in half */
.mast--shot .mast__copy{ max-width:min(1120px,78vw); }

/* ── case study (one project) ─────────────────────────────── */

.pcase__more{ margin-top:clamp(20px,2.4vw,30px); }

.csfacts{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(26px,5vw,80px);
  /* the prose above ends tight against this row without its own top rule */
  margin-top:clamp(30px,4vw,52px);
  padding:clamp(30px,4vw,52px) var(--pad) clamp(34px,4vw,54px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.csfacts dt{
  font-family:var(--util);
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--dim);
}
.csfacts dd{
  margin:8px 0 0;
  font-size:clamp(15px,1.2vw,19px);
  max-width:34ch;
}

.csparts{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1px;
  background:var(--line);
  border-bottom:1px solid var(--line);
}
.cspart{
  padding:clamp(34px,4vw,64px) var(--pad);
  background:var(--ink);
}
.cspart .label{ color:var(--gold); }
.cspart p{
  margin:16px 0 0;
  max-width:58ch;
  font-size:clamp(16px,1.35vw,21px);
  color:rgba(232,227,217,.82);
}

.csres{ padding:clamp(60px,8vh,110px) var(--pad); }
.csres__list{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(30px,6vw,100px);
  margin:clamp(28px,4vw,48px) 0 0;
  list-style:none;
}
.csres__list b{
  display:block;
  font-family:var(--display);
  font-size:clamp(34px,5vw,72px);
  line-height:1;
  letter-spacing:-.03em;
}
.csres__list span{
  display:block;
  margin-top:10px;
  font-family:var(--util);
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--dim);
}

.csnext{ padding:0 var(--pad) clamp(60px,8vh,110px); }
.csnext__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(20px,2.5vw,34px);
  margin-top:clamp(26px,3vw,44px);
}
.csnext__media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  margin-bottom:16px;
}
.csnext__card .pvisual__img{ transition:transform 1s cubic-bezier(.2,.8,.2,1); }
.csnext__card:hover .pvisual__img{ transform:scale(1.04); }
.csnext__name{
  font-family:var(--display);
  font-size:clamp(20px,1.9vw,28px);
  letter-spacing:-.02em;
}
.csnext__head{
  margin:6px 0 0;
  font-style:italic;
  color:var(--dim);
}

@media (min-width:820px){
  .csparts{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .csnext__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* ── the bot decoy ────────────────────────────────────────────
   Not display:none — some bots skip hidden fields. This keeps it
   in the layout, off screen, and out of the tab order. */

.trap{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}

/* ═══ CONFIRMATION MODAL ══════════════════════════════════
   z-index sits on the site's existing scale:
     45 mobile menu · 50 nav · 60 grain · 70 MODAL · 80 cursor
   so the modal covers the grain and the bar, and the custom
   cursor still draws on top of it.
   ═══════════════════════════════════════════════════════════ */

.modal{
  position:fixed;
  inset:0;
  z-index:70;
  display:grid;
  place-items:center;
  padding:var(--pad);
}
.modal[hidden]{ display:none; }

.modal__scrim{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  opacity:0;
  transition:opacity .22s ease-out;
}

.modal__panel{
  position:relative;
  width:min(520px,100%);
  max-height:calc(100dvh - var(--pad) * 2);
  overflow-y:auto;
  overscroll-behavior:contain;   /* scrolling the panel must not drag the page */
  padding:clamp(28px,4vw,46px);
  background:#080808;
  border:1px solid var(--line);
  box-shadow:0 40px 120px rgba(0,0,0,.9);
  text-align:center;
  /* only transform + opacity animate, so the panel never triggers
     a layout pass while it is moving */
  opacity:0;
  transform:translateY(14px) scale(.985);
  transition:opacity .22s ease-out, transform .22s cubic-bezier(.2,.8,.2,1);
}

.modal.is-open .modal__scrim{ opacity:1; }
.modal.is-open .modal__panel{ opacity:1; transform:none; }

/* exits are quicker than entrances — the decision is already made */
.modal.is-closing .modal__scrim{ transition-duration:.16s; transition-timing-function:ease-in; opacity:0; }
.modal.is-closing .modal__panel{
  transition-duration:.16s;
  transition-timing-function:ease-in;
  opacity:0;
  transform:translateY(8px) scale(.99);
}

/* ── the seal ─────────────────────────────────────────────── */

.modal__seal{
  width:clamp(52px,7vw,64px);
  margin:0 auto clamp(22px,3vw,30px);
}
.modal__seal svg{
  width:100%; height:auto;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.modal__ring{
  stroke:rgba(200,164,77,.34);
  stroke-width:1.5;
}
.modal__tick{
  stroke:var(--gold);
  stroke-width:3;
  stroke-dasharray:40;
  stroke-dashoffset:40;
}
.modal.is-open .modal__tick{
  animation:tick .38s cubic-bezier(.2,.8,.2,1) .12s forwards;
}
@keyframes tick{ to{ stroke-dashoffset:0; } }

/* ── copy ─────────────────────────────────────────────────── */

.modal__eyebrow{ color:var(--gold); }

.modal__head{
  margin:12px 0 0;
  font-family:var(--display);
  font-size:clamp(30px,4vw,44px);
  line-height:1;
  letter-spacing:-.035em;
}
.modal__body{
  margin:18px auto 0;
  max-width:42ch;
  color:rgba(232,227,217,.78);
}
.modal__meta{
  margin:24px 0 0;
  padding-top:22px;
  border-top:1px solid var(--line);
  font-family:var(--util);
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dim);
}
.modal__meta b{ color:var(--bone); font-weight:600; }

.modal__done{ margin-top:26px; }

/* ── the reach modal: contact details ─────────────────────────
   Every tone below was measured against the #080808 panel:
     gold          8.46:1   labels
     bone 82%     10.57:1   values
     bone 66%      7.04:1   supporting copy
   --dim (bone 44%) measures 3.61:1 and is deliberately not used
   here — it fails AA for anything at body size.
   ─────────────────────────────────────────────────────────── */

.modal__panel--wide{
  width:min(560px,100%);
  text-align:left;
}
.modal--reach .modal__head{
  margin-top:9px;
  /* a touch smaller than the confirmation modal's — this panel carries a
     list underneath it and has to clear a laptop viewport without scrolling */
  font-size:clamp(26px,3.2vw,38px);
}
.modal--reach .modal__body{
  margin:14px 0 0;
  max-width:46ch;
  color:rgba(232,227,217,.66);   /* 7.04:1 — comfortably past AA */
}

.reach__list{
  margin:clamp(20px,2.6vw,28px) 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line);
}
.reach__row{ border-bottom:1px solid var(--line); }

.reach__link{
  display:flex;
  align-items:center;
  gap:16px;
  /* the row is the target, not the text inside it, so it clears 44px
     comfortably at every size */
  min-height:56px;               /* still clears the 44px target with room */
  padding:12px 4px;
  color:inherit;
  transition:background .28s, padding-left .28s;
}
a.reach__link:hover,
a.reach__link:focus-visible{
  background:rgba(232,227,217,.05);
  padding-left:12px;
}
/* rows that are text rather than an action must not pretend otherwise */
.reach__link--static{ cursor:default; }

.reach__icon{
  flex:0 0 auto;
  width:21px; height:21px;
  fill:none;
  stroke:var(--gold);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.9;
}
a.reach__link:hover .reach__icon{ opacity:1; }

.reach__text{ display:block; min-width:0; }

.reach__label{
  display:block;
  margin-bottom:3px;
  font-family:var(--util);
  font-size:10px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
}
.reach__value{
  display:block;
  font-size:clamp(15px,1.25vw,17px);
  line-height:1.45;
  color:rgba(232,227,217,.82);
  overflow-wrap:anywhere;
}

.modal--reach .modal__done{ margin-top:clamp(20px,2.4vw,28px); }

/* Short laptop viewports: give back the vertical padding rather than make
   the panel scroll, which is the thing that reads as broken. */
@media (max-height:780px){
  .modal--reach .modal__panel{ padding:26px clamp(24px,4vw,40px); }
  .modal--reach .modal__head{ font-size:clamp(24px,2.8vw,32px); }
  .modal--reach .modal__body{ margin-top:11px; }
  .modal--reach .reach__list{ margin-top:18px; }
  .modal--reach .reach__link{ min-height:52px; padding:10px 4px; }
}

/* ── close ────────────────────────────────────────────────── */

.modal__close{
  position:absolute;
  top:8px; right:8px;
  width:44px; height:44px;      /* full touch target, not the glyph size */
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  color:var(--dim);
  transition:color .25s;
}
.modal__close:hover{ color:var(--bone); }
.modal__close svg{
  width:17px; height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
}

/* the page behind must not scroll while the panel is up */
body.is-modal{ overflow:hidden; }

/* ── submitting state ─────────────────────────────────────── */

.cform.is-sending{ opacity:.62; pointer-events:none; }

/* The word "Sending…" carries the meaning, so the spinner sits beside
   the label rather than replacing it. Under reduced motion it stops
   turning and the button still reads correctly. */
.btn.is-busy{
  color:var(--dim);
  border-color:var(--line);
}
.btn.is-busy::after{
  content:"";
  display:inline-block;
  width:12px; height:12px;
  margin-left:10px;
  vertical-align:-1px;
  border:1.5px solid rgba(232,227,217,.24);
  border-top-color:var(--bone);
  border-radius:50%;
  /* the one place an infinite animation belongs: a loading indicator */
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.cform__note.is-bad{ color:#d0655c; font-style:normal; }

/* the no-JS error list: same figures block, but the "number" is a
   field name and the colour says something is wrong */
.csres__list--errs{ gap:22px 60px; }
.csres__list--errs b{ font-size:clamp(19px,2vw,26px); color:#d0655c; }
.csres__list--errs span{ text-transform:none; letter-spacing:.02em; font-size:14px; }

/* motion is decoration here, never the message: the panel still
   appears, it simply does not travel */
@media (prefers-reduced-motion:reduce){
  .modal__scrim,
  .modal__panel{ transition:none; transform:none; }
  .modal__tick{ stroke-dashoffset:0; }
  .modal.is-open .modal__tick{ animation:none; }
}

/* ═══ MOBILE ══════════════════════════════════════════════ */

/* the 78vw cap exists to keep a headline off a wide photograph. On a
   phone there is no width to give away, so the column takes the lot */
@media (max-width:700px){
  .mast--shot .mast__copy{ max-width:100%; }
}

/* ── touch targets ────────────────────────────────────────── */

@media (hover:none), (pointer:coarse){
  .chip{ min-height:42px; padding:12px 18px; }

  .mast__back{ padding:12px 0; margin-bottom:8px; }

  .pcase__svc a{ padding:11px 14px; }

  .deliv__list li{ padding-top:14px; padding-bottom:14px; }

  .check{ min-height:48px; padding:13px 14px; }
  .check input{ width:19px; height:19px; }

  .cinfo__mail{ padding:11px 0; }
  .cinfo__block a{ display:inline-block; padding:8px 0; }
}

/* ── phones ───────────────────────────────────────────────── */

@media (max-width:640px){
  /* the band's own padding plus the page gutter left the copy in a
     column barely wider than half the screen */
  .band{ padding:clamp(30px,7vw,86px) clamp(22px,5vw,86px); }

  .filters{ gap:7px; }
  .chip{ letter-spacing:.12em; }

  .csfacts{ gap:22px; }
  .csfacts div{ flex:1 1 100%; }

  .csres__list{ gap:26px 30px; }
  .csres__list li{ flex:1 1 100%; }

  .tier{ padding:clamp(26px,6vw,48px); }
  .tier__flag{ font-size:9px; padding:7px 12px; }

  .pcase__res{ gap:18px 24px; }

  .cwrap{ gap:44px; }
  .cform{ gap:22px; }
}

/* ── landscape phones: the tall mastheads eat the whole screen ── */

@media (max-height:520px) and (orientation:landscape){
  .mast{ padding-top:clamp(104px,26vh,150px); }
  .hero__foot{ bottom:14px; }
}