/* =====================================================================
   INNER PAGES
   Loaded after style.css on every inner page. Reuses the homepage tokens
   (colours, type scale, buttons, cards) and adds page-level components.
   ===================================================================== */

/* ---------- active navigation ---------- */
.nav > li > a[aria-current="page"],.nav-drop.is-current > a{background:var(--surface)}
.mmenu nav a[aria-current="page"]{color:var(--accent)}

/* ---------- shared section heading (left title, right intro) ---------- */
.sec-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:end}
.sec-head .h2{margin-top:14px}
.sec-head .lead{margin:0;max-width:48ch}
.sec-head + *{margin-top:clamp(40px,5vw,72px)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.eyebrow::before{content:"";width:22px;height:1.5px;background:currentColor}

/* ---------- page hero ---------- */
.page-hero{position:relative;overflow:hidden;padding:clamp(150px,14vw,200px) 0 clamp(40px,5vw,72px)}
.page-hero .container{position:relative;z-index:1}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;padding:0;list-style:none;font-size:14px;color:var(--muted)}
.crumbs li + li::before{content:"/";margin-right:10px;color:var(--faint)}
.crumbs a{transition:color .3s}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink)}
.page-hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:end;margin-top:clamp(24px,3vw,36px)}
.page-title{font-weight:500;font-size:clamp(46px,7.2vw,70px);line-height:.96;letter-spacing:-.055em;margin:0 0 20px;text-wrap:balance}
.page-hero .lead{margin:0;max-width:42ch}
.page-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
/* hero with an enquiry card beside the copy */
.hero-sub{margin:16px 0 0;color:var(--muted);max-width:52ch;font-size:16.5px;line-height:1.6}
.hero-facts.is-trio{grid-template-columns:repeat(3,minmax(0,1fr))}
.hero-form{padding:clamp(24px,2.6vw,36px);border-radius:var(--r-lg);background:var(--white);box-shadow:0 40px 80px -42px rgba(2,2,30,.38),0 0 0 1px var(--line)}
.hero-form h2{margin:14px 0 0;font-size:clamp(21px,1.8vw,26px);font-weight:500;letter-spacing:-.03em}
.hero-form .form{gap:14px;margin-top:22px}
.hero-form .field textarea{min-height:92px}
.hero-form .form-error{margin-top:-4px}
.hero-form .button{width:100%;justify-content:space-between}
.hero-form .form-success h3{margin:0;font-size:clamp(22px,1.9vw,28px);font-weight:500;letter-spacing:-.03em}
.hero-form .form-success p{margin:12px 0 22px;font-size:15px}
/* On these heroes the breadcrumb sits inside the copy column rather than above
   the grid, so the enquiry card can start on the same line as it. The grid loses
   its top margin and the breadcrumb carries that gap instead, which keeps the
   copy column looking exactly as it did while the card moves up. */
.page-hero-grid.is-form{margin-top:0}
.page-hero-grid.is-form .crumbs{margin-bottom:clamp(24px,3vw,36px)}
@media (min-width:1025px){.page-hero-grid.is-form{align-items:start}}
.hero-media{position:relative;margin-top:clamp(44px,6vw,80px);border-radius:var(--r-lg);overflow:hidden;aspect-ratio:21/9;background:var(--surface);isolation:isolate}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(2,2,30,.35));pointer-events:none}
.hero-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(32px,4vw,56px);border-top:1px solid var(--line-strong)}
.hero-fact{padding:22px 24px 0 0}
.hero-fact + .hero-fact{padding-left:24px;border-left:1px solid var(--line-strong)}
.hero-fact b{display:block;font-size:clamp(28px,2.8vw,40px);font-weight:500;letter-spacing:-.04em;line-height:1}
.hero-fact > span{display:block;margin-top:8px;font-size:14px;color:var(--muted)}

/* ---------- split block (text + image) ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
/* The card is the shape of the picture itself — 3:2, which is what almost every
   image here is — so the image fills it edge to edge with nothing cropped and
   no surface left showing. The card is therefore shorter than a tall column of
   copy, and sits centred against it rather than stretching. */
.split-media{position:relative;min-width:0;max-width:100%;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/2;background:var(--surface)}
/* overflow:hidden above is not decoration — [data-parallax] images are scaled
   1.12 and slid vertically by pages.js, and the card is what clips them.
   min-height:0 stops the image's intrinsic height from overriding the ratio. */

/* Positioned, not just sized: a percentage height does not resolve against a
   box whose own height comes from aspect-ratio, so height:100% alone let the
   taller images (the 5:4 team photo) spill out of the card. */
.split-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.split .h2{margin-bottom:22px}
.split p{color:var(--muted);margin:0 0 16px;max-width:56ch}
/* text-led split: media grows to the height of the copy, and .is-rev flips the sides.
   Desktop only -- stacked layouts keep the copy first so the reading order stays sane. */
@media (min-width:1025px){
  .split.is-stretch{align-items:stretch}
  /* Top-aligned, not stretched: stretching would make the height definite, which
     overrides the ratio and crops the picture. Never swap this for a min-height
     either — a min-height alongside the ratio makes the ratio drive the width
     instead, and the card ends up overlapping the copy. Start rather than centre
     because pages.js walks the card down the slack below it as the section
     scrolls, so the top is where that travel begins. */
  .split .split-media{align-self:start}
  .split.is-rev .split-media{order:-1}
}

/* ---------- tick list ---------- */
.ticks{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}
.ticks li{position:relative;padding-left:30px;font-size:15.5px;line-height:1.45}
.ticks li::before{content:"";position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat}
.ticks.is-single{grid-template-columns:1fr}

/* ---------- service rows (category pages) ---------- */
.svc-rows{display:grid;gap:clamp(72px,9vw,140px)}
.svc-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:center;scroll-margin-top:120px}
.svc-row:nth-child(even) .svc-row-media{order:-1}
.svc-row-num{display:block;font:500 13px/1 var(--f-mono);letter-spacing:.14em;color:var(--accent)}
.svc-row h2{margin:16px 0 0;font-size:clamp(32px,3.6vw,52px);font-weight:500;line-height:1.04;letter-spacing:-.04em}
.svc-row p{margin:18px 0 0;color:var(--muted);max-width:52ch}
.svc-row .button{margin-top:30px}
.svc-row-media{position:relative;aspect-ratio:3/2;border-radius:var(--r-lg);overflow:hidden;background:var(--surface);box-shadow:0 40px 80px -48px rgba(2,2,30,.5)}
.svc-row-media img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform 1.2s var(--ease)}
.svc-row:hover .svc-row-media img{transform:scale(1.04)}
.svc-row-media .tag{position:absolute;left:16px;top:16px;z-index:1}
.tag {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding-inline: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 600;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    position: absolute;
    top: -10px;
}
.tag.is-dark{background:var(--ink);color:var(--white)}

/* ---------- services overview: category cards ---------- */
/* ---------- practices list (services page) ----------
   One row per practice: index, name, then the services inside it. */
.prac-list{display:grid;border-top:1px solid var(--line)}
.prac{display:grid;grid-template-columns:auto minmax(0,.85fr) minmax(0,1.4fr);gap:clamp(16px,2.6vw,44px);align-items:center;padding-block:clamp(26px,3vw,40px);border-bottom:1px solid var(--line)}
.prac-num{font:500 12px/1 var(--f-mono);letter-spacing:.16em;color:var(--faint)}
.prac-title{display:flex;align-items:center;gap:14px;margin:0;font-size:clamp(23px,2.3vw,34px);font-weight:600;line-height:1.08;letter-spacing:-.035em;text-transform:uppercase;text-wrap:balance}
.prac-title .orb{flex:none;width:28px;height:28px;box-shadow:none}
.prac-title .orb--pill{width:36px;height:21px}
.prac-body p{margin:0 0 20px;color:var(--muted);font-size:15.5px;line-height:1.6;max-width:60ch}
.prac-links{display:flex;flex-wrap:wrap;gap:10px 18px}
.prac-links a{position:relative;padding-bottom:5px;font-size:14.5px;font-weight:500;color:var(--ink-80);transition:color .35s}
.prac-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--accent);opacity:.3;transition:opacity .35s}
.prac-links a:hover{color:var(--accent)}
.prac-links a:hover::after{opacity:1}
@media (max-width:980px){
  .prac{grid-template-columns:auto minmax(0,1fr);gap:12px 18px;align-items:start}
  .prac-num{padding-top:8px}
  .prac-body{grid-column:2}
}

/* ---------- dark band (process, quotes) ---------- */
.band-dark{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-lg);background:var(--ink);color:var(--white);padding:clamp(48px,7vw,104px) clamp(22px,5vw,72px)}
.band-dark::before,.band-dark::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(90px);opacity:.55;pointer-events:none}
.band-dark::before{width:46%;aspect-ratio:1;left:-12%;top:-30%;background:#CC0000}
.band-dark::after{width:40%;aspect-ratio:1;right:-10%;bottom:-36%;background:#1B1F5E;opacity:.9}
.band-dark .label,.band-dark .lead{color:rgba(255,255,255,.66)}
.band-dark .eyebrow{color:#FF6B57}
.section-tight{padding-block:clamp(24px,3vw,40px)}

/* ---------- process steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(40px,5vw,72px)}
.step{position:relative;display:flex;flex-direction:column;gap:12px;min-height:250px;padding:28px;border-radius:var(--r);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:background-color .4s}
.step:hover{background:rgba(255,255,255,.1)}
.step-num{font:500 13px/1 var(--f-mono);letter-spacing:.14em;color:#FF6B57}
.step h3{margin:auto 0 0;font-size:22px;font-weight:500;letter-spacing:-.03em}
.step p{margin:0;font-size:15px;color:rgba(255,255,255,.66)}
.steps.is-light .step{background:var(--surface);box-shadow:none}
.steps.is-light .step:hover{background:var(--surface-2)}
.steps.is-light .step-num{color:var(--accent)}
.steps.is-light .step p{color:var(--muted)}

/* ---------- tech marquee chips ---------- */
.stack .mq-item{gap:12px;margin-right:12px;padding:12px 22px;border-radius:999px;background:var(--surface);color:var(--ink);font-size:clamp(16px,1.4vw,19px);font-weight:500}
.stack .mq-item i{width:8px;height:8px;opacity:1;background:var(--accent)}

/* ---------- engagement models ---------- */
.models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.model{display:flex;flex-direction:column;gap:16px;padding:clamp(26px,3vw,40px);border-radius:var(--r-lg);background:var(--surface)}
.model h3{margin:0;font-size:clamp(24px,2.2vw,27px);font-weight:500;letter-spacing:-.035em}
.model > p{margin:0;color:var(--muted)}
.model .ticks{grid-template-columns:1fr;margin-top:6px}
.model .button{margin-top:auto;align-self:flex-start}
.model.is-featured{background:var(--ink);color:var(--white)}
.model.is-featured > p{color:rgba(255,255,255,.66)}
.model.is-featured .tag{align-self:flex-start;background:var(--grad);color:var(--white)}

/* .is-pkg dresses the models grid up as plan cards: index, headline figure,
   a divided "what's included" list and a full-width action. */
.models.is-pkg{gap:clamp(12px,1.4vw,18px)}
/* Home page: the tab rail sits directly above the cards, so the open panel
   needs the gap the rail itself does not provide. The cards lift on hover,
   which needs a little room under them too. */
#home-packages .tabs{margin-top:clamp(28px,3.5vw,44px)}
#home-packages .models.is-pkg{margin-top:clamp(28px,3.5vw,48px);padding-bottom:10px}
.models.is-pkg .model{gap:0;box-shadow:0 0 0 1px var(--line);transition:transform .55s var(--ease),box-shadow .55s}
.models.is-pkg .model:hover{transform:translateY(-6px);box-shadow:0 36px 70px -40px rgba(2,2,30,.42),0 0 0 1px var(--line)}
.models.is-pkg .model.is-featured{box-shadow:0 34px 80px -38px rgba(2,2,30,.65)}
.models.is-pkg .model.is-featured:hover{box-shadow:0 46px 90px -40px rgba(2,2,30,.7)}
.pkg-num{font:500 12px/1 var(--f-mono);letter-spacing:.14em;color:var(--accent)}
.models.is-pkg .model h3{margin-top:16px}
.models.is-pkg .model > p{margin-top:12px}
.pkg-meta{margin-top:24px;padding-top:24px;border-top:1px solid var(--line-strong);display:grid;gap:6px}
.pkg-meta b{font-size:clamp(26px,2.4vw,34px);font-weight:500;letter-spacing:-.035em;line-height:1}
.pkg-meta span{font-size:13.5px;color:var(--muted)}
.pkg-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px}
.pkg-price b{font-size:clamp(30px,2.8vw,40px);letter-spacing:-.04em}
.pkg-price s{font-size:17px;color:var(--faint);text-decoration-thickness:1.5px}
.pkg-price em{font-style:normal;font:500 11.5px/1 var(--f-mono);letter-spacing:.1em;padding:6px 10px;border-radius:999px;background:var(--accent);color:var(--white)}
.pkg-label{margin-top:26px;font:500 12px/1 var(--f-mono);letter-spacing:.14em;color:var(--faint)}
.models.is-pkg .ticks{margin:16px 0 30px;gap:11px}
.models.is-pkg .model > .button{margin-top:auto;align-self:stretch;width:100%;justify-content:space-between}
.models.is-pkg .model.is-featured .pkg-num{color:var(--accent-light)}
.models.is-pkg .model.is-featured .pkg-meta{border-top-color:rgba(255,255,255,.2)}
.models.is-pkg .model.is-featured .pkg-meta span{color:rgba(255,255,255,.62)}
.models.is-pkg .model.is-featured .pkg-price s{color:rgba(255,255,255,.45)}
.models.is-pkg .model.is-featured .pkg-price em{background:rgba(255,255,255,.16);color:var(--white)}

/* six tiers across two rows of three; the feature lists scroll inside the card
   so every card in a row ends up the same height whatever the list length. */
.models.is-pkg{row-gap:clamp(14px,1.6vw,20px)}
/* Every card runs the identical vertical rhythm: the badge is taken out of flow and
   its slot is reserved on all six, so titles, prices and lists line up across the row
   whether a card carries a badge or not. */
.models.is-pkg .model{--pkg-pad:clamp(26px,3vw,40px);--pkg-badge-top:14px;position:relative;
  padding-top:calc(var(--pkg-badge-top) + 32px + 18px)}
.models.is-pkg .model .tag{position:absolute;left:var(--pkg-pad);top:var(--pkg-badge-top);margin:0;
  height:32px;padding-inline:16px;border-radius:999px;background:var(--grad);color:var(--white)}
.models.is-pkg .pkg-price b{font-size:clamp(26px,2.2vw,32px)}
/* The list scrolls inside the card, but once it hits an end the wheel is handed
   back to the page — otherwise the pointer sits in a dead zone three cards wide. */
.models.is-pkg .ticks{max-height:268px;overflow-y:auto;overscroll-behavior:auto;padding-right:10px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.models.is-pkg .ticks li{font-size:14.5px}
.models.is-pkg .ticks::-webkit-scrollbar{width:5px}
.models.is-pkg .ticks::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:999px}
.models.is-pkg .model.is-featured .ticks{scrollbar-color:rgba(255,255,255,.3) transparent}
.models.is-pkg .model.is-featured .ticks::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3)}

/* the corporate tier is an enquiry card rather than a price */
.pkg-form > p{margin:14px 0 0;color:rgba(255,255,255,.66);font-size:15px}
.pkg-form .form{gap:12px;margin-top:22px}
.pkg-form .field input,.pkg-form .field textarea{background:rgba(255,255,255,.08);color:var(--white)}
.pkg-form .field label{color:rgba(255,255,255,.6)}
.pkg-form .field input:focus,.pkg-form .field textarea:focus{background:rgba(255,255,255,.14);box-shadow:0 0 0 1.5px rgba(255,255,255,.5)}
.pkg-form .field textarea{min-height:86px}
.pkg-form .form-error{margin-top:-2px}
.pkg-form .form-success h3{margin:0;font-size:clamp(20px,1.7vw,24px);font-weight:500;letter-spacing:-.03em}
.pkg-form .form-success p{margin:12px 0 22px;color:rgba(255,255,255,.66);font-size:15px}

/* combo offer: pitch on the left, the bundled scope on the right */
.combo{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,2fr);gap:clamp(28px,4vw,56px);margin-top:clamp(40px,5vw,64px);padding:clamp(28px,3.4vw,48px);border-radius:var(--r-lg);background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.combo-head h3{margin:16px 0 0;font-size:clamp(26px,2.4vw,34px);font-weight:500;letter-spacing:-.035em}
.combo-head > p{margin:12px 0 0;color:var(--muted);max-width:40ch}
.combo-head .tag{position:static;top:auto}
.combo-head .pkg-price{margin-top:26px}
.combo-head .button{margin-top:26px}
.combo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,30px);align-content:start}
.combo-col h4{margin:0 0 12px;font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.combo-col .ticks{margin:0}
.combo-col .ticks li{font-size:14.5px}
.combo-col.is-wide{grid-column:1 / -1}
/* column flow rather than a grid: items pack tight instead of snapping to the
   tallest item in each row, which left ragged gaps between the two halves */
.combo-col.is-wide .ticks{display:block;columns:2;column-gap:clamp(20px,2.4vw,30px)}
.combo-col.is-wide .ticks li{break-inside:avoid;margin-bottom:11px}
/* trust points fill out the pitch column beside the long scope list */
.combo-points{list-style:none;margin:30px 0 0;padding:26px 0 0;border-top:1px solid var(--line-strong);display:grid;gap:16px}
.combo-points b{display:block;font-size:16px;font-weight:500;letter-spacing:-.015em}
.combo-points span{display:block;margin-top:2px;font-size:14px;color:var(--muted)}
.combo-call{margin:26px 0 0;font-size:14.5px;color:var(--muted)}
.combo-call a{color:var(--ink);font-weight:500}
.combo-call a:hover{color:var(--accent)}
@media (max-width:1024px){
  .combo{grid-template-columns:1fr}
  .combo-grid{grid-template-columns:1fr}
  .combo-col.is-wide .ticks{columns:1}
}
/* stacked on a phone the combo sits right under the corporate card, so it needs
   more breathing room than the desktop rhythm gives it */
@media (max-width:700px){
  .combo{margin-top:56px}
}
.models.is-pkg .model.is-featured .pkg-label{color:rgba(255,255,255,.5)}

/* ---------- portfolio ---------- */
.filters{display:flex;flex-wrap:wrap;gap:6px;padding:6px;border-radius:999px;background:var(--surface);width:max-content;max-width:100%}
.filters button{height:44px;padding-inline:20px;border-radius:999px;font-size:15px;font-weight:500;color:var(--muted);transition:background-color .35s,color .35s,box-shadow .35s}
.filters button:hover{color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--white);color:var(--ink);box-shadow:0 6px 16px -8px rgba(2,2,30,.25)}
.filters button small{margin-left:6px;font:500 11px/1 var(--f-mono);color:var(--faint)}
.work-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.work-count{font-size:14px;color:var(--muted)}
.work-grid{display:grid;grid-auto-flow:dense;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(14px,1.6vw,20px);margin-top:clamp(28px,3vw,44px)}
.work-card{display:block;min-width:0}
.work-card[hidden]{display:none}
.work-card.is-wide{grid-column:span 2}
.work-shot{position:relative;display:block;width:100%;aspect-ratio:16/11;border-radius:var(--r);overflow:hidden;background:var(--surface);box-shadow:0 0 0 1px var(--line);transition:box-shadow .5s}
.work-card.is-wide .work-shot{aspect-ratio:33/11}
.work-shot img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:top center;transition:transform var(--dur,5s) cubic-bezier(.45,0,.25,1)}
.work-shot img.is-full{height:auto;object-fit:fill}
.work-card:hover .work-shot{box-shadow:0 40px 70px -40px rgba(2,2,30,.45),0 0 0 1px var(--line)}
.work-card:hover .work-shot img.is-full{transform:translateY(calc(-1 * var(--scroll,0px)))}
.work-shot .tag{position:absolute;left:14px;top:14px;z-index:1}
.work-shot .work-hint{position:absolute;right:14px;bottom:14px;z-index:1;display:inline-flex;align-items:center;gap:8px;height:34px;padding-inline:14px;border-radius:999px;background:var(--ink);color:var(--white);font-size:12.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--ease)}
.work-card:hover .work-hint,.work-card:focus-visible .work-hint{opacity:1;transform:none}
.work-meta{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:16px}
.work-meta h3{margin:0;font-size:clamp(18px,1.5vw,21px);font-weight:500;letter-spacing:-.02em;line-height:1.25}
.work-meta span{flex:none;font-size:14px;color:var(--muted)}
.work-empty{margin-top:40px;color:var(--muted)}

/* lightbox */
.modal-shot .modal-panel{width:min(1040px,100%);padding:0;background:var(--white);overflow:hidden;display:flex;flex-direction:column}
.shot-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px 16px 24px;border-bottom:1px solid var(--line)}
.shot-head h3{margin:0;font-size:18px;font-weight:600;letter-spacing:-.02em}
.shot-head span{font-size:14px;color:var(--muted)}
.shot-head .modal-close{position:static}
.shot-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;background:var(--surface)}
.modal-shot .modal-panel{height:calc(100dvh - 32px);max-height:calc(100dvh - 32px)}
.shot-scroll img{display:block;width:100%;height:auto}

/* ---------- blog ---------- */
.post-featured{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;padding:12px;border-radius:var(--r-lg);background:var(--surface);transition:background-color .45s,box-shadow .45s}
.post-featured:hover{background:var(--white);box-shadow:0 40px 80px -40px rgba(2,2,30,.3),0 0 0 1px var(--line)}
.post-featured .post-media{aspect-ratio:16/10;border-radius:calc(var(--r-lg) - 10px)}
.post-featured .post-body{display:block;padding:clamp(12px,2vw,28px) clamp(12px,2vw,28px) clamp(12px,2vw,28px) 0}
.post-featured h2{margin:16px 0 0;font-size:clamp(28px,3vw,44px);font-weight:500;line-height:1.08;letter-spacing:-.04em}
.post-featured p{margin:16px 0 0;color:var(--muted)}
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,48px) clamp(14px,1.6vw,20px);margin-top:clamp(36px,4vw,56px)}
.post-card{display:flex;flex-direction:column;min-width:0}
.post-card[hidden]{display:none}
.post-media{display:block;position:relative;aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;background:var(--surface)}
.post-media img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform 1.2s var(--ease)}
.post-card:hover .post-media img,.post-featured:hover .post-media img{transform:scale(1.05)}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:18px;font-size:13.5px;color:var(--muted)}
.post-featured .post-meta{margin-top:0}
.post-meta .tag{height:28px;background:var(--white);box-shadow:0 0 0 1px var(--line)}
.post-meta .tag.is-dark{background:var(--ink);color:var(--white);box-shadow:none}
.post-card h3{margin:12px 0 0;font-size:clamp(20px,1.7vw,24px);font-weight:500;line-height:1.2;letter-spacing:-.03em;transition:color .3s}
.post-card:hover h3{color:var(--accent)}
.post-card p{margin:10px 0 0;font-size:15px;color:var(--muted)}
.read-more{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.read-more .arrow{width:30px;height:30px;background:var(--ink);color:var(--white)}
.read-more .arrow svg{width:13px;height:13px}
.newsletter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.newsletter form{display:flex;gap:8px;padding:6px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.newsletter input{flex:1;min-width:0;height:52px;padding-inline:22px;border:0;border-radius:999px;background:transparent;color:var(--white);font:inherit;font-size:16px}
.newsletter input::placeholder{color:rgba(255,255,255,.5)}
.newsletter input:focus{outline:none}
.newsletter-note{margin:12px 0 0;padding-left:22px;font-size:13.5px;color:rgba(255,255,255,.6);min-height:1.4em}

/* ---------- article ---------- */
.article-head{max-width:920px}
.article-head .page-title{font-size:clamp(40px,5.6vw,80px)}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:28px;font-size:14.5px;color:var(--muted)}
.article-author{display:flex;align-items:center;gap:12px;color:var(--ink);font-weight:500}
.article-author .ava{width:42px;height:42px;font-size:12px}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(40px,6vw,96px);align-items:start}
.toc{position:sticky;top:120px;padding:26px;border-radius:var(--r);background:var(--surface)}
.toc b{display:block;margin-bottom:12px;font-size:14px;font-weight:600}
.toc ol{margin:0;padding:0;list-style:none;display:grid;gap:4px;counter-reset:toc}
.toc a{display:flex;gap:10px;padding:6px 0;font-size:14.5px;color:var(--muted);transition:color .3s}
.toc a::before{counter-increment:toc;content:counter(toc,decimal-leading-zero);font:500 12px/1.7 var(--f-mono);color:var(--faint)}
.toc a:hover,.toc a.is-active{color:var(--ink)}
.toc a.is-active::before{color:var(--accent)}
.toc .button{margin-top:20px;width:100%;justify-content:space-between}
.prose{max-width:720px;font-size:clamp(17px,1.25vw,19px);line-height:1.7;color:var(--ink-80)}
.prose > :first-child{margin-top:0}
.prose h2{margin:2.2em 0 .6em;font-size:clamp(26px,2.4vw,34px);font-weight:500;line-height:1.15;letter-spacing:-.035em;color:var(--ink);scroll-margin-top:120px}
.prose h3{margin:1.8em 0 .5em;font-size:clamp(20px,1.7vw,24px);font-weight:500;letter-spacing:-.025em;color:var(--ink)}
.prose p{margin:0 0 1.1em}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.3em}
.prose li{margin-bottom:.5em}
.prose li::marker{color:var(--accent)}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose .share a,.prose .read-more{color:var(--ink);text-decoration:none}
.prose .share a:hover{color:var(--white)}
.prose strong{color:var(--ink);font-weight:600}
.prose blockquote{margin:1.8em 0;padding:4px 0 4px 26px;border-left:3px solid var(--accent);font-size:1.15em;line-height:1.5;color:var(--ink);font-weight:500;letter-spacing:-.015em}
.prose figure{margin:2em 0}
.prose figure img{display:block;width:100%;height:auto;border-radius:var(--r)}
.prose figcaption{margin-top:10px;font-size:14px;color:var(--muted)}
.callout{margin:1.8em 0;padding:24px 26px;border-radius:var(--r);background:var(--surface);font-size:16px}
.callout b{display:block;margin-bottom:6px;color:var(--ink)}
.article-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;max-width:720px;margin-top:48px;padding-top:28px;border-top:1px solid var(--line-strong)}
.share{display:flex;flex-wrap:wrap;gap:8px}
.share a,.share button{height:40px;padding-inline:16px;border-radius:999px;background:var(--surface);display:inline-flex;align-items:center;font-size:14px;font-weight:500;transition:background-color .3s,color .3s}
.share a:hover,.share button:hover{background:var(--ink);color:var(--white)}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.contact-card{padding:clamp(24px,4vw,48px);border-radius:var(--r-lg);background:var(--white);box-shadow:0 40px 90px -50px rgba(2,2,30,.4),0 0 0 1px var(--line)}
.contact-card .h2{font-size:clamp(28px,3vw,42px)}
.contact-card .form{margin-top:26px}
.contact-card .form-row{grid-template-columns:repeat(2,minmax(0,1fr))}
.info-list{display:grid;gap:12px}
.info{display:flex;gap:18px;align-items:flex-start;padding:24px;border-radius:var(--r);background:var(--surface);transition:background-color .4s}
a.info:hover{background:var(--surface-2)}
.info .info-ico{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--ink);color:var(--white)}
.info-ico svg{width:20px;height:20px}
.info span{display:block;font-size:14px;color:var(--muted)}
.info b{display:block;margin-top:4px;font-size:clamp(17px,1.4vw,20px);font-weight:500;letter-spacing:-.02em;word-break:break-word}

/* ---------- closing CTA band ---------- */
.cta-band{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-lg);background:var(--ink);color:var(--white);text-align:center;padding:clamp(56px,8vw,120px) clamp(22px,5vw,80px)}
.cta-band::before,.cta-band::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(90px);pointer-events:none;animation:ctaFloat 14s ease-in-out infinite alternate}
.cta-band::before{width:48%;aspect-ratio:1;left:-8%;top:-40%;background:#CC0000;opacity:.6}
.cta-band::after{width:44%;aspect-ratio:1;right:-8%;bottom:-46%;background:#FF4B2B;opacity:.35;animation-delay:-6s}
@keyframes ctaFloat{to{transform:translate(8%,10%) scale(1.1)}}
.cta-band .h2{max-width:900px;margin-inline:auto}
.cta-band .lead{color:rgba(255,255,255,.68)}
.cta-band .discuss-actions{margin-top:36px}
.cta-band .discuss-contact{color:rgba(255,255,255,.62)}
.cta-band .discuss-contact a:hover{color:var(--white)}
.is-ghost{background:rgba(255,255,255,.08);color:var(--white);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.is-ghost .arrow{background:var(--white);color:var(--ink)}
.is-ghost .button__bg{background:rgba(255,255,255,.14)}
.page-end{padding-bottom:clamp(64px,8vw,120px)}

/* ---------- helpers ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.center{text-align:center}
.mt-0{margin-top:0}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1100px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .article-layout{grid-template-columns:1fr}
  .toc{position:static;order:-1}
  .toc ol{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
}
@media (max-width:1024px){
  .page-hero-grid,.sec-head,.split,.newsletter{grid-template-columns:1fr;align-items:start}

  .svc-row{grid-template-columns:1fr;gap:28px}
  .svc-row:nth-child(even) .svc-row-media{order:0}
  .svc-row-media{order:-1}
  .work-grid,.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .work-card.is-wide{grid-column:span 2}
  .work-card.is-wide .work-shot{aspect-ratio:16/8}
  .models{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .post-featured{grid-template-columns:1fr}
  .post-featured .post-body{padding:8px 12px 16px}
  .hero-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-fact:nth-child(3){padding-left:0;border-left:0}
  .hero-fact:nth-child(n+3){padding-top:22px;margin-top:22px;border-top:1px solid var(--line-strong)}
}
@media (max-width:700px){
  .page-hero{padding-top:124px}
  .hero-media{aspect-ratio:4/3;border-radius:var(--r)}
  .page-hero-actions{flex-direction:column;align-items:stretch;max-width:360px}
  .page-hero-actions .button{justify-content:space-between}
  .ticks{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .step{min-height:0}
  .work-grid,.post-grid{grid-template-columns:1fr}
  .work-card.is-wide{grid-column:auto}
  .work-card.is-wide .work-shot{aspect-ratio:16/11}
  .filters{border-radius:22px}
  .filters button{height:40px;padding-inline:16px;font-size:14px}
  .contact-card .form-row{grid-template-columns:1fr}
  .toc ol{grid-template-columns:1fr}
  .newsletter form{flex-direction:column;border-radius:24px;padding:8px}
  .newsletter form .button{justify-content:space-between}
  .newsletter-note{padding-left:4px}
  .band-dark,.cta-band{border-radius:var(--r)}
  .cta-band .discuss-actions{max-width:none}
  .modal-shot .modal-panel{border-radius:16px}
  .split-media{aspect-ratio:3/2;border-radius:var(--r)}
}
@media (max-width:420px){
  .hero-fact,.hero-fact + .hero-fact{padding-right:12px}
  .hero-fact + .hero-fact{padding-left:16px}
  .hero-fact:nth-child(3){padding-left:0}
}
@media (hover:none){
  .work-shot .work-hint{opacity:1;transform:none}
}

/* ---------- services hero: practice strip ---------- */
.hero-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1vw,14px);margin-top:clamp(44px,6vw,80px);padding-bottom:40px}
.strip-tile{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;background:var(--ink);isolation:isolate;box-shadow:0 30px 60px -36px rgba(2,2,30,.5)}
.strip-tile:nth-child(even){transform:translateY(40px)}
.strip-tile img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform 1.2s var(--ease)}
.strip-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(2,2,30,.82));transition:opacity .5s}
.strip-tile > span{position:absolute;left:20px;right:20px;bottom:18px;z-index:1;color:var(--white);font-size:clamp(18px,1.7vw,24px);font-weight:500;letter-spacing:-.03em;line-height:1.15}
.strip-tile small{display:block;margin-bottom:6px;font:500 11.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.strip-tile:hover img{transform:scale(1.06)}
@media (max-width:860px){
  .hero-strip{grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:0}
  .strip-tile{aspect-ratio:4/5}
  .strip-tile:nth-child(even){transform:none}
}

/* Five package cards leave two orphans on the second row. A six-column track with
   each card spanning two keeps the card width identical and lets the pair centre. */
@media (min-width:1025px){
  .models.is-pkg.is-5{grid-template-columns:repeat(6,minmax(0,1fr))}
  .models.is-pkg.is-5 > .model{grid-column:span 2}
  .models.is-pkg.is-5 > .model:nth-child(4){grid-column:2 / span 2}
}
/* ── Reviews page ─────────────────────────────────────────────────────────
   The homepage review card exactly as it is, three to a row in a grid instead
   of a drag slider. */
/* 1fr rows make every row as tall as the tallest, so all cards match */
.rv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:12px}
.rv-grid .review{transition:background-color .45s,box-shadow .45s,transform .6s var(--ease)}
.rv-grid .review:hover{background:var(--white);box-shadow:0 30px 60px -40px rgba(2,2,30,.45);transform:translateY(-4px)}
.stars i{font-style:normal;color:var(--faint)}

@media (max-width:1024px){
  .rv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  /* one per row: matching every card to the longest one just adds dead space */
  .rv-grid{grid-template-columns:1fr;grid-auto-rows:auto}
  .rv-grid .review{min-height:0;padding:24px}
}
/* Reviews hero: headline keeps the same column width as every other page hero,
   with the verification badge sitting beside it and the paragraph underneath. */
.rv-hero{margin-top:clamp(24px,3vw,36px)}
.rv-hero-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:end}
.rv-hero-top .page-title{margin:0}
.rv-hero .lead{max-width:56ch;margin-top:clamp(20px,2.4vw,28px)}
.rv-verified{justify-self:start;display:inline-block;line-height:0;transition:opacity .35s,transform .5s var(--ease)}
.rv-verified:hover{opacity:.75;transform:translateY(-2px)}
.rv-verified img{width:min(100%,clamp(340px,32vw,460px));height:auto}
@media (max-width:900px){
  .rv-hero-top{grid-template-columns:1fr;gap:24px;align-items:start}
  .rv-verified img{width:min(320px,78vw)}
}
/* ── Legal pages (privacy policy, terms) ──────────────────────────────────
   A single readable column of clauses, set in the page tokens rather than
   the full-width grids the service pages use. */
.legal-hero{margin-top:clamp(24px,3vw,36px)}
.legal-hero .page-title{margin:16px 0 0}
.page-title.is-sm{font-size:clamp(30px,3.8vw,48px);line-height:1.08;letter-spacing:-.04em;max-width:22ch}
.legal-body{max-width:80ch}
.clause + .clause{margin-top:clamp(34px,4vw,52px);padding-top:clamp(34px,4vw,52px);border-top:1px solid var(--line)}
.clause h2{margin:0 0 18px;font-size:clamp(21px,2vw,27px);font-weight:500;letter-spacing:-.03em;line-height:1.2;text-wrap:balance}
.clause p{margin:0 0 16px;color:var(--muted);line-height:1.7;text-wrap:pretty}
.clause > :last-child{margin-bottom:0}
.clause ul{list-style:none;margin:18px 0 16px;padding:0;display:grid;gap:14px}
.clause li{position:relative;padding-left:26px;color:var(--muted);line-height:1.7;text-wrap:pretty}
.clause li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
/* The closing enquiry block normally sits flush under a section that already has
   bottom padding, so it carries none of its own. The homepage's orbiting CTA ends
   flush, so .has-gap adds the space there. */
.is-enquiry{padding-top:0}
.is-enquiry.has-gap{padding-top:clamp(96px,11vw,170px)}
/* ── Thank-you page ───────────────────────────────────────────────────────
   One centred column on the standard hero wash. Tall enough that the footer
   does not ride up on a short page. */
.page-hero.is-thanks{min-height:min(78vh,760px);display:flex;align-items:center;padding-block:clamp(170px,16vw,220px) clamp(90px,10vw,140px)}
.thanks{max-width:900px;margin-inline:auto;text-align:center}
.thanks .page-title{margin:14px 0 0;font-size:clamp(38px,5.6vw,64px);line-height:1.04;letter-spacing:-.045em}
.thanks .lead{margin:26px auto 0;max-width:68ch}
.thanks-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:36px}
.thanks-contact{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 28px;margin-top:26px;font-size:15px;color:var(--muted)}
.thanks-contact a:hover{color:var(--ink)}
/* Closing link out to the profile the reviews are verified on. */
.rv-more{margin-top:clamp(56px,7vw,96px);display:flex;justify-content:center}
/* The closing enquiry card sits beside a column of contact cards that is often
   taller, which left dead space under the submit button. On desktop the card
   becomes a flex column: the fields grow a little and the message box takes up
   whatever height is left, so the two sides finish level. */
@media (min-width:1025px){
  .is-enquiry .hero-form{display:flex;flex-direction:column}
  .is-enquiry .hero-form .form{flex:1;display:flex;flex-direction:column;gap:16px}
  .is-enquiry .hero-form .field input{padding:30px 18px 12px}
  .is-enquiry .hero-form .field.is-grow{flex:1;display:flex;flex-direction:column}
  .is-enquiry .hero-form .field.is-grow textarea{flex:1;min-height:120px;padding-top:30px}
  .is-enquiry .hero-form .button{margin-top:auto}
}
/* two hero buttons that must stay side by side in the narrow hero column */
.page-hero-actions.is-pair{flex-wrap:nowrap;align-items:center}
.page-hero-actions.is-pair .button{flex:1 1 0;min-width:0;justify-content:space-between;padding-left:clamp(18px,1.6vw,26px);gap:10px}
.page-hero-actions.is-pair .button__texts{font-size:13px;letter-spacing:.04em}
@media (max-width:520px){
  .page-hero-actions.is-pair{flex-wrap:wrap}
  .page-hero-actions.is-pair .button{flex:1 1 100%}
}