/* =============================================================================
   home-next-v10.css — DesignerBox homepage, /next-v10 (+ dev-only root).
   "SOFT STUDIO" identity (2026-08-08), adapted from the shinta.framer.media
   reference Vytas supplied. Supersedes both the Catalog (cream + vermilion)
   and the interim clean-gallery pass.

   BRAND
   Canvas   #F4F2EF warm off-white
   Ink      #141414
   Pink     #FFD3F6 — THE brand color (Vytas, 2026-08-08: "ensure brand
            color is #FFD3F6"; supersedes the earlier #FFA8F2).
            ALWAYS ink text on pink. Never pink text. Never white on pink.
   ONE HUE  the folder + stat cards use pink at three depths (--pink,
            --pink-2, --pink-3 / white). The earlier lilac/mint/butter
            pastel set was cut by Vytas ("I don't like colors").
   Type     General Sans, ONE family (Vytas 2026-08-08: "changes fonts").
            Display 620 tight, body 400-500, caps labels 600 tracked.
            Clash Grotesk / Switzer / Plex Mono retired on this page.

   SHAPES
   Everything rounded: cards 24-32px, images 20-24px, buttons and chips are
   PILLS (Vytas's reference supersedes the sitewide 10px rule for THIS
   identity on THIS page only — theme-global's enforcement lists do not
   include .v10-* classes, so nothing sitewide changes).

   STILL TRUE: no gradients, no glows. Pastel blocks are flat fills; the one
   decorative device is a flat pink squiggle stroke. Photography is the
   unified warm-neutral story-set imagery and pastels never sit inside it.
   Elevation: the nav capsule and floating menus carry a SOFT NEUTRAL shadow
   instead of a hairline border (Vytas, 2026-08-08: "i dont like this border
   around header menu"; his Kresna reference cards float the same way). A
   low-opacity black shadow is elevation, not a glow — colored/bright halos
   stay banned.
   ============================================================================= */

/* ONE family sitewide on v10 — General Sans (Vytas, 2026-08-08: "changes
   fonts"; both approved references run a single tight neo-grotesk, and the
   positioning doc named General Sans as the free identity candidate).
   Display = 600 tight, body = 400-500, caps labels = 600 tracked. The
   Clash Grotesk / Switzer / Plex Mono trio is retired on this page. */
@font-face {
    font-family: 'GeneralSans';
    src: url('/font/GeneralSans-Variable.woff2') format('woff2');
    font-weight: 200 700;
    font-display: swap;
}

:root {
    --ink:    #141414;
    --ink-2:  #57534E;
    --ink-3:  #6B6660;   /* 4.8:1 on canvas — WCAG AA for small text */
    --paper:  #F4F2EF;   /* the canvas */
    --card:   #FFFFFF;
    --line:   #E7E4DF;
    /* Edge for PHOTO boxes. --line is 1.09:1 against the canvas, which is
       fine around a card whose white fill already draws the shape, but a
       packshot on warm off-white has no fill of its own: sneaker-packshot's
       bottom-right pixel is rgb(241,236,230) against a rgb(244,242,239)
       canvas, so that tile had no findable bottom or right edge and read as
       shorter than its neighbours even though every tile in the row is the
       same 453px box. Ink alpha darkens against pale content AND canvas. */
    --line-img: rgba(20, 20, 20, 0.13);

    --pink:   #FFD3F6;   /* brand — THE one hue */
    --pink-2: #FFE7FA;   /* soft tint of the same hue */
    --pink-3: #FFF3FC;   /* faint tint for large fields */

    --dark:   #141414;
    --on-dark:   #FFFFFF;
    --on-dark-2: rgba(255, 255, 255, 0.72);

    --r-card: 28px;
    --r-img:  22px;
    --r-pill: 999px;

    --fd: 'GeneralSans', system-ui, -apple-system, sans-serif;
    --ft: 'GeneralSans', system-ui, -apple-system, sans-serif;
    --fm: 'GeneralSans', system-ui, -apple-system, sans-serif;

    --gut: clamp(18px, 4vw, 56px);
    --max: 1380px;
    --ease: cubic-bezier(0.22, 0.7, 0.28, 1);

    /* spacing scale */
    --s-1: 10px;
    --s-2: clamp(14px, 1.4vw, 20px);
    --s-3: clamp(18px, 2vw, 26px);
    --s-4: clamp(28px, 3.2vw, 44px);
    --s-5: clamp(34px, 3.8vw, 54px);
    --sp:  clamp(56px, 6vw, 88px);    /* section rhythm — tightened 2026-08-08 */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* theme-global.css is loaded for the site footer and applies
   var(--font-clash) with a universal !important. Re-pointing the variable on
   body.v10 decides what that rule resolves to on this page. One family now,
   so one repoint covers everything. */
body.v10 {
    --font-clash: 'GeneralSans', system-ui, -apple-system, sans-serif;
    --font-body: 'GeneralSans', system-ui, -apple-system, sans-serif;
    --font-display: 'GeneralSans', system-ui, -apple-system, sans-serif;

    /* The shared footer reads the legacy accent token, and theme-global points
       it at the old hot #F71EC7 — so every "view all" row in the footer
       rendered as PINK TEXT, which this identity bans outright ("always ink on
       pink, never pink text") and in a second hue at that. soft-studio.css
       makes the same remap for the rest of the site; this page does not load
       that file, so it has to restate it. Ink keeps
       `background: var(--db-coral); color: #fff` reading as the black pill,
       and the tints below turn `background: coral-10; color: coral` into the
       intended pink chip with ink text. #F71EC7 survives only as the app mark. */
    --db-coral: #141414;
    --db-coral-dark: #000000;
    --db-coral-10: var(--pink-2);
    --db-coral-20: var(--pink);
    --db-coral-04: var(--pink-3);
    --db-coral-soft: var(--pink-3);
    --db-coral-glow: 0 10px 32px rgba(20, 20, 20, 0.08);
}

/* THE HOMEPAGE CANVAS IS WHITE, AND THAT IS DELIBERATE. DO NOT "FIX" IT TO
   --paper.

   The approved page renders on #FFFFFF. It only ever did so by accident:
   theme-global.css:800 has `body { background-color: var(--t-bg) !important }`
   and its [data-theme=light] block resolves --t-bg to #FFFFFF, so that
   !important quietly beat the `background: var(--paper)` written here. On
   2026-08-09 the site-wide token conversion repointed --t-bg and the homepage
   turned grey in a single commit — the canvas went warm off-white and the
   white nav capsule, which is supposed to be edgeless, suddenly read as a
   bordered floating block. Vytas caught it immediately ("gray backgrounds,
   header menu has border shadows").

   So the value is stated explicitly and with !important: the homepage canvas
   must not be a side effect of whatever some other sheet does to a token.
   Other surfaces sit on --paper; the homepage is white and the chrome is
   matched to it. */
html[data-theme='light'] body.v10,
html:root body.v10,
html body.v10 {
    margin: 0;
    background-color: #FFFFFF !important;
    background-image: none;
    color: var(--ink);
    font-family: var(--ft);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

html body.v10 h1, html body.v10 h2,
html body.v10 h3, html body.v10 h4 { font-family: var(--fd); }

/* body.v10 img (0,1,2) beats single-class rules; boxes that need cover-fill
   are grouped here at the same strength. */
body.v10 img { display: block; max-width: 100%; height: auto; }
body.v10 .v10-cmp img,
body.v10 .v10-trio img,
body.v10 .v10-catgrid img {
    width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto;
}
body.v10 main ul, body.v10 main ol { list-style: none; margin: 0; padding: 0; }
body.v10 main p { margin: 0; }
body.v10 a { color: inherit; text-decoration: none; }
body.v10 :focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

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

/* The skip link itself moved to soft-studio-chrome.css with the rest of the
   chrome. This ONE rule has to stay here: trap #1 — `body.v10 a { color:
   inherit }` above scores (0,1,1) and beats the chrome file's
   `html body a.v10-skip`... no, it does not (that scores (0,1,3)), but
   `body.v10 a` DOES beat a bare `.v10-skip`, and this page is the only one
   carrying `body.v10`. Keeping the anchor-strength reclaim here documents the
   interaction and costs nothing if the chrome file already won. */
html body.v10 a.v10-skip { color: #fff; }

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

.v10-h1 { font-weight: 620; font-size: clamp(36px, 4.6vw, 64px);
    line-height: 1.04; letter-spacing: -0.028em; margin: 0; text-wrap: balance; }
.v10-h2 { font-weight: 620; font-size: clamp(30px, 3.8vw, 52px);
    line-height: 1.06; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
.v10-h3 { font-weight: 620; font-size: clamp(26px, 3vw, 42px);
    line-height: 1.08; letter-spacing: -0.022em; margin: 0; }
.v10-h4 { font-family: var(--fd); font-weight: 620; font-size: 19px;
    letter-spacing: -0.014em; margin: 0; }

.v10-kicker { font-family: var(--fm); font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-2); }
.v10-lede { font-size: clamp(16px, 1.6vw, 19px); color: var(--ink-2);
    max-width: 46ch; line-height: 1.55; }
.v10-dek { font-size: clamp(15.5px, 1.5vw, 17.5px); color: var(--ink-2);
    max-width: 56ch; line-height: 1.6; }
.v10-note { font-size: 13.5px; color: var(--ink-3); }
.v10-sub { font-size: 14px; color: var(--ink-2); }

/* PARAGRAPH SPACING — must be declared at body.v10 strength.
   The `body.v10 main p { margin: 0 }` reset above scores (0,1,3), which beats
   any single-class rule like `.v10-kicker` (0,1,0), so every margin set on a
   one-class paragraph was silently dropped: the eyebrow sat on its heading,
   deks touched their titles, notes and captions had no gap. Do not move these
   back to bare-class selectors. */
body.v10 .v10-kicker { margin: 0 0 clamp(14px, 1.6vw, 20px); }
body.v10 .v10-dek { margin-top: var(--s-2); }
body.v10 .v10-note { margin-top: 14px; }
body.v10 .v10-jclaim { margin-top: var(--s-2); }
body.v10 .v10-strip__cap { margin-top: 16px; }

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

/* Pills. The reference's pattern: black pill + round pink arrow chip. */
.v10-btn { display: inline-flex; align-items: center; justify-content: center;
    gap: 9px; background: var(--ink); color: #fff; border: 1px solid transparent;
    border-radius: var(--r-pill); padding: 0 20px; font-family: var(--ft);
    font-size: 14.5px; font-weight: 600; line-height: 1; min-height: 42px;
    cursor: pointer; white-space: nowrap;
    transition: background-color 150ms var(--ease), transform 120ms var(--ease); }
.v10-btn:hover { background: #000; }
.v10-btn:active { transform: scale(0.98); }
html body.v10 a.v10-btn { color: #fff; }
.v10-btn--ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.v10-btn--ghost:hover { background: var(--card); border-color: var(--ink); }
html body.v10 a.v10-btn--ghost { color: var(--ink); }
.v10-btn--sm { min-height: 36px; padding: 0 15px; font-size: 13.5px; }
.v10-btn--lg { min-height: 46px; padding: 0 24px; font-size: 15px; }

/* the arrow lives INSIDE the primary pill (the detached chip read as a
   separate control and was cut) */
.v10-btn--arrow::after { content: '\2197'; font-size: 0.92em;
    transition: transform 150ms var(--ease); }
.v10-btn--arrow:hover::after { transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) { .v10-btn--arrow:hover::after { transform: none; } }

.v10-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
    margin-top: var(--s-3); }

/* text link with arrow (padding grows the touch target without moving it) */
.v10-link { display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: 15px; padding-block: 6px; margin-block: -6px; }
.v10-link::after { content: '\2192'; transition: transform 150ms var(--ease); }
.v10-link:hover::after { transform: translateX(3px); }

/* ---------------------------------------------------------------- nav */
/* MOVED to soft-studio-chrome.css 2026-08-09.
   The capsule, the mega panels, the burger and the mobile drawer are shared
   chrome now: this page and the other 241 render the same partial, so the
   rules live in the one stylesheet all of them load. Redefining them here
   would beat that file on specificity (`body.v10` scores higher than the
   chrome file's body-agnostic selectors) and silently re-fork the header. */

/* ---------------------------------------------------------------- hero */

/* One centered reading path: kicker → H1 → sub → CTA → trust line. */
.v10-hero { position: relative; padding: clamp(36px, 4vw, 56px) 0 0;
    overflow: clip; }
.v10-hero__in { display: flex; flex-direction: column; align-items: center;
    text-align: center; max-width: 980px; margin-inline: auto; }
.v10-hero__in .v10-h1 { max-width: 22ch; }
.v10-hero__in .v10-lede { max-width: 58ch; margin-top: var(--s-2); }
.v10-hero__in .v10-cta { justify-content: center; }
/* the accent word (the pink highlight pill behind it was removed
   2026-08-08 — "remove this backgroudn color") */
.v10-h1__accent { white-space: nowrap; }
/* the flat pink squiggle (still used on the close card) */
.v10-squiggle { position: absolute; pointer-events: none; z-index: 0;
    color: var(--pink); }

/* THE OUTCOME COVERFLOW — the reference Vytas supplied
   (monday.com/w/agents). Fanned portrait cards; the active one sits centre
   at full scale with a white panel over its lower half (job name, two lines,
   tag pills); neighbours tuck behind at reduced scale; black round arrows
   step through. next-v10.js owns the index and sets --d (signed distance
   from active) on each card. */
.v10-cover { position: relative; margin-top: clamp(44px, 5vw, 76px);
    height: clamp(340px, 31vw, 430px); }
body.v10 .v10-cover__track { position: absolute; inset: 0; margin: 0;
    padding: 0; list-style: none; }
/* white mat around the art (Vytas 2026-08-08): the border-box shrinks the
   image rather than growing the card, and overflow:hidden clips the art to
   the inner radius (28 - 6 = 22px) so the frame reads as one rounded card */
.v10-cover__c { position: absolute; top: 0; left: 50%; height: 100%;
    width: clamp(250px, 25vw, 320px); border-radius: var(--r-card);
    border: 6px solid #fff;
    /* WHITE, not --paper. On desktop the art covers the card so the fill never
       showed; on phones the panel goes static and white, leaving the paper grey
       as a band under it and inside the bottom corner radius. Vytas, 2026-08-09:
       "remove also gray background". */
    overflow: hidden; background: #fff;
    /* --d = signed offset from the active card, --a = |d| capped at 3.
       Both come from JS (see next-v10.js) so this never needs abs(). */
    transform: translateX(-50%) translateX(calc(var(--d, 0) * 76%))
        scale(calc(1 - var(--a, 0) * 0.09));
    z-index: calc(30 - var(--a, 0) * 5);
    transition: transform 480ms var(--ease), opacity 320ms var(--ease);
    box-shadow: 0 18px 44px rgba(20, 20, 20, 0.14); }
/* only the active card and two either side stay on stage */
.v10-cover__c[data-far] { opacity: 0; pointer-events: none; }
.v10-cover__link { display: block; position: relative; height: 100%; }
body.v10 .v10-cover__c img { width: 100%; height: 100%; object-fit: cover;
    aspect-ratio: auto; }
/* name over the art on the INACTIVE cards (white pill, never a scrim
   gradient — gradients stay banned).
   The pill hugs the card's OUTER edge: cards left of the active one keep it
   left, cards right of it flip right. Without the flip the neighbour in front
   (higher z-index, since z falls off with |d|) covered the inner edge and
   every right-hand label rendered half-eaten — "…detail", "…festyle shot".
   next-v10.js sets data-side from the sign of --d. */
.v10-cover__name { position: absolute; top: 10px; left: 10px; z-index: 2;
    background: #fff; color: var(--ink); font-size: 12.5px; font-weight: 700;
    padding: 6px 13px; border-radius: var(--r-pill); white-space: nowrap;
    transition: opacity 220ms var(--ease); }
.v10-cover__c[data-side='r'] .v10-cover__name { left: auto; right: 10px; }
.v10-cover__c[data-active] .v10-cover__name { opacity: 0; }
/* the white info panel — active card only */
.v10-cover__panel { position: absolute; left: 8px; right: 8px; bottom: 8px;
    z-index: 3; background: #fff; border-radius: 16px; padding: 16px 16px 14px;
    text-align: center; opacity: 0; transform: translateY(10px);
    pointer-events: none;
    transition: opacity 280ms var(--ease), transform 280ms var(--ease); }
.v10-cover__c[data-active] .v10-cover__panel { opacity: 1; transform: none; }
.v10-cover__t { display: block; font-family: var(--fd); font-weight: 620;
    font-size: 17px; letter-spacing: -0.015em; color: var(--ink); }
body.v10 .v10-cover__lines { display: flex; flex-direction: column; gap: 7px;
    margin: 10px 0 0; padding: 0; list-style: none; text-align: left; }
.v10-cover__lines li { display: flex; gap: 8px; font-size: 12.5px;
    line-height: 1.4; color: var(--ink-2); }
.v10-cover__dot { flex: none; width: 5px; height: 5px; margin-top: 6px;
    border-radius: 50%; background: var(--pink); }
body.v10 .v10-cover__tags { display: flex; flex-wrap: wrap; gap: 5px;
    justify-content: center; margin: 12px 0 0; padding: 0; list-style: none; }
.v10-cover__tags li { background: var(--pink-3); color: var(--ink-2);
    font-size: 10.5px; font-weight: 600; padding: 4px 9px;
    border-radius: var(--r-pill); white-space: nowrap; }
/* No steppers. The black round arrows were removed 2026-08-08 ("i dont want
   black circles on carousel on homepage remove; i keep carousel just remove
   this circles") — they landed on top of the outermost cards and read as
   stray dots on a product photo. Stepping is by clicking a side card, which
   next-v10.js already handled; the cards lift slightly on hover so the
   affordance is visible without any added chrome. */
.v10-cover__c:not([data-active]) .v10-cover__link { cursor: pointer; }
.v10-cover__c:not([data-active]):hover {
    transform: translateX(-50%) translateX(calc(var(--d, 0) * 76%))
        scale(calc(1 - var(--a, 0) * 0.09 + 0.022)); }
@media (prefers-reduced-motion: reduce) {
    .v10-cover__c:not([data-active]):hover { transform: translateX(-50%)
        translateX(calc(var(--d, 0) * 76%)) scale(calc(1 - var(--a, 0) * 0.09)); } }
.v10-out__play { position: absolute; inset: 0; margin: auto;
    width: 52px; height: 52px; border-radius: 50%; background: #fff; z-index: 2;
    display: flex; align-items: center; justify-content: center; }
.v10-out__play::before { content: ''; width: 0; height: 0; margin-left: 3px;
    border-style: solid; border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent var(--ink); }
.v10-cover__c[data-active] .v10-out__play { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .v10-cover__c, .v10-cover__panel, .v10-cover__name { transition: none; } }
.v10-strip__cap { text-align: center; font-size: 13.5px; color: var(--ink-3); }
.v10-badge { position: absolute; top: 10px; left: 10px; z-index: 2;
    background: var(--ink); color: #fff; font-size: 11px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 6px 12px; border-radius: var(--r-pill); }

/* ---------------------------------------------------------------- sections */

.v10-sec { padding: var(--sp) 0 0; }
.v10-head { margin-bottom: var(--s-4); max-width: 70ch; }

/* ---- the four studios as a journey ------------------------------------- */
/* White cards joined by ink arrows — the upload travels top to bottom.
   Complete rebuild 2026-08-08 (Vytas: "rebuild complately ui of section
   One photo, four studios"); the pastel folder-tab cards are retired. */

/* grid + 1fr rows: all four studio cards render at the SAME height, whatever
   their media is (Vytas 2026-08-08: "why these sections not same heigh") */
.v10-journey { display: grid; grid-auto-rows: 1fr; gap: clamp(10px, 1.2vw, 16px); }
.v10-jcard { background: var(--card); border-radius: var(--r-card);
    box-shadow: 0 10px 32px rgba(20, 20, 20, 0.06);
    padding: clamp(20px, 2.2vw, 34px);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(20px, 2.4vw, 44px); align-items: center; }
.v10-jpill { display: inline-flex; align-items: center; background: var(--pink);
    color: var(--ink); font-family: var(--fm); font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.09em;
    padding: 7px 14px; border-radius: var(--r-pill); margin-bottom: var(--s-2); }
.v10-jcard__txt .v10-h3 { max-width: 14ch; }
.v10-jclaim { font-family: var(--ft); font-weight: 700;
    font-size: clamp(16px, 1.7vw, 20px); margin-top: var(--s-2); }
.v10-jchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-3); }
.v10-tag { display: inline-flex; align-items: center; background: var(--pink-3);
    color: var(--ink); font-size: 13px; font-weight: 600;
    border-radius: var(--r-pill); padding: 8px 15px; line-height: 1;
    transition: background-color 140ms var(--ease); }
html body.v10 a.v10-tag:hover { background: var(--pink-2); }
.v10-jcard__txt .v10-link { margin-top: var(--s-3); }

.v10-jcard__media { min-width: 0; }

/* labeled photo sets (replaced the before/after drag sliders — cut by
   Vytas 2026-08-08, "find better to show this without complicated slider").
   Every studio's media block shares ONE 16/9 container so the four cards
   come out the same height with no stretched dead space. */
.v10-set { display: grid; gap: 10px; aspect-ratio: 16 / 9; }
.v10-set--2 { grid-template-columns: repeat(2, 1fr); }
.v10-set--3 { grid-template-columns: repeat(3, 1fr); }
.v10-set > div { position: relative; border-radius: 18px; overflow: hidden;
    background: #fff; }
body.v10 .v10-set img { width: 100%; height: 100%; object-fit: cover;
    aspect-ratio: auto; }
.v10-set__t { position: absolute; left: 10px; bottom: 10px; z-index: 2;
    background: #fff; color: var(--ink); font-size: 11.5px; font-weight: 600;
    padding: 5px 12px; border-radius: var(--r-pill); white-space: nowrap; }

/* the on-model trio */
.v10-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    aspect-ratio: 16 / 9; }
.v10-trio > div { border-radius: 18px; overflow: hidden; background: #fff; }

/* video poster card */
.v10-poster { display: block; position: relative; border-radius: var(--r-img);
    overflow: hidden; aspect-ratio: 16 / 9; background: #fff; }
body.v10 .v10-poster img { width: 100%; height: 100%; object-fit: cover;
    aspect-ratio: auto; }
.v10-poster img { width: 100%; height: 100%; object-fit: cover; }
.v10-poster__play { position: absolute; inset: 0; margin: auto;
    width: 62px; height: 62px; border-radius: 50%; background: #fff;
    color: var(--ink); display: flex; align-items: center; justify-content: center; }
.v10-poster__play::before { content: ''; width: 0; height: 0; margin-left: 4px;
    border-style: solid; border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent var(--ink); }

/* ---- category switcher -------------------------------------------------- */

/* Capped to the photo grid below it and the chips trimmed so all ten still
   sit on one line at that width. The row used to run the full 1268px content
   measure and overhang the photographs by ~74px on each side (Vytas,
   2026-08-08: "filters like footwear ect section is too wide"). Vertical
   padding is untouched — the chip height was set on purpose the same day. */
.v10-chiprow { display: flex; flex-wrap: wrap; justify-content: center;
    gap: 8px; max-width: 1120px; margin: 0 auto var(--s-4); }
/* slimmed 2026-08-08 ("this buttons too heigh") */
.v10-chip { background: var(--card); color: var(--ink); border: 1px solid var(--line);
    border-radius: var(--r-pill); padding: 9px 12px; font-size: 13px;
    line-height: 1.15; font-weight: 600; cursor: pointer; font-family: var(--ft);
    transition: background-color 140ms var(--ease), color 140ms var(--ease),
        border-color 140ms var(--ease); }
.v10-chip:hover { border-color: var(--ink); }
.v10-chip[aria-pressed='true'] { background: var(--ink); color: #fff; border-color: var(--ink); }
html body.v10 a.v10-chip { display: inline-flex; align-items: center; }
.v10-catgrid { display: grid;
    grid-template-columns: repeat(var(--cols, 4), 1fr);
    gap: clamp(10px, 1.2vw, 16px); max-width: 1120px; margin-inline: auto; }
.v10-catgrid[hidden] { display: none; }
.v10-catgrid > div { position: relative; border-radius: var(--r-img);
    overflow: hidden; aspect-ratio: 4 / 5; background: var(--card);
    border: 1px solid var(--line-img); }

/* ---- models band -------------------------------------------------------- */

.v10-panel { background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-card); padding: clamp(28px, 3.4vw, 56px); }
.v10-models__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(20px, 3vw, 56px); align-items: start; }
.v10-bign { font-family: var(--fd); font-weight: 600;
    font-size: clamp(90px, 11vw, 168px); line-height: 0.8;
    letter-spacing: -0.03em; color: transparent;
    -webkit-text-stroke: 2px var(--ink); }
.v10-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-3); }
.v10-pill { font-size: 14px; font-weight: 600; padding: 9px 16px;
    border-radius: var(--r-pill); border: 1px solid var(--line);
    background: var(--paper); color: var(--ink); }
.v10-models__grid .v10-note { margin-top: var(--s-3); }

/* ---- where you sell ----------------------------------------------------- */
/* Replaced the "Priced like a tool" stat cards. Five platform rows, each
   naming the shot that place expects. Alternating pink depth keeps it flat
   and on-brand without introducing a sixth colour. */
.v10-sellers { display: grid; grid-template-columns: repeat(5, 1fr);
    gap: clamp(10px, 1.1vw, 16px); }
.v10-seller { min-width: 0; }
.v10-seller__link { display: flex; flex-direction: column; gap: 8px;
    height: 100%; border-radius: var(--r-card);
    padding: clamp(20px, 2.1vw, 28px); background: var(--card);
    box-shadow: 0 6px 22px rgba(20, 20, 20, 0.05);
    transition: box-shadow 200ms var(--ease), transform 200ms var(--ease); }
.v10-seller:nth-child(odd) .v10-seller__link { background: var(--pink-3);
    box-shadow: none; }
.v10-seller:nth-child(3) .v10-seller__link { background: var(--pink);
    box-shadow: none; }
.v10-seller__link:hover { transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(20, 20, 20, 0.09); }
@media (prefers-reduced-motion: reduce) {
    .v10-seller__link, .v10-seller__link:hover { transition: none; transform: none; } }
.v10-seller__n { font-family: var(--fd); font-weight: 620; font-size: 17px;
    letter-spacing: -0.015em; color: var(--ink); }
.v10-seller__d { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.v10-seller:nth-child(3) .v10-seller__d { color: var(--ink); opacity: 0.8; }
#sellers .v10-note { margin-top: var(--s-3); }
.v10-inline { font-weight: 700; text-decoration: underline;
    text-underline-offset: 3px; }
p .v10-inline { margin-left: 6px; }

/* ---- repeat ------------------------------------------------------------- */

.v10-repeat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(24px, 3.4vw, 64px); align-items: center; }
.v10-repeat__trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.v10-repeat__trio > div { border-radius: var(--r-img); overflow: hidden;
    aspect-ratio: 4 / 5; background: var(--card); border: 1px solid var(--line); }
body.v10 .v10-repeat__trio img { width: 100%; height: 100%; object-fit: cover;
    aspect-ratio: auto; }
.v10-surf { display: grid; grid-template-columns: repeat(5, 1fr);
    gap: clamp(14px, 1.6vw, 24px); margin-top: var(--s-5); }
.v10-surf__i { padding-top: var(--s-2); border-top: 1px solid var(--line); }
.v10-surf__ic { display: block; margin-bottom: 10px; color: var(--ink); }
.v10-surf__i .v10-sub { margin-top: 4px; }
#repeat .v10-note { margin-top: var(--s-3); }

/* ---- doors -------------------------------------------------------------- */

/* Text-only audience doors (2026-08-08). Photography was removed: no single
   product shot distinguishes a shop from a creator from an agency, so every
   image read as arbitrary. A pink audience pill does the job the picture
   could not. */
.v10-doors { display: grid; grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr; gap: clamp(14px, 1.6vw, 22px); }
.v10-door { background: var(--card); border-radius: var(--r-card);
    box-shadow: 0 6px 22px rgba(20, 20, 20, 0.05);
    display: flex; flex-direction: column;
    transition: box-shadow 200ms var(--ease), transform 200ms var(--ease); }
.v10-door:hover { box-shadow: 0 12px 32px rgba(20, 20, 20, 0.09);
    transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
    .v10-door, .v10-door:hover { transition: none; transform: none; } }
.v10-door__k { align-self: flex-start; background: var(--pink); color: var(--ink);
    font-family: var(--fm); font-size: 10.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.09em;
    padding: 6px 13px; border-radius: var(--r-pill); }
.v10-door__txt { padding: clamp(22px, 2.4vw, 32px); display: flex;
    flex-direction: column; gap: var(--s-1); flex: 1; }
.v10-door__txt .v10-h4 { margin-top: 4px; font-size: clamp(20px, 2vw, 26px);
    letter-spacing: -0.02em; }
.v10-door__txt .v10-link { margin-top: auto; padding-top: var(--s-3); }

/* ---- FAQ ---------------------------------------------------------------- */

.v10-faq-grid { display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: clamp(28px, 4vw, 72px); align-items: start; }
.v10-faq-head { margin-bottom: 0; position: sticky; top: 110px; }
.v10-faq-head .v10-btn { margin-top: var(--s-3); }
/* the contact chip card (the reference's "Need custom plan? Let's Talk") */
.v10-talk { display: flex; align-items: center; justify-content: space-between;
    gap: 16px; background: var(--card); border-radius: 18px;
    padding: 14px 16px; margin-top: 14px; max-width: 320px;
    box-shadow: 0 6px 20px rgba(20, 20, 20, 0.06);
    transition: box-shadow 160ms var(--ease); }
.v10-talk:hover { box-shadow: 0 10px 28px rgba(20, 20, 20, 0.10); }
.v10-talk__txt b { display: block; font-size: 14.5px; font-weight: 700; }
.v10-talk__txt span { display: block; font-size: 13px; color: var(--ink-2); }
.v10-talk__arr { flex: none; width: 36px; height: 36px; border-radius: 50%;
    background: var(--paper); color: var(--ink); font-size: 15px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform 150ms var(--ease); }
.v10-talk:hover .v10-talk__arr { transform: translate(1px, -1px); }
@media (prefers-reduced-motion: reduce) { .v10-talk:hover .v10-talk__arr { transform: none; } }

.v10-faq { display: flex; flex-direction: column; gap: 12px; }
.v10-faq__i { background: var(--card); border: 1px solid var(--line);
    border-radius: 20px; padding: 0 clamp(18px, 2vw, 26px); }
.v10-faq__q { display: flex; align-items: center; justify-content: space-between;
    gap: 18px; cursor: pointer; list-style: none;
    padding: clamp(16px, 1.8vw, 22px) 0;
    font-family: var(--ft); font-weight: 700;
    font-size: clamp(15.5px, 1.5vw, 18px); letter-spacing: -0.008em; }
.v10-faq__q::-webkit-details-marker { display: none; }
.v10-faq__ic { flex: none; width: 30px; height: 30px; border-radius: 50%;
    background: var(--pink); position: relative; }
.v10-faq__ic::before, .v10-faq__ic::after { content: ''; position: absolute;
    inset: 0; margin: auto; background: var(--ink);
    transition: transform 200ms ease; }
.v10-faq__ic::before { width: 12px; height: 2px; }
.v10-faq__ic::after { width: 2px; height: 12px; }
.v10-faq__i[open] .v10-faq__ic::after { transform: scaleY(0); }
@media (prefers-reduced-motion: reduce) { .v10-faq__ic::after { transition: none; } }
.v10-faq__a { margin: 0; padding: 0 44px clamp(16px, 1.8vw, 22px) 0;
    color: var(--ink-2); font-size: clamp(14.5px, 1.45vw, 16.5px);
    line-height: 1.62; max-width: 70ch; }

/* ---- close -------------------------------------------------------------- */

.v10-close { padding: var(--sp) 0; }
.v10-close__in { position: relative; overflow: hidden;
    background: var(--dark); color: var(--on-dark); border-radius: 32px;
    padding: clamp(44px, 6vw, 92px) clamp(26px, 5vw, 80px); }
/* centred: left-aligned text left the whole right half of a very wide card
   empty, which read as a layout bug rather than a closing CTA */
.v10-close__in { text-align: center; }
/* sits in the card's top padding, fully inside the overflow clip */
.v10-close__in .v10-squiggle { top: 14px; left: 50%; transform: translateX(-50%);
    width: clamp(150px, 18vw, 260px); }
.v10-close .v10-h2 { color: var(--on-dark); margin-inline: auto;
    position: relative; z-index: 1; }
/* body.v10 main p { margin: 0 } outranks a single class — this needs the
   same body.v10 strength or the auto margins never centre the copy */
body.v10 .v10-close__d { margin: var(--s-3) auto 0; color: var(--on-dark-2);
    max-width: 52ch; font-size: clamp(15px, 1.5vw, 17.5px); line-height: 1.55;
    position: relative; z-index: 1; }
.v10-close .v10-cta { justify-content: center; }
html body.v10 .v10-close a.v10-btn { background: #fff; color: var(--ink); }
html body.v10 .v10-close a.v10-btn:hover { background: var(--pink); }
.v10-close .v10-cta { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- lang modal */

/* theme-global styles #changelanguage but forces display:flex !important;
   Foundation (absent here) normally gates it. Hand visibility to .v10-open. */
html body.v10 #changelanguage.reveal-modal { display: none !important; }
/* Kept in lockstep with soft-studio-chrome.css — both clear Foundation's modal
   layer (overlay 1004 / modal 1005) so the dialog can never render beneath a
   blurred overlay. See the note there. */
html body.v10 #changelanguage.reveal-modal.v10-open { display: flex !important; visibility: visible !important; z-index: 1010; }
body.v10 .v10-scrim { display: none; position: fixed; inset: 0; z-index: 1009;
    background: rgba(20, 20, 20, 0.55); }
body.v10 .v10-scrim.v10-open { display: block; }

/* The giant DESIGNERBOX watermark across the footer floor. theme-global gives
   it #ededed under [data-theme=light], which this page sets — a grey that is
   nearly the canvas itself. soft-studio.css uses a token-derived ink tint for
   every other page, so match it here or the homepage footer is the one that
   looks different. */
html[data-theme='light'] body.v10 .footer-brand-statement-text {
    color: rgba(20, 20, 20, 0.055);
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
    .v10-nav__links, .v10-nav__cta { display: none; }
    .v10-burger { display: flex; }
    .v10-nav__in { padding-right: 12px; }
    /* the drawer lives inside the sticky navwrap: it needs its own scroll or
       open accordions push the CTA foot off-screen forever */
    .v10-mobile { max-height: calc(100dvh - 100px); overflow-y: auto;
        -webkit-overflow-scrolling: touch; }
}

@media (max-width: 940px) {
    /* A fan needs width it does not have here. Below 940 the coverflow
       degrades to a native swipe row with every panel open — no arrows to
       hunt for, no card hidden behind another, and the same markup. */
    .v10-cover { height: auto; }
    .v10-cover__c:not([data-active]):hover { transform: none; }
    body.v10 .v10-cover__track { position: static; display: flex; gap: 12px;
        overflow-x: auto; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut);
        padding-bottom: 8px; scrollbar-width: none; }
    body.v10 .v10-cover__track::-webkit-scrollbar { display: none; }
    .v10-cover__c { position: static; flex: 0 0 min(300px, 76vw);
        height: auto; width: auto; transform: none; scroll-snap-align: start;
        box-shadow: 0 10px 28px rgba(20, 20, 20, 0.10); opacity: 1;
        pointer-events: auto; border-width: 5px; }
    .v10-cover__c[data-far] { opacity: 1; pointer-events: auto; }
    .v10-cover__link { display: flex; flex-direction: column; }
    /* 4:3, not 1:1. A square frame plus the panel made the card 448px tall on a
       375px phone — more than half the screen for one of six cards, and the
       second card's panel never entered the fold. 4:3 takes ~70px off the art
       and the card lands near 330px. */
    body.v10 .v10-cover__c img { aspect-ratio: 4 / 3; height: auto; }
    .v10-cover__name { display: none; }
    .v10-cover__panel { position: static; opacity: 1; transform: none;
        pointer-events: auto; border-radius: 0; padding: 12px 12px 14px; }
    .v10-cover__t { font-size: 16px; }
    body.v10 .v10-cover__lines { gap: 5px; margin-top: 8px; }
    .v10-cover__lines li { font-size: 12px; line-height: 1.35; }
    .v10-cover__dot { margin-top: 5px; }
    body.v10 .v10-cover__tags { margin-top: 9px; gap: 4px; }
    .v10-cover__c[data-active] .v10-out__play { opacity: 1; }

    .v10-jcard { grid-template-columns: 1fr; }
    .v10-models__grid { grid-template-columns: 1fr; }
    .v10-models__grid .v10-bign { order: -1; }
    .v10-sellers { grid-template-columns: repeat(2, 1fr); }
    .v10-repeat { grid-template-columns: 1fr; }
    .v10-surf { grid-template-columns: repeat(3, 1fr); }
    .v10-doors { grid-template-columns: 1fr; }
    .v10-catgrid { grid-template-columns: repeat(3, 1fr); }
    .v10-catgrid > div:nth-child(n+4) { display: none; }
    .v10-faq-grid { grid-template-columns: 1fr; }
    .v10-faq-head { position: static; margin-bottom: var(--s-4); }
    body.v10 .footer-brand-statement { overflow: hidden; }
    body.v10 .footer-brand-statement-text { max-width: 100%; }
}

@media (max-width: 560px) {
    .v10-surf { grid-template-columns: repeat(2, 1fr); }
    .v10-sellers { grid-template-columns: 1fr; }
    .v10-cta .v10-btn { flex: 1 1 100%; justify-content: center; }
    .v10-trio { grid-template-columns: repeat(3, 1fr); }
    .v10-catgrid { grid-template-columns: repeat(2, 1fr); }
    .v10-catgrid > div:nth-child(n+3) { display: none; }
}

/* ---------------------------------------------------------------- entrances */

.v10-anim { opacity: 0; transform: translateY(14px);
    transition: opacity 520ms var(--ease), transform 520ms var(--ease); }
.v10-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .v10-anim { opacity: 1; transform: none; transition: none; }
}