/* PRO (the round 5 "bright" mockup). Instrument Sans (OFL) for everything; demo uses the site's existing fonts as sample brand faces. */
@font-face { font-family: "IS"; src: url(/pro/fonts/is-latin.woff2) format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+2192, U+2197; }
@font-face { font-family: "IS"; src: url(/pro/fonts/is-latin-ext.woff2) format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; src: url(/assets/fraunces-latin.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Archivo"; src: url(/pro/fonts/archivo-800-latin.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(/assets/figtree.woff2) format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "ISerif"; src: url(/pro/fonts/instrument-serif.woff2) format("woff2"); font-display: swap; }
/* Turkish letters for the sample brand faces (the site's own latin-ext files; English pages never load them). */
@font-face { font-family: "Fraunces"; src: url(/assets/fraunces-latin-ext.woff2) format("woff2"); font-display: swap; unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: "Archivo"; src: url(/pro/fonts/archivo-800-latin-ext.woff2) format("woff2"); font-weight: 800; font-display: swap; unicode-range: U+0100-02AF, U+1E00-1EFF; }
/* Clash Display Bold, the PRO home display face (owner 2026-10-28: "font 1"); Fontshare ITF FFL, self-hosted unmodified as the license requires (LICENSE-clash-display.txt) */
@font-face { font-family: "Clash Display"; src: url(/pro/fonts/clash-display-bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(/assets/figtree-latin-ext.woff2) format("woff2"); font-weight: 300 900; font-display: swap; unicode-range: U+0100-02AF, U+1E00-1EFF; }
/* Arial sized to Instrument Sans (advance widths and hhea metrics measured from is-latin.woff2), so the swap does not reflow */
@font-face { font-family: "IS Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 400; size-adjust: 101.6%; ascent-override: 95.5%; descent-override: 24.6%; line-gap-override: 0%; }
@font-face { font-family: "IS Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 500; size-adjust: 102.9%; ascent-override: 94.3%; descent-override: 24.3%; line-gap-override: 0%; }
@font-face { font-family: "IS Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 700; size-adjust: 97.8%; ascent-override: 99.2%; descent-override: 25.6%; line-gap-override: 0%; }

:root {
  --ink: #0d1b2a;
  --ink-2: #425466;
  --ink-3: #5a6a80;
  --line: #e3e8ee;
  --bg: #fff;
  --bg-2: #f6f9fc;
  --green: #0fb57e;
  --green-d: #077a55;
  --pink: #ff4d8d;
  --pink-d: #c8235f;
  --amber: #ffb23f;
  --amber-d: #94550a;
  --shadow: 0 50px 100px -20px rgba(13, 27, 42, .25), 0 30px 60px -30px rgba(0, 0, 0, .3);
  --shadow-s: 0 13px 27px -5px rgba(13, 27, 42, .22), 0 8px 16px -8px rgba(0, 0, 0, .25);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.75, 0, .21, .99);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* the theme switch (/theme-switch.css) in white and ink */
  --ts-font: "IS", "IS Fallback", system-ui, sans-serif;
  --ts-title: 600 18px/1.25 "IS", "IS Fallback", system-ui, sans-serif;
  --ts-ink: var(--ink); --ts-body: var(--ink-2); --ts-surface: #fff; --ts-hover: var(--bg-2);
  --ts-line: rgba(13, 27, 42, .18); --ts-panel-line: var(--line); --ts-card: #fff; --ts-card-line: var(--line); --ts-card-hover: var(--bg-2);
  --ts-on-line: var(--green); --ts-on: #effaf5; --ts-check: var(--green-d); --ts-check-ink: #fff;
  --ts-preview-line: rgba(13, 27, 42, .1); --ts-preview: var(--bg-2); --ts-shadow: var(--shadow-s); --ts-hint-shadow: var(--shadow-s);
  --ts-backdrop: rgba(13, 27, 42, .36); --ts-grabber: var(--line);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; -webkit-tap-highlight-color: transparent; accent-color: var(--green-d); caret-color: var(--green-d); scrollbar-color: #c3cedb transparent; }
::selection { background: #bdeedb; color: var(--ink); }
.close ::selection { background: var(--green); color: #fff; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.55 "IS", "IS Fallback", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
p { text-wrap: pretty; }
h3, h4, figcaption, .tagline, .facts li, .col li, .cred-line { text-wrap: balance; }
/* short card copy: no one-word last lines */
.pts li, .probs p, .axis-scope-grid p, .axis-decisions p, .axis-body-copy > *, .feat p, .st > p, .axis-node p { text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
:focus-visible { outline: 2px solid var(--green-d); outline-offset: 3px; border-radius: 4px; }
html :focus-visible { outline-color: var(--ink); box-shadow: 0 0 0 5px rgba(255, 255, 255, .9); }
html .close :focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px rgba(15, 181, 126, .55); }
.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 50; }
.skip:focus { top: 12px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* buttons */
/* the pill's fill is its own layer, so hover stretches the pill while the label stays sharp */
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: .5em; min-height: 46px; padding: 0 22px; border-radius: 999px; font-weight: 600; font-size: 16px; letter-spacing: -.005em; white-space: nowrap; transition: box-shadow .2s, transform .22s var(--ease-out); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transition: background .2s, transform .16s ease; }
.btn:active { transform: translateY(1px) scale(.97); transition-duration: .06s; }
.btn .arr { display: inline-block; transition: transform .25s var(--ease); }
.btn-ink { color: #fff; box-shadow: 0 6px 16px -6px rgba(13, 27, 42, .5); }
.btn-ink::before { background: var(--ink); }
.btn-ink:hover::before { background: #1c3148; }
.btn-ghost { color: var(--ink); }
.btn-ghost::before { background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(13, 27, 42, .14); }
.btn-ghost:hover::before { background: rgba(255, 255, 255, .9); }
.btn-ghost .arr { transform: none; }
.btn-light { color: var(--ink); }
.btn-light::before { background: #fff; }
.btn-light:hover::before { background: #e8eef4; }
@media (hover: hover) and (pointer: fine) {
  :where(html:not(.calm)) .btn:hover::before { transform: scaleX(1.04); }
  :where(html:not(.calm)) .btn:not(.btn-ghost):hover .arr { animation: arr-pass .32s both; }
}
@media (hover: hover) and (pointer: fine) { .btn-ghost:hover .arr { transform: translateY(2px); } }
/* the arrow leaves to the right, comes back in from the left */
@keyframes arr-pass {
  0% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.5, 0, 1, 1); }
  45% { transform: translateX(10px); opacity: 0; animation-timing-function: steps(1, end); }
  46% { transform: translateX(-8px); opacity: 0; animation-timing-function: var(--ease-out); }
  100% { transform: none; opacity: 1; }
}
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 14.5px; }

.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; color: var(--ink-2); margin-bottom: 14px; }
.eyebrow.light { color: #c9d6e3; }
.dot { width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); }
.dot.g { background: var(--green); } .dot.p { background: var(--pink); } .dot.a { background: var(--amber); }
h2 { font-size: clamp(32px, 4.2vw, 50px); line-height: 1.06; letter-spacing: -.035em; font-weight: 600; text-wrap: balance; }
.sub { font-size: 19px; line-height: 1.55; color: var(--ink-2); margin-top: 16px; max-width: 34em; text-wrap: pretty; }
.sec-head { max-width: 760px; }
.num { font-family: var(--mono); font-size: 13px; color: var(--ink-3); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.kind { font-size: 14px; font-weight: 600; color: var(--green-d); margin-bottom: 6px; }
.lnk { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ink); border-bottom: 0; background: linear-gradient(currentColor, currentColor) 100% calc(100% - 10px) / 0 1.5px no-repeat; transition: background-size .3s var(--ease); }
/* the line grows in from the left and leaves to the right: only the size animates, the anchor side flips */
.lnk:hover { background-size: 100% 1.5px; background-position-x: 0; }

/* ---------- HERO ---------- */
.hero { position: relative; overflow: clip; padding-bottom: 8px; }
.field { position: absolute; inset: 0 0 auto 0; height: 760px; clip-path: polygon(0 0, 100% 0, 100% 56%, 0 100%); background: #ffd9c4; }
.field-still, #field { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#field { opacity: 0; transition: opacity 1.2s ease; }
.field.gl #field { opacity: 1; }
.field::after { /* soft white wash so body text keeps AA contrast on the left */
  content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .22) 38%, rgba(255, 255, 255, 0) 60%); pointer-events: none; }

.top { position: relative; z-index: 10; display: flex; align-items: center; gap: 28px; max-width: 1200px; margin: 0 auto; padding: 18px 32px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; letter-spacing: -.01em; flex: none; }
.brand img { width: 44px; height: auto; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
@media (hover: hover) and (pointer: fine) { .brand:hover img { transform: rotate(-6deg) scale(1.06); } }
.nav { display: flex; gap: 4px; margin-left: 12px; }
.nav a { padding: 9px 12px; border-radius: 8px; font-weight: 500; font-size: 15.5px; white-space: nowrap; transition: background .2s, box-shadow .2s, scale .22s var(--ease-out); }
.nav a:hover { background: rgba(255, 255, 255, .45); }
.nav a[aria-current=page] { background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(13, 27, 42, .1); }
/* press: a quick squeeze in, a slower release */
:is(.nav a, .menu summary, .tab, .secnav a, .inside-list a, .jump):active,
:is(.seg label, .interest-chips label):active span, .file-picker:active .file-picker-button { scale: .98; transition-duration: .08s; }
[data-theme-switch] { display: inline-flex; flex: none; width: 128px; height: 44px; }
.tools { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.lang { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; color: var(--ink-2); }
.lang a.on { color: var(--ink); font-weight: 600; }
.lang a:hover { color: var(--ink); }
.motion-switch { color: var(--ink-2); font-size: 14.5px; }
.motion-switch:hover { color: var(--ink); }
.foot-bar .motion-switch { margin-left: 14px; padding: 4px 0; }
.menu { display: none; }

.hero-in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px; max-width: 1200px; margin: 0 auto; padding: 70px 32px 0; min-height: 640px; }
.hero-copy { padding-top: 26px; max-width: 590px; }
.kicker { font-weight: 600; font-size: 15px; color: var(--ink); opacity: .78; margin-bottom: 22px; }
h1 { font-size: clamp(44px, 5.6vw, 78px); line-height: 1.0; letter-spacing: -.045em; font-weight: 600; text-wrap: balance; }
.lede { margin-top: 26px; font-size: 20px; line-height: 1.5; color: #1d2e40; max-width: 30em; text-wrap: pretty; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.stage { position: relative; perspective: 2200px; margin: 10px -130px 0 20px; aspect-ratio: 1 / .8; align-self: start; }
.rig { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(calc(9deg - var(--my, 0) * 3deg)) rotateY(calc(-17deg + var(--mx, 0) * 4deg)) rotateZ(3deg); transition: transform 1.2s var(--ease); }
.rig .win { position: absolute; transform-style: preserve-3d; }
.win > .float, .win.big, .sites .win { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow), 0 0 0 1px rgba(13, 27, 42, .06); }
.bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: #f6f8fa; border-bottom: 1px solid var(--line); }
.bar i { width: 8px; height: 8px; border-radius: 50%; background: #d5dbe3; flex: none; }
.bar span { flex: 1; text-align: center; font-size: 11px; color: var(--ink-3); letter-spacing: .01em; margin-right: 34px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.w-north { width: 70%; left: 34%; top: 0; transform: translateZ(-140px); }
.w-axis { width: 76%; left: 6%; top: 13%; transform: translateZ(0); }
.w-hir { width: 44%; left: 0; top: 56%; transform: translateZ(70px); }
.w-kash { width: 40%; left: 62%; top: 50%; transform: translateZ(110px); }
.float { animation: drift 10s ease-in-out infinite alternate; will-change: transform; }
.w-axis .float { animation-duration: 12s; animation-delay: -3s; }
.w-hir .float { animation-duration: 9s; animation-delay: -6s; }
.w-kash .float { animation-duration: 11s; animation-delay: -1s; }
@keyframes drift { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(0, -14px, 0); } }
.tag { position: absolute; display: flex; flex-direction: column; gap: 1px; padding: 9px 13px 9px 15px; background: #fff; border-radius: 9px; box-shadow: var(--shadow-s); font-size: 12.5px; color: var(--ink-3); line-height: 1.3; white-space: nowrap; animation: drift 8s ease-in-out infinite alternate; }
.tag::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--green); }
.tag b { color: var(--ink); font-size: 13.5px; }
.t-axis { left: 60%; top: 7%; transform: translateZ(60px); animation-delay: -2s; }
.t-hir { left: 30%; top: 93%; transform: translateZ(150px); animation-delay: -5s; }
.t-hir::before { background: var(--pink); }

.facts { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1200px; margin: 64px auto 0; padding: 0 32px; }
.facts li { position: relative; padding: 22px 26px 26px 0; margin-right: 26px; font-size: 15px; line-height: 1.45; color: var(--ink-2); border-top: 1px solid var(--line); }
.facts li::before { content: ""; position: absolute; left: 0; top: -1px; width: 30px; height: 2px; background: var(--green); }
.facts li:nth-child(2)::before { background: var(--amber); }
.facts li:nth-child(3)::before { background: var(--pink); }
.facts li:nth-child(4)::before { background: var(--ink); }
.facts b { color: var(--ink); font-weight: 600; }

/* ---------- DEMO ---------- */
.demo { position: relative; padding: 130px 0 150px; margin-top: 40px; }
.demo::before { content: ""; position: absolute; inset: 0; background: var(--bg-2); transform: skewY(-5deg); transform-origin: 0 0; z-index: -1; }
.demo-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.ctl { margin-top: 34px; display: grid; gap: 10px; }
.ctl label[for], .ctl legend { font-size: 14px; font-weight: 600; color: var(--ink); }
.ctl input[type=text] { font: 500 19px/1 "IS", "IS Fallback", sans-serif; color: var(--ink); height: 54px; padding: 0 18px; border-radius: 12px; border: 1px solid #cfd8e3; background: #fff; box-shadow: 0 2px 5px -1px rgba(13, 27, 42, .08); width: 100%; transition: border-color .2s, box-shadow .2s; }
.ctl input[type=text]:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(15, 181, 126, .16); }
.ctl fieldset { border: 0; padding: 0; margin: 12px 0 0; min-width: 0; }
.ctl legend { padding: 0; margin-bottom: 10px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; background: #fff; border-radius: 12px; border: 1px solid #dde4ec; }
.seg label { flex: 1 1 auto; position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border-radius: 8px; font-weight: 600; font-size: 15px; color: var(--ink-2); transition: background .25s, color .25s, scale .22s var(--ease-out); }
.seg label:hover span { color: var(--ink); background: var(--bg-2); }
.seg input:checked + span { background: var(--ink); color: #fff; }
.seg input:focus-visible + span { outline: 2px solid var(--green-d); outline-offset: 2px; }
.type-pick { display: none; }
.maps { margin-top: 28px; display: grid; gap: 10px; }
.maps li { display: flex; align-items: baseline; gap: 10px; font-size: 14.5px; color: var(--ink-3); }
.maps b { color: var(--ink); font-weight: 600; min-width: 112px; }
.maps i { width: 10px; height: 10px; border-radius: 3px; flex: none; transform: translateY(1px); }
.k1 { background: var(--green); } .k2 { background: var(--amber); } .k3 { background: var(--pink); }

.demo-stage { position: relative; aspect-ratio: 1 / 1.16; }
.sample { position: absolute; right: 0; top: -6px; z-index: 5; font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--amber-d); background: #fff6e8; border: 1px solid #f7d9a8; border-radius: 6px; padding: 5px 9px; }
.note { position: absolute; left: 0; bottom: -46px; font-size: 13.5px; color: var(--ink-3); }
.d-rig { position: absolute; inset: 0; }
/* the pieces lie flat (no 3D, no fractional transform at rest), so every line of sample text stays sharp */
.d-panel { position: absolute; isolation: isolate; }
/* a type change: each piece steps out and back in (main.js fills it at the 42% mark): the site, then the listing, then the cards deal in */
@media (prefers-reduced-motion: no-preference) { :where(html:not(.calm)) .d-panel.swap { animation: swap .38s cubic-bezier(.3, 0, .2, 1); } }
@keyframes swap { 42% { opacity: 0; transform: translate3d(calc(var(--sx) * -1), calc(var(--sy) * -1), 0); } 43% { opacity: 0; transform: translate3d(var(--sx), var(--sy), 0); } }
/* first arrival: the stage holds still and its pieces come in one after another as it scrolls into view (main.js .rv/.in) */
@media (prefers-reduced-motion: no-preference) {
  :where(html.js:not(.calm)) #demo .demo-stage.rv { opacity: 1; transform: none; }
  :where(html.js:not(.calm)) #demo .demo-stage.rv .d-panel { transition: opacity .5s var(--ease-out), transform .7s var(--ease-out); }
  :where(html.js:not(.calm)) #demo .demo-stage.rv:not(.in) .d-panel { opacity: 0; transform: translate3d(calc(var(--sx) * 3), calc(var(--sy) * 4), 0); }
  :where(html.js:not(.calm)) #demo .demo-stage.rv .d-gl { transition-delay: .18s; }
  :where(html.js:not(.calm)) #demo .demo-stage.rv .d-bc { transition-delay: .34s; }
}

/* sample sites: one variant per type (.v-cafe ...), shown by the panel's own data-t. 1em = 10px at the 540px design width. */
.d-panel:not([data-t=cafe]) .v-cafe, .d-panel:not([data-t=salon]) .v-salon, .d-panel:not([data-t=clinic]) .v-clinic, .d-panel:not([data-t=contractor]) .v-contractor, .d-panel:not([data-t=shop]) .v-shop { display: none; }
.d-site { --sx: 0px; --sy: 6px; left: 0; top: 0; width: 88%; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow), 0 0 0 1px rgba(13, 27, 42, .06); background: #fff; container-type: inline-size; }
.site { position: relative; container-type: inline-size; aspect-ratio: 54 / 37; overflow: hidden; }
.v { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; font: 400 calc(100cqw / 54)/1.4 "IS", "IS Fallback", sans-serif; }
.v img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v::after { content: ""; position: absolute; inset: 0; pointer-events: none; }

/* the browser frame: tab strip, toolbar, address pill (1em = 10px at the 540px design width) */
.d-site .bar { display: block; height: auto; padding: 0; gap: 0; background: #dee1e6; border: 0; font: 400 calc(100cqw / 54)/1 "IS", "IS Fallback", sans-serif; color: #3c4043; }
.d-site .bar span { flex: none; margin: 0; overflow: visible; text-align: left; font-size: inherit; color: inherit; letter-spacing: 0; white-space: nowrap; }
.b-tabs { display: flex; align-items: flex-end; height: 3em; padding: 0 1.4em; }
.d-site .bar i { width: 1.1em; height: 1.1em; margin: 0 .65em 1.05em 0; background: #ff5f57; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.d-site .bar i:nth-child(2) { background: #febc2e; }
.d-site .bar i:nth-child(3) { background: #28c840; margin-right: 1.5em; }
.b-tab { position: relative; display: flex; align-items: center; gap: .65em; height: 2.4em; min-width: 14em; padding: 0 3em 0 1em; background: #fff; border-radius: .75em .75em 0 0; font-size: 1.05em; color: #202124; }
.b-tab::after { content: "×"; position: absolute; right: 1em; top: 50%; translate: 0 -54%; font-size: 1.25em; color: #80868b; }
.b-tab b { display: grid; place-items: center; width: 1.75em; height: 1.75em; border-radius: .45em; background: var(--fav, #202124); color: var(--fav-ink, #fff); font-size: .7em; font-weight: 700; letter-spacing: -.02em; }
.b-tool { display: flex; align-items: center; gap: 1em; height: 3.4em; padding: 0 1.4em; background: #fff; border-bottom: 1px solid #e3e6ea; }
.b-tool svg { flex: none; width: 1.6em; height: 1.6em; fill: none; stroke: #5f6368; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.b-tool > svg:nth-child(2) { stroke: #c4c7cb; }
.b-url { flex: 1; display: flex; align-items: center; justify-content: center; gap: .5em; height: 2.3em; margin: 0 5.4em 0 1em; border-radius: 99em; background: #f1f3f4; font-size: 1.1em; color: #202124; }
.b-url svg { width: 1.05em; height: 1.05em; stroke-width: 2.4; }
.d-site[data-t=cafe] { --fav: #b5532f; }
.d-site[data-t=salon] { --fav: #1f1410; --fav-ink: #d9b382; }
.d-site[data-t=clinic] { --fav: #14403f; }
.d-site[data-t=contractor] { --fav: #1b1a18; --fav-ink: #c9a56b; }
.d-site[data-t=shop] { --fav: #b5523b; }

/* cafe: editorial broadsheet */
.v.v-cafe { background: #f4ece0; color: #2a1a12; padding: 0 2.4em; }
.c-mast { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1.2em; height: 3.4em; border-bottom: 3px double rgba(42, 26, 18, .6); }
.c-date { font-size: .95em; color: rgba(42, 26, 18, .7); white-space: nowrap; }
.c-nav { display: flex; gap: 1.5em; font-size: .88em; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.c-order { justify-self: end; font-size: .95em; font-weight: 600; color: #b5532f; white-space: nowrap; box-shadow: 0 1px 0 currentColor; }
.c-plate { flex: none; padding: .12em 0 .04em; text-align: center; font: 400 clamp(3em, calc(44em / var(--n, 11)), 7.6em)/.94 "Fraunces", Georgia, serif; letter-spacing: -.035em; text-wrap: balance; overflow-wrap: anywhere; }
.c-ed { flex: none; display: flex; align-items: center; height: 2.4em; border-block: 1px solid rgba(42, 26, 18, .6); font-size: .92em; }
.c-ed > p { flex: none; padding-right: 1.2em; margin-right: 1.2em; border-right: 1px solid rgba(42, 26, 18, .25); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #b5532f; white-space: nowrap; }
.c-tick { flex: 1; min-width: 0; display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 2em, #000 calc(100% - 2em), transparent); mask-image: linear-gradient(90deg, transparent, #000 2em, #000 calc(100% - 2em), transparent); }
.c-run { flex: none; display: flex; gap: 2.6em; padding-right: 2.6em; font: italic 400 1.05em/1 "Fraunces", Georgia, serif; white-space: nowrap; animation: c-run 30s linear infinite; }
.c-run span::before { content: "◆"; margin-right: .9em; font-size: .6em; vertical-align: .2em; color: #b5532f; font-style: normal; }
@keyframes c-run { to { transform: translateX(-100%); } }
html.calm .c-tick { -webkit-mask-image: none; mask-image: none; }
html.calm .c-run[aria-hidden], html.calm .c-run span:nth-child(n+3) { display: none; }
html.calm .c-run { flex: 1; justify-content: space-around; padding: 0; }
.c-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 14fr 16fr 19fr; padding: 1.2em 0 1.5em; }
.c-grid > * { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 0 1.4em; border-left: 1px solid rgba(42, 26, 18, .2); }
.c-grid > :first-child { padding-left: 0; border-left: 0; }
.c-grid > :last-child { padding-right: 0; }
.c-kick { font-size: .85em; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #b5532f; }
.c-head { margin-top: .3em; font: 400 2.05em/1.02 "Fraunces", Georgia, serif; letter-spacing: -.02em; text-wrap: balance; }
.c-dek { margin-top: .6em; font-size: 1.05em; line-height: 1.45; color: rgba(42, 26, 18, .78); text-wrap: pretty; }
.c-dek::first-letter { float: left; margin: .1em .04em 0 -.02em; font: 400 2.75em/.8 "Fraunces", Georgia, serif; color: #b5532f; }
.c-open { margin-top: auto; padding-top: .8em; border-top: 1px solid rgba(42, 26, 18, .2); font-size: .85em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(42, 26, 18, .7); }
.c-open i { display: inline-block; width: .65em; height: .65em; margin-right: .5em; border-radius: 50%; background: #6b7a4b; }
.c-open .d-hours { display: block; margin-top: .25em; font: 400 1.75em/1.1 "Fraunces", Georgia, serif; letter-spacing: -.01em; text-transform: none; color: #2a1a12; white-space: nowrap; }
.c-btn { align-self: flex-start; display: inline-flex; align-items: center; height: 2.6em; margin-top: .8em; padding: 0 1.2em; border-radius: 99em; background: #2a1a12; color: #f4ece0; font-size: 1.05em; font-weight: 600; white-space: nowrap; }
.c-fig img { flex: 1; min-height: 0; object-position: 50% 40%; }
.c-fig figcaption { order: -1; margin: 0 0 .45em; }
.c-fig figcaption, .c-pastry figcaption { flex: none; margin-top: .5em; font: italic 400 .98em/1.3 "Fraunces", Georgia, serif; color: rgba(42, 26, 18, .7); }
.c-bh { display: flex; justify-content: space-between; align-items: baseline; gap: .6em; padding-bottom: .45em; border-bottom: 2px solid #2a1a12; }
.c-bh b { font: 400 1.5em/1 "Fraunces", Georgia, serif; letter-spacing: -.01em; white-space: nowrap; }
.c-bh span { font-size: .74em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #b5532f; white-space: nowrap; }
.c-board li { display: flex; align-items: baseline; gap: .4em; padding: .48em 0; border-bottom: 1px solid rgba(42, 26, 18, .12); font-size: .98em; line-height: 1.2; }
.c-board span { white-space: nowrap; }
.c-board i { flex: 1; min-width: .6em; border-bottom: 1px dotted rgba(42, 26, 18, .45); }
.c-board b { font-weight: 600; color: #b5532f; font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-pastry { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 1em; }
.c-pastry figcaption { order: -1; margin: 0 0 .45em; }
.c-pastry img { flex: 1; min-height: 0; object-position: 50% 40%; }

/* salon: lookbook cover */
.v.v-salon { background: #1f1410; color: #f3e9dc; }
.v .s-bg { position: absolute; top: 0; left: 0; width: 34em; object-position: 50% 16%; }
.v.v-salon::after { right: 20em; background: linear-gradient(180deg, rgba(31, 20, 16, .62), rgba(31, 20, 16, 0) 20%), linear-gradient(0deg, rgba(31, 20, 16, .9), rgba(31, 20, 16, .35) 38%, rgba(31, 20, 16, 0) 62%), linear-gradient(90deg, rgba(31, 20, 16, .6), rgba(31, 20, 16, 0) 46%); }
.v.v-salon > :not(img) { position: absolute; z-index: 1; }
.s-top { left: 0; width: 34em; top: 0; display: flex; align-items: center; justify-content: space-between; height: 4.2em; padding: 0 1.8em 0 4.2em; }
.s-links { display: flex; gap: 1.4em; font-size: .84em; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(243, 233, 220, .88); }
.s-side { left: 1.5em; top: 50%; translate: 0 -50%; writing-mode: vertical-rl; rotate: 180deg; font-size: .78em; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: #d9b382; white-space: nowrap; }
.s-side::after { content: ""; display: inline-block; width: 1px; height: 4em; margin-top: 1.2em; background: currentColor; opacity: .6; }
.s-cover { left: 4.2em; top: 6.4em; width: 19em; }
.s-issue { font-size: .85em; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #d9b382; }
.s-issue::after { content: ""; display: block; width: 3.4em; height: 1px; margin-top: .9em; background: currentColor; }
.s-line { margin-top: .5em; font: italic 400 2.3em/1.06 "ISerif", Georgia, serif; letter-spacing: -.01em; text-wrap: balance; }
.s-reel { left: 4.2em; bottom: 11.8em; display: grid; grid-template-columns: auto auto; align-items: end; gap: .8em; }
.s-count { grid-column: 1 / -1; display: flex; align-items: baseline; gap: .4em; font: 400 1.15em/1 "ISerif", Georgia, serif; color: rgba(243, 233, 220, .7); }
.s-count b { font-weight: 400; font-size: 1.7em; color: #f3e9dc; }
.s-prog { grid-column: 1 / -1; display: block; width: 100%; height: 1px; background: linear-gradient(90deg, #d9b382 33%, rgba(243, 233, 220, .3) 33%); }
.v .s-reel img { width: 6.6em; height: 4.4em; border: 1px solid rgba(243, 233, 220, .45); }
.v .s-reel img + img { width: 4.4em; opacity: .75; }
.s-name { left: 7.8cqw; width: 52cqw; bottom: 3.4cqw; font: 400 clamp(3.6em, calc(56em / (var(--n, 11) + 2)), 8em)/.86 "ISerif", Georgia, serif; letter-spacing: -.025em; color: #f6eee3; text-wrap: balance; overflow-wrap: anywhere; }
/* the menu column: a flush page section with prices and a stylist picker, not a card over the photo */
.s-menu { top: 0; right: 0; bottom: 0; width: 20em; display: flex; flex-direction: column; padding: 1.2em 1.8em 1.5em; background: #f3e9dc; color: #1f1410; }
.s-mh { display: flex; align-items: baseline; justify-content: space-between; gap: .6em; white-space: nowrap; }
.s-mh b { font: 400 1.9em/1 "ISerif", Georgia, serif; }
.s-mh small { font-size: .8em; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #8a6440; white-space: nowrap; }
.s-cta { display: inline-flex; align-items: center; height: 2.4em; padding: 0 1.2em; border-radius: 99em; border: 1px solid rgba(217, 179, 130, .7); color: #f3dcb6; font-size: .95em; font-weight: 600; white-space: nowrap; }
.s-tabs { display: flex; gap: 1.3em; margin-top: .8em; border-bottom: 1px solid rgba(31, 20, 16, .14); font-size: .85em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(31, 20, 16, .5); }
.s-tabs span { padding-bottom: .55em; margin-bottom: -1px; }
.s-tabs .on { color: #1f1410; box-shadow: inset 0 -2px 0 #b08a5a; }
.s-list { margin-top: .4em; }
.s-list li { display: flex; align-items: center; gap: .8em; padding: .38em .6em; margin: 0 -.6em; border-bottom: 1px solid rgba(31, 20, 16, .1); }
/* three treatments keep the stylists and the button clear of the listing card */
.s-list li:nth-child(n+4) { display: none; }
.s-list li.on { border-radius: .3em; border-color: transparent; background: #e8d6bd; box-shadow: inset 2px 0 #b08a5a; }
.s-list p { flex: 1; min-width: 0; display: grid; }
.s-list b { font: 400 1.25em/1.15 "ISerif", Georgia, serif; }
.s-list small { font-size: .9em; color: rgba(31, 20, 16, .58); }
.s-list em { font: 400 1.2em/1 "ISerif", Georgia, serif; font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; }
.s-lbl { margin-top: .8em; font-size: .8em; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(31, 20, 16, .55); }
.s-sty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; margin-top: .5em; }
.s-sty span { display: grid; justify-items: center; padding: .45em .2em .4em; border: 1px solid rgba(31, 20, 16, .16); border-radius: .4em; }
.s-sty .on { border-color: #1f1410; box-shadow: inset 0 0 0 1px #1f1410; }
.s-sty i { display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: #6f5443; color: #f3e9dc; font: 400 1em/1 "ISerif", Georgia, serif; font-style: normal; letter-spacing: .04em; }
.s-sty span:nth-child(1) i { background: #b08a5a; } .s-sty span:nth-child(2) i { background: #8a6a4e; }
.s-sty b { margin-top: .3em; font-size: .9em; font-weight: 600; }
.s-sty small { font-size: .72em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(31, 20, 16, .55); }
.s-go { display: flex; align-items: center; justify-content: center; gap: .4em; height: 2.6em; margin-top: .6em; border-radius: .25em; background: #d9b382; color: #1f1410; font-size: .95em; font-weight: 600; }
.s-go svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.v.v-clinic { display: block; background: #f7f8f6; color: #1f2b2a; }
.v.v-clinic > * { position: absolute; }
.k-nav { left: 0; right: 0; top: 0; height: 4.6em; display: flex; align-items: center; gap: 2em; padding: 0 2.6em; background: #fff; border-bottom: 1px solid rgba(20, 64, 63, .08); }
.k-brand { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: .7em; }
.k-mark { flex: none; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: .7em; background: #14403f; color: #fff; font-weight: 700; letter-spacing: -.03em; }
.k-nm { min-width: 0; font-size: clamp(1.15em, calc(24em / (var(--n, 11) + 6)), 1.5em); line-height: 1.1; font-weight: 600; letter-spacing: -.03em; color: #14403f; text-wrap: balance; overflow-wrap: anywhere; }
.k-links { flex: none; display: flex; gap: 1.7em; margin-left: auto; font-size: 1.05em; font-weight: 500; color: rgba(31, 43, 42, .72); }
.k-portal { flex: none; font-size: 1.05em; font-weight: 600; color: #14403f; }
.k-pill { flex: none; display: inline-flex; align-items: center; height: 2.5em; padding: 0 1.2em; border-radius: .8em; background: #14403f; color: #fff; font-size: 1.05em; font-weight: 600; }
.k-menu { display: none; }
.v.v-clinic svg { flex: none; width: 1.35em; height: 1.35em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.k-copy { left: 2.6em; top: 4.6em; bottom: 0; width: 22.6em; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-bottom: 1.2em; }
.k-badge { display: inline-flex; align-items: center; gap: .55em; padding: .42em .9em .42em .7em; border-radius: 99em; background: #e3eee8; color: #2c5a49; font-size: .95em; font-weight: 600; }
.k-badge i { width: .6em; height: .6em; border-radius: 50%; background: #3f8f6b; }
.k-title { margin-top: .32em; max-width: 100%; font-size: clamp(2.5em, calc(46em / (var(--n, 11) + 3)), 4.6em); line-height: 1; font-weight: 600; letter-spacing: -.04em; color: #14403f; text-wrap: balance; overflow-wrap: anywhere; }
.k-line { margin-top: .55em; max-width: 17em; font-size: 1.3em; line-height: 1.45; color: rgba(31, 43, 42, .75); text-wrap: pretty; }
.k-acts { display: flex; flex-wrap: wrap; gap: .55em; margin-top: 1.4em; }
.k-btn, .k-call { display: inline-flex; align-items: center; gap: .5em; height: 2.9em; padding: 0 1.15em; border-radius: .9em; font-size: .95em; font-weight: 600; white-space: nowrap; }
.k-btn { background: #14403f; color: #fff; box-shadow: 0 .7em 1.3em -.7em rgba(20, 64, 63, .7); }
.k-call { background: #fff; color: #14403f; box-shadow: inset 0 0 0 1px rgba(20, 64, 63, .2); }
.k-call svg { width: 1.2em; height: 1.2em; }
.k-rate { display: flex; align-items: center; gap: .5em; margin-top: 1.4em; font-size: 1em; color: rgba(31, 43, 42, .7); white-space: nowrap; }
.k-avs { display: flex; margin-right: .2em; }
.k-avs i { display: grid; place-items: center; width: 2em; height: 2em; margin-left: -.5em; border-radius: 50%; border: .15em solid #f7f8f6; background: #9db5a0; color: #fff; font-size: .8em; font-style: normal; font-weight: 700; }
.k-avs i:first-child { margin-left: 0; background: #14403f; }
.k-avs i:last-child { background: #c9a87c; }
.k-rate b { font-weight: 700; color: #1f2b2a; }
.k-stars { color: #e3a008; letter-spacing: .04em; }
.k-plans { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .9em; }
.k-plans span { display: inline-flex; align-items: center; gap: .45em; padding: .38em .8em; border-radius: .6em; background: #fff; box-shadow: inset 0 0 0 1px rgba(20, 64, 63, .14); font-size: .88em; font-weight: 500; color: #2b4b47; white-space: nowrap; }
.k-plans span::before { content: ""; width: .5em; height: .28em; margin-top: -.15em; border: solid #3f8f6b; border-width: 0 0 .13em .13em; rotate: -45deg; }
.k-ph { left: 27.6em; right: 2.4em; top: 6.4em; bottom: 2.4em; margin: 0; }
.v .k-ph img { border-radius: 1.6em; object-position: 50% 32%; }
.k-wait { position: absolute; right: 1.1em; top: 1.1em; display: flex; align-items: center; gap: .5em; padding: .55em 1em .55em .85em; border-radius: 99em; background: #fff; color: rgba(31, 43, 42, .78); font-size: .92em; white-space: nowrap; box-shadow: 0 .8em 1.6em -.8em rgba(20, 64, 63, .5); }
.k-wait i { width: .62em; height: .62em; border-radius: 50%; background: #2fa36b; animation: k-pulse 2s ease-out infinite; }
@keyframes k-pulse { 0% { box-shadow: 0 0 0 0 rgba(47, 163, 107, .6); } 100% { box-shadow: 0 0 0 .7em rgba(47, 163, 107, 0); } }
.k-wait b { font-weight: 700; color: #14403f; }
.k-book { position: absolute; left: -2.6em; top: 3.7em; width: 15.6em; padding: 1.1em 1.2em 1.2em; border-radius: 1.2em; background: #fff; box-shadow: 0 2.4em 4em -1.8em rgba(20, 64, 63, .5), 0 0 0 1px rgba(20, 64, 63, .06); }
.k-doc { display: flex; align-items: center; gap: .7em; padding-bottom: .7em; border-bottom: 1px solid rgba(20, 64, 63, .08); }
.k-doc i { flex: none; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: #e3eee8; color: #14403f; font-size: .9em; font-style: normal; font-weight: 700; }
.k-doc p { display: grid; min-width: 0; line-height: 1.25; }
.k-doc b { font-size: 1.02em; font-weight: 600; white-space: nowrap; }
.k-doc small { font-size: .82em; color: rgba(31, 43, 42, .6); white-space: nowrap; }
.k-doc em { margin-left: auto; font-size: .8em; font-style: normal; font-weight: 600; color: #14403f; }
.k-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3em; margin-top: .7em; }
.k-week span { display: grid; justify-items: center; padding: .4em 0 .45em; border-radius: .7em; font-size: 1.05em; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.k-week small { font-size: .68em; font-weight: 500; color: rgba(31, 43, 42, .55); }
.k-week .on { background: #14403f; color: #fff; }
.k-week .on small { color: rgba(255, 255, 255, .72); }
.k-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35em; margin-top: .7em; }
.k-slots span { display: grid; place-items: center; height: 2.15em; border-radius: .6em; box-shadow: inset 0 0 0 1px rgba(20, 64, 63, .16); font-size: .92em; font-weight: 500; font-variant-numeric: tabular-nums; }
.k-slots .on { background: #e3eee8; color: #14403f; font-weight: 700; box-shadow: inset 0 0 0 .13em #14403f; }
.k-seg { display: grid; grid-template-columns: 1fr 1fr; margin-top: .7em; padding: .25em; border-radius: .7em; background: #eef2f0; }
.k-seg span { padding: .42em 0; border-radius: .5em; text-align: center; font-size: .86em; font-weight: 600; color: rgba(31, 43, 42, .6); white-space: nowrap; }
.k-seg .on { background: #fff; color: #14403f; box-shadow: 0 1px 3px rgba(13, 27, 42, .14); }
.k-go { display: grid; place-items: center; height: 2.6em; margin-top: .7em; border-radius: .8em; background: #14403f; color: #fff; font-size: .92em; font-weight: 600; white-space: nowrap; }

/* contractor: architect's portfolio (concrete page, charcoal, brass) on a 12-column guide */
.v.v-contractor { display: block; background: #e8e4dd; color: #1b1a18; }
.v.v-contractor > * { position: absolute; z-index: 1; }
.v.v-contractor::before { content: ""; position: absolute; left: 2.4em; right: 2.4em; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, rgba(27, 26, 24, .08) 0 1px, transparent 1px 8.3333%); box-shadow: inset -1px 0 rgba(27, 26, 24, .08); pointer-events: none; }
.v.v-contractor svg { flex: none; width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.r-nav { left: 0; right: 0; top: 0; height: 4.4em; display: flex; align-items: center; gap: 2em; padding: 0 2.4em; background: #1b1a18; color: #f4efe6; }
.r-brand { flex: 0 1 auto; min-width: 0; font: 800 clamp(1.05em, calc(22em / (var(--n, 11) + 6)), 1.4em)/1.05 "Archivo", sans-serif; text-transform: uppercase; letter-spacing: .02em; text-wrap: balance; overflow-wrap: anywhere; }
.r-links { flex: none; display: flex; gap: 1.9em; margin-left: auto; font-size: .9em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 239, 230, .78); }
.r-links span:first-child { color: #f4efe6; box-shadow: 0 .45em 0 -.3em #b08d57; }
.r-tel { flex: none; padding-left: 1.6em; border-left: 1px solid rgba(244, 239, 230, .2); font-size: .95em; font-weight: 600; color: #c9a56b; font-variant-numeric: tabular-nums; }
.r-menu { display: none; }
.r-sec { left: 2.4em; top: 5.5em; font-size: .88em; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(27, 26, 24, .7); white-space: nowrap; }
.r-sec b { font: 800 1.15em/1 "Archivo", sans-serif; color: #b08d57; }
.r-copy { left: 2.4em; top: 7.6em; width: 17.6em; height: 15.6em; display: flex; flex-direction: column; justify-content: center; }
.r-kind { font-size: .85em; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #8a6a37; text-wrap: balance; }
.r-title { margin-top: .3em; max-width: 100%; font: 800 clamp(2.3em, calc(34em / (var(--n, 11) + 3)), 4.2em)/.92 "Archivo", sans-serif; text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance; overflow-wrap: anywhere; }
.r-line { margin-top: .75em; max-width: 15em; font-size: 1.2em; line-height: 1.4; color: rgba(27, 26, 24, .75); text-wrap: pretty; }
.r-ph { left: 22.6em; right: 2.4em; top: 7.6em; height: 12.2em; margin: 0; }
.v .r-ph img { object-position: 50% 58%; }
.r-dim { position: absolute; display: flex; align-items: center; justify-content: center; color: #1b1a18; }
.r-dim::before { content: ""; position: absolute; background: rgba(27, 26, 24, .55); }
.r-dim b { position: relative; padding: 0 .6em; background: #e8e4dd; font: 800 .8em/1 "Archivo", sans-serif; letter-spacing: .06em; white-space: nowrap; }
.r-dw { left: 0; right: 0; top: -1.7em; height: 1em; border-inline: 1px solid rgba(27, 26, 24, .55); }
.r-dw::before { left: 0; right: 0; top: 50%; height: 1px; }
.r-dh { top: 0; bottom: 0; left: -1.7em; width: 1em; border-block: 1px solid rgba(27, 26, 24, .55); }
.r-dh::before { top: 0; bottom: 0; left: 50%; width: 1px; }
.r-dh b { writing-mode: vertical-rl; rotate: 180deg; padding: .6em 0; }
.r-geo { position: absolute; right: .9em; top: .9em; padding: .45em .75em; border-radius: .2em; background: rgba(27, 26, 24, .82); color: #e6d3ad; font-size: .78em; font-weight: 600; letter-spacing: .1em; white-space: nowrap; }
.r-est { left: 22.6em; right: 2.4em; top: 20.4em; display: flex; gap: .4em; padding: max(.5em, 6px); border-radius: .25em; background: #1b1a18; color: #f4efe6; }
/* the button keeps its size and the fields give way, so it sits inside the bar with the bar's padding all round */
.r-est .r-f { flex: 1 1 auto; min-width: 0; }
.r-f { display: grid; align-content: center; padding: .35em .7em; border-radius: .15em; background: #2c2a27; font-size: .95em; font-weight: 500; line-height: 1.25; white-space: nowrap; }
.r-f small { font-size: .7em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #c9a56b; }
.r-sel { grid-template-columns: auto auto; column-gap: .7em; }
.r-sel small { grid-column: 1 / -1; }
.r-sel svg { grid-row: 2; grid-column: 2; width: 1.1em; height: 1.1em; align-self: center; color: #c9a56b; }
.r-go { flex: none; display: inline-flex; align-items: center; padding: 0 1em; border-radius: .15em; background: #b08d57; color: #1b1a18; font: 800 .9em/1 "Archivo", sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.r-stats { left: 2.4em; right: 2.4em; top: 24.2em; height: 3.2em; display: flex; align-items: center; border-block: 1px solid rgba(27, 26, 24, .35); border-top: 2px solid #1b1a18; }
.r-stats > span { display: flex; align-items: baseline; gap: .45em; padding: 0 2.2em 0 0; margin-right: 2.2em; border-right: 1px solid rgba(27, 26, 24, .2); font-size: .85em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(27, 26, 24, .7); white-space: nowrap; }
.r-stats b { font: 800 2em/1 "Archivo", sans-serif; letter-spacing: 0; color: #1b1a18; }
.r-stats .r-lic { margin: 0 0 0 auto; padding: .45em .8em; border: 1px solid #b08d57; border-radius: 99em; color: #6e5428; letter-spacing: .12em; font-size: .78em; }
.r-strip { left: 2.4em; top: 28.4em; bottom: 2em; width: 37.4em; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; }
.r-strip li { min-height: 0; display: flex; flex-direction: column; }
.r-strip img { flex: 1; min-height: 0; }
.r-strip li:nth-child(2) img { object-position: 50% 70%; }
.r-strip p { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .5em; margin-top: .5em; padding-top: .4em; border-top: 1px solid rgba(27, 26, 24, .35); font-size: .88em; font-weight: 600; white-space: nowrap; }
.r-strip .on p { border-top: 2px solid #b08d57; }
.r-strip p b { font: 800 1em/1 "Archivo", sans-serif; color: #8a6a37; }
.r-strip p span { flex: 0 0 100%; font-weight: 500; color: rgba(27, 26, 24, .6); }

/* shop: storefront */
.v.v-shop { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) 2em 16.4em 2.4em; grid-template-rows: 2.2em 4em minmax(0, 1fr) auto 1.8em; background: #f6eee3; color: #2b1e22; }
.p-ann { grid-column: 1 / -1; line-height: 2.5em; text-align: center; background: #2b1e22; color: #f6eee3; font-size: .88em; font-weight: 500; letter-spacing: .03em; white-space: nowrap; }
.p-nav { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.6em; padding: 0 2.4em; border-bottom: 1px solid rgba(43, 30, 34, .1); }
.p-mark { flex: 0 1 auto; min-width: 0; font: 700 clamp(1.1em, calc(22em / (var(--n, 11) + 7)), 1.75em)/1 "Figtree", sans-serif; letter-spacing: -.04em; text-transform: lowercase; overflow-wrap: anywhere; text-wrap: balance; }
.p-links { flex: none; display: flex; gap: 1.8em; font-size: 1em; font-weight: 500; color: rgba(43, 30, 34, .78); }
.p-links span:first-child { color: #2b1e22; font-weight: 600; text-decoration: underline 2px #b5523b; text-underline-offset: .4em; }
.p-search { flex: none; display: flex; align-items: center; gap: .5em; height: 2.4em; width: 9.6em; margin-left: auto; padding: 0 .9em; border-radius: 99em; background: rgba(43, 30, 34, .06); font-size: .95em; color: rgba(43, 30, 34, .55); }
.v.v-shop svg { flex: none; width: 1.55em; height: 1.55em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.p-search svg { width: 1.2em; height: 1.2em; }
.p-acct { flex: none; display: flex; align-items: center; gap: .4em; font-size: .95em; font-weight: 500; }
.p-bag { position: relative; flex: none; display: grid; place-items: center; }
.p-bag b { position: absolute; right: -.55em; top: -.4em; display: grid; place-items: center; min-width: 1.45em; height: 1.45em; border-radius: 99em; background: #b5523b; color: #fbf4ea; font-size: .72em; font-weight: 700; }
.p-menu { display: none; }
.p-copy { grid-column: 2; grid-row: 3; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-top: .6em; }
.p-kind { font-size: .85em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #b5523b; }
.p-title { margin-top: .12em; font: 700 clamp(3em, calc(31em / var(--n, 11)), 5.4em)/.92 "Figtree", sans-serif; letter-spacing: -.045em; text-transform: lowercase; text-wrap: balance; overflow-wrap: anywhere; max-width: 100%; }
.p-line { margin-top: .45em; font-size: 1.15em; line-height: 1.4; color: rgba(43, 30, 34, .75); }
.p-act { margin-top: .9em; }
.p-btn { display: inline-flex; align-items: center; height: 2.6em; padding: 0 1.25em; border-radius: 99em; background: #b5523b; color: #fbf4ea; font-size: 1.05em; font-weight: 600; white-space: nowrap; }
.p-chips { display: flex; flex-wrap: wrap; gap: .45em; margin-top: .8em; }
.p-chips span { padding: .38em .85em; border: 1px solid rgba(43, 30, 34, .2); border-radius: 99em; font-size: 1em; font-weight: 500; white-space: nowrap; }
.p-chips .on { background: #2b1e22; border-color: #2b1e22; color: #f6eee3; }
.p-still { position: relative; grid-column: 4; grid-row: 3 / 5; margin-top: 1.4em; overflow: hidden; border-radius: .3em; }
.p-still img { object-position: 42% 50%; }
.p-hot { position: absolute; left: 24%; top: 47%; display: flex; align-items: center; gap: .6em; }
.p-hot i { position: relative; flex: none; width: 1.3em; height: 1.3em; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .35em rgba(255, 255, 255, .45), 0 .3em .8em rgba(43, 30, 34, .35); }
.p-hot i::after { content: ""; position: absolute; inset: .38em; border-radius: 50%; background: #b5523b; }
.p-hot > span { display: grid; padding: .5em .8em; border-radius: .35em; background: #fff; font-size: .88em; line-height: 1.25; white-space: nowrap; box-shadow: 0 .8em 1.6em -.6em rgba(43, 30, 34, .45); }
.p-hot b { font-weight: 600; }
.p-row { grid-column: 2; grid-row: 4; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1em; padding-top: 1.2em; }
.p-row li { min-width: 0; display: flex; flex-direction: column; }
.p-ph { position: relative; display: block; aspect-ratio: 1 / .78; overflow: hidden; border-radius: .3em; background: #efe5d6; }
.v .p-ph img { object-position: 50% 58%; scale: 1.18; }
.p-ph em { position: absolute; left: .55em; top: .55em; padding: .25em .6em; border-radius: 99em; background: #2b1e22; color: #f6eee3; font-size: .75em; font-style: normal; font-weight: 600; letter-spacing: .04em; }
.p-row li:nth-child(2) em { background: #a9b49a; color: #2b1e22; }
.p-pn { display: flex; justify-content: space-between; align-items: baseline; gap: .5em; margin-top: .55em; font-size: .95em; line-height: 1.2; }
.p-pn b { font-weight: 600; }
.p-pn span { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-buy { display: flex; justify-content: space-between; align-items: center; margin-top: .45em; }
.p-sw { display: flex; gap: .3em; }
.p-sw i { width: .9em; height: .9em; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(43, 30, 34, .18); }
.p-sw i:first-child { box-shadow: inset 0 0 0 1px rgba(43, 30, 34, .18), 0 0 0 .15em #f6eee3, 0 0 0 .25em #2b1e22; }
.p-row li:nth-child(1) i:nth-child(1) { background: #e9e1d2; } .p-row li:nth-child(1) i:nth-child(2) { background: #b5523b; } .p-row li:nth-child(1) i:nth-child(3) { background: #3b3330; }
.p-row li:nth-child(2) i:nth-child(1) { background: #c98a3a; } .p-row li:nth-child(2) i:nth-child(2) { background: #a9b49a; } .p-row li:nth-child(2) i:nth-child(3) { background: #2b1e22; }
.p-row li:nth-child(3) i:nth-child(1) { background: #6f7a55; } .p-row li:nth-child(3) i:nth-child(2) { background: #d9c7aa; } .p-row li:nth-child(3) i:nth-child(3) { background: #b5523b; }
.p-add { padding: .3em .75em; border: 1px solid #2b1e22; border-radius: 99em; font-size: .8em; font-weight: 600; white-space: nowrap; }

/* the Google card: a real Business Profile; only the photos and the review carry the type. 1em = 10px at 230px wide. */
.d-gl { --sx: 12px; --sy: 0px; right: 0; bottom: 0; width: 38%; container-type: inline-size; background: #fff; border-radius: 14px; box-shadow: var(--shadow), 0 0 0 1px rgba(13, 27, 42, .06); font-family: Arial, Helvetica, sans-serif; color: #202124; overflow: hidden; }
.gl-in { font-size: calc(100cqw / 23); padding-bottom: 1.2em; }
.gl-ph { position: relative; height: 7.2em; background: #eef0f2; }
.gp { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; height: 100%; }
.gp img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.gp img:first-child { grid-row: 1 / 3; }
.gl-src { position: absolute; left: .8em; top: .8em; z-index: 1; padding: .45em .8em; border-radius: 99em; background: #fff; color: #202124; font: 600 1em/1 "IS", "IS Fallback", sans-serif; box-shadow: 0 1px 3px rgba(0, 0, 0, .22); }
.gl-body { padding: 1em 1.4em 0; }
.gl-name { font-size: 1.6em; line-height: 1.2; overflow-wrap: anywhere; }
.gl-rate { display: flex; align-items: center; gap: .35em; margin-top: .25em; font-size: 1.15em; color: #70757a; }
.gl-rate b, .gl-rev em { color: #fbbc04; font-weight: 400; font-style: normal; letter-spacing: .02em; }
.gl-cat, .gl-open { margin-top: .15em; font-size: 1.15em; color: #70757a; }
.gl-open em { font-style: normal; color: #188038; }
.gl-tabs { display: flex; margin-top: .8em; padding: 0 .6em; border-bottom: 1px solid #e8eaed; font-size: 1.05em; color: #5f6368; }
html[lang="tr"] .gl-tabs { padding: 0 .3em; font-size: .92em; }
/* equal tabs (a longer label takes only the room it needs); the active one carries Google's rounded indicator under its full width */
.gl-tabs span { position: relative; flex: 1 1 0; min-width: max-content; padding: .75em .25em .85em; text-align: center; white-space: nowrap; }
.gl-tabs span:first-child { color: #0b57d0; font-weight: 700; }
.gl-tabs span:first-child::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: #0b57d0; }
.gl-acts { display: flex; justify-content: space-around; padding: .8em .6em 0; }
.gl-acts span { display: grid; justify-items: center; gap: .45em; font-size: 1.05em; color: #0b57d0; white-space: nowrap; }
.gl-acts i { display: grid; place-items: center; width: 3.1em; height: 3.1em; border-radius: 50%; background: #d3e3fd; color: #041e49; }
.gl-acts span:first-child i { background: #0b57d0; color: #fff; }
.gl-acts svg { width: 1.6em; height: 1.6em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gl-chips { display: flex; flex-wrap: wrap; gap: .5em; margin: .8em 1.4em 0; }
.gl-chips span { font-size: 1em; color: #3c4043; border: 1px solid #dadce0; border-radius: 8px; padding: .3em .7em; white-space: nowrap; }
.gl-rev { display: flex; gap: .8em; margin: .8em 1.4em 0; padding-top: .8em; border-top: 1px solid #e8eaed; }
.gl-rev i { flex: none; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: #e8710a; color: #fff; font-size: 1.05em; font-style: normal; font-weight: 700; }
.gl-rev.v-salon i { background: #9334e6; } .gl-rev.v-clinic i { background: #12b5cb; } .gl-rev.v-contractor i { background: #1e8e3e; } .gl-rev.v-shop i { background: #d01884; }
.gl-rev p { display: grid; min-width: 0; font-size: 1.05em; line-height: 1.3; }
.gl-rev b { font-weight: 400; }
.gl-rev small { font-size: .88em; color: #70757a; }
.gl-rev span { margin-top: .15em; color: #3c4043; }

/* business cards: front and back of one printed stock per type, lying on that business's desk (owner 2026-10-28: "business cards look so ugly",
   "MAKE PREMIUM BUSINESS CARDS WITH ART AND ALL"). The stock, the foil art and the desk photo are generated art (concept/art-2026-10-28-bizcards);
   code prints the monogram, the name and the contact lines. 1em = 1/28 of the panel; each card is 80% of the panel (the 3.5 x 2 in ratio).
   The back keeps its art on the right and the mark on its plain left; the front keeps its accent in the top-right corner */
.d-bc { --sx: -10px; --sy: 12px; left: 3%; bottom: 6%; width: 46%; aspect-ratio: 1.2; container-type: inline-size; }
.bc-face { position: absolute; inset: 0; font: 400 calc(100cqw / 28)/1.3 "IS", "IS Fallback", sans-serif; }
.bc-face::before { content: ""; position: absolute; inset: -9% -12% -10% -8%; border-radius: .9em; background: var(--desk) 50% 50% / cover; box-shadow: 0 0 0 1px rgba(13, 27, 42, .06), 0 1.6em 3em -1.4em rgba(13, 27, 42, .45); }
.bc-card { position: absolute; box-sizing: border-box; width: 80%; aspect-ratio: 1.75; overflow: hidden; border-radius: .3em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6em; padding: 1.6em 2em 3.2em; text-align: center; background: 50% 50% / cover;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 .08em .12em rgba(0, 0, 0, .3), 0 .7em 1.3em -.4em rgba(0, 0, 0, .35), 0 2.4em 3.4em -1.8em rgba(0, 0, 0, .55); }
.bc-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, 0) 64%, rgba(0, 0, 0, .08)); }
.bc-back { right: 0; top: 0; rotate: 4deg; align-items: flex-start; justify-content: flex-start; gap: .7em; padding: 1.8em 2em; text-align: left; }
.bc-back > * { max-width: 34%; text-wrap: balance; }
.bc-front { left: 0; bottom: 0; rotate: -3deg; }
.bc-name { font-size: clamp(1.3em, calc(20em / (var(--n, 11) + 3)), 2.2em); line-height: 1.02; text-wrap: balance; overflow-wrap: anywhere; max-width: 100%; }
.bc-cap { font-size: .64em; font-weight: 600; letter-spacing: .24em; }
.bc-meta { position: absolute; left: 2.9em; right: 2.9em; bottom: 2em; display: flex; justify-content: space-between; gap: 1em; margin: 0; font-size: .7em; letter-spacing: .04em; white-space: nowrap; }
.bc-mono { display: grid; place-items: center; font-size: 2.8em; line-height: 1; font-weight: 400; }
.bc-line { font-size: .62em; font-weight: 600; letter-spacing: .24em; line-height: 1.5; text-transform: uppercase; }
.v-cafe .bc-front::before, .v-salon .bc-front::before, .v-contractor :is(.bc-front, .bc-back)::before { content: ""; order: 1; flex: none; }
.bc-front > :not(.bc-name, .bc-meta, .bc-top) { order: 2; }
.v-contractor .bc-back .bc-line { order: 2; }

.bc-face.v-cafe { --desk: url(/pro/demo/bc-cafe-desk-960.webp); }
.v-cafe .bc-front { background-image: url(/pro/demo/bc-cafe-front-720.webp); color: #3a2416; }
.v-cafe .bc-front::before { width: 2.2em; height: 1px; background: #a0522d; }
.v-cafe :is(.bc-name, .bc-mono) { font-family: "Fraunces", Georgia, serif; letter-spacing: -.02em; }
.v-cafe .bc-cap { color: #a0522d; }
.v-cafe .bc-meta { color: rgba(58, 36, 22, .75); }
.v-cafe .bc-back { background-image: url(/pro/demo/bc-cafe-back-720.webp); color: #e2b98a; }
.v-cafe .bc-mono { width: 2em; height: 2em; border: 1px solid rgba(226, 185, 138, .7); border-radius: 50%; font-size: 2.2em; letter-spacing: -.04em; }
.v-cafe .bc-line { font: italic 400 .95em/1.25 "Fraunces", Georgia, serif; letter-spacing: 0; text-transform: none; }

.bc-face.v-salon { --desk: url(/pro/demo/bc-salon-desk-960.webp); }
.v-salon .bc-front { background-image: url(/pro/demo/bc-salon-front-720.webp); color: #1f1915; }
.v-salon .bc-name { font-family: "ISerif", Georgia, serif; font-size: clamp(1.5em, calc(24em / (var(--n, 11) + 3)), 2.6em); letter-spacing: -.01em; }
.v-salon .bc-front::before { width: 2.4em; height: 1px; background: linear-gradient(90deg, #a07a48, #e8cf9e, #a07a48); }
.v-salon .bc-cap { color: #8a6a3c; }
.v-salon .bc-meta { color: rgba(31, 25, 21, .64); }
.v-salon .bc-back { background-image: url(/pro/demo/bc-salon-back-720.webp); color: #c9a46c; }
.v-salon .bc-mono { font-family: "ISerif", Georgia, serif; font-size: 3.6em; letter-spacing: -.02em; padding: 0 .05em; background: linear-gradient(110deg, #9c7646 0%, #f4dfb3 24%, #c39a62 42%, #fff0cc 52%, #b48a54 68%, #ead09d 100%) 0 0 / 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil 7s ease-in-out infinite alternate; }
@keyframes foil { to { background-position: 100% 0; } }

.bc-face.v-clinic { --desk: url(/pro/demo/bc-clinic-desk-960.webp); }
.v-clinic .bc-front { align-items: flex-start; justify-content: flex-end; gap: .4em; padding: 1.6em 2em 3.7em; text-align: left; background-image: url(/pro/demo/bc-clinic-front-720.webp); color: #14403f; }
.bc-top { position: absolute; left: 3.2em; top: 2.5em; display: flex; align-items: center; gap: .6em; font-size: .62em; font-weight: 600; letter-spacing: .18em; color: #4f7a63; }
.bc-top i { width: .75em; height: .75em; border-radius: 50%; background: #9db5a0; }
.v-clinic .bc-name { font-weight: 600; letter-spacing: -.035em; }
.v-clinic .bc-cap { color: rgba(20, 64, 63, .7); letter-spacing: .18em; }
.v-clinic .bc-meta { padding-top: .8em; border-top: 1px solid rgba(20, 64, 63, .16); color: rgba(20, 64, 63, .8); }
.v-clinic .bc-back { background-image: url(/pro/demo/bc-clinic-back-720.webp); color: #f1ede4; }
.v-clinic .bc-mono { font-weight: 600; letter-spacing: -.05em; }
.v-clinic .bc-line { color: #a9c6b0; }

.bc-face.v-contractor { --desk: url(/pro/demo/bc-contractor-desk-960.webp); }
.v-contractor .bc-front { align-items: flex-start; gap: .55em; padding: 1.6em 2em 3.4em; text-align: left; background-image: url(/pro/demo/bc-contractor-front-720.webp); color: #1b1a18; }
.v-contractor .bc-name { font-family: "Archivo", sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(1.2em, calc(18em / (var(--n, 11) + 3)), 2em); }
.v-contractor :is(.bc-front, .bc-back)::before { width: 2.2em; height: .2em; background: #b08d57; }
.v-contractor .bc-cap { letter-spacing: .16em; }
.bc-roc { font-size: .62em; font-weight: 600; letter-spacing: .16em; color: #5e4520; }
.v-contractor .bc-meta { color: rgba(27, 26, 24, .82); }
.v-contractor .bc-back { background-image: url(/pro/demo/bc-contractor-back-720.webp); color: #efe8dc; }
.v-contractor .bc-mono { font-family: "Archivo", sans-serif; font-weight: 800; letter-spacing: .02em; }
.v-contractor .bc-line { color: #d4b27a; letter-spacing: .18em; }

.bc-face.v-shop { --desk: url(/pro/demo/bc-shop-desk-960.webp); }
.v-shop .bc-front { background-image: url(/pro/demo/bc-shop-front-720.webp); color: #2b1e22; }
.v-shop :is(.bc-name, .bc-mono) { font-family: "Figtree", sans-serif; font-weight: 700; text-transform: lowercase; letter-spacing: -.04em; }
.v-shop .bc-name { font-size: clamp(1.4em, calc(22em / (var(--n, 11) + 3)), 2.5em); color: #b5523b; }
.v-shop .bc-cap { font-size: .8em; font-weight: 500; letter-spacing: 0; }
.v-shop .bc-meta { color: rgba(43, 30, 34, .68); }
.v-shop .bc-back { background-image: url(/pro/demo/bc-shop-back-720.webp); color: #fbf1e6; }
.v-shop .bc-mono { font-size: 3.2em; }
.v-shop .bc-line { font-size: .8em; font-weight: 500; letter-spacing: 0; line-height: 1.3; text-transform: none; color: rgba(251, 241, 230, .92); }
@media (prefers-reduced-motion: reduce) { .k-wait i, .c-run, .v-salon .bc-mono { animation: none; } }

/* ---------- WORK ---------- */
.work { padding: 70px 0 60px; }
.group-head { display: flex; gap: 18px; align-items: baseline; margin: 90px 0 10px; padding-top: 22px; border-top: 1px solid var(--line); }
.group-head h3 { font-size: 22px; letter-spacing: -.02em; font-weight: 600; }
.group-head p { color: var(--ink-2); font-size: 16px; margin-top: 2px; }
.proj { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: center; margin: 46px 0 110px; }
.proj.flip { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.proj.flip .proj-copy { order: 2; }
.proj h4, .sc-copy h4 { font-size: 34px; letter-spacing: -.035em; font-weight: 600; line-height: 1.1; }
.proj-copy > p:not(.kind), .sc-copy > p:not(.kind) { color: var(--ink-2); margin-top: 10px; font-size: 17px; max-width: 26em; }
.links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 14px; }
.lnk-2 { color: var(--ink-2); }
.proj-vis { position: relative; perspective: 2200px; }
.win.big { position: relative; transform: rotateY(-9deg) rotateX(4deg); transform-origin: 30% 50%; transition: transform .9s var(--ease); }
.flip .win.big { transform: rotateY(9deg) rotateX(4deg); transform-origin: 70% 50%; }
@media (hover: hover) and (pointer: fine) {
  .proj-vis:hover .win.big { transform: rotateY(-4deg) rotateX(2deg); }
  .flip .proj-vis:hover .win.big { transform: rotateY(4deg) rotateX(2deg); }
}
.zoom { position: absolute; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--shadow), 0 0 0 1px rgba(13, 27, 42, .07); animation: drift 9s ease-in-out infinite alternate; }
.zoom .zi { width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: 0 0; }
.z-axis { width: 46%; aspect-ratio: 1.75; left: -8%; bottom: -12%; }
.z-north { width: 250px; aspect-ratio: .95; right: -4%; bottom: -14%; }
.sites { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 46px; perspective: 2400px; }
.sites .win { transition: transform .8s var(--ease), box-shadow .8s var(--ease); }
.site-card:first-child .win { transform: rotateY(7deg); transform-origin: 100% 50%; }
.site-card:last-child .win { transform: rotateY(-7deg); transform-origin: 0 50%; }
/* hover: the window lifts, its screenshot zooms with a small overshoot and the link arrow steps out, all at once */
.sites .win img, .proj .win img { transform-origin: 50% 0; transition: transform .3s cubic-bezier(.17, .89, .32, 1.27); }
.site-card .lnk .arr { transition: transform .3s cubic-bezier(.17, .89, .32, 1.27); }
@media (hover: hover) and (pointer: fine) {
  .site-card:hover .win { transform: translateY(-6px) rotateY(0); }
  .site-card:hover .lnk .arr { transform: translate(2px, -2px); }
}
@media (hover: hover) and (pointer: fine) {
  :where(html:not(.calm)) .site-card:hover .win img { transform: scale(1.04); }
  /* the app windows are wider and their sidebars sit near the edge, so they zoom less */
  :where(html:not(.calm)) .proj-vis:hover .win img { transform: scale(1.02); }
}
.sc-copy { margin-top: 30px; }

/* ---------- CREDITS ---------- */
.cred { padding: 70px 0 90px; }
.cred-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; }
.bignum { font-size: clamp(34px, 4.4vw, 54px); letter-spacing: -.04em; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.bignum span { font-size: 2.6em; display: block; letter-spacing: -.06em; background: linear-gradient(100deg, var(--green-d) 10%, var(--pink-d) 60%, var(--amber-d)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: .9; margin-bottom: 6px; width: fit-content; padding-right: .06em; }
.cred-line { font-size: 20px; margin-top: 18px; font-weight: 500; }
.titles { margin-top: 16px; color: var(--ink-2); font-size: 16px; line-height: 1.7; }
.cred-why { margin-top: 16px; color: var(--ink-2); font-size: 16px; }
.cred .lnk { margin-top: 10px; }
.wall { position: relative; height: 560px; overflow: hidden; perspective: 1600px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent), linear-gradient(90deg, transparent, #000 14%, #000 88%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent), linear-gradient(90deg, transparent, #000 14%, #000 88%, transparent); mask-composite: intersect; }
.plane { position: absolute; left: 6%; top: -30%; width: 96%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; transform: rotateX(26deg) rotateZ(-12deg) rotateY(-8deg); }
.pcol { display: grid; gap: 16px; animation: col 60s linear infinite; }
.pcol:nth-child(2n) { animation-direction: reverse; animation-duration: 70s; }
.pcol img { width: 100%; aspect-ratio: 2 / 3; border-radius: 8px; box-shadow: 0 18px 30px -12px rgba(13, 27, 42, .4); background: #e9eef3; }
@keyframes col { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }
/* every poster is a button (main.js .pp) that opens it full size (.pv); the band stops under the pointer, while a finger holds it, or while a poster has keyboard focus.
   The wheel and a vertical drag move it (main.js), so vertical touches go to the script: the band is short on phones */
.pp { display: block; width: 100%; padding: 0; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; cursor: zoom-in; }
.pp:focus-visible { outline: 3px solid var(--green-d); outline-offset: 3px; }
.pp img { display: block; }
html:not(.calm) .wall { touch-action: pan-x; }
.wall.held .pcol { animation-play-state: paused; }
@media (hover: hover) { .wall:hover .pcol, .wall:has(.pp:focus-visible) .pcol { animation-play-state: paused; } .pcol .pp:hover img { box-shadow: 0 0 0 3px #fff, 0 22px 36px -12px rgba(13, 27, 42, .5); } }
.pv { box-sizing: border-box; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 16px; border: 0; background: none; place-items: center; overflow: hidden; cursor: zoom-out; }
.pv[open] { display: grid; }
.pv::backdrop { background: rgba(13, 27, 42, .86); }
html:has(.pv[open]) { overflow: hidden; }
.pv figure { margin: 0; padding: 10px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.pv img { display: block; height: min(88dvh - 50px, (100vw - 52px) * 1.5); width: auto; aspect-ratio: 2 / 3; border-radius: 8px; background: var(--bg-2) center / cover no-repeat; }
.pv figcaption { padding: 12px 4px 4px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); text-align: center; }
.pv-x { position: fixed; top: 16px; right: 16px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); transition: background-color .2s; }
.pv-x:hover { background: var(--bg-2); }
.pv-x:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { :where(html:not(.calm)) .pv[open] figure { animation: pvIn .25s var(--ease, ease-out); } }
@keyframes pvIn { from { opacity: 0; transform: scale(.96); } }

/* ---------- SERVICES ---------- */
.svc { padding: 110px 0 90px; position: relative; }
.probs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 50px; }
.probs article { display: flex; flex-direction: column; padding: 26px 26px 10px 0; margin-right: 26px; border-top: 1px solid var(--line); position: relative; }
.probs article::before { content: ""; position: absolute; left: 0; top: -1px; width: 30px; height: 2px; background: var(--green); }
.probs article:nth-child(2)::before { background: var(--pink); }
.probs article:nth-child(3)::before { background: var(--amber); }
.probs article:nth-child(4)::before { background: var(--ink); }
.probs h3 { font-size: 20px; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; margin: 10px 0 12px; }
.probs p { font-size: 15px; color: var(--ink-2); line-height: 1.6; }
/* the check lists line up across the row whatever the paragraph length */
.probs ul { margin-top: auto; padding-top: 16px; display: grid; gap: 7px; }
.probs li { font-size: 14.5px; font-weight: 500; display: flex; gap: 9px; align-items: baseline; }
.probs li::before { content: ""; width: 9px; height: 5px; border-left: 1.6px solid var(--green-d); border-bottom: 1.6px solid var(--green-d); transform: rotate(-45deg) translateY(-2px); flex: none; }

.duo { margin-top: 130px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 30px 56px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.col { border-radius: 14px; padding: 24px 24px 12px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 20px 40px -24px rgba(13, 27, 42, .2); position: relative; overflow: hidden; }
.col::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--green); }
.c-tara::before { background: var(--pink); }
.who { font-size: 14px; color: var(--ink-3); }
.who b { color: var(--ink); font-weight: 600; margin-right: 6px; }
.say { font-size: 24px; font-weight: 600; letter-spacing: -.03em; margin: 4px 0 12px; }
.col li a { display: flex; justify-content: space-between; gap: 10px; align-items: center; min-height: 44px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 500; }
.col li a span { color: var(--ink-3); transition: transform .25s var(--ease), color .2s; }
.col li a { transition: color .15s; }
.col li a:hover { color: var(--green-d); }
@media (hover: hover) and (pointer: fine) {
  .col li a:hover span { transform: translateX(4px); color: var(--ink); }
}
.pts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin-top: 30px; }
.pts li { font-size: 15px; color: var(--ink-2); line-height: 1.55; }
.pts b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; font-size: 16px; }

/* ---------- PROCESS ---------- */
.steps { padding: 70px 0 130px; }
.track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin-top: 56px; position: relative; }
.track::before, .track::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line); }
.track::after { background: linear-gradient(90deg, var(--green), var(--amber), var(--pink)); transform-origin: 0 50%; transform: scaleX(1); transition: transform 1.8s var(--ease); }
.js .track:not(.in)::after { transform: scaleX(0); }
.track li { padding-top: 30px; position: relative; }
.track li::before { content: ""; position: absolute; left: 0; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--ink); z-index: 1; }
.track h3 { font-size: 20px; letter-spacing: -.02em; font-weight: 600; margin: 8px 0 8px; }
.track p { font-size: 15px; color: var(--ink-2); }

/* ---------- CLOSE ---------- */
.close { position: relative; background: var(--ink); color: #fff; padding: 150px 0 120px; overflow: hidden; }
.close-field { position: absolute; left: 0; right: 0; top: 0; height: 120px; background: url(/pro/field-still.webp) center 30% / cover; clip-path: polygon(0 0, 100% 0, 100% 20%, 0 100%); }
.close-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; position: relative; }
.close h2 { color: #fff; font-size: clamp(36px, 5vw, 60px); }
.close .sub { color: #b9c6d3; }
.mail { margin-top: 18px; color: #b9c6d3; font-size: 15.5px; }
.mail a { color: #fff; font-weight: 600; display: inline-block; padding: 10px 0; min-height: 44px; text-decoration: underline 1px transparent; text-underline-offset: 5px; transition: text-decoration-color .15s; }
.mail a:hover { text-decoration-color: currentColor; }
.call { border-radius: 16px; padding: 28px; background: #142638; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
.call-h { font-weight: 600; font-size: 18px; letter-spacing: -.01em; margin-bottom: 8px; }
.call li { display: grid; gap: 2px; padding: 15px 0 15px 26px; border-top: 1px solid rgba(255, 255, 255, .09); position: relative; }
.call li::before { content: ""; position: absolute; left: 2px; top: 22px; width: 9px; height: 5px; border-left: 1.6px solid var(--green); border-bottom: 1.6px solid var(--green); transform: rotate(-45deg); }
.call b { font-weight: 600; }
.call span { color: #9fb0c2; font-size: 15px; }

/* ---------- FOOTER ---------- */
.foot { padding: 60px 0 30px; font-size: 15px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 30px; }
.f-brand img { width: 64px; height: auto; }
.f-brand p { color: var(--ink-3); margin-top: 8px; }
.fh { font-weight: 600; margin-bottom: 8px; }
.foot-grid a, .foot-grid span { display: block; color: var(--ink-2); padding: 4px 0; }
.foot-grid a, .foot-bar a { text-decoration: underline 1px transparent; text-underline-offset: 4px; transition: color .2s, text-decoration-color .25s; }
.foot-grid a:hover, .foot-bar a:hover { color: var(--ink); text-decoration-color: currentColor; }
.foot-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 44px; padding-top: 20px; color: var(--ink-3); font-size: 14px; align-items: center; }
.foot-bar a { display: inline-block; padding: 4px 0; }
/* the rule spans the text above it, not the padded box */
.foot-bar { background: linear-gradient(var(--line), var(--line)) 32px 0 / calc(100% - 64px) 1px no-repeat; }

/* reveal on scroll (only when JS runs and motion is allowed) */
.js .rv { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .32s var(--ease-io), transform .32s var(--ease-io); }
.js .rv.in { opacity: 1; transform: none; }
/* section heads: the head holds still and its lines rise 80ms apart; the eyebrow diamond spins in once the heading has settled */
.js .sec-head.rv { opacity: 1; transform: none; }
.js .sec-head.rv > * { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .32s var(--ease-io), transform .32s var(--ease-io); }
.js .sec-head.rv > :nth-child(2) { transition-delay: 80ms; }
.js .sec-head.rv > :nth-child(n+3) { transition-delay: 160ms; }
.js .sec-head.rv.in > * { opacity: 1; transform: none; }
.js .sec-head.rv .dot { transform: rotate(-135deg) scale(0); transition: transform .24s cubic-bezier(.21, .12, .35, 1.43) .3s; }
.js .sec-head.rv.in .dot { transform: rotate(45deg) scale(1); }
/* window screenshots fade in once decoded, over a soft skeleton (the LCP images, fetchpriority=high, never wait) */
.js .win img:not([fetchpriority=high]) { opacity: 0; transition: opacity .45s ease, transform .3s cubic-bezier(.17, .89, .32, 1.27); }
.js .win img.ld { opacity: 1; }
.js :is(.win > .float, .win.big, .sites .win, .special-win):has(img:not(.ld):not([fetchpriority=high])) { background-color: #f6f8fa; }
.off .float, .off .tag, .off .zoom, .off .pcol, .off .c-run, .off .v-salon .bc-mono, .off .k-wait i, .off .field-still { animation-play-state: paused; }

/* ---------- TABLET ---------- */
@media (max-width: 1100px) {
  .nav { display: none; }
  .hero-in { grid-template-columns: minmax(0, 1fr); padding-top: 40px; }
  .stage { margin: 30px 0 0; width: min(100%, 720px); justify-self: center; }
  .demo-grid, .cred-grid, .duo, .close-grid { grid-template-columns: minmax(0, 1fr); }
  .probs, .pts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The full header needs about 1210px (1270px in Turkish, with tighter spacing): the in-page nav steps aside first, then the menu takes over */
@media (min-width: 821px) {
  html[lang="tr"] .top { gap: 16px; }
  html[lang="tr"] .nav { margin-left: 0; }
  html[lang="tr"] .nav a { padding: 9px 8px; }
  html[lang="tr"] .tools { gap: 10px; }
}
@media (max-width: 1220px) { .nav { display: none; } }
@media (max-width: 1280px) { html[lang="tr"] .nav { display: none; } }
@media (max-width: 820px) {
  .top { padding: 12px 16px; gap: 10px; }
  .brand { min-height: 44px; }
  .brand img { width: 38px; }
  .tools { gap: 8px; }
  .tools .btn-sm { min-height: 44px; padding: 0 14px; }
}
/* the menu takes over as soon as the nav steps aside (owner 2026-10-29: "doesnt look like you care about all viewports": tablets and
   small laptops had no way to the other pages) */
@media (max-width: 1280px) {
  .menu { display: block; position: static; }
  .menu summary { list-style: none; width: 44px; height: 44px; border-radius: 10px; display: grid; place-content: center; gap: 6px; cursor: pointer; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(13, 27, 42, .12); transition: scale .22s var(--ease-out); }
  .menu summary::-webkit-details-marker { display: none; }
  .menu summary span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease); }
  .menu[open] summary span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu[open] summary span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .sheet { position: absolute; left: 12px; right: 12px; top: 66px; background: #fff; border-radius: 16px; padding: 10px 18px 18px; box-shadow: var(--shadow), 0 0 0 1px rgba(13, 27, 42, .06); }
  .sheet nav a { display: flex; align-items: center; min-height: 50px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; border-bottom: 1px solid var(--line); }
  .sheet-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 16px 0; }
  .sheet .lang a { display: inline-flex; align-items: center; min-height: 44px; }
  .sheet .motion-switch { min-height: 44px; }
  .sheet .btn { width: 100%; justify-content: center; min-height: 50px; }
  .menu-open { overflow: hidden; }
  .menu-open .top { z-index: 30; }
  .menu-back { position: fixed; inset: 0; z-index: 25; background: rgba(13, 27, 42, .36); animation: fade-in .2s ease both; }
  .menu[open] .sheet { transform-origin: 100% 0; animation: sheet-in .22s var(--ease-out) both; }
  .sheet nav a { position: relative; }
  .sheet nav a[aria-current=page]::before { content: ""; position: absolute; left: -18px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--green); }
}
@media (min-width: 1221px) { html:not([lang="tr"]) .menu { display: none; } }
@media (min-width: 821px) and (max-width: 1280px) {
  .sheet { left: auto; right: max(16px, calc(50% - 568px)); top: calc(100% + 6px); width: 360px; }
  html.top-on .sheet { right: 0; top: calc(100% + 10px); }
}

@keyframes sheet-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- PHONE ---------- */
@media (max-width: 700px) {
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  #field { display: none; }
  [data-theme-switch] { width: 120px; }
  /* phones move too (owner, 2026-10-26: "why the heck pro theme is not animated on the mobile!!!"): these CSS loops run on
     the graphics card and rest off screen (.off); only always-on script loops stay off phones */
  .pcol:nth-child(2n) { translate: 0 -64px; }
  .field { height: 600px; clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%); }

  .hero-in { padding: 34px 20px 0; min-height: 0; gap: 0; }
  .hero-copy { padding-top: 0; }
  .kicker { font-size: 14px; margin-bottom: 14px; }
  h1 { font-size: 42px; letter-spacing: -.045em; line-height: 1.02; }
  .lede { font-size: 17.5px; margin-top: 18px; }
  .ctas { margin-top: 26px; flex-direction: column; align-items: stretch; }
  .ctas .btn { justify-content: center; min-height: 52px; }
  .ct-write + .btn-ghost { min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
  .ct-write + .btn-ghost::before { display: none; }
  .stage { margin: 38px -6px 58px; width: calc(100% + 12px); aspect-ratio: 1 / .98; perspective: 1200px; }
  .rig { transform: rotateX(7deg) rotateY(-9deg) rotateZ(2.5deg); }
  .bar { height: 20px; padding: 0 7px; gap: 4px; }
  .bar i { width: 5px; height: 5px; }
  .bar span { font-size: 10px; margin-right: 14px; }
  .w-north { width: 76%; left: 22%; }
  .w-axis { width: 84%; left: 0; }
  .w-hir { width: 56%; left: 4%; top: 58%; }
  .w-kash { width: 46%; left: 50%; top: 53%; }
  .tag { padding: 6px 9px 6px 11px; font-size: 12px; }
  .tag b { font-size: 13px; }
  .tag::before { top: 6px; bottom: 6px; }
  .rig .tag { transform: translateZ(120px); animation-name: drift-z; }
  @keyframes drift-z { 0% { transform: translate3d(0, 0, 120px); } 100% { transform: translate3d(0, -10px, 120px); } }
  .t-hir { left: 13%; top: auto; bottom: -40px; }
  .t-axis { left: auto; right: 8%; top: auto; bottom: -40px; }
  html[lang="tr"] .t-hir { bottom: -102px; }
  html[lang="tr"] .hero .stage { margin-bottom: 118px; }
  .win > .float, .zoom { border-radius: 8px; }
  .facts { grid-template-columns: minmax(0, 1fr); margin-top: 44px; padding: 0 20px; }
  .facts li { margin-right: 0; padding: 16px 0 18px; }

  .demo { padding: 100px 0 110px; margin-top: 30px; }
  .demo-grid { gap: 40px; }
  .sub { font-size: 17px; }
  .seg { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .seg label { grid-column: span 2; }
  .seg label:nth-child(n+4) { grid-column: span 3; }
  .seg span { padding: 0 8px; }
  .maps b { min-width: 104px; }
  /* the cards step down so the hours chip and the listing details stay clear */
  .demo-stage { aspect-ratio: 1 / 2.18; margin-top: 10px; margin-bottom: 56px; }
  .sample { top: -14px; font-family: "IS", "IS Fallback", sans-serif; font-size: 13px; letter-spacing: .02em; text-transform: none; }
  /* round 2 phone: the browser frame, then each site as a real phone layout (1em = 10px at 330px wide) */
  .d-site { width: 100%; top: 0; left: 0; }
  .d-site .bar { font-size: calc(100cqw / 40); }
  .b-tab { min-width: 0; max-width: 21em; }
  .b-url { margin-right: 1em; }
  .site { aspect-ratio: 33 / 44; }
  .v { font-size: calc(100cqw / 33); }
  .v.v-cafe { padding: 0 1.6em; }
  .c-mast { grid-template-columns: minmax(0, 1fr) auto; height: 3em; }
  .c-nav { display: none; }
  .c-date { font-size: .9em; }
  .c-plate { font-size: clamp(2.4em, calc(28em / var(--n, 11)), 5.6em); padding: .14em 0 .08em; }
  .c-ed { height: 2.2em; font-size: .85em; }
  html.calm .c-run span:nth-child(n+2), .c-ed > p { display: none; }
  .c-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); padding: 1.1em 0 1.4em; row-gap: 1.2em; }
  .c-story { grid-column: 1 / -1; flex-direction: row !important; flex-wrap: wrap; align-items: flex-end; column-gap: 1em; padding: 0 !important; }
  .c-kick, .c-head, .c-dek { flex: 0 0 100%; }
  .c-head { font-size: 2.1em; }
  .c-dek { font-size: 1.1em; }
  .c-dek::first-letter { float: none; margin: 0; font: inherit; color: inherit; }
  .c-open { flex: 1; margin-top: .8em; }
  .c-btn { margin-top: 0; }
  .c-fig { grid-row: 2; grid-column: 1; padding: 0 1.1em 0 0 !important; border: 0 !important; }
  .c-side { grid-row: 2; grid-column: 2; padding: 0 0 0 1.1em !important; }
  .c-bh b { font-size: 1.4em; }
  .c-board li { font-size: .95em; padding: .42em 0; }
  .c-board li:nth-child(n+4) { display: none; }
  .c-board li span { overflow: hidden; }
  .c-pastry { margin-top: .8em; }

  .s-links { display: none; }
  .s-top { width: auto; right: 0; height: 3.8em; padding: 0 1.6em; justify-content: flex-end; }
  .s-side { left: 1em; top: 10.5em; font-size: .72em; }
  .s-cover { left: 3.4em; top: 4em; width: 26em; }
  .s-line { font-size: 1.9em; }
  .s-reel { display: none !important; }
  .s-name { left: 10.3cqw; width: 80cqw; bottom: 77cqw; font-size: clamp(2.8em, calc(32em / (var(--n, 11) + 2)), 5.6em); }
  .v.v-salon::after { right: 0; bottom: 24.6em; background: linear-gradient(180deg, rgba(31, 20, 16, .7), rgba(31, 20, 16, .1) 40%, rgba(31, 20, 16, .1) 55%, rgba(31, 20, 16, .85)); }
  .v .s-bg { width: 100%; height: 19.6em; object-position: 50% 12%; }
  .s-menu { top: 19.4em; left: 0; width: auto; padding: 1.1em 1.6em 1.3em; }
  .s-mh b { font-size: 1.7em; }
  .s-tabs { margin-top: .7em; }
  .s-list li { padding: .4em .6em; }
  .s-lbl { margin-top: .7em; }
  .s-sty span { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; column-gap: .45em; padding: .4em .5em; }
  .s-sty i { grid-row: span 2; width: 2em; height: 2em; font-size: .9em; }
  .s-sty b { margin: 0; line-height: 1.1; }
  .s-go { height: 2.5em; margin-top: .8em; }

  .v.v-shop { display: flex; flex-direction: column; }
  .p-ann { flex: none; line-height: 2.2em; font-size: .78em; }
  .p-nav { flex: none; flex-wrap: wrap; gap: .4em 1.1em; padding: .8em 1.6em; }
  .p-menu { display: grid; order: -1; }
  .p-mark { flex: 1; font-size: clamp(1.1em, calc(20em / (var(--n, 11) + 6)), 1.6em); }
  .p-links, .p-acct { display: none; }
  .p-search { order: 5; flex: 0 0 100%; width: auto; margin: 0; height: 2.6em; }
  .p-still { flex: none; order: 1; height: 8.6em; margin: 0 1.6em; }
  .p-still img { object-position: 40% 62%; }
  .p-hot { left: 22%; top: 34%; }
  .p-copy { order: 2; padding: 1em 1.6em 0; justify-content: flex-start; }
  .p-title { font-size: clamp(2.1em, calc(22em / var(--n, 11)), 4em); }
  .p-line { display: none; }
  .p-act { margin-top: .7em; }
  .p-chips { flex-wrap: nowrap; }
  .p-chips span:nth-child(n+4) { display: none; }
  .p-row { order: 3; padding: 1em 1.6em 0; gap: .8em; }
  .p-pn { flex-direction: column; gap: .1em; font-size: .88em; }
  .p-buy { display: none; }

  .v.v-clinic, .v.v-contractor { display: flex; flex-direction: column; }
  .v.v-clinic > *, .v.v-contractor > * { position: relative; inset: auto; }
  .k-nav { height: 4em; gap: 1em; padding: 0 1.6em; }
  .k-links, .k-portal { display: none; }
  .k-pill { margin-left: auto; height: 2.4em; font-size: 1em; }
  .k-menu { display: grid; color: #14403f; }
  .k-copy { width: auto; padding: 1.5em 1.6em 0; }
  .k-title { font-size: clamp(2.4em, calc(36em / (var(--n, 11) + 3)), 3.9em); }
  .k-line { margin-top: .45em; font-size: 1.15em; }
  .k-acts { margin-top: 1.1em; }
  .k-rate { margin-top: 1.1em; }
  .k-plans { display: none; }
  .k-ph { flex: 1; min-height: 0; margin: 1.4em 1.6em 1.6em; }
  .k-wait { left: 1em; right: auto; top: 1em; }
  .k-book { left: 1.2em; right: 1.2em; top: auto; bottom: 1.2em; width: auto; padding: 1em 1.1em 1.1em; }
  .k-doc, .k-seg { display: none; }
  .k-week { margin-top: 0; }
  .k-slots span { font-size: .85em; }
  .k-slots span:nth-child(-n+2) { display: none; }
  .k-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .v.v-contractor::before { left: 1.6em; right: 1.6em; }
  .r-nav { height: 4em; padding: 0 1.6em; gap: 1em; }
  .r-links, .r-tel { display: none; }
  .r-menu { display: grid; margin-left: auto; }
  .r-sec { padding: 1em 1.6em 0; font-size: .82em; }
  .r-ph { flex: none; height: 9.4em; margin: 2.2em 1.6em 0 3.2em; }
  .r-copy { width: auto; height: auto; padding: 1.2em 1.6em 0; }
  .r-kind { display: none; }
  .r-title { margin-top: 0; font-size: clamp(2em, calc(30em / (var(--n, 11) + 3)), 3.6em); }
  .r-line { margin-top: .45em; font-size: 1.1em; max-width: none; }
  .r-est { margin: .9em 1.6em 0; }
  .r-f { font-size: .9em; padding: .35em .7em; }
  .r-sel { flex: 1; }
  .r-go { padding: 0 .9em; font-size: .82em; }
  .r-stats { height: 2.8em; margin: .8em 1.6em 0; }
  .r-stats > span { padding-right: 1.4em; margin-right: 1.4em; font-size: .8em; }
  .r-stats b { font-size: 1.8em; }
  .r-stats .r-lic { display: none; }
  .r-strip { flex: 1; min-height: 0; width: auto; margin: .9em 1.6em 1.6em; gap: .7em; }
  .r-strip p { font-size: .78em; }
  .r-strip p span { display: none; }

  /* the listing and the cards share the row under the site without covering each other */
  .d-gl { width: 56%; bottom: 0; left: 0; right: auto; }
  .gl-name, .gl-cat { max-width: 56%; text-wrap: balance; }
  .gl-name { font-size: clamp(1.25em, calc(27em / (var(--n, 11) + 6)), 1.6em); }
  .gl-chips, .gl-rev { display: none; }
  .d-bc { width: 42%; left: auto; right: 0; bottom: 12%; }
  .bc-face { font-size: calc(100cqw / 23); }
  .v-contractor .bc-name { font-size: clamp(1em, calc(15em / (var(--n, 11) + 3)), 1.5em); }
  .note { bottom: -58px; font-size: 13px; }

  .work { padding: 90px 0 30px; }
  .group-head { margin-top: 60px; }
  .group-head h3 { font-size: 20px; }
  .proj, .proj.flip { grid-template-columns: minmax(0, 1fr); gap: 34px; margin: 34px 0 80px; }
  .proj.flip .proj-copy { order: 0; }
  .proj-vis { margin: 0 4px 0 10px; }
  .win.big, .flip .win.big { transform: rotateY(-6deg) rotateX(3deg); }
  .proj h4, .sc-copy h4 { font-size: 28px; }
  .z-axis { width: 52%; left: -4%; bottom: -16%; }
  .z-north { width: 36%; right: -3%; }
  .sites { grid-template-columns: minmax(0, 1fr); gap: 56px; perspective: none; }
  .site-card:first-child .win, .site-card:last-child .win { transform: none; }
  .sc-copy { margin-top: 20px; }

  .cred { padding: 60px 0 40px; }
  .wall { height: 360px; margin: 0 -20px; }
  .plane { grid-template-columns: repeat(3, minmax(0, 1fr)); left: 7%; width: 86%; top: -10%; transform: rotateX(20deg) rotateZ(-4deg); }
  .pcol:nth-child(4) { display: none; }

  .svc { padding: 80px 0 60px; }
  .probs, .pts { grid-template-columns: minmax(0, 1fr); margin-top: 34px; }
  .probs article { margin-right: 0; padding-right: 0; }
  .duo { margin-top: 90px; }
  .cols { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .steps { padding: 50px 0 100px; }
  .track { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 40px; padding-left: 28px; }
  .track::before, .track::after { left: 5px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
  .track::after { background: linear-gradient(180deg, var(--green), var(--amber), var(--pink)); transform-origin: 50% 0; }
  .js .track:not(.in)::after { transform: scaleY(0); }
  .track li { padding: 0 0 30px; }
  .track li::before { left: -28px; top: 2px; }
  .track h3 { margin-top: 4px; }
  .close { padding: 110px 0 80px; }
  .close-field { height: 70px; }
  .close .btn { width: 100%; justify-content: center; min-height: 52px; }
  .call { padding: 22px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .f-brand { grid-column: 1 / -1; }
  .foot-grid a, .foot-grid span { padding: 11px 0; }
  .foot-bar a { padding: 12px 0; }
  .foot-bar .motion-switch { padding: 12px 0; }
  .foot-bar .lang { flex-basis: 100%; }
  .foot-bar { padding-top: 20px; background-position: 20px 0; background-size: calc(100% - 40px) 1px; }
}

html:where(.calm) { scroll-behavior: auto; }
:where(html.calm), :where(html.calm) *, :where(html.calm)::before, :where(html.calm) *::before, :where(html.calm)::after, :where(html.calm) *::after { animation: none !important; transition-duration: .01ms !important; }

/* Narrow phones: the brand name gives way so the menu button stays on screen (the Turkish header button is longer) */
/* phones: the header call button moves into the menu (as on CUTE and CODE), leaving the theme switch beside the menu button */
@media (max-width: 700px) { .tools .btn-sm { display: none; } }

/* =====================================================================
   INNER PAGES (About, Services, Projects, Contact): the home's field, windows and cards, extended
   ===================================================================== */
.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; }
button.btn, summary.btn { border: 0; font-family: inherit; cursor: pointer; }
.lnk .arr { margin-left: .3em; }
.inner { padding-bottom: 40px; }
/* Inner heroes can be shorter than the theme panel: the colour field is clipped by its own box, so the hero only clips
   sideways and the open panel can hang below it. */
.hero.inner { overflow: clip visible; }
.field-box { position: absolute; inset: 0; overflow: clip; }
.inner .field { height: 620px; clip-path: polygon(0 0, 100% 0, 100% 62%, 0 100%); }
.sub-in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; max-width: 1200px; margin: 0 auto; padding: 64px 32px 0; }
.sub-copy { max-width: 620px; }
.inner h1 { font-size: clamp(42px, 5vw, 68px); }
.inner .lede { margin-top: 22px; }
.pg [id] { scroll-margin-top: 24px; }

/* ---------- ABOUT ---------- */
.bios { padding: 80px 0 30px; }
.bios-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.bio { position: relative; border-radius: 16px; padding: 36px 36px 22px; background: radial-gradient(120% 70% at 100% 0, rgba(255, 77, 141, .08), transparent 60%) #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -36px rgba(13, 27, 42, .35); overflow: hidden; }
.b-eren { background: radial-gradient(120% 70% at 100% 0, rgba(15, 181, 126, .09), transparent 60%) #fff; }
.bio::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--pink); }
.b-eren::before { background: var(--green); }
.bio-k { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--pink-d); }
.b-eren .bio-k { color: var(--green-d); }
.bio h2 { font-size: clamp(48px, 5.4vw, 72px); letter-spacing: -.05em; margin: 10px 0 16px; }
.bio-t { color: var(--ink-2); font-size: 17px; line-height: 1.65; text-wrap: pretty; }
.bio-t strong { color: var(--ink); font-weight: 600; }
.bio-links { display: flex; flex-wrap: wrap; gap: 0 26px; margin-top: 14px; }
.bios-pts .pts { margin-top: 60px; }
.reel { padding: 100px 0 120px; overflow: clip; }
.shelf { perspective: 1600px; margin-top: 50px; }
.posters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 30px 20px; }
.shelf .posters { transform-origin: 50% 0; transition: transform 1.6s var(--ease); }
.js .shelf:not(.in) .posters { transform: rotateX(24deg) scale(.94); }
.posters img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; background: #e9eef3; box-shadow: 0 18px 30px -14px rgba(13, 27, 42, .45), 0 0 0 1px rgba(13, 27, 42, .06); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
@media (min-width: 701px) { .shelf .posters li:nth-child(even) { translate: 0 34px; } .shelf { padding-bottom: 34px; } }
@media (hover: hover) and (pointer: fine) {
  .posters li:hover img { transform: translateY(-6px); box-shadow: var(--shadow); }
}
.posters figcaption { margin-top: 10px; min-height: 2.6em; font-size: 13.5px; font-weight: 500; line-height: 1.3; color: var(--ink-2); }
.posters.sm { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 24px 16px; margin-top: 36px; }
.posters.sm figcaption { font-size: 12.5px; }
.more { margin-top: 50px; }
.more summary { list-style: none; width: fit-content; }
.more summary::-webkit-details-marker { display: none; }
.more[open] summary .arr { transform: rotate(180deg); }

/* ---------- SERVICES ---------- */
.where { margin-top: 26px; padding: 14px 18px 14px 20px; border-radius: 12px; background: rgba(255, 255, 255, .82); box-shadow: inset 3px 0 0 var(--amber), 0 0 0 1px rgba(13, 27, 42, .06); font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 34em; }
.where strong { display: block; color: var(--ink); font-weight: 600; }
.jumps { display: grid; gap: 16px; }
.jump { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 16px; padding: 22px 22px 22px 28px; background: #fff; border-radius: 14px; box-shadow: var(--shadow-s), 0 0 0 1px rgba(13, 27, 42, .05); overflow: hidden; animation: drift 9s ease-in-out infinite alternate; transition: translate .5s var(--ease), box-shadow .5s var(--ease), scale .22s var(--ease-out); }
.jump::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--green); }
.j-tara { animation-delay: -3s; }
.j-tara::before { background: var(--pink); }
.j-3d { animation-delay: -6s; }
.j-3d::before { background: var(--amber); }
.j-l { font-weight: 600; font-size: 19px; letter-spacing: -.02em; line-height: 1.25; }
.jump small { grid-column: 1; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); }
.jump .arr { grid-row: 1 / span 2; grid-column: 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); transition: transform .3s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .jump:hover { translate: -6px 0; box-shadow: var(--shadow), 0 0 0 1px rgba(13, 27, 42, .05); }
  .jump:hover .arr { transform: translateY(3px); }
}
.off .jump, .off .live { animation-play-state: paused; }
.chap { padding: 100px 0 20px; }
.chap-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; }
.chap-side { position: sticky; top: calc(var(--top-h, 0px) + 28px); }
.chap-art { position: relative; border-radius: 14px; background: #fff; padding: 18px; margin-bottom: 30px; box-shadow: 0 0 0 1px var(--line), 0 24px 48px -30px rgba(13, 27, 42, .35); overflow: hidden; }
.chap-art::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--green); }
.c-tara .chap-art::before { background: var(--pink); }
.chap h2 { font-size: clamp(30px, 3.4vw, 42px); }
.chap .sub { font-size: 17px; }
.chap-side .btn { display: inline-block; text-align: left; margin-top: 26px; white-space: normal; min-height: 48px; padding: 11px 22px; line-height: 1.3; }
.chap-list { display: grid; gap: 18px; }
.svc-card { position: relative; border-radius: 16px; background: #fff; padding: 28px 30px 26px; box-shadow: 0 0 0 1px var(--line), 0 18px 36px -28px rgba(13, 27, 42, .3); transition: box-shadow .4s var(--ease); }
.svc-card:hover { box-shadow: 0 0 0 1px #d5dde6, var(--shadow-s); }
.sc-head { display: flex; gap: 18px; align-items: baseline; }
.sc-head .num { color: var(--green-d); flex: none; width: 20px; }
.c-tara .sc-head .num { color: var(--pink-d); }
.sc-head h3 { font-size: 23px; letter-spacing: -.025em; font-weight: 600; line-height: 1.2; }
.tagline { color: var(--ink-2); margin-top: 4px; font-size: 16.5px; }
.svc-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; column-gap: 34px; row-gap: 18px; align-items: start; }
.sc-body { display: contents; }
.sc-head { grid-column: 1; grid-row: 1; }
.sc-body > div:first-child { grid-column: 2; grid-row: 1 / span 2; padding-left: 30px; border-left: 1px solid var(--line); }
.sc-body > div:last-child { grid-column: 1; grid-row: 2; padding-left: 38px; }
.sc-label { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); margin-bottom: 10px; }
.checks { display: grid; gap: 8px; }
.checks li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.45; }
.checks li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 9px; height: 5px; border-left: 1.6px solid var(--green-d); border-bottom: 1.6px solid var(--green-d); transform: rotate(-45deg); }
.c-tara .checks li::before { border-color: var(--pink-d); }
.ai { margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: var(--bg-2); font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.ai strong { color: var(--ink); font-weight: 600; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills li { font-size: 13.5px; font-weight: 500; padding: 6px 12px; border-radius: 999px; background: #eefaf5; color: var(--green-d); box-shadow: inset 0 0 0 1px #cdeedf; }
.c-tara .pills li { background: #fff0f5; color: var(--pink-d); box-shadow: inset 0 0 0 1px #ffd3e2; }
/* services: two cards per row on wide screens, What you get above Good for (owner pick PRO 1: A) */
@media (min-width: 1101px) {
  .chap { padding: 90px 0 20px; }
  .chap-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .svc-card { padding: 22px; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 16px; align-content: start; }
  .sc-head { gap: 12px; }
  .sc-head h3 { font-size: 20px; }
  .tagline { font-size: 15.5px; }
  .sc-body > div:first-child { grid-column: 1; grid-row: auto; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .sc-body > div:last-child { grid-column: 1; grid-row: auto; padding-left: 0; }
  .checks { gap: 6px; }
  .checks li { font-size: 15px; }
  .ai { font-size: 14px; margin-top: 12px; }
  .pills li { font-size: 13px; padding: 5px 11px; }
}
.special { position: relative; padding: 130px 0 140px; margin-top: 70px; }
.special::before { content: ""; position: absolute; inset: 0; background: var(--bg-2); transform: skewY(-4deg); z-index: -1; }
.special-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.special-win { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow), 0 0 0 1px rgba(13, 27, 42, .06); transform: perspective(1600px) rotateY(11deg) rotateX(4deg); transition: transform .9s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .special-win:hover { transform: perspective(1600px) rotateY(4deg) rotateX(2deg); }
}
.special-win img { width: 100%; padding: 26px 30px; }
.queue { margin-top: 22px; display: grid; gap: 10px; }
.queue li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 14px 18px; border-radius: 12px; background: #fff; box-shadow: inset 3px 0 0 var(--amber), 0 0 0 1px var(--line); }
.queue h3 { font-size: 16px; font-weight: 600; }
.queue span { color: var(--ink-2); font-size: 15px; }
.print-note { margin-top: 18px; color: var(--ink-2); font-size: 16px; max-width: 36em; text-wrap: pretty; }
.special .lnk { margin-top: 6px; }

/* ---------- PROJECTS ---------- */
.pj-in { padding-top: 56px; }
.pj-in h1 span { background: linear-gradient(100deg, var(--green-d) 10%, var(--pink-d) 75%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .04em; }
.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.tab { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px; border-radius: 999px; font-weight: 600; background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1px rgba(13, 27, 42, .14); transition: background .2s, scale .22s var(--ease-out); }
.tab::before { content: ""; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: var(--green); }
.tab.t-p::before { background: var(--pink); }
.tab:hover { background: #fff; }
.inside { position: relative; z-index: 3; display: flex; align-items: center; gap: 24px; max-width: 1200px; margin: 56px auto 0; padding: 0 32px; }
.inside-k { flex: none; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); }
.inside-list { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.inside-list a { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 14px 8px 8px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 10px 24px -18px rgba(13, 27, 42, .4); font-weight: 600; font-size: 15px; transition: translate .3s var(--ease), box-shadow .3s var(--ease), scale .22s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .inside-list a:hover { translate: 0 -3px; box-shadow: 0 0 0 1px #d5dde6, var(--shadow-s); }
}
.thumb { flex: none; width: 64px; aspect-ratio: 1.5; border-radius: 6px; overflow: hidden; background: var(--bg-2); box-shadow: 0 0 0 1px var(--line); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.pj-flow { position: relative; }
.secnav { position: sticky; top: calc(var(--top-h, 0px) + 12px); z-index: 20; display: block; padding: 0 16px; margin-top: 64px; pointer-events: none; }
.secnav-in { width: fit-content; margin-inline: auto; transition: opacity .35s, translate .35s var(--ease), visibility .35s; pointer-events: auto; display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .97); box-shadow: 0 1px 2px rgba(13, 27, 42, .06), 0 0 0 1px rgba(13, 27, 42, .07); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.secnav.wait .secnav-in { opacity: 0; translate: 0 -10px; visibility: hidden; }
.secnav a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; font-weight: 600; font-size: 14.5px; white-space: nowrap; color: var(--ink-2); transition: background .25s, color .25s, scale .22s var(--ease-out); }
.secnav a .num { font-size: 11.5px; }
.secnav a:hover { color: var(--ink); }
.secnav a[aria-current] { background: var(--ink); color: #fff; }
.secnav a[aria-current] .num { color: #9fb0c2; }
.pg .pgroup, .pg .case h3 { scroll-margin-top: 112px; }
.pgroup:focus { outline: none; }
.pgroup .group-head { margin-top: 70px; }
.gh-k { font-weight: 600; font-size: 14px; color: var(--ink-3) !important; margin: 0 0 4px !important; }
.group-head h2 { font-size: clamp(30px, 3.6vw, 44px); }
.pgroup .group-head > .num { font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.case { --c: var(--green); --cd: var(--green-d); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; margin: 60px 0 120px; }
.case.flip { --c: var(--pink); --cd: var(--pink-d); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.case.flip .case-vis { order: 2; }
.case-vis { perspective: 2200px; }
@media (min-width: 1101px) and (min-height: 760px) { .case-vis { position: sticky; top: calc(var(--top-h, 0px) + 84px); } }
.case .win.big { transform: rotateY(-7deg) rotateX(3deg); }
.case.flip .win.big { transform: rotateY(7deg) rotateX(3deg); }
@media (hover: hover) and (pointer: fine) {
  .case-vis:hover .win.big { transform: rotateY(-2deg) rotateX(1deg); }
  .case.flip .case-vis:hover .win.big { transform: rotateY(2deg) rotateX(1deg); }
}
.shot figcaption { margin-top: 18px; font-size: 14px; color: var(--ink-3); text-align: center; text-wrap: balance; }
.photo { position: relative; }
.spot { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border-radius: 6px; transition: box-shadow .3s, background .3s; }
.spot i { position: absolute; left: var(--px, -11px); top: var(--py, -11px); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 600 12px/1 var(--mono); font-style: normal; color: #fff; background: var(--ink); box-shadow: 0 4px 10px -2px rgba(13, 27, 42, .45), 0 0 0 3px #fff; transition: transform .3s var(--ease), background .3s; }
.case:has(.feat[data-spot="1"]:hover) .spot[data-spot="1"], .case:has(.feat[data-spot="2"]:hover) .spot[data-spot="2"], .case:has(.feat[data-spot="3"]:hover) .spot[data-spot="3"] { background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: 0 0 0 2px var(--c); }
@media (hover: hover) and (pointer: fine) {
  .case:has(.feat[data-spot="1"]:hover) .spot[data-spot="1"] i, .case:has(.feat[data-spot="2"]:hover) .spot[data-spot="2"] i, .case:has(.feat[data-spot="3"]:hover) .spot[data-spot="3"] i { transform: scale(1.2); background: var(--cd); }
}
.notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.feat { padding: 16px 16px 18px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .3s; }
.feat:hover { box-shadow: 0 0 0 1.5px var(--c), var(--shadow-s); }
.feat .num { color: var(--cd); }
.feat h4 { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; margin: 6px 0; }
.feat p { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.case-copy .kind { display: inline-flex; align-items: center; gap: 8px; color: var(--cd); margin-bottom: 2px; }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: live 2s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(15, 181, 126, .5); } 100% { box-shadow: 0 0 0 10px rgba(15, 181, 126, 0); } }
.cat { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); }
.case h3 { font-size: clamp(40px, 4.6vw, 60px); letter-spacing: -.045em; font-weight: 600; line-height: 1.02; margin-top: 16px; overflow-wrap: break-word; }
.case-lead { font-size: 22px; line-height: 1.35; letter-spacing: -.02em; font-weight: 500; margin-top: 14px; }
.story { position: relative; display: grid; gap: 26px; margin-top: 32px; padding-left: 26px; border-left: 2px solid var(--line); }
.st { position: relative; }
.st::before { content: ""; position: absolute; left: -33px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--cd); }
.st-l { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); margin-bottom: 6px; }
.st-l::first-letter, .bio-k::first-letter { text-transform: uppercase; }
.st > p:not(.st-l) { color: var(--ink-2); font-size: 16.5px; line-height: 1.6; }
.st > p + p { margin-top: 10px; }
.st .pa-itch { color: var(--ink); font-size: 20px; font-weight: 500; letter-spacing: -.015em; line-height: 1.4; }
.st .case-credit { font-size: 14.5px; }
.st .case-credit strong { color: var(--ink); }
.clip { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.clip-l { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.clip p:not(.clip-l) { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; margin-top: 16px; }
.acts .btn { white-space: normal; min-height: 48px; padding: 10px 22px; line-height: 1.25; }
.trynote { margin-top: 30px; padding: 16px 18px; border-radius: 12px; background: #fff; box-shadow: inset 3px 0 0 var(--c), 0 0 0 1px var(--line); font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.trynote strong { color: var(--ink); font-weight: 600; }
.slot { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; margin: 10px; border-radius: 12px; background: #fff; outline: 1.5px dashed rgba(255, 255, 255, .38); outline-offset: 9px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.slot .bar { grid-column: 1 / -1; }
.slot img { width: 100%; padding: 18px 0 14px 22px; }
.slot figcaption { padding: 20px 22px 20px 10px; color: var(--ink-2); font-size: 22px; line-height: 1.35; font-weight: 500; letter-spacing: -.015em; }
.slot b { display: block; color: var(--green-d); margin-bottom: 10px; }

/* ---------- CONTACT ---------- */
.ct-stage { position: relative; max-width: 440px; margin-top: 44px; perspective: 1600px; }
.ct-win { transform: rotateY(11deg) rotateX(4deg) rotateZ(-1deg); transition: transform 1.2s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .ct-stage:hover .ct-win { transform: rotateY(4deg) rotateX(2deg); }
}
.ct-win img { width: 100%; background: #fff; padding: 14px 18px 6px; }
.ct-tag { z-index: 2; right: -8%; bottom: -10px; max-width: 230px; white-space: normal; color: var(--ink); font-size: 13.5px; font-weight: 500; animation-delay: -3s; }
.ct-tag::before { background: var(--pink); }
.ct-in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
.ct-copy { padding-top: 30px; position: sticky; top: calc(var(--top-h, 0px) + 24px); }
.ct-facts { display: grid; margin-top: 30px; max-width: 470px; padding: 2px 18px; border-radius: 12px; background: rgba(255, 255, 255, .9); box-shadow: inset 3px 0 0 var(--green), 0 0 0 1px rgba(13, 27, 42, .06); }
.ct-facts li { position: relative; display: grid; gap: 1px; padding: 13px 0 13px 28px; border-top: 1px solid rgba(13, 27, 42, .1); }
.ct-facts li:first-child { border-top: 0; }
.ct-facts li::before { content: ""; position: absolute; left: 3px; top: 20px; width: 9px; height: 5px; border-left: 1.8px solid var(--green-d); border-bottom: 1.8px solid var(--green-d); transform: rotate(-45deg); }
.ct-facts b { font-weight: 600; }
.ct-facts span { color: var(--ink-2); font-size: 15px; }
.form-card { position: relative; margin-top: 10px; padding: 36px 38px 32px; border-radius: 18px; background: #fff; box-shadow: var(--shadow), 0 0 0 1px rgba(13, 27, 42, .06); }
.form-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; border-radius: 18px 18px 0 0; background: linear-gradient(90deg, var(--green), var(--amber), var(--pink)); }
.salute { font-family: "ISerif", Georgia, serif; font-size: 26px; line-height: 1.2; color: var(--ink-2); margin-bottom: 18px; }
.contact-noscript { padding: 14px 16px; border-radius: 12px; background: #fff6e8; margin-bottom: 18px; }
.contact-noscript a, .form-result a { text-decoration: underline; text-underline-offset: 3px; }
.contact-form { display: grid; gap: 20px; }
.contact-form [hidden], .post-tools[hidden] { display: none !important; }
.form-top .eyebrow { display: block; margin: 0 0 6px; font-size: 13px; letter-spacing: .02em; color: var(--green-d); }
.form-top h2 { font-size: clamp(26px, 2.6vw, 34px); }
.form-required { margin-top: 6px; font-size: 13.5px; color: var(--ink-3); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form > label, .form-row > label, .attachment-field > label { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .3em; row-gap: 7px; font-size: 14px; font-weight: 600; }
.contact-form > label > :is(input, textarea), .form-row > label > input { flex: 1 1 100%; }
.contact-form > label > span:not(.optional), .form-row > label > span:not(.optional) { color: var(--pink-d); }
.optional { font-weight: 400; color: var(--ink-3); }
.contact-form input[name=name], .contact-form input[name=email], .contact-form input[name=business], .contact-form textarea { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 10px; border: 1px solid #cfd8e3; background: #fff; box-shadow: 0 1px 3px -1px rgba(13, 27, 42, .08); font: 400 16px/1.4 "IS", "IS Fallback", system-ui, sans-serif; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.contact-form textarea { min-height: 128px; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(15, 181, 126, .16); }
.contact-form :is(input[name=name], input[name=email], input[name=business], textarea):user-valid:not(:focus, :placeholder-shown) { border-color: #9fdcc4; }
.contact-form :is(input[name=name], input[name=email], input[name=business], textarea):user-invalid { border-color: var(--pink-d); box-shadow: 0 0 0 4px rgba(200, 35, 95, .12); }
.contact-form ::placeholder { color: #66768c; }
.contact-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.contact-form legend { padding: 0; margin-bottom: 10px; font-size: 14px; font-weight: 600; }
.interest-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.interest-chips label { position: relative; cursor: pointer; }
.interest-chips input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.interest-chips span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 15px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); background: #fff; box-shadow: inset 0 0 0 1px #cfd8e3; transition: background .2s, color .2s, box-shadow .2s, scale .22s var(--ease-out); }
.interest-chips label:hover span { color: var(--ink); box-shadow: inset 0 0 0 1px #9fb0c2; }
.interest-chips input:checked + span { background: var(--ink); color: #fff; box-shadow: none; }
.interest-chips input:focus-visible + span { outline: 2px solid var(--green-d); outline-offset: 2px; }
.file-picker { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px; border-radius: 10px; border: 1.5px dashed #cfd8e3; background: var(--bg-2); transition: border-color .2s; }
.file-picker:hover { border-color: #a9b6c4; }
.file-picker:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.file-picker input[type=file] { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.file-picker-button { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; transition: scale .22s var(--ease-out); }
#attachment-prompt { min-width: 0; font-size: 14.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.attachment-help { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.attachment-summary { margin-top: 8px; font-size: 14px; }
.clear-attachments { padding: 0; border: 0; background: none; font: 600 14.5px "IS", "IS Fallback", sans-serif; color: var(--ink); cursor: pointer; }
.contact-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form button[type=submit] { width: 100%; justify-content: center; min-height: 54px; font-size: 17px; margin-top: 4px; }
.contact-form button[type=submit]:disabled { opacity: .72; cursor: progress; }
.contact-form button[type=submit]:disabled::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.form-note { margin-top: -10px; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.form-note + .form-note { margin-top: -16px; }
.form-result { padding: 14px 16px; border-radius: 12px; background: #eefaf5; box-shadow: inset 3px 0 0 var(--green); font-size: 15px; font-weight: 500; animation: rise .35s var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.form-result p + p { margin-top: 6px; font-weight: 400; }
.track.t3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.track.t3 p { margin-top: 10px; font-size: 17px; line-height: 1.5; color: var(--ink); max-width: 22em; }
.ct-next { padding-top: 100px; }
.faq { padding: 10px 0 130px; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.q { padding: 24px 0; border-top: 1px solid var(--line); }
.q:last-child { border-bottom: 1px solid var(--line); }
.q h3 { font-size: 19px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.q .a { margin-top: 8px; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.post { padding: 160px 0 120px; }
.post-in { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.post .eyebrow { margin-bottom: 18px; }
.post-mail { padding-bottom: 6px; font-size: clamp(28px, 5.4vw, 64px); font-weight: 600; letter-spacing: -.04em; line-height: 1.1; color: #fff; overflow-wrap: anywhere; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .4s var(--ease); }
.post-mail:hover { background-size: 100% 2px; }
.post-place { margin-top: 14px; color: #b9c6d3; }
.post-tools { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.copy .copy-done, .copy.done .copy-label { display: none; }
.copy.done .copy-done { display: inline; }

/* inner pages: tablet */
@media (max-width: 1100px) {
  .sub-in, .ct-in { grid-template-columns: minmax(0, 1fr); gap: 44px; padding-top: 44px; }
  .jumps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jump { margin-left: 0; }
  .chap-grid, .special-grid, .case, .case.flip, .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .chap-side { position: static; }
  .chap-art { max-width: 380px; }
  .case { gap: 40px; }
  .case.flip .case-vis { order: 0; }
  .special-win { max-width: 460px; }
  .inside { flex-direction: column; align-items: stretch; gap: 14px; }
  .ct-copy { position: static; padding-top: 0; }
  .form-card { margin-top: 0; }
  .posters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .posters.sm { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .bios-grid { grid-template-columns: minmax(0, 1fr); }
  .jumps { grid-template-columns: minmax(0, 1fr); }
}
/* inner pages: phone */
@media (max-width: 700px) {
  .inner .field { height: 560px; clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); }
  .sub-in, .ct-in { padding: 34px 20px 0; gap: 36px; }
  .inner h1 { font-size: 40px; line-height: 1.04; }
  .bios { padding: 50px 0 20px; }
  .bio { padding: 28px 22px 16px; }
  .bio-t { font-size: 16px; }
  .reel { padding: 70px 0 90px; }
  .posters, .posters.sm { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 12px; }
  .posters figcaption, .posters.sm figcaption { font-size: 12px; }
  .more summary { width: 100%; justify-content: center; }
  .jump { padding: 18px 18px 18px 22px; }
  .j-l { font-size: 17px; }
  .chap { padding: 70px 0 10px; }
  .chap-grid { gap: 34px; }
  .chap-art { padding: 12px; max-width: none; }
  .chap-side .btn { width: 100%; justify-content: center; text-align: center; }
  .svc-card { padding: 20px 18px 18px; gap: 14px; }
  .sc-head { gap: 12px; }
  .sc-head h3 { font-size: 19px; }
  .tagline { font-size: 15px; }
  .checks { gap: 6px; }
  .checks li { font-size: 15px; }
  .pills { gap: 6px; }
  .pills li { font-size: 13px; padding: 5px 10px; }
  .svc-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .sc-body > div:first-child, .sc-body > div:last-child { grid-column: 1; grid-row: auto; padding-left: 0; border-left: 0; }
  .sc-body > div:first-child { padding-top: 14px; border-top: 1px solid var(--line); }
  .special { padding: 90px 0 100px; margin-top: 40px; }
  .special-grid { gap: 40px; }
  .special-win img { padding: 16px; }
  .pj-in { padding-top: 34px; }
  .tabs .tab { flex: 1 1 auto; justify-content: center; }
  .inside { padding: 0 20px; margin-top: 40px; }
  .inside-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .inside-list a { font-size: 14px; padding-right: 10px; }
  .thumb { width: 46px; }
  .secnav { top: 8px; margin-top: 40px; padding: 0 12px; }
  .secnav a { padding: 0 11px; font-size: 14px; }
  .secnav a .num { display: none; }
  .secnav-in { scroll-padding-inline: 12px; }
  .secnav-in.more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
  .post-mail { font-size: 23px; letter-spacing: -.03em; display: inline-block; padding: 10px 0; }
  .pgroup .group-head { margin-top: 50px; flex-direction: column; gap: 6px; }
  .case { margin: 40px 0 90px; }
  .case .win.big, .case.flip .win.big { transform: rotateY(-5deg) rotateX(2deg); }
  .notes { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 24px; }
  .case h3 { font-size: 40px; }
  .case-lead { font-size: 19px; }
  .story { padding-left: 20px; }
  .st::before { left: -27px; }
  .st .pa-itch { font-size: 18px; }
  .acts .btn { width: 100%; justify-content: center; text-align: center; }
  .slot figcaption { font-size: 18px; padding: 16px 16px 16px 6px; }
  .slot img { padding: 14px 0 10px 14px; }
  .ct-stage { margin: 36px auto 0; width: 92%; }
  .ct-win { transform: rotateY(7deg) rotateX(3deg) rotateZ(-.5deg); }
  .ct-win img { padding: 10px 12px 4px; }
  .ct-tag { right: -3%; bottom: -14px; max-width: 190px; font-size: 12px; }
  .form-card { padding: 28px 20px 24px; margin: 0 -6px; border-radius: 16px; }
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .salute { font-size: 23px; }
  .ct-next { padding-top: 70px; }
  .track.t3 { grid-template-columns: minmax(0, 1fr); }
  .track.t3 p { margin-top: 4px; font-size: 16px; }
  .faq { padding-bottom: 90px; }
  .faq-grid { gap: 26px; }
  .post { padding: 120px 0 80px; }
}

/* ---------- AXIS CASE STUDY (/pro/projects/axis): the CUTE case study's markup in PRO cards, windows and bands ---------- */
.ax-in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; padding-top: 48px; }
.axis-back { min-height: 40px; font-size: 14.5px; margin-bottom: 26px; }
.axis-back::before { display: none; }
.ax-in h1 { font-size: clamp(42px, 4.8vw, 66px); }
.axis-lead { margin-top: 22px; font-size: 19px; line-height: 1.5; color: #1d2e40; max-width: 31em; text-wrap: pretty; }
.axis-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.axis-tags li { font-size: 13.5px; font-weight: 500; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .86); color: var(--green-d); box-shadow: inset 0 0 0 1px #cdeedf; }
.axis-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; margin-top: 30px; }
.axis-actions .lnk span[aria-hidden] { margin-left: .3em; }
.axis-actions .btn { white-space: normal; min-height: 48px; padding: 10px 22px; line-height: 1.25; }
.ax-stage { position: relative; perspective: 2000px; padding: 54px 0 24px; margin-right: -60px; }
.ax-stage .win { transform-style: preserve-3d; transition: transform 1.2s var(--ease); }
/* only the window tilts; its caption stays flat and readable */
.axis-preview { position: relative; width: 92%; perspective: 2000px; }
.axis-preview .float { animation-duration: 12s; rotate: .4 -1 .08 12deg; transition: rotate 1.2s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .ax-stage:hover .axis-preview .float { rotate: .4 -1 .08 4deg; }
}
.axis-preview img { width: 100%; }
.axis-preview figcaption { margin-top: 22px; font-size: 14px; line-height: 1.5; color: var(--ink-3); max-width: 34em; text-wrap: pretty; }

.ax-flow .secnav { margin-top: 24px; }
.ax-sec { scroll-margin-top: 84px; }
.axis-section { padding-top: 90px; }
.axis-section h2, .axis-section-heading h2 { margin-top: 2px; }
.axis-section-title { max-width: 760px; }
.axis-section-heading { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 20px 56px; align-items: end; }
.axis-section-heading > p { color: var(--ink-2); font-size: 18px; line-height: 1.55; text-wrap: pretty; }
.axis-body-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 48px; margin-top: 26px; color: var(--ink-2); font-size: 17.5px; line-height: 1.65; text-wrap: pretty; }
.axis-scope-grid, .axis-outcome-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.axis-outcome-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.axis-scope-grid article, .axis-outcome-grid article { position: relative; padding: 26px 22px 22px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 18px 36px -28px rgba(13, 27, 42, .3); overflow: hidden; transition: box-shadow .4s var(--ease); }
.axis-scope-grid article::before, .axis-outcome-grid article::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--green); }
.axis-scope-grid article:nth-child(2)::before { background: var(--amber); }
.axis-scope-grid article:nth-child(3)::before { background: var(--pink); }
.axis-scope-grid article:nth-child(4)::before { background: var(--ink); }
.axis-scope-grid article:hover, .axis-outcome-grid article:hover { box-shadow: 0 0 0 1px #d5dde6, var(--shadow-s); }
.axis-scope-grid h3, .axis-outcome-grid h3 { font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.axis-scope-grid p, .axis-outcome-grid p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.axis-role { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 40px; margin-top: 22px; padding: 22px 26px; border-radius: 14px; background: var(--bg-2); box-shadow: inset 3px 0 0 var(--green); font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.axis-role strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }

.axis-architecture-band { position: relative; margin-top: 110px; padding: 120px 0 130px; }
.axis-architecture-band::before { content: ""; position: absolute; inset: 0; background: var(--bg-2); transform: skewY(-3deg); z-index: -1; }
.axis-diagram { margin-top: 48px; }
.axis-layers { display: grid; }
.axis-layer { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 18px 36px; align-items: start; padding: 26px 28px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 24px 48px -34px rgba(13, 27, 42, .4); }
.axis-layer-heading span, .axis-plane-label .eyebrow { display: block; margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--green-d); }
.axis-layer-heading h3, .axis-plane-label h3 { font-size: 24px; font-weight: 600; letter-spacing: -.025em; line-height: 1.2; margin-top: 8px; }
.axis-layer-heading p, .axis-plane-label p { margin-top: 6px; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.axis-nodes, .axis-hosting-nodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.axis-node { padding: 16px 16px 18px; border-radius: 12px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.axis-node h4 { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.axis-node p { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.axis-connection { position: absolute; z-index: 1; left: 50%; bottom: 0; transform: translate(-50%, 50%); width: max-content; max-width: calc(100% - 24px); display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 500; line-height: 1.35; text-align: center; box-shadow: var(--shadow-s); }
.axis-connection span { color: var(--green); font-weight: 700; }
.axis-layer:has(.axis-connection) { margin-bottom: 40px; padding-bottom: 40px; }
.axis-hosting-plane { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 18px 36px; margin-top: 28px; padding: 28px; border-radius: 16px; background: var(--ink); color: #fff; box-shadow: var(--shadow); }
.axis-plane-label .eyebrow { color: var(--green); }
.axis-plane-label p { color: #b9c6d3; }
.axis-hosting-plane .axis-node { background: #142638; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
.axis-hosting-plane .axis-node p { color: #b9c6d3; }
.axis-diagram figcaption { margin-top: 20px; font-size: 14px; line-height: 1.5; color: var(--ink-3); text-align: center; text-wrap: balance; }

.axis-decisions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 44px; counter-reset: none; }
.axis-decisions li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 26px 26px 24px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 18px 36px -28px rgba(13, 27, 42, .3); transition: box-shadow .4s var(--ease); }
.axis-decisions li:hover { box-shadow: 0 0 0 1px #d5dde6, var(--shadow-s); }
.axis-number { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--green-d); padding-top: 4px; }
.axis-decisions h3 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.axis-decisions p { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.axis-decisions .axis-implication { margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: #eefaf5; box-shadow: inset 3px 0 0 var(--green); color: var(--ink); font-weight: 500; font-size: 14.5px; }

.axis-implementation-band { padding-top: 110px; }
.axis-table-wrap { margin-top: 44px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-s); overflow: hidden; }
.axis-comparison { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.55; }
.axis-comparison th, .axis-comparison td { padding: 20px 24px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.axis-comparison thead th { border-top: 0; background: var(--bg-2); font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); }
.axis-comparison thead th + th::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 2px; transform: rotate(45deg); background: var(--green); vertical-align: 1px; }
.axis-comparison thead th + th + th::before { background: var(--pink); }
.axis-comparison tbody th { width: 18%; font-weight: 600; letter-spacing: -.01em; }
.axis-comparison td { color: var(--ink-2); }
.axis-comparison tbody tr:hover { background: #fafcfe; }

.axis-outcomes { padding-bottom: 120px; }
.axis-measured-panel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 48px; align-items: center; margin-top: 18px; padding: 34px 36px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-s); }
.axis-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.axis-metrics strong { display: block; width: fit-content; font-size: clamp(38px, 4.4vw, 56px); font-weight: 600; letter-spacing: -.05em; line-height: 1; padding-right: .05em; background: linear-gradient(100deg, var(--green-d) 10%, var(--pink-d) 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.axis-metrics span { display: block; margin-top: 10px; font-weight: 600; }
.axis-metrics p { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.axis-measurement-note { padding-left: 24px; border-left: 1px solid var(--line); font-size: 14px; line-height: 1.6; color: var(--ink-3); text-wrap: pretty; }
.axis-evidence-note { margin-top: 22px; font-size: 14px; color: var(--ink-3); text-align: center; text-wrap: balance; }
.ax-close-in { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px 56px; }
.ax-close-in > div { max-width: 640px; }

@media (max-width: 1100px) {
  .ax-in { grid-template-columns: minmax(0, 1fr); }
  .ax-stage { margin: 0 auto; width: min(100%, 700px); }
  .ax-flow .secnav { margin-top: 36px; }
  .axis-section-heading, .axis-role, .axis-measured-panel { grid-template-columns: minmax(0, 1fr); }
  .axis-scope-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .axis-layer, .axis-hosting-plane { grid-template-columns: minmax(0, 1fr); }
  .axis-measurement-note { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .axis-decisions, .axis-outcome-grid { grid-template-columns: minmax(0, 1fr); }
  .axis-body-copy { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 700px) {
  .ax-in { padding-top: 30px; }
  .axis-back { margin-bottom: 20px; }
  .ax-in h1 { font-size: 40px; }
  .axis-lead { font-size: 17.5px; margin-top: 18px; }
  .axis-actions .btn { width: 100%; justify-content: center; text-align: center; }
  .ax-stage { padding: 30px 0 10px; perspective: 1200px; }
  .axis-preview .float { rotate: .4 -1 .08 8deg; }
  .axis-preview .bar span { font-size: 9px; }
  .ax-flow .secnav { margin-top: 30px; }
  .axis-section { padding-top: 64px; }
  .axis-section-heading > p { font-size: 16.5px; }
  .axis-body-copy { font-size: 16.5px; }
  .axis-scope-grid, .axis-nodes, .axis-hosting-nodes, .axis-metrics { grid-template-columns: minmax(0, 1fr); }
  .axis-scope-grid, .axis-outcome-grid, .axis-decisions { gap: 12px; margin-top: 30px; }
  .axis-role { padding: 18px 18px; }
  .axis-architecture-band { margin-top: 70px; padding: 80px 0 90px; }
  .axis-layer, .axis-hosting-plane { padding: 22px 18px; }
  .axis-layer:has(.axis-connection) { padding-bottom: 38px; }
  .axis-connection { font-size: 12.5px; padding: 8px 14px; }
  .axis-decisions li { padding: 22px 18px 20px; gap: 12px; }
  .axis-implementation-band { padding-top: 80px; }
  /* the comparison table becomes one card per capability */
  .axis-table-wrap { background: none; box-shadow: none; border-radius: 0; overflow: visible; margin-top: 30px; }
  .axis-comparison, .axis-comparison tbody, .axis-comparison tr, .axis-comparison th, .axis-comparison td { display: block; width: auto; }
  .axis-comparison thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .axis-comparison tbody { display: grid; gap: 12px; }
  .axis-comparison tbody tr { border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 18px 36px -28px rgba(13, 27, 42, .3); overflow: hidden; }
  .axis-comparison tbody tr:hover { background: #fff; }
  .axis-comparison tbody th { width: auto; padding: 16px 18px 12px; border-top: 0; font-size: 18px; box-shadow: inset 0 3px 0 var(--green); }
  .axis-comparison td { padding: 12px 18px 16px; font-size: 15px; }
  .axis-comparison td::before { content: attr(data-label); display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); }
  .axis-comparison td + td { background: var(--bg-2); }
  .axis-outcomes { padding-bottom: 90px; }
  .axis-measured-panel { padding: 24px 20px; }
  .ax-close-in { gap: 26px; }
}

/* =====================================================================
   WOW round (2026-10-24). New motion is gated by html:not(.calm) (the site motion switch).
   ===================================================================== */
/* page to page: the page fades and rises under a still header (theme.js and theme-transition.js add html.pro-vt for PRO to PRO only) */
@view-transition { navigation: auto; }
html.pro-vt .top { view-transition-name: pro-top; }
html.pro-vt:not(.calm)::view-transition-old(root) { animation: pro-vt-out .35s var(--ease-io) both; }
html.pro-vt:not(.calm)::view-transition-new(root) { animation: pro-vt-in .35s var(--ease-io) both; }
html.pro-vt:not(.calm)::view-transition-group(pro-top) { animation-duration: .35s; animation-timing-function: var(--ease-io); }
@keyframes pro-vt-out { to { opacity: 0; } }
@keyframes pro-vt-in { from { opacity: 0; transform: translateY(8px); } }

/* cursor light: main.js sets --sx/--sy and .lit on the card under a fine pointer */
.sites .win { position: relative; }
:is(.probs article, .col, .call, .sites .win, .proj .win.big)::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(320px circle at var(--sx, 50%) var(--sy, 50%), var(--lt), transparent 70%); transition: opacity .45s var(--ease-io); }
.probs article { --lt: rgba(15, 181, 126, .07); }
/* the headaches have no card edge: the light spills a little past the column and fades out at its sides */
.probs article::after { inset: 0 -13px; background: radial-gradient(320px circle at calc(var(--sx, 50%) + 13px) var(--sy, 50%), var(--lt), transparent 70%); -webkit-mask: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.probs article:nth-child(2) { --lt: rgba(255, 77, 141, .06); }
.probs article:nth-child(3) { --lt: rgba(255, 178, 63, .09); }
.probs article:nth-child(4) { --lt: rgba(13, 27, 42, .04); }
.col { --lt: rgba(15, 181, 126, .07); }
.c-tara { --lt: rgba(255, 77, 141, .06); }
.call { position: relative; --lt: rgba(255, 255, 255, .07); }
.sites .win, .proj .win.big { --lt: rgba(255, 255, 255, .2); }
html:not(.calm) :is(.probs article, .col, .call, .sites .win, .proj .win.big).lit::after { opacity: 1; }
/* the work windows lean toward the pointer, like a screen held in the hand */
@media (hover: hover) and (pointer: fine) {
  html:not(.calm) .site-card .win.lit { transform: translateY(-6px) rotateX(calc(var(--ty, 0) * -4deg)) rotateY(calc(var(--tx, 0) * 5deg)); }
  html:not(.calm) .proj .win.big.lit { transform: rotateY(calc(-4deg + var(--tx, 0) * 4deg)) rotateX(calc(2deg - var(--ty, 0) * 3deg)); }
  html:not(.calm) .flip .win.big.lit { transform: rotateY(calc(4deg + var(--tx, 0) * 4deg)) rotateX(calc(2deg - var(--ty, 0) * 3deg)); }
}

/* magnetic call buttons: main.js sets --bx/--by; they follow quickly and settle back on the curve */
html:not(.calm) a.btn:is(.btn-ink, .btn-light) { translate: var(--bx, 0) var(--by, 0); transition: box-shadow .2s, transform .22s var(--ease-out), translate .5s var(--ease-io); }
html:not(.calm) a.btn.mag { transition: box-shadow .2s, transform .22s var(--ease-out), translate .15s ease-out; }

/* process: each stop's dot fills in the line's colour as the line reaches it (main.js sets --d from the curve) */
.track li::before { background: var(--c); box-shadow: inset 0 0 0 2px var(--c), 0 0 0 3px #fff; }
.track li:nth-child(1) { --c: var(--green); }
.track li:nth-child(2) { --c: color-mix(in srgb, var(--green), var(--amber)); }
.track li:nth-child(3) { --c: var(--amber); }
.track li:nth-child(4) { --c: color-mix(in srgb, var(--amber), var(--pink)); }
/* the line is uncovered, not stretched, so its colours stay put under the dots */
html.js:not(.calm) .track::after { transform: none; clip-path: inset(0); transition: clip-path 1.2s var(--ease-io); }
html.js:not(.calm) .track:not(.in)::after { transform: none; clip-path: inset(0 100% 0 0); }
@media (max-width: 700px) { html.js:not(.calm) .track:not(.in)::after { clip-path: inset(0 0 100% 0); } }
html.js:not(.calm) .track li::before { transition: background .25s var(--ease-out) var(--d, 0ms), box-shadow .25s var(--ease-out) var(--d, 0ms), scale .3s cubic-bezier(.21, .12, .35, 1.43) var(--d, 0ms); }
html.js:not(.calm) .track:not(.in) li::before { background: #fff; box-shadow: inset 0 0 0 2px #c3cedb, 0 0 0 3px #fff; scale: .8; }

/* =====================================================================
   WOW round 3 (2026-10-24): inner pages. New motion is gated by html:not(.calm).
   ===================================================================== */
/* the cursor light (main.js .lit, --sx/--sy) also on the project windows, Services cards and the About bios */
:is(.case .win.big, .jump, .svc-card, .bio)::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(320px circle at var(--sx, 50%) var(--sy, 50%), var(--lt), transparent 70%); transition: opacity .45s var(--ease-io); }
.case .win.big { --lt: rgba(255, 255, 255, .2); }
.jump, .svc-card, .b-eren { --lt: rgba(15, 181, 126, .07); }
.j-tara, .c-tara .svc-card, .b-tara { --lt: rgba(255, 77, 141, .06); }
.j-3d { --lt: rgba(255, 178, 63, .09); }
html:not(.calm) :is(.case .win.big, .jump, .svc-card, .bio).lit::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  /* project windows lean toward the pointer from their hover pose, like the home work windows */
  html:not(.calm) .case .win.big.lit { transform: rotateY(calc(-2deg + var(--tx, 0) * 4deg)) rotateX(calc(1deg - var(--ty, 0) * 3deg)); }
  html:not(.calm) .case.flip .win.big.lit { transform: rotateY(calc(2deg + var(--tx, 0) * 4deg)) rotateX(calc(1deg - var(--ty, 0) * 3deg)); }
  /* Services jump cards lean a little; rotate (not transform) so their drift keeps running underneath */
  html:not(.calm) .jumps { perspective: 1200px; }
  html:not(.calm) .jump { transition: translate .5s var(--ease), box-shadow .5s var(--ease), scale .22s var(--ease-out), rotate .6s var(--ease-io); }
  html:not(.calm) .jump.lit { rotate: calc(.0001 - var(--ty, 0)) calc(var(--tx, 0) * 1.6) 0 calc(hypot(var(--ty, 0), var(--tx, 0) * 1.6) * 2.5deg); transition: translate .5s var(--ease), box-shadow .5s var(--ease), scale .22s var(--ease-out), rotate .2s ease-out; }
}

/* Projects: the index indicator (main.js sets --ix/--iw from the current pill) */
.secnav-in.spy { position: relative; }
.secnav-in.spy::before { content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: var(--iw, 0); border-radius: 999px; background: var(--ink); translate: var(--ix, 0) 0; opacity: 0; transition: opacity .25s; }
.secnav-in.spy.on::before { opacity: 1; }
.secnav-in.spy a { position: relative; z-index: 1; }
.secnav-in.spy a[aria-current] { background: transparent; }
html:not(.calm) .secnav-in.spy::before { transition: opacity .25s, translate .55s var(--ease-io), width .55s var(--ease-io); }
html:not(.calm) .secnav-in.spy.snap::before { transition: opacity .25s; }
/* the label turns white as the indicator arrives, dark again as it leaves */
html:not(.calm) .secnav-in.spy a { transition: background .25s, color .2s .14s, scale .22s var(--ease-out); }
html:not(.calm) .secnav-in.spy a[aria-current] { transition-delay: 0s, .28s, 0s; }

/* Projects: hotspots pulse once, 1 then 2 then 3 (main.js adds .ping to the screenshot) */
.spot[data-spot="2"] { --n: 1; }
.spot[data-spot="3"] { --n: 2; }
.spot i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--c); opacity: 0; pointer-events: none; }
html:not(.calm) .photo.ping .spot { animation: pro-spot 1s var(--ease-io) calc(.25s + var(--n, 0) * .26s); }
html:not(.calm) .photo.ping .spot i { animation: pro-ping .7s var(--ease-io) calc(.25s + var(--n, 0) * .26s); }
html:not(.calm) .photo.ping .spot i::after { animation: pro-ring .9s var(--ease-out) calc(.25s + var(--n, 0) * .26s); }
@keyframes pro-spot { 30% { background: color-mix(in srgb, var(--c) 12%, transparent); box-shadow: 0 0 0 2px var(--c); } }
@keyframes pro-ping { 40% { scale: 1.3; background: var(--cd); } }
@keyframes pro-ring { 0% { opacity: .9; scale: 1; } 100% { opacity: 0; scale: 2.4; } }

/* Projects: each story's rail draws down like the process line, its dots fill as it reaches them (main.js sets --d) */
.story::after { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--cd); clip-path: inset(0 0 100% 0); }
html.js:not(.calm) .story.in::after { clip-path: inset(0); transition: clip-path 1.2s var(--ease-io); }
html.js:not(.calm) .story.in .st::before { background: var(--cd); transition: background .25s var(--ease-out) var(--d, 0ms); }

/* Services: the person panel's accent fills a step per card reached (main.js sets --p and .prog) */
.chap-art.prog::before { background: color-mix(in srgb, var(--green) 24%, #fff); }
.c-tara .chap-art.prog::before { background: color-mix(in srgb, var(--pink) 24%, #fff); }
.chap-art.prog::after { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--green); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.c-tara .chap-art.prog::after { background: var(--pink); }
html:not(.calm) .chap-art.prog::after { transition: transform .7s var(--ease-io); }

/* Contact: one highlight sweep along the letter's top accent when "Write us a letter" arrives (main.js .sweep) */
.form-card::after { content: ""; position: absolute; inset: 0 0 auto; height: 30px; border-radius: 18px 18px 0 0; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent 42%, rgba(255, 255, 255, .95) 50%, transparent 58%) 100% 0 / 250% 4px no-repeat, linear-gradient(90deg, transparent 38%, rgba(255, 178, 63, .16) 50%, transparent 62%) 100% 0 / 250% 100% no-repeat;
  -webkit-mask: linear-gradient(#000 4px, transparent); mask: linear-gradient(#000 4px, transparent); }
/* the jump lands with the letter's top accent in view, not cut off above it */
.pg #inquiry-form { scroll-margin-top: 120px; }
html:not(.calm) .form-card.sweep::after { animation: pro-sweep 1.2s var(--ease-io); }
@keyframes pro-sweep { 0% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; background-position: 0 0, 0 0; } }
/* Contact: Send presses in, then a slim shimmer runs inside it until the page leaves (main.js sets aria-busy only when the POST goes) */
html:not(.calm) .contact-form[aria-busy=true] button[type=submit] { animation: pro-press .3s var(--ease-io); }
html:not(.calm) .contact-form[aria-busy=true] button[type=submit]::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent) -70% calc(100% - 8px) / 30% 2px no-repeat, var(--ink); animation: pro-shimmer 1.1s var(--ease-io) .25s infinite; }
@keyframes pro-press { 40% { scale: .96; } }
@keyframes pro-shimmer { to { background-position: 170% calc(100% - 8px), 0 0; } }

/* About: the names arrive on the house beat (rise in order, accent draws on the beat), Eren a step after Tara */
html.js:not(.calm) .bio.rv > * { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .32s var(--ease-io) .08s, transform .32s var(--ease-io) .08s; }
html.js:not(.calm) .bio.rv > :nth-child(2) { transition-delay: .16s; }
html.js:not(.calm) .bio.rv > :nth-child(n+3) { transition-delay: .24s; }
html.js:not(.calm) .b-eren.rv > * { transition-delay: .2s; }
html.js:not(.calm) .b-eren.rv > :nth-child(2) { transition-delay: .28s; }
html.js:not(.calm) .b-eren.rv > :nth-child(n+3) { transition-delay: .36s; }
html.js:not(.calm) .bio.rv.in > * { opacity: 1; transform: none; }
html.js:not(.calm) .bio.rv::before { transform-origin: 0 50%; transform: scaleX(0); transition: transform .5s var(--ease-io) .3s; }
html.js:not(.calm) .b-eren.rv::before { transition-delay: .42s; }
html.js:not(.calm) .bio.rv.in::before { transform: none; }
/* About: posters lean toward the hand with a thin sheen, NOIR's poster device on PRO's light shelf (main.js .lit, --tx/--ty) */
@media (hover: hover) and (pointer: fine) {
  .posters figure { position: relative; }
  .posters figure::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 2 / 3; border-radius: 8px; pointer-events: none; opacity: 0;
    background: linear-gradient(115deg, transparent calc((var(--tx, 0) + 1) * 50% - 18%), rgba(255, 255, 255, .34) calc((var(--tx, 0) + 1) * 50%), transparent calc((var(--tx, 0) + 1) * 50% + 18%)); }
  html:not(.calm) .posters figure img, html:not(.calm) .posters figure::after { transition: opacity .3s, transform .6s var(--ease-io), box-shadow .35s var(--ease); }
  html:not(.calm) .posters figure.lit img, html:not(.calm) .posters figure.lit::after { transform: translateY(-6px) perspective(420px) rotateX(calc(var(--ty, 0) * -5deg)) rotateY(calc(var(--tx, 0) * 5deg)) scale(1.05); transition: opacity .3s, transform .16s ease-out, box-shadow .35s var(--ease); }
  html:not(.calm) .posters figure.lit img { box-shadow: var(--shadow); }
  html:not(.calm) .posters figure.lit::after { opacity: 1; }
}

/* =====================================================================
   WOW round 7 (2026-10-24): the contact moment. New motion is gated by html:not(.calm).
   ===================================================================== */
/* sent (?sent=1, the form not busy): a check draws itself in a ring, the message rises in over a soft burst of the PRO gradient */
@property --pro-ring { syntax: "<angle>"; inherits: false; initial-value: 360deg; }
.contact-form:not([aria-busy=true]) > .form-result { position: relative; isolation: isolate; padding: 16px 18px 16px 62px; }
.contact-form:not([aria-busy=true]) > .form-result::before { content: ""; position: absolute; left: 18px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%;
  --pro-ring: 360deg; background: conic-gradient(var(--green) var(--pro-ring), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); }
/* the check hangs off the message (which rises in, so it is the check's containing block either way) */
.contact-form:not([aria-busy=true]) > .form-result > #form-result-message { position: relative; }
.contact-form:not([aria-busy=true]) > .form-result > #form-result-message::before { content: ""; position: absolute; left: -35px; top: 50%; width: 12px; height: 6px; margin-top: -5px;
  border-left: 2.5px solid var(--green-d); border-bottom: 2.5px solid var(--green-d); transform: rotate(-45deg); }
.contact-form:not([aria-busy=true]) > .form-result::after { content: ""; position: absolute; inset: -34px -24px; z-index: -1; border-radius: 48px; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(15, 181, 126, .24), rgba(255, 178, 63, .12) 58%, rgba(255, 77, 141, .08) 80%, transparent); }
html:not(.calm) .contact-form:not([aria-busy=true]) > .form-result::before { animation: pro-ring .6s var(--ease-io) .12s both; }
html:not(.calm) .contact-form:not([aria-busy=true]) > .form-result > #form-result-message::before { animation: pro-tick .32s var(--ease-io) .62s both; }
html:not(.calm) .contact-form:not([aria-busy=true]) > .form-result > #form-result-message { animation: pro-msg .5s var(--ease-io) .3s both; }
html:not(.calm) .contact-form:not([aria-busy=true]) > .form-result::after { animation: pro-burst 1.3s var(--ease-io) .1s; }
@keyframes pro-ring { from { --pro-ring: 0deg; } }
@keyframes pro-tick { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pro-msg { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
@keyframes pro-burst { 0% { opacity: 0; scale: .55; } 35% { opacity: 1; } 100% { opacity: 0; scale: 1.12; } }

/* the field being written: its label takes the green, the message box grows with the text up to a limit */
.contact-form > label:focus-within, .form-row > label:focus-within, .contact-form fieldset:focus-within > legend, .attachment-field:focus-within > label { color: var(--green-d); }
html:not(.calm) :is(.contact-form > label, .form-row > label, .contact-form legend, .attachment-field > label) { transition: color .25s var(--ease-io); }
.contact-form textarea { max-height: min(360px, 55vh); }
@supports (field-sizing: content) { .contact-form textarea:not(:placeholder-shown) { field-sizing: content; } }
/* a field written and valid confirms itself with a small green tick, like CUTE's letter */
.contact-form :is(input[name=name], input[name=email], input[name=business]):user-valid:not(:focus, :placeholder-shown) { padding-right: 42px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' fill='%23E3F6EE' stroke='%230FB57E' stroke-width='1.5'/%3E%3Cpath d='m5.4 9.2 2.4 2.4 4.8-5' fill='none' stroke='%23077A55' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 18px 18px; }
html:not(.calm) .contact-form :is(input[name=name], input[name=email], input[name=business]):user-valid:not(:focus, :placeholder-shown) { animation: pro-valid .4s var(--ease-io); }
@keyframes pro-valid { from { background-size: 0 0; } }

/* =====================================================================
   WOW round 8 (2026-10-24): phones. Touch screens and the phone menu only; new motion is gated by html:not(.calm).
   ===================================================================== */
@media (hover: none) and (pointer: coarse) {
  /* every tap answers: the logo squeezes, text links and quiet buttons dim like iOS; in at once, released on the curve */
  .brand:active { scale: .95; }
  :is(.lnk, .mail a, .post-mail, .foot-grid a, .foot-bar a, .motion-switch, .sheet .lang a, .sheet nav a):active { opacity: .5; }
  html:not(.calm) .brand { transition: scale .35s var(--ease-io); }
  html:not(.calm) .lnk { transition: background-size .3s var(--ease), opacity .35s var(--ease-io); }
  html:not(.calm) .post-mail { transition: background-size .4s var(--ease), opacity .35s var(--ease-io); }
  html:not(.calm) .mail a { transition: text-decoration-color .15s, opacity .35s var(--ease-io); }
  html:not(.calm) :is(.foot-grid a, .foot-bar a) { transition: color .2s, text-decoration-color .25s, opacity .35s var(--ease-io); }
  html:not(.calm) :is(.motion-switch, .sheet .lang a, .sheet nav a) { transition: opacity .35s var(--ease-io); }
  html:not(.calm) :is(.brand, .lnk, .mail a, .post-mail, .foot-grid a, .foot-bar a, .motion-switch, .sheet .lang a, .sheet nav a):active { transition-duration: .06s; }
  /* the cursor light, by touch (main.js .lit on a held or tapped card): it comes up quickly under the finger */
  html:not(.calm) :is(.probs article, .col, .call, .sites .win, .proj .win.big, .case .win.big, .jump, .svc-card, .bio).lit::after { transition-duration: .18s; }
  /* a fingertip is smaller and stays put: a tighter, brighter pool than the cursor's */
  :is(.col, .call, .sites .win, .proj .win.big, .case .win.big, .jump, .svc-card, .bio)::after { background: radial-gradient(220px circle at var(--sx, 50%) var(--sy, 50%), var(--lt), transparent 70%), radial-gradient(120px circle at var(--sx, 50%) var(--sy, 50%), var(--lt), transparent 70%); }
}
/* the phone menu: the sheet settles on the curve and its rows arrive one after another; closing folds it away faster (main.js html.menu-shut) */
@media (max-width: 820px) {
  html:not(.calm) .menu[open] .sheet { transform-origin: calc(100% - 22px) 0; animation: pro-sheet-in .3s var(--ease-io) both; }
  html:not(.calm) .menu[open] :is(.sheet nav a, .sheet-row, .sheet > .btn) { animation: pro-row-in .2s var(--ease-io) both; }
  html:not(.calm) .menu[open] .sheet nav a:nth-child(1) { animation-delay: 30ms; }
  html:not(.calm) .menu[open] .sheet nav a:nth-child(2) { animation-delay: 52ms; }
  html:not(.calm) .menu[open] .sheet nav a:nth-child(3) { animation-delay: 74ms; }
  html:not(.calm) .menu[open] .sheet nav a:nth-child(4) { animation-delay: 96ms; }
  html:not(.calm) .menu[open] .sheet nav a:nth-child(5) { animation-delay: 118ms; }
  html:not(.calm) .menu[open] :is(.sheet-row, .sheet > .btn) { animation-delay: 140ms; }
  html.menu-shut:not(.calm) .menu[open] .sheet { animation: pro-sheet-out .17s var(--ease-io) both; }
  html.menu-shut:not(.calm) .menu[open] :is(.sheet nav a, .sheet-row, .sheet > .btn) { animation: none; }
  html.menu-shut:not(.calm) .menu-back { animation: pro-fade-out .17s var(--ease-io) both; }
}
@keyframes pro-sheet-in { from { opacity: 0; transform: translateY(-10px) scale(.96); } 25% { opacity: 1; } }
@keyframes pro-row-in { from { opacity: 0; transform: translate3d(0, -6px, 0); } }
@keyframes pro-sheet-out { to { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes pro-fade-out { to { opacity: 0; } }

/* ---- WOW round 9: the details (images arriving, scrollbar, focus, selection, counting figures) ---- */
img:is(.fb-wait, .fb-soft) { outline: 4000px solid #e9eef3; outline-offset: -4000px; clip-path: inset(0); }
img.fb-soft { outline-color: transparent; }
:where(html:not(.calm)) img.fb-soft { animation: fb-soft .3s cubic-bezier(.75, 0, .21, .99); }
img.fb-cut { outline-color: transparent; }
:where(html:not(.calm)) img.fb-soft.fb-cut { animation-name: fb-cut; }
@keyframes fb-cut { from { opacity: 0; } }
@keyframes fb-soft { from { outline-color: #e9eef3; } }
html { scrollbar-color: #8796ab #f6f9fc; scrollbar-width: thin; }
@media (hover: hover) and (pointer: fine) {
  html::-webkit-scrollbar { width: 10px; height: 10px; background: #f6f9fc; }
  html::-webkit-scrollbar-thumb { background: #8796ab; border: 2px solid #f6f9fc; border-radius: 10px; }
  html::-webkit-scrollbar-thumb:hover { background: var(--green-d); }
}
/* one ring everywhere: PRO green, 2px out, on a white halo so it reads on the colour field too */
html :focus-visible { outline: 2px solid var(--green-d); outline-offset: 2px; }
.contact-form :is(input, textarea, select):focus-visible, .ctl input[type=text]:focus-visible { outline: 2px solid var(--green-d); outline-offset: 2px; }
.interest-chips input:focus-visible + span, .seg input:focus-visible + span { outline-offset: 2px; }
:is(.c-tara, .b-tara) ::selection { background: #ffd1e1; color: var(--ink); }
/* the credits number counts up: same-width figures, so it does not wobble while it counts */
.bignum span { font-variant-numeric: tabular-nums; }

/* ---- WOW round 10: the Axis case study (/case-read.js). The sticky chapter pill already follows the reader; a hairline
   along its bottom fills as the page is read, the screenshot opens full size, the chapter jumped to is underlined once ---- */
.ax-nav { display: grid; grid-template-columns: fit-content(100%); justify-content: center; }
.ax-nav > * { grid-area: 1 / 1; min-width: 0; }
@media (min-width: 701px) and (max-width: 880px) { .secnav a { padding: 0 12px; } .secnav a .num { display: none; } }
.ax-nav .case-read { position: relative; z-index: 1; align-self: end; height: 2px; margin: 0 26px; border-radius: 2px; background: linear-gradient(90deg, var(--green), var(--pink)); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
html:not(.calm) .ax-nav .case-read { transition: transform .25s var(--ease-io); }
.case-shot { cursor: zoom-in; }
.case-view { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: none; place-items: center; touch-action: none; cursor: zoom-out; }
.case-view[open] { display: grid; }
.case-view::backdrop { background: rgba(240, 244, 248, .94); }
.case-view img { width: min(92vw, 1280px, calc((100dvh - 140px) * var(--ar))); height: auto; border-radius: 14px; box-shadow: 0 0 0 1px rgba(13, 27, 42, .08), var(--shadow); transform-origin: 0 0; }
.case-view-x { position: fixed; top: 16px; right: 16px; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: var(--shadow-s), 0 0 0 1px rgba(13, 27, 42, .06); cursor: pointer; }
html:has(.case-view[open]) { overflow: hidden; scrollbar-gutter: stable; }
html:not(.calm) .case-view-x { transition: opacity .3s var(--ease-io); }
html:not(.calm) .case-view::backdrop { transition: opacity .3s var(--ease-io); }
@starting-style { html:not(.calm) .case-view[open]::backdrop, html:not(.calm) .case-view[open] .case-view-x { opacity: 0; } }
.case-view.shut::backdrop, .case-view.shut .case-view-x { opacity: 0; }
.ax-sec:target .eyebrow { background: linear-gradient(var(--green), var(--green)) 0 100% / 0 2px no-repeat; }
html:not(.calm) .ax-sec:target .eyebrow { animation: case-here 1.6s var(--ease-io) .35s; }
@keyframes case-here { 0% { background-size: 0 2px; background-position: 0 100%; } 35%, 65% { background-size: 100% 2px; background-position: 0 100%; } 65.01% { background-position: 100% 100%; } 100% { background-size: 0 2px; background-position: 100% 100%; } }

/* ---- WOW round 14 (2026-10-24): the sign-off. As the footer arrives (main.js .foot.in) the PRO band draws once along its
   top, then the logo and the link columns arrive a beat apart and rest. Links get the sliding underline in the band's
   colours; the bunny hops once under the pointer. New motion is gated by html:not(.calm). ---- */
.foot { position: relative; padding-top: 72px; }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--green), var(--amber), var(--pink)); transform-origin: 0 50%; }
.f-brand img { width: 104px; }
.f-brand p { margin-top: 12px; }
html.js:not(.calm) .foot::before { transition: transform 1.2s var(--ease-io); }
html.js:not(.calm) .foot:not(.in)::before { transform: scaleX(0); }
html.js:not(.calm) .foot-grid > * { transition: opacity .5s var(--ease-io), transform .5s var(--ease-io); }
html.js:not(.calm) .foot-grid > :nth-child(1) { transition-delay: .25s; }
html.js:not(.calm) .foot-grid > :nth-child(2) { transition-delay: .33s; }
html.js:not(.calm) .foot-grid > :nth-child(3) { transition-delay: .41s; }
html.js:not(.calm) .foot-grid > :nth-child(4) { transition-delay: .49s; }
html.js:not(.calm) .foot:not(.in) .foot-grid > * { opacity: 0; transform: translate3d(0, 20px, 0); }
@media (hover: hover) and (pointer: fine) {
  .foot-grid a { width: fit-content; }
  .foot-grid a, .foot-bar a { text-decoration: none; background: linear-gradient(90deg, var(--green), var(--pink)) 100% calc(100% - 2px) / 0 1.5px no-repeat; }
  .foot-grid a:hover, .foot-bar a:hover { background-size: 100% 1.5px; background-position-x: 0; }
  html:not(.calm) :is(.foot-grid a, .foot-bar a) { transition: color .2s, background-size .35s var(--ease-io); }
  html:not(.calm) .f-brand img:hover { animation: pro-hop .7s var(--ease-io); }
}
@keyframes pro-hop { 30% { transform: translateY(-7px) rotate(-5deg); } 55% { transform: translateY(0) rotate(2deg); } 75% { transform: rotate(-1deg); } }

/* ---- WOW round 15 (2026-10-24): the nav pill slides between links under the pointer and rests on the current page
   (main.js adds html.pro-ind on a fine pointer without html.calm; otherwise the plain hover/current styles above stay). ---- */
html.pro-ind .nav { position: relative; isolation: isolate; }
html.pro-ind .nav a, html.pro-ind .nav a:hover, html.pro-ind .nav a[aria-current=page] { background: none; box-shadow: none; }
.nav-ind { position: absolute; left: 0; top: 0; bottom: 0; z-index: -1; border-radius: 8px; background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(13, 27, 42, .1); pointer-events: none; opacity: 0; transition: translate .42s var(--ease-io), width .42s var(--ease-io), opacity .25s var(--ease-io); }

/* HOME phone sections */
@media (max-width: 700px) {
  :where(.pro-home) .demo#demo { margin-top: 24px; padding: 56px 0 64px; background: var(--bg-2); }
  :where(.pro-home) .demo#demo::before { display: none; }
  :where(.pro-home) #demo .demo-grid { display: flex; flex-direction: column; gap: 0; }
  :where(.pro-home) #demo .demo-copy { display: contents; }
  :where(.pro-home) #demo .eyebrow { align-self: flex-start; }
  :where(.pro-home) #demo h2 { width: 100%; }
  /* the controls sit above the preview and stay pinned while it scrolls under them, so every change shows at once */
  :where(.pro-home) #demo .sub { order: 1; }
  :where(.pro-home) #demo .ctl {
    order: 2; position: sticky; top: calc(var(--top-h, 0px) + 10px + env(safe-area-inset-top, 0px)); z-index: 6;
    width: 100%; margin-top: 22px; grid-template-columns: minmax(0, 1fr) auto; gap: 8px;
    padding: 8px; border-radius: 16px; background: #fff; border: 1px solid var(--line);
    box-shadow: 0 14px 30px -18px rgba(13, 27, 42, .45);
  }
  :where(.pro-home) #demo .ctl label[for] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  :where(.pro-home) #demo .ctl fieldset { display: none; }
  :where(.pro-home) #demo .ctl input[type=text] { height: 48px; padding: 0 14px; font-size: 17px; box-shadow: none; }
  :where(.pro-home) #demo .type-pick {
    display: block; height: 48px; max-width: 46vw; padding: 0 38px 0 16px; border: 0; border-radius: 12px;
    font: 600 16px/1 "IS", "IS Fallback", sans-serif; color: #fff; background: var(--ink) no-repeat right 14px center / 12px 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    appearance: none; -webkit-appearance: none; cursor: pointer;
  }
  :where(.pro-home) #demo .type-pick:focus-visible { outline: 2px solid var(--green-d); outline-offset: 2px; }
  :where(.pro-home) #demo .demo-stage { order: 3; width: 100%; aspect-ratio: 1 / 2.18; margin: 30px 0 78px; }
  :where(.pro-home) #demo .maps { order: 4; width: 100%; padding-top: 22px; border-top: 1px solid var(--line); }

  :where(.pro-home) .work#work { padding: 64px 0 40px; }
  :where(.pro-home) #work .group-head { margin-top: 36px; }
  :where(.pro-home) #work :is(.project-strip, .sites) {
    display: flex; gap: 16px; width: calc(100% + 40px); margin: 0 -20px;
    padding: 24px 20px 36px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 20px;
    scrollbar-width: thin; scrollbar-color: var(--green-d) var(--bg-2);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  }
  :where(.pro-home) #work :is(.proj, .site-card) { flex: 0 0 calc(100% - 40px); min-width: 0; scroll-snap-align: start; background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
  :where(.pro-home) #work .proj { margin: 0; gap: 16px; align-content: start; align-items: start; }
  :where(.pro-home) #work .proj-copy, :where(.pro-home) #work .proj.flip .proj-copy { order: 2; }
  :where(.pro-home) #work .proj-vis { margin: 10px 4px 34px; }
  :where(.pro-home) #work .proj h4, :where(.pro-home) #work .sc-copy h4 { font-size: 27px; }
  :where(.pro-home) #work .proj-copy > p:not(.kind), :where(.pro-home) #work .sc-copy > p:not(.kind) { font-size: 16px; }
  :where(.pro-home) #work .links { gap: 0 18px; }
  :where(.pro-home) #work .sc-copy { margin-top: 24px; }

  :where(.pro-home) .cred#credits { padding: 48px 0 40px; border-top: 1px solid var(--line); }
  :where(.pro-home) #credits .cred-grid { gap: 12px; }
  :where(.pro-home) #credits .bignum { display: flex; align-items: center; gap: 18px; font-size: 28px; line-height: 1.05; }
  :where(.pro-home) #credits .bignum span { flex: none; font-size: clamp(108px, 32vw, 144px); margin: 0; }
  :where(.pro-home) #credits .cred-line { padding-top: 22px; border-top: 1px solid var(--line); margin-top: 24px; }
  :where(.pro-home) #credits .wall { height: 240px; }

  :where(.pro-home) .svc#services { padding: 64px 0; background: var(--bg-2); }
  :where(.pro-home) #services .probs { gap: 0; }
  :where(.pro-home) #services .probs article { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 26px 0; border-color: color-mix(in srgb, var(--amber-d) 25%, transparent); }
  :where(.pro-home) #services .probs .num { grid-column: 1; padding-top: 4px; color: var(--amber-d); }
  :where(.pro-home) #services .probs h3 { grid-column: 2; margin: 0; font-size: 23px; }
  :where(.pro-home) #services .probs :is(p, ul) { grid-column: 2; }
  :where(.pro-home) #services .probs ul { padding-top: 4px; }
  :where(.pro-home) #services .duo { margin-top: 48px; gap: 28px; }
  :where(.pro-home) #services .cols { gap: 32px; }
  :where(.pro-home) #services .col { padding: 20px 0 0; border-radius: 0; background: transparent; box-shadow: none; }
  :where(.pro-home) #services .col::before { height: 3px; }
  :where(.pro-home) #services .col li a { border-color: color-mix(in srgb, var(--amber-d) 25%, transparent); }
  :where(.pro-home) #services .who { color: var(--ink-2); }
  :where(.pro-home) #services .pts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; margin-top: 4px; }

  :where(.pro-home) .steps#process { padding: 64px 0; background: var(--ink); color: var(--bg); }
  :where(.pro-home) #process :is(.eyebrow, .sub, .track p) { color: var(--line); }
  :where(.pro-home) #process .track { margin-top: 36px; padding-left: 22px; }
  :where(.pro-home) #process .track::before { background: var(--ink-2); }
  :where(.pro-home) #process .track li { display: grid; grid-template-columns: 62px minmax(0, 1fr); column-gap: 12px; padding: 0 0 36px; }
  :where(.pro-home) #process .track li:last-child { padding-bottom: 0; }
  :where(.pro-home) #process .track .num { grid-column: 1; grid-row: 1 / 3; font-size: 46px; line-height: 1; letter-spacing: -.06em; color: var(--c); }
  :where(.pro-home) #process .track h3 { grid-column: 2; margin: 0 0 10px; font-size: 22px; line-height: 1.15; }
  :where(.pro-home) #process .track p { grid-column: 2; }
  :where(.pro-home) #process .track li::before { left: -22px; top: 12px; box-shadow: inset 0 0 0 2px var(--c), 0 0 0 3px var(--ink); }
  html.js:not(.calm) .pro-home #process .track:not(.in) li::before { background: var(--ink); box-shadow: inset 0 0 0 2px var(--ink-3), 0 0 0 3px var(--ink); }

}

/* Inner phone sections */
@media (max-width: 700px) {
  .pg-services .c-eren .chap-list, .pg-projects #projects-demos .project-strip { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

  .pg-services .chap { padding: 64px 0; }
  .pg-services .c-eren { background: var(--bg-2); }
  .pg-services .c-tara { background: var(--bg); }
  .pg-services .chap-grid { min-width: 0; }
  .pg-services .c-eren .chap-list { align-items: flex-start; }
  .pg-services .c-tara .chap-art { width: 76%; margin-inline: auto; }
  .pg-services .c-tara .chap-list { gap: 0; }
  .pg-services .c-tara .svc-card { padding: 28px 0; border-radius: 0; background: transparent; box-shadow: none; border-top: 1px solid color-mix(in srgb, var(--green-d) 25%, transparent); }
  .pg-services .c-tara .sc-head { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
  .pg-services .c-tara .sc-head .num { font-size: 30px; width: auto; letter-spacing: -.06em; }
  .pg-services .special { margin-top: 0; padding: 64px 0; background: var(--ink); color: var(--bg); }
  .pg-services .special::before { display: none; }
  .pg-services .special-grid { gap: 32px; }
  .pg-services .special-copy { order: -1; }
  .pg-services .special :is(.eyebrow, .sub, .print-note, .queue span) { color: var(--line); }
  .pg-services .special .queue { gap: 0; }
  .pg-services .special .queue li { padding: 20px 0; border-radius: 0; background: transparent; box-shadow: none; border-bottom: 1px solid var(--ink-2); }
  .pg-services .special .queue h3 { color: var(--amber); }
  .pg-services .special .lnk { color: var(--amber); }

  .pg-projects #projects-demos { padding: 48px 0 28px; }
  .pg-projects .pgroup .group-head { margin-top: 0; }
  .pg-projects #projects-demos .project-strip { align-items: flex-start; }
  .pg-projects #projects-demos .case { margin: 0; padding: 18px; gap: 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); }
  .pg-projects #projects-demos .case-vis { min-width: 0; padding-top: 10px; }
  .pg-projects #projects-demos .case-copy { order: 2; min-width: 0; }
  .pg-projects #projects-demos .case h3 { font-size: 36px; }
  .pg-projects #projects-demos .acts .btn { white-space: normal; padding: 14px 16px; }
  .pg-projects #projects-websites { padding: 64px 0; background: var(--bg); }
  .pg-projects #projects-websites .case { gap: 32px; margin: 40px 0 0; }
  .pg-projects #projects-websites .case + .case { padding-top: 48px; margin-top: 48px; border-top: 2px solid var(--green-d); }
  .pg-projects .cred { padding: 48px 0 40px; }
  .pg-projects .cred-grid { gap: 12px; }
  .pg-projects .bignum { display: flex; align-items: center; gap: 18px; font-size: 28px; line-height: 1.05; }
  .pg-projects .bignum span { flex: none; font-size: clamp(108px, 32vw, 144px); margin: 0; }
  .pg-projects .cred-line { padding-top: 22px; border-top: 1px solid var(--line); margin-top: 24px; }
  .pg-projects .wall { height: 240px; }

  .pg-contact .ct-next { padding: 64px 0; background: var(--ink); color: var(--bg); }
  .pg-contact .ct-next :is(.eyebrow, .track.t3 p) { color: var(--line); }
  .pg-contact .ct-next .track { margin-top: 36px; padding-left: 22px; }
  .pg-contact .ct-next .track::before { background: var(--ink-2); }
  .pg-contact .ct-next .track li { display: grid; grid-template-columns: 62px minmax(0, 1fr); column-gap: 12px; padding: 0 0 36px; }
  .pg-contact .ct-next .track li:last-child { padding-bottom: 0; }
  .pg-contact .ct-next .track .num { grid-column: 1; font-size: 46px; line-height: 1; letter-spacing: -.06em; color: var(--c); }
  .pg-contact .ct-next .track p { grid-column: 2; margin: 0; }
  .pg-contact .ct-next .track li::before { left: -22px; top: 12px; box-shadow: inset 0 0 0 2px var(--c), 0 0 0 3px var(--ink); }
  html.js:not(.calm) .pg-contact .ct-next .track:not(.in) li::before { background: var(--ink); box-shadow: inset 0 0 0 2px var(--ink-3), 0 0 0 3px var(--ink); }
  .pg-contact .faq { padding: 64px 0; }
  .pg-contact .q { border-color: color-mix(in srgb, var(--amber-d) 25%, transparent); }

  .pg-contact .post-mail { max-width: 100%; overflow-wrap: anywhere; }
}

/* ---- Premium pass (2026-10-27): every hero sits on one surface; the field ends below its content with one shallow edge ---- */
.hero:not(.inner) { display: grid; grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
.hero:not(.inner) > * { grid-column: 1; width: 100%; min-width: 0; }
.hero:not(.inner) > .field { position: relative; inset: auto; height: auto; grid-row: 1 / 3; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 96px), 0 100%); }
.hero:not(.inner) > .top { grid-row: 1; }
.hero:not(.inner) > .hero-in { grid-row: 2; min-height: 0; padding-bottom: 136px; }
.hero:not(.inner) > .facts { grid-row: 3; margin-top: 0; padding-top: 56px; }
.hero.inner { padding-bottom: 124px; }
.inner .hero-in { min-height: 0; }
.inner .field { height: 100%; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 88px), 0 100%); }
.btn-ghost::before { background: rgba(255, 255, 255, .92); }

/* home stage: two windows, Axis large and Hirudin small, inside the column */
.stage { margin: 0 0 0 20px; width: min(100%, 720px); justify-self: end; aspect-ratio: 1 / .78; }
.stage :is(.w-north, .w-kash) { display: none; }
.stage .w-axis { width: 84%; left: 14%; top: 4%; }
.stage .w-hir { width: 50%; left: 0; top: 50%; }
.stage .t-axis { left: auto; right: 0; top: 89%; }
.stage .t-hir { left: 10%; top: auto; bottom: -10%; }
/* projects stage: the two websites, no labels */
.pj-in .stage :is(.w-axis, .t-axis, .t-hir) { display: none; }
.pj-in .stage .w-kash { display: block; width: 56%; left: 44%; top: 40%; }
.pj-in .stage .w-hir { width: 64%; left: 2%; top: 4%; }
.facts b { font-weight: inherit; color: inherit; }
.facts li { color: var(--ink-2); }

/* Axis hero */
@media (min-width: 1101px) { .ax-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 48px; } }
.ax-stage { margin-right: 0; padding-top: 40px; }
.axis-preview { width: 100%; }
.axis-preview figcaption { text-align: center; text-wrap: balance; margin-inline: auto; color: #1d2e40; }
.axis-intro { container-type: inline-size; }
.axis-tags { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 22px; }
.axis-tags li { padding: 0; border-radius: 0; background: none; box-shadow: none; color: #1d2e40; font-size: 14.5px; font-weight: 500; line-height: 1.4; white-space: nowrap; }
.axis-tags li + li::before { content: "\00b7"; margin: 0 10px; color: var(--ink-3); }
/* when the three do not fit on one line they stack, so none is left alone on a second row */
@container (max-width: 509px) { .axis-tags { flex-direction: column; gap: 6px; } }
@container (max-width: 589px) { html[lang="tr"] .axis-tags { flex-direction: column; gap: 6px; } }
@container (max-width: 509px) { .axis-tags li::before, .axis-tags li + li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 10px 2px 0; border-radius: 1px; background: var(--green); } }
@container (max-width: 589px) { html[lang="tr"] .axis-tags li::before, html[lang="tr"] .axis-tags li + li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 10px 2px 0; border-radius: 1px; background: var(--green); } }

/* services hero: one column of equal cards, a solid note */
.jumps { width: min(100%, 460px); justify-self: end; }
/* under 1100px the cards sit in a row under the intro, so they take the full width (1024px squeezed them to one word per line) */
@media (max-width: 1100px) { .jumps { width: 100%; justify-self: stretch; } }
.where { background: #fff; box-shadow: 0 0 0 1px rgba(13, 27, 42, .08); color: var(--ink-2); font-size: 15px; line-height: 1.5; }

/* projects index strip: plain links, no thumbnails */
.inside { margin-top: 40px; }
.inside-k, .inside .thumb { display: none; }
.inside-list a { min-height: 52px; padding: 8px 16px; }

/* contact */
.interest-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.interest-chips span { width: 100%; justify-content: center; }
.ct-facts { background: rgba(255, 255, 255, .94); }
.ct-write + .btn-ghost { min-height: 46px; text-decoration: underline; text-underline-offset: 4px; }
.ct-write + .btn-ghost::before { display: none; }
.ct-win, .ct-stage:hover .ct-win { transform: none; }
.ct-tag { position: static; display: inline-flex; margin-top: 14px; animation: none; }

/* home sections: straight tint, quiet badge, aligned lists, one eyebrow colour */
.demo::before, .special::before, .axis-architecture-band::before { transform: none; }
.sample { font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); background: none; border: 0; padding: 0; }
.probs article { display: flex; flex-direction: column; }
.probs article ul { margin-top: auto; }
.eyebrow .dot { background: var(--green); }

/* wide screens use the width */
@media (min-width: 1700px) {
  .wrap, .top, .hero-in, .sub-in, .facts, .inside { max-width: 1360px; }
  .stage { width: min(100%, 780px); }
}

@media (max-width: 700px) {
  .hero:not(.inner) > .field { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), 0 100%); }
  .hero:not(.inner) > .hero-in { padding-bottom: 80px; }
  .hero.inner { padding-bottom: 80px; }
  .inner .field { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), 0 100%); }
  .field::after { background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .8)); }
  .stage { margin: 24px 0 0; width: 100%; }
  .stage .tag { display: none; }
  .pj-in .stage .w-kash { display: none; }
  .pj-in .stage { margin-top: 36px; }
  .pj-in .stage .w-hir { width: 92%; left: 4%; top: 10%; }
  .ct-stage { display: none; }
  .axis-actions .btn { width: 100%; justify-content: center; }
  .ax-flow .secnav { margin-top: 32px; }
  .interest-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .interest-chips label:last-child { grid-column: 1 / -1; }
}

/* reduced motion shows the still image; the canvas never covers it */
@media (prefers-reduced-motion: reduce) { #field { display: none; } }

/* ==== PHONE PASSES (2026-10-27): one block per builder, phones only; each builder writes only inside its own block ==== */
/* ==== PHONE PASS: home ==== */
@media (max-width: 700px) {
  /* hero: a calm two-line-ish headline, a shorter project stage, the four facts as a 2 x 2 grid */
  :where(.pro-home) #top h1 { font-size: clamp(32px, 9.6vw, 40px); line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; }
  :where(.pro-home) #top .kicker { margin-bottom: 12px; }
  :where(.pro-home) #top .ctas { margin-top: 20px; gap: 10px; }
  :where(.pro-home) #top .stage { aspect-ratio: 1 / .5; margin-top: 16px; }
  /* the tilted windows run past the shorter stage: fade them out at its foot so they never sit on the facts */
  :where(.pro-home) #top .stage { -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent); }
  html[lang] :where(.pro-home) #top .stage { margin-bottom: 0; }
  :where(.pro-home) #top .ctas .btn { max-width: 100%; white-space: normal; text-align: center; }
  @media (max-width: 360px) { :where(.pro-home) #top .ctas .btn { padding: 0 14px; font-size: 15px; } }
  :where(.pro-home) #top .w-north { top: 0; }
  :where(.pro-home) #top .w-axis { top: 8%; }
  :where(.pro-home) #top .w-hir { top: 44%; width: 50%; }
  :where(.pro-home) #top .w-kash { top: 46%; width: 42%; left: 56%; }
  :where(.pro-home) #top > .hero-in { padding-bottom: 14px; }
  :where(.pro-home) #top .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin-top: 8px; padding-top: 22px; }
  :where(.pro-home) #top .facts li { padding: 8px 0 9px; font-size: 13.5px; line-height: 1.38; }

  /* demo: same pinned bar and preview, tighter around them */
  :where(.pro-home) .demo#demo { margin-top: 8px; padding: 34px 0 26px; }
  :where(.pro-home) #demo h2 { font-size: 32px; }
  :where(.pro-home) #demo .sub { font-size: 15.5px; line-height: 1.5; margin-top: 8px; }
  :where(.pro-home) #demo .ctl { margin-top: 16px; }
  :where(.pro-home) #demo .demo-stage { aspect-ratio: 1 / 2.08; margin: 20px 0 64px; }
  /* the note says what the pill says: it runs full width under the frame and the pill steps aside */
  :where(.pro-home) #demo .note { left: 0; right: 0; top: 100%; bottom: auto; margin-top: 30px; font-size: 12.5px; line-height: 1.4; }
  :where(.pro-home) #demo .sample { display: none; }
  /* the key: three short columns (dot and name over the service) instead of three long rows */
  :where(.pro-home) #demo .maps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 0; padding-top: 14px; }
  :where(.pro-home) #demo .maps li { display: block; font-size: 12.5px; line-height: 1.35; }
  :where(.pro-home) #demo .maps i { display: block; width: 18px; height: 3px; margin-bottom: 7px; border-radius: 2px; transform: none; }
  :where(.pro-home) #demo .maps b { display: block; min-width: 0; margin-bottom: 2px; font-size: 13.5px; white-space: nowrap; }
  /* narrow phones: back to rows, so no name has to break */
  @media (max-width: 339px) {
    :where(.pro-home) #demo .maps { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    :where(.pro-home) #demo .maps li { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
    :where(.pro-home) #demo .maps i { width: 9px; height: 9px; margin: 0; border-radius: 3px; flex: none; }
    :where(.pro-home) #demo .maps b { min-width: 100px; margin: 0; }
  }

  /* section heads: one size everywhere on home */
  :where(.pro-home) main h2 { font-size: clamp(26px, 7.7vw, 30px); line-height: 1.08; }
  :where(.pro-home) main .sec-head .sub { font-size: 16px; margin-top: 8px; }
  :where(.pro-home) main .eyebrow { margin-bottom: 10px; font-size: 14px; }

  /* our work: a compact stack of whole cards (thumb beside the name, links along the bottom), no sideways strip */
  :where(.pro-home) .work#work { padding: 36px 0 16px; }
  :where(.pro-home) #work .group-head { margin: 26px 0 0; padding-top: 14px; gap: 12px; }
  /* with the switch on, the two groups share one place: the switch names them, the open group's line sits under it */
  :where(.pro-home) #work .ph-seg { margin-top: 18px; }
  :where(.pro-home) #work .ph-seg ~ .group-head { margin-top: 12px; padding-top: 0; border-top: 0; }
  :where(.pro-home) #work .ph-seg ~ .group-head :is(.num, h3) { display: none; }
  :where(.pro-home) #work .wrap[data-on="0"] > .ph-g1, :where(.pro-home) #work .wrap[data-on="1"] > .ph-g0 { display: none; }
  html.js:not(.calm) :where(.pro-home) #work .ph-seg ~ :is(.project-strip, .sites) { animation: ph-in .3s var(--ease) both; }
  :where(.pro-home) #work .group-head h3 { font-size: 18px; }
  :where(.pro-home) #work .group-head p { font-size: 14.5px; }
  :where(.pro-home) #work :is(.project-strip, .sites) {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: auto; margin: 14px 0 0; padding: 0;
    overflow: visible; scroll-snap-type: none; -webkit-mask-image: none; mask-image: none; perspective: none;
  }
  :where(.pro-home) #work :is(.proj, .proj.flip, .site-card) {
    display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto;
    column-gap: 14px; row-gap: 0; align-items: start; margin: 0; padding: 12px 12px 4px; border-radius: 16px;
    background: #fff; border: 1px solid var(--line); box-shadow: 0 12px 26px -20px rgba(13, 27, 42, .4);
  }
  :where(.pro-home) #work :is(.proj-copy, .sc-copy) { display: contents; }
  :where(.pro-home) #work :is(.proj-vis, .site-card > .win) { grid-column: 1; grid-row: 1 / 4; margin: 0; align-self: stretch; }
  :where(.pro-home) #work .proj-vis { display: flex; min-height: 96px; }
  :where(.pro-home) #work .site-card > .win { min-height: 96px; }
  :where(.pro-home) #work :is(.win.big, .proj.flip .win.big, .sites .win) {
    display: flex; flex-direction: column; flex: 1; transform: none; border-radius: 9px;
    box-shadow: 0 0 0 1px rgba(13, 27, 42, .08), 0 8px 18px -12px rgba(13, 27, 42, .4);
  }
  :where(.pro-home) #work .site-card > .win { display: flex; transform: none; }
  :where(.pro-home) #work .win .bar { height: 14px; padding: 0 6px; gap: 3px; }
  :where(.pro-home) #work .win .bar i { width: 4px; height: 4px; }
  :where(.pro-home) #work .win .bar span { display: none; }
  :where(.pro-home) #work .win { position: relative; }
  :where(.pro-home) #work .win img { position: absolute; left: 0; top: 14px; width: 100%; height: calc(100% - 14px); object-fit: cover; object-position: 0 0; }
  :where(.pro-home) #work .zoom { display: none; }
  @media (max-width: 374px) { :where(.pro-home) #work :is(.proj, .proj.flip, .site-card) { grid-template-columns: minmax(0, 33%) minmax(0, 1fr); column-gap: 12px; } }
  :where(.pro-home) #work .kind { grid-column: 2; grid-row: 1; margin: 2px 0 2px; font-size: 12.5px; }
  :where(.pro-home) #work :is(.proj, .site-card) h4 { grid-column: 2; grid-row: 2; font-size: 21px; letter-spacing: -.03em; }
  :where(.pro-home) #work :is(.proj-copy, .sc-copy) > p:not(.kind) { grid-column: 2; grid-row: 3; margin-top: 4px; font-size: 14px; line-height: 1.45; }
  :where(.pro-home) #work :is(.links, .sc-copy > .lnk) { grid-column: 1 / -1; grid-row: 4; margin-top: 6px; border-top: 1px solid var(--line); }
  :where(.pro-home) #work .links { gap: 0 20px; }
  :where(.pro-home) #work .sc-copy { margin: 0; }
  :where(.pro-home) #work .lnk { font-size: 15px; }

  /* credits: the number beside its line, a shorter poster wall */
  :where(.pro-home) .cred#credits { padding: 28px 0 16px; }
  :where(.pro-home) #credits .bignum { font-size: 24px; gap: 14px; }
  :where(.pro-home) #credits .bignum span { font-size: 70px; }
  :where(.pro-home) #credits .cred-line { margin-top: 10px; padding-top: 12px; font-size: 18px; }
  :where(.pro-home) #credits :is(.titles, .cred-why) { margin-top: 8px; font-size: 14px; line-height: 1.5; }
  :where(.pro-home) #credits .lnk { margin-top: 2px; }
  :where(.pro-home) #credits .wall { height: 148px; margin-top: -10px; }

  /* problems: four rows, each showing its story and checklist */
  :where(.pro-home) .svc#services { padding: 34px 0 28px; }
  :where(.pro-home) #services .probs { margin-top: 14px; border-bottom: 1px solid color-mix(in srgb, var(--amber-d) 25%, transparent); }
  :where(.pro-home) #services .probs article { column-gap: 10px; row-gap: 0; padding: 0; }
  :where(.pro-home) #services .probs .num { grid-row: 1; padding: 0; align-self: center; }
  :where(.pro-home) #services .probs h3 { grid-row: 1; display: flex; align-items: center; min-height: 50px; font-size: 18.5px; }
  :where(.pro-home) #services .probs p { font-size: 15px; }
  :where(.pro-home) #services .probs ul { padding: 12px 0 20px; }
  @keyframes ph-in { from { opacity: 0; transform: translateY(-6px); } }

  /* the duo: art beside the heading, then Eren | Tara over one list */
  :where(.pro-home) #services .duo { margin-top: 28px; gap: 12px; }
  :where(.pro-home) #services .duo-head h2 { font-size: 26px; }
  :where(.pro-home) main .ph-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
  :where(.pro-home) main .ph-seg button {
    min-height: 48px; padding: 6px 8px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
    font: 500 13px/1.25 "IS", "IS Fallback", sans-serif; color: var(--ink-3); transition: background-color .2s, color .2s;
  }
  :where(.pro-home) main .ph-seg button b { display: block; font-size: 16px; font-weight: 600; color: var(--ink); }
  :where(.pro-home) main .ph-seg button[aria-selected=true] { background: var(--ink); color: #c9d6e3; }
  :where(.pro-home) main .ph-seg button[aria-selected=true] b { color: #fff; }
  :where(.pro-home) main .ph-seg button:focus-visible { outline: 2px solid var(--green-d); outline-offset: 2px; }
  :where(.pro-home) main .ph-seg ~ .cols .who { display: none; }
  :where(.pro-home) main .ph-seg ~ .cols { gap: 0; }
  :where(.pro-home) main .ph-seg ~ .cols .col { padding: 0; }
  :where(.pro-home) main .ph-seg ~ .cols .col::before { display: none; }
  :where(.pro-home) main .ph-seg ~ .cols .say { margin: -2px 0 6px; padding-left: 12px; border-left: 3px solid var(--green); font-size: 19px; line-height: 1.25; }
  :where(.pro-home) main .ph-seg ~ .cols .c-tara .say { border-left-color: var(--pink); }
  :where(.pro-home) #services .cols[data-on="0"] .c-tara, :where(.pro-home) #services .cols[data-on="1"] .c-eren { display: none; }
  html.js:not(.calm) :where(.pro-home) main .ph-seg ~ .cols .col { animation: ph-in .3s var(--ease) both; }
  /* the six services as a stack of small tiles, one per row so long labels don't wrap to three lines */
  :where(.pro-home) #services .col ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 10px; }
  :where(.pro-home) #services .col li a {
    align-items: flex-start; height: 100%; min-height: 56px; padding: 10px 10px 10px 12px; border: 1px solid var(--line); border-radius: 12px;
    background: #fff; font-size: 14px; line-height: 1.3; text-wrap: pretty;
  }
  :where(.pro-home) #services .col li a span { line-height: 1.3; }
  :where(.pro-home) #services .pts { gap: 12px 18px; margin-top: 2px; }
  :where(.pro-home) #services .pts li { font-size: 13.5px; line-height: 1.45; }
  :where(.pro-home) #services .pts b { font-size: 15px; margin-bottom: 2px; }

  /* process: a four-stop stepper, one step open at a time */
  :where(.pro-home) .steps#process { padding: 36px 0 36px; }
  :where(.pro-home) #process .track.ph-step { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 8px; margin-top: 24px; padding: 0; }
  :where(.pro-home) #process .track.ph-step::before, :where(.pro-home) #process .track.ph-step::after { left: 12%; right: 12%; top: 25px; bottom: auto; width: auto; height: 2px; }
  :where(.pro-home) #process .track.ph-step::after { background: linear-gradient(90deg, var(--green), var(--amber), var(--pink)); transform-origin: 0 50%; }
  html.js :where(.pro-home) #process .track.ph-step:not(.in)::after { transform: scaleX(0); clip-path: none; }
  :where(.pro-home) #process .ph-step li { display: contents; }
  :where(.pro-home) #process .ph-step li::before { display: none; }
  :where(.pro-home) #process .ph-step .num {
    grid-row: 1; justify-self: center; position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px;
    border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 2px var(--ink-2); font-size: 18px; letter-spacing: 0; color: var(--c); cursor: pointer;
    transition: background-color .2s, box-shadow .2s, color .2s;
  }
  :where(.pro-home) #process .ph-step li.on .num { background: var(--c); color: var(--ink); box-shadow: 0 0 0 4px var(--ink), 0 0 0 6px var(--c); }
  :where(.pro-home) #process .ph-step .num:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
  :where(.pro-home) #process .ph-step li:nth-child(1) .num { grid-column: 1; } :where(.pro-home) #process .ph-step li:nth-child(2) .num { grid-column: 2; }
  :where(.pro-home) #process .ph-step li:nth-child(3) .num { grid-column: 3; } :where(.pro-home) #process .ph-step li:nth-child(4) .num { grid-column: 4; }
  :where(.pro-home) #process .ph-step :is(h3, p) { grid-column: 1 / -1; visibility: hidden; }
  :where(.pro-home) #process .ph-step h3 { grid-row: 2; margin: 18px 0 6px; font-size: 21px; }
  :where(.pro-home) #process .ph-step p { grid-row: 3; font-size: 15.5px; }
  :where(.pro-home) #process .ph-step li.on :is(h3, p) { visibility: visible; }
  html.js:not(.calm) :where(.pro-home) #process .ph-step li.on :is(h3, p) { animation: ph-in .3s var(--ease) both; }

  /* closing call: tighter, the call card as a compact list */
  :where(.pro-home) .close#contact { padding: 40px 0 32px; }
  :where(.pro-home) #contact .close-field { height: 36px; }
  :where(.pro-home) #contact .sub { font-size: 16px; margin-top: 10px; }
  :where(.pro-home) #contact .ctas { margin-top: 18px; }
  :where(.pro-home) #contact .close-grid { gap: 20px; }
  :where(.pro-home) #contact .mail { margin-top: 10px; font-size: 14.5px; }
  :where(.pro-home) #contact .call { padding: 16px 18px 6px; }
  :where(.pro-home) #contact .call-h { font-size: 16px; margin-bottom: 4px; }
  :where(.pro-home) #contact .call li { padding: 6px 0 6px 24px; font-size: 14.5px; }
  :where(.pro-home) #contact .call li::before { top: 13px; }
  :where(.pro-home) #contact .call li span { font-size: 13px; }
}
/* ==== end PHONE PASS: home ==== */

/* ==== PHONE PASS: services + projects ==== */
@media (max-width: 700px) {
  /* --- shared: a row that folds (main.js .pp-fold / .open): the heading is the tap target, a round chevron turns on open --- */
  .pp-fold [aria-expanded] { position: relative; cursor: pointer; -webkit-user-select: none; user-select: none; }
  .pp-fold [aria-expanded]::after {
    content: ""; position: absolute; right: 14px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%;
    background: var(--bg-2) no-repeat center / 12px 8px; box-shadow: inset 0 0 0 1px var(--line);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230d1b2a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .pp-fold.open > [aria-expanded]::after, .pp-fold.open .sc-head::after { rotate: 180deg; background-color: #fff; }
  .pp-fold [aria-expanded]:focus-visible { outline: 2px solid var(--green-d); outline-offset: -2px; border-radius: 10px; }
  html:not(.calm) .pp-fold [aria-expanded]::after { transition: rotate .3s var(--ease-out), background-color .2s; }
  html:not(.calm) .pp-fold.open > :not([aria-expanded], .num, .acts) { animation: pp-open .32s var(--ease-out) both; }
  html:not(.calm) .pp-fold [aria-expanded]:active { background-color: rgba(13, 27, 42, .035); }

  /* the round back-to-top button (theme.js) would sit on the row chevrons; these pages are short on a phone */
  :is(.pg-services, .pg-projects) .to-top { display: none; }

  /* --- Services: hero --- */
  .pg-services .sv-in { gap: 26px; padding-top: 26px; }
  .pg-services .sv-in .kicker { margin-bottom: 14px; font-size: 13.5px; letter-spacing: .04em; }
  .pg-services .sv-in .lede { margin-top: 14px; font-size: 18px; }
  .pg-services .where { margin-top: 18px; padding: 12px 16px; font-size: 14.5px; }
  .pg-services .jumps { gap: 8px; }
  .pg-services .jump { min-height: 56px; padding: 10px 12px 10px 20px; gap: 0 12px; border-radius: 14px; }
  .pg-services .j-l { font-size: 16.5px; }
  .pg-services .jump small { font-size: 12.5px; }
  .pg-services .jump .arr { width: 32px; height: 32px; }
  .pg-services .hero.inner { padding-bottom: 56px; }

  /* --- Services: each chapter is its art, a title, one line, one button, and one grouped list of foldable services --- */
  .pg-services .chap { padding: 40px 0 44px; }
  .pg-services .chap-grid { gap: 22px; }
  .pg-services .chap .chap-art { width: 52%; margin: 0 auto 18px; padding: 8px; }
  .pg-services .chap h2 { font-size: 30px; line-height: 1.1; text-wrap: balance; }
  .pg-services .chap .sub { margin-top: 8px; font-size: 16px; line-height: 1.5; }
  .pg-services .chap-side .btn { margin-top: 18px; min-height: 50px; }
  .pg-services .chap .chap-list { display: block; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 22px 40px -30px rgba(13, 27, 42, .35); overflow: hidden; }
  .pg-services .chap .svc-card { display: block; padding: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
  .pg-services .chap .svc-card:first-child { border-top: 0; }
  .pg-services .chap .sc-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; align-items: baseline; min-height: 56px; padding: 16px 52px 15px 16px; }
  .pg-services .chap .sc-head > div { display: contents; }
  .pg-services .chap .sc-head .num { width: auto; font-size: 12.5px; letter-spacing: 0; color: var(--green-d); }
  .pg-services .c-tara .sc-head .num { color: var(--pink-d); }
  .pg-services .chap .sc-head h3 { text-wrap: pretty; font-size: 17.5px; line-height: 1.25; letter-spacing: -.02em; }
  .pg-services .chap .tagline { grid-column: 1 / -1; text-wrap: pretty; margin-top: 3px; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
  .pg-services .chap .sc-body { display: grid; gap: 14px; padding: 2px 18px 20px 16px; }
  .pg-services .chap .sc-body > div:first-child { padding-top: 0; border-top: 0; }
  .pg-services .chap .sc-label { margin-bottom: 8px; font-size: 12.5px; }
  .pg-services .chap .checks li { font-size: 15px; }
  .pg-services .chap .svc-card.open { background: color-mix(in srgb, var(--green) 4%, #fff); }
  .pg-services .c-tara .svc-card.open { background: color-mix(in srgb, var(--pink) 4%, #fff); }
  .pg-services .chap .svc-card.pp-fold:not(.open) :is(.sc-body, .tagline) { display: none; }

  /* --- Services: 3D printing --- */
  .pg-services .special { padding: 44px 0 48px; }
  .pg-services .special-grid { gap: 22px; }
  .pg-services .special h2 { font-size: 32px; line-height: 1.08; text-wrap: balance; }
  .pg-services .special .sub { margin-top: 10px; font-size: 16px; }
  .pg-services .special .queue { margin-top: 14px; }
  .pg-services .special .queue li { flex-direction: column; align-items: flex-start; padding: 12px 0; gap: 2px; }
  .pg-services .special .queue h3 { font-size: 15.5px; }
  .pg-services .special .queue span { font-size: 14.5px; }
  .pg-services .special .print-note { margin-top: 14px; font-size: 14.5px; line-height: 1.55; }
  .pg-services .special-win { width: 46%; justify-self: center; transform: rotate(-1.5deg); }
  .pg-services .special-win img { padding: 10px; }

  /* --- Services and Projects: the closing call --- */
  :is(.pg-services, .pg-projects) .close { padding: 52px 0 40px; }
  :is(.pg-services, .pg-projects) .close-field { height: 40px; }
  :is(.pg-services, .pg-projects) .close-grid { gap: 22px; }
  :is(.pg-services, .pg-projects) .close h2 { font-size: 32px; line-height: 1.08; text-wrap: balance; }
  :is(.pg-services, .pg-projects) .close .sub { margin-top: 12px; font-size: 16px; }
  :is(.pg-services, .pg-projects) .close .ctas { margin-top: 22px; }
  .pg-services .close .mail { margin-top: 12px; }
  .pg-services .call { padding: 16px 18px 4px; }
  .pg-services .call-h { font-size: 16px; margin-bottom: 4px; }
  .pg-services .call li { padding: 10px 0 10px 26px; }
  .pg-services .call li::before { top: 17px; }
  .pg-services .call span { font-size: 14px; }
  .pg-projects .slot { width: min(100%, 260px); justify-self: center; margin: 0 auto; }
  .pg-projects .slot figcaption { font-size: 16px; }

  /* --- Projects: hero --- */
  .pg-projects .pj-in { padding-top: 26px; }
  .pg-projects .pj-in .kicker { margin-bottom: 14px; font-size: 13.5px; }
  .pg-projects .pj-in .lede { margin-top: 14px; font-size: 18px; }
  .pg-projects .tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
  .pg-projects .tabs .tab { display: block; align-content: center; min-height: 52px; padding: 6px 10px; font-size: 15px; line-height: 1.25; text-align: center; border-radius: 16px; }
  .pg-projects .tabs .tab::before { display: inline-block; margin: 0 8px 2px 0; vertical-align: middle; }
  .pg-projects .tabs .tab .num { display: none; }
  html .pg-projects .pj-in .stage { margin: 12px 0 0; aspect-ratio: 1 / .68; }
  .pg-projects .pj-in .stage .w-hir { top: 3%; }
  .pg-projects .inside { margin-top: 14px; }
  .pg-projects .inside-list { gap: 8px; }
  .pg-projects .inside-list a { min-height: 48px; padding: 6px 12px; }
  .pg-projects .hero.inner { padding-bottom: 40px; }
  /* the groups' segmented controls index the cases on a phone; the floating index pill would only repeat them */
  .pg-projects .pj-flow > .secnav { display: none; }

  /* --- Projects: two groups, one case at a time under a segmented control (main.js .pp-seg) --- */
  .pg-projects :is(#projects-demos, #projects-websites) { padding: 32px 0 36px; }
  .pg-projects #projects-websites { background: var(--bg-2); }
  .pg-projects .pgroup .group-head { gap: 2px; padding-top: 0; border-top: 0; }
  .pg-projects .group-head h2 { font-size: 32px; line-height: 1.08; }
  .pg-projects .group-head p { font-size: 15.5px; }
  .pp-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin: 14px 0 10px; padding: 4px; border-radius: 14px; background: #e8edf3; }
  .pp-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 4px 10px; border: 0; border-radius: 10px; background: transparent; font: 600 15.5px/1.15 "IS", "IS Fallback", system-ui, sans-serif; color: var(--ink-2); cursor: pointer; }
  .pp-seg button .num { font-size: 11.5px; }
  .pp-seg button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(13, 27, 42, .1), 0 6px 14px -8px rgba(13, 27, 42, .35); }
  .pp-seg button[aria-selected="true"] .num { color: var(--green-d); }
  #projects-websites .pp-seg button[aria-selected="true"] .num, .pp-seg button:nth-child(2)[aria-selected="true"] .num { color: var(--pink-d); }
  .pp-seg button:focus-visible { outline: 2px solid var(--green-d); outline-offset: 1px; }
  html:not(.calm) .pp-seg button { transition: background-color .2s, color .2s, box-shadow .2s; }
  html:not(.calm) .pg-projects .pgroup .case:not(.pp-off) { animation: pp-open .35s var(--ease-out) both; }
  .pg-projects .pgroup .case.pp-off { display: none; }

  /* each case: one card, screenshot, three foldable notes, title, the itch, then the story rows and the buttons */
  .pg-projects :is(#projects-demos, #projects-websites) .case { margin: 0; padding: 14px 14px 18px; gap: 16px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 22px 40px -32px rgba(13, 27, 42, .35); }
  .pg-projects :is(#projects-demos, #projects-websites) .case + .case { margin-top: 0; padding-top: 14px; border-top: 1px solid var(--line); }
  .pg-projects .pgroup .case-vis { min-width: 0; padding-top: 8px; }
  .pg-projects .pgroup .case-copy { order: 2; min-width: 0; padding: 0 4px; }
  .pg-projects .case .shot figcaption { margin-top: 10px; font-size: 13px; }
  .pg-projects .case .notes { gap: 0; margin-top: 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
  .pg-projects .case .feat { position: relative; padding: 0; border-radius: 0; box-shadow: none; border-top: 1px solid var(--line); }
  .pg-projects .case .feat:first-child { border-top: 0; }
  .pg-projects .case .feat .num { position: absolute; left: 14px; top: 14px; pointer-events: none; }
  .pg-projects .case .feat h4 { margin: 0; min-height: 44px; padding: 12px 52px 11px 44px; font-size: 15.5px; }
  .pg-projects .case .feat p { padding: 0 16px 14px 44px; }
  .pg-projects .case .feat.open { background: color-mix(in srgb, var(--c) 5%, #fff); }
  .pg-projects .case .feat.pp-fold:not(.open) p { display: none; }
  .pg-projects .case .spot.on { background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: 0 0 0 2px var(--c); }
  .pg-projects .case .spot.on i { background: var(--cd); scale: 1.15; }
  .pg-projects .case .kind { font-size: 13px; }
  .pg-projects .pgroup .case h3 { margin-top: 6px; font-size: 30px; text-wrap: balance; }
  .pg-projects .case-lead { margin-top: 6px; font-size: 17px; }
  .pg-projects .case .story { gap: 0; margin-top: 12px; }
  .pg-projects .case .st .pa-itch { font-size: 17px; }
  .pg-projects .case .st::before { top: 14px; }
  .pg-projects .case .st .st-l { min-height: 44px; margin: 0; padding: 12px 50px 11px 0; line-height: 1.4; font-size: 15px; color: var(--ink); border-top: 1px solid var(--line); }
  .pg-projects .case .st.pp-fold .st-l::after { right: 0; }
  .pg-projects .case .st.pp-fold > p:not(.st-l) { font-size: 15.5px; line-height: 1.6; }
  .pg-projects .case .st.pp-fold .clip { margin: 10px 0 6px; }
  .pg-projects .case .st.pp-fold:not(.open) > :not(.st-l, .acts), .pg-projects .case .st.pp-fold:not(.open) .acts .lnk { display: none; }
  .pg-projects .case .st.pp-fold .acts { margin-bottom: 10px; }
  .pg-projects .case .acts { margin-top: 6px; gap: 0 22px; }
  .pg-projects .case .trynote { margin-top: 14px; font-size: 14px; }
  .pg-projects .case .story:has(> .st.pp-fold:not(.open) .acts) + .trynote { display: none; }

  /* --- Projects: credits and the poster wall (every poster still opens on a tap) --- */
  .pg-projects .cred { padding: 28px 0 18px; }
  .pg-projects .cred-line { padding-top: 16px; margin-top: 16px; font-size: 18px; }
  .pg-projects .titles { margin-top: 10px; font-size: 14.5px; line-height: 1.6; }
  .pg-projects .cred-why { margin-top: 10px; font-size: 15px; }
  .pg-projects .bignum span { font-size: 96px; }
  .pg-projects .wall { height: 160px; }
  /* markers on the image's left edge (Axis 2 and 3, Northroom 3) were cut in half by the window's rounded clip */
  .pg-projects .spot[style*="--x:.8%"] i { --px: 3px; }
}
@keyframes pp-open { from { opacity: 0; transform: translate3d(0, -6px, 0); } }
/* ==== end PHONE PASS: services + projects ==== */

/* ==== PHONE PASS: about + contact + axis + footer ==== */
@media (max-width: 700px) {
  /* -- tap rows (main.js .fx): the head stays, the detail opens in place under it -- */
  .fx [role=button] { position: relative; display: flex; align-items: center; min-height: 52px; padding: 12px 40px 12px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .fx [role=button]::after { content: ""; position: absolute; right: 8px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; opacity: .55; transform: rotate(45deg); transition: transform .3s var(--ease); }
  .fx.open [role=button]::after { margin-top: -2px; transform: rotate(-135deg); }
  .fx [role=button]:focus-visible { outline: 2px solid var(--green-d); outline-offset: 2px; border-radius: 8px; }
  .fx:not(.open) :is(.a, p:not(.axis-connection), td, .axis-nodes, .axis-hosting-nodes) { display: none; }
  html:not(.calm) .fx.open :is(.a, p:not(.axis-connection), td, .axis-nodes, .axis-hosting-nodes) { animation: fx-in .35s var(--ease) both; }
  @keyframes fx-in { from { opacity: 0; transform: translateY(-4px); } }

  .pg-about .close { padding: 88px 0 52px; }
  .pg-about .close-grid { gap: 24px; }
  .pg-about .call { padding: 8px 18px 4px; }
  .pg-about .call-h { margin: 8px 0 4px; font-size: 16px; }
  .pg-about .call li { padding: 10px 0 10px 24px; }
  .pg-about .call li::before { top: 17px; }

  /* -- Contact: the three facts as one strip, chips that wrap, FAQ answers on a tap -- */
  .pg-contact .ct-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; padding: 0; }
  .pg-contact .ct-facts li { padding: 12px 10px; border-top: 0; border-left: 1px solid rgba(13, 27, 42, .1); }
  .pg-contact .ct-facts li:first-child { border-left: 0; }
  .pg-contact .ct-facts li::before { position: static; display: block; margin: 2px 0 8px 2px; }
  .pg-contact .ct-facts b { font-size: 14px; line-height: 1.25; }
  .pg-contact .ct-facts span { font-size: 12.5px; line-height: 1.35; }
  .pg-contact .interest-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .pg-contact .interest-chips span { min-height: 44px; }
  .pg-contact .ct-next { padding: 40px 0; }
  .pg-contact .ct-next .track { margin-top: 24px; }
  .pg-contact .ct-next .track li { grid-template-columns: 44px minmax(0, 1fr); padding-bottom: 18px; }
  .pg-contact .ct-next .track .num { font-size: 32px; }
  .pg-contact .ct-next .track li::before { top: 9px; }
  .pg-contact .ct-next .track p { font-size: 15.5px; }
  .pg-contact .faq { padding: 40px 0 28px; }
  .pg-contact .faq-grid { gap: 18px; }
  .pg-contact .q { padding: 0; }
  .pg-contact .q h3 { font-size: 17px; }
  .pg-contact .q .a { margin: 0; padding: 0 28px 18px 0; font-size: 15.5px; }
  .pg-contact .post { padding: 66px 0 34px; }
  .pg-contact .post .eyebrow { margin-bottom: 8px; }
  .pg-contact .post-tools { margin-top: 16px; }
  .pg-contact .hero.inner { padding-bottom: 52px; }
  .pg-contact .ct-in { gap: 28px; }
  .pg-contact .lede { font-size: 16.5px; }
  .pg-contact .contact-form { gap: 12px; }
  .pg-contact .contact-form textarea { min-height: 96px; }
  .pg-contact .interest-chips span { padding: 0 13px; font-size: 14px; }
  .pg-contact .salute { margin-bottom: 12px; }
  .pg-contact .attachment-help { font-size: 13px; }
  .pg-contact .form-note { margin-top: -8px; font-size: 13px; }
  .pg-contact .form-note + .form-note { margin-top: -14px; }
  .pg-contact .ctas { margin-top: 18px; gap: 2px; }

  /* -- Axis: every card keeps its title; the detail opens on a tap -- */
  .axis-section { padding-top: 36px; }
  .ax-flow .secnav { margin-top: 14px; }
  /* the four section links: a whole 2 x 2 contents block in the flow (no cut-off sticky strip over the rows) */
  .secnav.ax-nav { position: static; padding: 0 16px; }
  .ax-nav .secnav-in, .ax-nav .secnav-in.more { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: auto; border-radius: 26px; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .ax-nav .secnav-in.spy::before, .ax-nav .case-read { display: none; }
  .ax-nav .secnav-in a { min-height: 44px; padding: 6px 12px; border-radius: 22px; font-size: 13.5px; line-height: 1.2; white-space: normal; }
  .ax-nav .secnav-in a .num { display: inline; flex: none; }
  .ax-nav .secnav-in.spy a[aria-current] { background: var(--ink); }
  .ax-in { padding-top: 18px; }
  .ax-stage { padding: 20px 0 0; }
  .axis-body-copy { font-size: 16px; }
  .axis-role { margin-top: 12px; font-size: 15px; }
  .axis-scope-grid article, .axis-outcome-grid article { padding: 0 16px 0 20px; }
  .axis-scope-grid article::before, .axis-outcome-grid article::before { inset: 0 auto 0 0; width: 3px; height: auto; }
  .axis-scope-grid h3, .axis-outcome-grid h3 { font-size: 17px; }
  .axis-scope-grid p, .axis-outcome-grid p { margin: 0; padding-bottom: 16px; }
  .axis-scope-grid, .axis-outcome-grid, .axis-decisions { gap: 8px; margin-top: 22px; }
  .axis-architecture-band { margin-top: 36px; padding: 42px 0 46px; }
  .axis-diagram { margin-top: 24px; }
  .axis-layer, .axis-hosting-plane { padding: 12px 14px 6px; gap: 0; }
  .axis-layer:has(.axis-connection) { margin-bottom: 30px; padding-bottom: 26px; }
  .axis-layer-heading span, .axis-plane-label .eyebrow { display: block; margin-bottom: -6px; }
  .axis-layer-heading h3, .axis-plane-label h3 { font-size: 21px; }
  .axis-layer-heading p, .axis-plane-label p { margin: -4px 0 12px; }
  .axis-nodes, .axis-hosting-nodes { gap: 8px; margin-bottom: 10px; }
  .axis-node { padding: 12px 14px 14px; }
  .axis-diagram figcaption { margin-top: 14px; font-size: 13px; }
  .axis-decisions li { padding: 0 14px 0 16px; gap: 10px; }
  .axis-number { padding-top: 18px; }
  .axis-decisions h3 { font-size: 17px; }
  .axis-decisions li > div > p:not(.axis-implication) { margin-top: 0; }
  .axis-decisions .axis-implication { margin-bottom: 16px; }
  .axis-implementation-band { padding-top: 42px; }
  .axis-table-wrap { margin-top: 22px; }
  .axis-comparison tbody { gap: 8px; }
  .axis-comparison tbody th { padding: 12px 44px 12px 18px; font-size: 17px; }
  .axis-comparison tbody th[role=button] { padding: 12px 44px 12px 18px; }
  .axis-comparison tbody th[role=button]::after { right: 20px; }
  .axis-outcomes { padding-bottom: 56px; }
  .axis-measured-panel { gap: 18px; margin-top: 8px; padding: 20px 18px; }
  .axis-metrics { grid-template-columns: 1fr 1fr; gap: 16px; }
  .axis-metrics strong { font-size: 34px; }
  .axis-metrics p { font-size: 13.5px; }
  .axis-measurement-note { padding-top: 14px; font-size: 13px; }

  /* -- footer, every PRO page: brand line, two columns of links, contact line, one small bar -- */
  .foot { padding: 34px 0 18px; font-size: 14.5px; }
  .foot-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "brand brand" "pages svc" "hi hi"; gap: 0 20px; }
  .foot-grid > div:nth-child(2) { grid-area: pages; }
  .foot-grid > div:nth-child(3) { grid-area: svc; }
  .f-brand { grid-area: brand; grid-column: auto; display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 13px; }
  :is(.pro-home, .pg) .f-brand img { width: 64px; height: 64px; padding: 15px 14px 17px; }
  .f-brand img { width: 46px; }
  .f-brand p { margin: 0; }
  .fh { margin: 0 0 2px; font-size: 13px; color: var(--ink-3); }
  .foot-grid a { display: flex; align-items: center; min-height: 44px; padding: 0; }
  .foot-grid span { padding: 0; }
  .foot-grid > div:last-child { grid-area: hi; display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
  .foot-grid > div:last-child .fh { margin: 0 4px 0 0; }
  .foot-grid > div:last-child span { color: var(--ink-3); }
  .foot-bar { margin-top: 12px; padding-top: 6px; gap: 0 16px; font-size: 13px; }
  .foot-bar .lang { order: 2; flex-basis: 100%; }
  .foot-bar a, .foot-bar .motion-switch { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  .pg-contact .post-mail { font-size: clamp(18px, 6vw, 23px); min-height: 44px; }
  /* narrow phones (320-379): the facts and the two figures stack again */
  @media (max-width: 379px) {
    .pg-contact .ct-facts { grid-template-columns: minmax(0, 1fr); padding: 0 14px; }
    .pg-contact .ct-facts li { padding: 9px 0 9px 26px; border-left: 0; border-top: 1px solid rgba(13, 27, 42, .1); }
    .pg-contact .ct-facts li:first-child { border-top: 0; }
    .pg-contact .ct-facts li::before { position: absolute; margin: 0; top: 16px; }
    .pg-contact .contact-form textarea { min-height: 124px; }
    .axis-metrics { grid-template-columns: minmax(0, 1fr); }
  }
}
/* ==== end PHONE PASS: about + contact + axis + footer ==== */

/* ==== FOLIO art kit (2026-10-27): PRO home (body.pro-home) and the shared frame of the inner PRO pages (body.pg), EN and TR. Paper page, navy card stock, one framed
   thing per section. Art: public/pro/art (from concept/art-2026-10-27-pro-kit). Loops run only on wide screens and stop
   under html.calm and prefers-reduced-motion. ==== */
/* a cream veil over the paper tile keeps its fibres quiet behind text */
:is(.pro-home, .pg) { --line: #e0d9cc; --card: #f7f5f0; --veil: linear-gradient(rgba(244, 241, 234, .45), rgba(244, 241, 234, .45)); background: var(--veil), url(/pro/art/paper-768.webp) 0 0 / 768px #efebe3; }
.kit-off { display: none; }

/* hero: the plate in the right column, the headline on the empty paper to its left */
.pro-home .folio-plate { position: relative; align-self: start; aspect-ratio: 930 / 892; margin: -36px -88px 0 8px; }
.pro-home .fp-img { display: block; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent); mask-composite: intersect; }
/* the wash lies on the plate's window only (x 59-870, y 59-833 of the 930 x 892 crop) and multiplies into the paint */
.pro-home .fp-wash { position: absolute; inset: 6.6% 6.5% 6.6% 6.35%; overflow: hidden; mix-blend-mode: multiply; opacity: .6;
  -webkit-mask-image: linear-gradient(205deg, #000 22%, transparent 58%); mask-image: linear-gradient(205deg, #000 22%, transparent 58%); }
.pro-home .fp-wash::before { content: ""; position: absolute; inset: -5%; background: url(/pro/art/wash-1024.webp) 60% 40% / cover no-repeat; }
.pro-home .fp-duo { position: absolute; left: 30%; top: 58%; width: 46%; height: auto; }
:is(.pro-home, .pg) .fp-seal { position: absolute; z-index: 1; display: block; width: 132px; aspect-ratio: 1; }
:is(.pro-home, .pg) .fp-seal img { position: absolute; display: block; }
:is(.pro-home, .pg) .fp-seal img:first-child { inset: 0; width: 100%; height: 100%; }
:is(.pro-home, .pg) .fp-seal img + img { left: 50%; top: 50%; width: 44%; height: auto; translate: -50% -52%; }
.pro-home #top > .hero-in { padding-bottom: 40px; }
.pro-home #top .facts { padding-top: 24px; }
.pro-home #top .facts li::before { display: none; }
@media (min-width: 1700px) { .pro-home .folio-plate { margin-right: -120px; } }
@media (max-width: 1100px) { .pro-home .folio-plate { width: min(100%, 620px); justify-self: center; margin: 24px 0 0; } }

/* motion: one first beat (the wash settles, the duo rises), then the wash drifts, wide screens only */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  html:not(.calm) .pro-home .fp-wash::before { animation: fp-in 1.2s var(--ease-out) both, fp-drift 24s ease-in-out 1.2s infinite alternate; }
  html:not(.calm) .pro-home .fp-duo { animation: fp-rise .6s var(--ease-out) .35s both; }
  .pro-home .off .fp-wash::before { animation-play-state: paused; }
}
@keyframes fp-in { from { opacity: 0; transform: scale(1.06); } }
@keyframes fp-drift { to { transform: translate3d(-3%, 2%, 0) scale(1.04); } }
@keyframes fp-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } }

/* section heads: the ink tick under each H2 on paper */
.pro-home main :is(.sec-head, .demo-copy, .duo-head) h2::after { content: ""; display: block; width: 72px; height: 5px; margin-top: 20px; background: url(/pro/art/tick-192.webp) 0 50% / 100% auto no-repeat; }
.pro-home #process h2::after { display: none; }
.pg main :is(.chap-pin, .special-copy, .group-head > div, .axis-section-title, .axis-section-heading > div, .reel .sec-head, .faq .sec-head) > h2::after { content: ""; display: block; width: 72px; height: 5px; margin-top: 20px; background: url(/pro/art/tick-192.webp) 0 50% / 100% auto no-repeat; }

/* inner pages: the paper shows through the plain section fields, flat cards in the head take the card tone */
.pg main :is(.chap, .pgroup, .bios, #projects-websites) { background: none; }
.pg :is(.jump, .where) { background: var(--card); }

/* inner page head: a static watercolour band at the top right, the plate edge at its right */
.pg .hero.inner { padding-bottom: 72px; }
/* the watercolours are painted inside a mat (gold right edge at 93%, bottom line at 90%, left line at 10%): they are framed a little
   larger so the mat edges fall outside the band and only the fading wash shows (owner 2026-10-29: hard edges at every width) */
.pg .hero.inner::before { content: ""; position: absolute; top: 0; right: 0; width: 546px; max-width: 100%; height: 360px; background: var(--head) right -48px top 0 / auto 410px no-repeat; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%), linear-gradient(180deg, #000 72%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 30%), linear-gradient(180deg, #000 72%, transparent); mask-composite: intersect; }
/* each inner page has its own watercolour in the head band (owner 2026-10-28: no art repeated on every page) */
.pg-about { --head: url(/pro/art/head-about-976.webp); --head-phone: url(/pro/art/head-about-phone-880.webp); }
.pg-services { --head: url(/pro/art/head-services-976.webp); --head-phone: url(/pro/art/head-services-phone-880.webp); }
.pg-projects { --head: url(/pro/art/head-projects-976.webp); --head-phone: url(/pro/art/head-projects-phone-880.webp); }
.pg-contact { --head: url(/pro/art/head-contact-976.webp); --head-phone: url(/pro/art/head-contact-phone-880.webp); }
.pg-axis { --head: url(/pro/art/head-axis-976.webp); --head-phone: url(/pro/art/head-axis-phone-880.webp); }

/* demo: the preview pieces rest on one plate frame (9-slice, window x 148-1306 / y 128-801 of the 1454 x 942 mat) */
.pro-home .demo::before { display: none; }
.pro-home .demo-grid { column-gap: 104px; }
.pro-home .demo-stage::before { content: ""; position: absolute; z-index: -1; inset: -55px -64px -60px -64px; border: solid transparent; border-width: 83px 91px 87px 91px; border-image: url(/pro/art/frame-727.webp) 92 101 97 101 / 83px 91px 87px 91px stretch; pointer-events: none; box-shadow: 0 1px 2px rgba(60, 45, 20, .08), 0 22px 44px -30px rgba(13, 27, 42, .45); }
.pro-home .sample { top: 8px; right: 12px; }
.pro-home .note { bottom: -96px; }
.pro-home .seg, .pro-home .col { background: var(--card); }
/* demo on navy card stock like Working with us: torn in from the hero's paper, torn back out to paper, the corner light away from the stage */
.pro-home .demo#demo { margin-top: 70px; padding: 170px 0 230px; color: #fff; background: url(/pro/art/corner-520.webp) -40px 16px / 480px no-repeat, #121d2b url(/pro/art/navy-768.webp) 0 0 / 768px; }
.pro-home .demo#demo::before, .pro-home .demo#demo::after { content: ""; display: block; position: absolute; z-index: 3; left: 0; right: 0; height: 120px; transform: none; pointer-events: none; }
.pro-home .demo#demo::before { inset: -60px 0 auto; background: url(/pro/art/deckle-a-1080.webp) 50% 0 / auto 100% repeat-x; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%); mask-image: linear-gradient(180deg, transparent, #000 30%); }
.pro-home .demo#demo::after { bottom: -60px; background: url(/pro/art/deckle-b-1080.webp) 50% 100% / auto 100% repeat-x; -webkit-mask-image: linear-gradient(0deg, transparent, #000 30%); mask-image: linear-gradient(0deg, transparent, #000 30%); }
.pro-home #demo h2 { color: #fff; }
.pro-home #demo h2::after { display: none; }
.pro-home #demo :is(.eyebrow, .sub) { color: #c9d6e3; }
.pro-home #demo :is(.ctl label[for], .ctl legend, .maps b) { color: #fff; }
.pro-home #demo .maps li, .pro-home #demo .note { color: #b9c6d3; }
.pro-home #demo .ctl input[type=text] { border-color: transparent; background: #f7f5f0; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .6); }
.pro-home #demo .seg { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); }
.pro-home #demo .seg span { color: #c9d6e3; }
.pro-home #demo .seg label:hover span { color: #fff; background: rgba(255, 255, 255, .1); }
.pro-home #demo .seg input:checked + span { color: #121d2b; background: #f7f5f0; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .7); }
.pro-home #demo .seg input:focus-visible + span { outline-color: #fff; }
/* the frame (z-index -1) stays above the navy; the pieces sit inside its window (27px in from the stage edge) with room to breathe */
.pro-home .demo-stage { isolation: isolate; aspect-ratio: 1 / 1.18; background: #efebe3 url(/pro/art/paper-768.webp) 0 0 / 768px; }
/* tablets: the stage leaves room for its frame (it sticks out 64px a side), so the frame stays on the page (owner 2026-10-29) */
@media (min-width: 701px) and (max-width: 1100px) { .pro-home .demo-stage { justify-self: center; width: min(calc(100% - 116px), 720px); } }
/* the listing card steps into the rig margin, still inside the paper, so the site's buttons above it stay whole */
@media (min-width: 701px) { .pro-home .d-gl { right: -22px; bottom: -22px; } }
.pro-home .d-rig { inset: 44px 42px 42px; }
@media (max-width: 700px) {
  .pro-home .demo#demo { margin-top: 40px; padding: 64px 0 76px; background: url(/pro/art/corner-300.webp) -40px -8px / 240px no-repeat, #121d2b url(/pro/art/navy-512.webp) 0 0 / 512px; }
  .pro-home .demo#demo::before, .pro-home .demo#demo::after { height: 64px; background-image: url(/pro/art/deckle-a-560.webp); }
  .pro-home .demo#demo::before { top: -32px; }
  .pro-home .demo#demo::after { bottom: -32px; background-image: url(/pro/art/deckle-b-560.webp); }
  .pro-home #demo .maps { border-top-color: rgba(255, 255, 255, .14); }
  .pro-home .d-rig { inset: 14px; }
}

/* work: each app screenshot flat in a plate frame */
.pro-home .proj-vis::after { content: ""; position: absolute; z-index: 2; inset: -55px -64px -60px -64px; border: solid transparent; border-width: 83px 91px 87px 91px; border-image: url(/pro/art/frame-727.webp) 92 101 97 101 / 83px 91px 87px 91px stretch; pointer-events: none; box-shadow: 0 1px 2px rgba(60, 45, 20, .08), 0 22px 44px -30px rgba(13, 27, 42, .45); }
.pro-home .proj .win.big, .pro-home .proj.flip .win.big, .pro-home .proj-vis:hover .win.big { transform: none; border-radius: 0; box-shadow: none; }
.pro-home .proj .zoom { display: none; }
.pro-home .proj { gap: 120px; margin: 90px 0 140px; }

/* credits: every poster on the wall in a single-window film frame (window x 102-485 / y 58-670 of 587 x 728) */
.pro-home .pcol { gap: 0; }
.pro-home .pcol .pp { padding: 9.88% 17.38%; border-radius: 0; background: url(/pro/art/film-294.webp) 0 0 / 100% 100% no-repeat; }
.pro-home .pcol img { aspect-ratio: 383 / 612; object-fit: cover; border-radius: 0; box-shadow: none; }
@media (hover: hover) { .pro-home .pcol .pp:hover img { box-shadow: none; filter: brightness(1.08); } }
.pro-home .bignum span { padding-bottom: 18px; background: linear-gradient(100deg, var(--green-d) 10%, var(--pink-d) 60%, var(--amber-d)) 0 0 / 100% calc(100% - 18px) no-repeat, url(/pro/art/rule-720.webp) 0 100% / 100% 10px no-repeat; -webkit-background-clip: text, border-box; background-clip: text, border-box; }

.pro-home .svc { padding-top: 40px; padding-bottom: 150px; }
.pro-home .probs article::before { display: none; }

/* process: navy card stock, the corner light top left, the deckle tear coming in from the paper above */
.pro-home .steps#process { position: relative; padding: 150px 0 40px; color: #fff; background: url(/pro/art/corner-520.webp) -40px 16px / 480px no-repeat, #121d2b url(/pro/art/navy-768.webp) 0 0 / 768px; }
:is(.pro-home .close#contact, .pg .close) { background: #121d2b url(/pro/art/navy-768.webp) 0 0 / 768px; }
:is(.pro-home .steps, .pg .close)::before { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: -60px; height: 120px; background: url(/pro/art/deckle-a-1080.webp) 50% 0 / auto 100% repeat-x; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%); mask-image: linear-gradient(180deg, transparent, #000 30%); }
.pro-home #process h2 { color: #fff; }
.pro-home #process :is(.eyebrow, .sub) { color: #c9d6e3; }
.pro-home #process .track p { color: #b9c6d3; }
.pro-home #process .track .num { color: #9fb0c2; }
.pro-home #process .track::before { background: rgba(255, 255, 255, .16); }
.pro-home #process .track li::before { background: #121d2b; box-shadow: inset 0 0 0 2px #c9d6e3; }

/* close: the painted close at the foot, the seal above the headline, the deckle tear back to paper under it */
.pro-home .close#contact { padding: 56px 0 430px; }
:is(.pro-home, .pg) .close-field { top: auto; bottom: 0; height: 560px; clip-path: none; background: none; }
:is(.pro-home, .pg) .close-field img { display: block; width: 100%; max-width: 1600px; height: 100%; margin: 0 auto; object-fit: cover; object-position: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%), linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent, #000 30%), linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-composite: intersect; }
:is(.pro-home, .pg) .foot::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: -60px; height: 120px; background: url(/pro/art/deckle-b-1080.webp) 50% 100% / auto 100% repeat-x; pointer-events: none; -webkit-mask-image: linear-gradient(0deg, transparent, #000 30%); mask-image: linear-gradient(0deg, transparent, #000 30%); }
:is(.pro-home, .pg) .kit-seal { position: relative; width: 96px; margin-bottom: 22px; }
:is(.pro-home, .pg) .call { background: rgba(14, 26, 40, .82); }
/* inner closes: the tear hangs over the paper above, the painting needs room under the text */
.pg .close { overflow: clip visible; padding: 112px 0 400px; }

/* footer: on paper, the seal carries the logo, the ink rule replaces the colour band */
:is(.pro-home, .pg) .foot { padding-top: 112px; }
/* the rule runs over the link columns, from Pages to the end of Say hi (owner 2026-10-28: "why isnt decorative line going to the say hi?"),
   centred on the three menus ("does that line look centered to three menus?"): it is pinned to the Pages column and to the end of the longest
   Say hi line (anchor positioning). Fallback: left = the wrap's content edge + the brand column (2fr of 5.4fr after the 3 gaps of 30px) + one gap */
:is(.pro-home, .pg) .foot::before { left: calc(max(32px, 50% - 568px) + (min(1136px, 100% - 64px) - 90px) / 2.7 + 30px); right: max(32px, 50% - 568px); top: 56px; height: 14px; background: url(/pro/art/rule-720.webp) 0 50% / 100% 100% no-repeat; }
:is(.pro-home, .pg) .foot-grid > div:nth-child(2) { anchor-name: --foot-a; }
@media (min-width: 900px) { :is(.pro-home, .pg) .foot-grid > div:last-child { anchor-name: --foot-z; justify-self: start; } }
@media (min-width: 1700px) { :is(.pro-home, .pg) .foot::before { left: calc(50% - 648px + 1206px / 2.7 + 30px); right: calc(50% - 648px); } }
@supports (anchor-name: --a) { :is(.pro-home, .pg) .foot::before { left: anchor(--foot-a left); right: anchor(--foot-z right); } }
:is(.pro-home, .pg) .f-brand img { box-sizing: border-box; width: 96px; height: 96px; padding: 23px 22px 25px; object-fit: contain; background: url(/pro/art/seal-264.webp) 50% 50% / 100% 100% no-repeat; }

/* phones: the same page, static. No wash, no blend, no seal turn; smaller tiles and frames */
@media (max-width: 820.98px) {
  .pro-home .fp-wash { display: none; }
  .pro-home .folio-plate { aspect-ratio: 720 / 548; width: min(100vw, 720px); justify-self: center; margin: 22px 0 0; }
  .pro-home .fp-img { -webkit-mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent); }
  .pro-home .fp-duo { left: 40%; top: 54%; width: 48%; }
}
@media (max-width: 700px) {
  :is(.pro-home, .pg) { background-image: var(--veil), url(/pro/art/paper-512.webp); background-size: auto, 512px; }
  .pro-home .steps#process { background-image: url(/pro/art/corner-300.webp), url(/pro/art/navy-512.webp); background-size: 240px, 512px; background-position: -40px -8px, 0 0; }
  :is(.pro-home .close#contact, .pg .close) { background-image: url(/pro/art/navy-512.webp); background-size: 512px; }
  .pro-home main :is(.sec-head, .demo-copy, .duo-head) h2::after, .pg main :is(.chap-pin, .special-copy, .group-head > div, .axis-section-title, .axis-section-heading > div, .reel .sec-head, .faq .sec-head) > h2::after { width: 52px; height: 4px; margin-top: 12px; }
  .pg .hero.inner::before { width: 100%; max-width: none; height: 220px; background-image: var(--head-phone); background-size: auto 320px; background-position: right -42px top -94px;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .8)), linear-gradient(180deg, #000 60%, transparent);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .8)), linear-gradient(180deg, #000 60%, transparent); }
  .pro-home .folio-plate { justify-self: start; margin: 10px 0 0 calc(50% - 50vw); }
  .pro-home #top > .hero-in { padding-bottom: 0; }
  .pro-home #top .facts { padding-top: 12px; }
  .pro-home .svc#services { background: none; }
  .pro-home #demo .demo-stage::before { inset: -16px -19px -18px -19px; border-width: 26px 28px 27px 28px; border-image-width: 26px 28px 27px 28px; }
  /* room under the pinned controls, and the frame keeps a small gutter */
  .pro-home #demo .demo-stage { width: calc(100% - 18px); margin-top: 36px; }
  .pro-home #demo .sample { top: 4px; right: 6px; }
  .pro-home .proj-vis::after { display: none; }
  .pro-home #demo .ctl, .pro-home main .ph-seg, .pro-home #work :is(.proj, .proj.flip, .site-card), .pro-home #services .col li a { background: var(--card); }
  .pro-home #work .proj { margin: 0; }
  .pro-home .svc#services { padding: 8px 0 36px; }
  .pro-home .steps#process { padding: 60px 0 20px; }
  :is(.pro-home .steps, .pg .close)::before { top: -32px; height: 64px; background-image: url(/pro/art/deckle-a-560.webp); }
  :is(.pro-home, .pg) .foot::after { top: -32px; height: 64px; background-image: url(/pro/art/deckle-b-560.webp); }
  .pro-home .close#contact { padding: 24px 0 112px; }
  :is(.pro-home #contact, .pg .close) .close-field { height: 220px; }
  .pg .close { padding: 56px 0 140px; }
  /* the 3D section is navy on phones: no tick under its heading, no tear between it and the navy close */
  .pg-services .special-copy > h2::after, .pg-services .special + .close::before { display: none; }
  /* balanced lines break badly beside the floated seal */
  .pg .ax-close h2 { text-wrap: wrap; }
  .pg .hero.inner { padding-bottom: 40px; }
  :is(.pro-home, .pg) .kit-seal { float: right; width: 64px; margin: 0 0 6px 12px; }
  @media (max-width: 374px) { :is(.pro-home, .pg) .kit-seal { float: none; width: 56px; margin: 0 0 12px; } }
  :is(.pro-home, .pg) .foot::before { display: none; }
  :is(.pro-home, .pg) .foot { padding-top: 28px; }
  :is(.pro-home, .pg) .f-brand img { width: 72px; height: 72px; padding: 17px 16px 19px; }
}
/* ==== end FOLIO art kit ==== */

/* ==== FOLIO inner pages: body art ==== */
/* 2026-10-27. The home kit's frames, cameos, film frames and cable placed inside the main sections of Services,
   Projects, About, Contact and the Axis case study. Page-scoped; nothing here moves. */
/* the cameo mat: the art clipped round inside cameo-440 (window 68.8% of the mat) */
.pg-services .chap figure.chap-art, .pg-contact .ct-stage .ct-win { position: relative; aspect-ratio: 1; padding: 0; border-radius: 50%; background: none; box-shadow: none; overflow: visible; transform: none; }
.pg-services .chap figure.chap-art::before, .pg-contact .ct-stage .ct-win::before { content: ""; position: absolute; z-index: 1; inset: 0; height: auto; transform: none; background: url(/pro/art/cameo-440.webp) 50% 50% / 100% 100% no-repeat; pointer-events: none; }
.pg-services .chap figure.chap-art::after { display: none; }
.pg-services .chap figure.chap-art img, .pg-contact .ct-win img { position: absolute; left: 15.6%; top: 15.6%; width: 68.8%; height: 68.8%; padding: 0; border-radius: 50%; background: #f7f5f0; object-fit: cover; }
.pg-contact .ct-win .float { position: static; background: none; box-shadow: none; border-radius: 0; overflow: visible; animation: none; will-change: auto; }
.pg-contact .ct-win .bar { display: none; }
.pg-contact .ct-stage:hover .ct-win { transform: none; }

/* the plate frame (9-slice of frame-727, slice 92 101 97 101) around a still: the frame's window rim laps the image */
.pg .body-still { position: relative; display: none; margin: 0; }
.pg .body-still img { display: block; width: 100%; height: auto; }
.pg .body-still::after { content: ""; position: absolute; inset: -31px -36px -33px -36px; border: solid transparent; border-width: 50px 55px 52px 55px; border-image: url(/pro/art/frame-727.webp) 92 101 97 101 / 50px 55px 52px 55px stretch; pointer-events: none; box-shadow: 0 1px 2px rgba(60, 45, 20, .08), 0 22px 44px -30px rgba(13, 27, 42, .45); }
/* wide: a flat lay in the empty space beside the Websites head, under the FAQ head, beside the Axis outcomes title */
@media (min-width: 1101px) {
  /* small stills, frame foot may sit in the gap below, so a short head leaves no bare band */
  .pg-projects .group-head .body-still { display: block; flex: 0 0 180px; align-self: flex-start; margin: 31px 36px 13px auto; }
  .pg-contact .faq .body-still { display: block; width: 260px; margin: 56px 36px 33px; }
  .pg-axis .axis-outcomes .axis-section-title { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; column-gap: 64px; max-width: none; }
  .pg-axis .axis-outcomes .axis-section-title > :not(.body-still) { grid-column: 1; }
  .pg-axis .axis-outcomes .body-still { display: block; grid-column: 2; grid-row: 1 / 4; width: 180px; margin: 31px 36px 13px; }
}

/* Services: the measuring tape over the seam into Eren's chapter, its cut end fading in */
.pg-services .body-cable { position: relative; width: min(1100px, 92vw); margin: -60px auto 40px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%); mask-image: linear-gradient(90deg, transparent 0, #000 12%); }
.pg-services .body-cable img { display: block; width: 100%; height: auto; }

/* Services, wide: the still beside the H2 and intro (Eren left, Tara right), then the cameo at the head of the rows */
@media (min-width: 1101px) {
  .pg-services .chap-grid { grid-template-columns: 360px 120px minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr auto; column-gap: 48px; row-gap: 0; }
  .pg-services .c-tara .chap-grid { grid-template-columns: minmax(0, 1fr) 120px 360px; }
  .pg-services .chap-side, .pg-services .chap-pin { display: contents; }
  .pg-services .chap .body-still { display: block; grid-column: 1 / 3; grid-row: 1 / 6; align-self: center; margin: 31px 36px 33px; }
  .pg-services .c-tara .body-still { grid-column: 2 / 4; }
  .pg-services .chap h2 { grid-column: 3; grid-row: 2; }
  .pg-services .chap .sub { grid-column: 3; grid-row: 3; }
  .pg-services .chap-side .btn { grid-column: 3; grid-row: 4; justify-self: start; }
  .pg-services .c-tara :is(h2, .sub, .chap-side .btn) { grid-column: 1; }
  .pg-services .chap figure.chap-art { grid-column: 1; grid-row: 6; position: sticky; top: calc(var(--top-h, 0px) + 40px); width: 360px; margin: 96px 0 0; }
  .pg-services .chap-list { grid-column: 2 / 4; grid-row: 6; margin-top: 96px; }
  .pg-services .c-tara figure.chap-art { grid-column: 3; }
  .pg-services .c-tara .chap-list { grid-column: 1 / 3; }
}
@media (min-width: 701px) {
  /* ink-marks band 2 between the chapters */
  .pg-services .c-tara::before { content: ""; display: block; width: min(640px, 70vw); height: 27px; margin: 0 auto 90px; background: url(/pro/art/body-rule2-1100.webp) 50% 50% / 100% auto no-repeat; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  .pg-services .chap figure.chap-art { width: 240px; margin-bottom: 28px; }
}

/* Projects: each screenshot flat in a plate frame */
@media (min-width: 701px) {
  .pg-projects .case .win.big, .pg-projects .case-vis:hover .win.big, .pg-projects .case.flip .case-vis:hover .win.big, html:not(.calm) .pg-projects .case .win.big.lit, html:not(.calm) .pg-projects .case.flip .win.big.lit { overflow: visible; transform: none; border-radius: 0; box-shadow: none; }
  .pg-projects .case .win.big::before { content: ""; position: absolute; z-index: 3; inset: -36px -42px -39px -42px; border: solid transparent; border-width: 58px 64px 61px 64px; border-image: url(/pro/art/frame-727.webp) 92 101 97 101 / 58px 64px 61px 64px stretch; pointer-events: none; box-shadow: 0 1px 2px rgba(60, 45, 20, .08), 0 22px 44px -30px rgba(13, 27, 42, .45); }
  .pg-projects .case .zoom { display: none; }
  .pg-projects .case .shot figcaption { margin-top: 64px; }
}
@media (min-width: 701px) and (max-width: 1300px) { .pg-projects .case .win.big { margin: 0 42px; } }
@media (min-width: 1101px) {
  .pg-projects .case { gap: 112px; }
  /* ink-marks band 2 between the demos and the websites */
  .pg-projects #projects-websites::before { content: ""; display: block; width: min(640px, 70vw); height: 27px; margin: 40px auto 0; background: url(/pro/art/body-rule2-1100.webp) 50% 50% / 100% auto no-repeat; }
}
/* credits: every poster on the wall in a single-window film frame (window x 102-485 / y 58-670 of 587 x 728) */
.pg-projects .pcol { gap: 0; }
.pg-projects .pcol .pp { padding: 9.88% 17.38%; border-radius: 0; background: url(/pro/art/film-294.webp) 0 0 / 100% 100% no-repeat; }
.pg-projects .pcol img { aspect-ratio: 383 / 612; object-fit: cover; border-radius: 0; box-shadow: none; }
@media (hover: hover) { .pg-projects .pcol .pp:hover img { box-shadow: none; filter: brightness(1.08); } }


/* Contact: a plain card with the seal at its top, the contact art in a cameo beside it, the next steps on navy stock */
.pg-contact .form-card { background: #f7f5f0; }
.pg-contact .form-card::before { display: none; }
.pg-contact .body-seal { position: absolute; z-index: 2; right: 32px; top: -60px; width: 120px; aspect-ratio: 1; pointer-events: none; }
.pg-contact .body-seal img { position: absolute; display: block; }
.pg-contact .body-seal img:first-child { inset: 0; width: 100%; height: 100%; }
.pg-contact .body-seal img + img { left: 50%; top: 50%; width: 44%; height: auto; translate: -50% -52%; }
.pg-contact .ct-stage { width: 280px; max-width: none; }
/* tablets (owner 2026-10-29, all viewports): the cameo sits beside the intro instead of alone under it with the page empty to its right */
@media (min-width: 701px) and (max-width: 1100px) {
  .pg-contact .ct-copy { display: grid; grid-template-columns: minmax(0, 1fr) 240px; column-gap: 40px; }
  .pg-contact .ct-copy > * { grid-column: 1; }
  .pg-contact .ct-copy > .ct-stage { grid-column: 2; grid-row: 1 / span 5; align-self: center; width: 240px; margin: 0; }
}
.pg-contact .ct-tag { position: relative; inset: auto; margin-top: 6px; }
.pg-contact .steps.ct-next { position: relative; padding: 150px 0 160px; margin-bottom: 60px; color: #fff; background: url(/pro/art/corner-520.webp) -40px 16px / 480px no-repeat, #121d2b url(/pro/art/navy-768.webp) 0 0 / 768px; }
.pg-contact .ct-next::before, .pg-contact .ct-next::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; height: 120px; pointer-events: none; background: url(/pro/art/deckle-a-1080.webp) 50% 0 / auto 100% repeat-x; }
.pg-contact .ct-next::before { top: -60px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%); mask-image: linear-gradient(180deg, transparent, #000 30%); }
.pg-contact .ct-next::after { bottom: -60px; background-image: url(/pro/art/deckle-b-1080.webp); background-position: 50% 100%; -webkit-mask-image: linear-gradient(0deg, transparent, #000 30%); mask-image: linear-gradient(0deg, transparent, #000 30%); }
.pg-contact .ct-next h2 { color: #fff; }
.pg-contact .ct-next .eyebrow { color: #c9d6e3; }
.pg-contact .ct-next .track p { color: #b9c6d3; }
.pg-contact .ct-next .track .num { color: #9fb0c2; }
.pg-contact .ct-next .track::before { background: rgba(255, 255, 255, .16); }
.pg-contact .ct-next .track li::before { box-shadow: inset 0 0 0 2px var(--c), 0 0 0 3px #121d2b; }
html.js:not(.calm) .pg-contact .ct-next .track:not(.in) li::before { background: #121d2b; box-shadow: inset 0 0 0 2px #5a6a80, 0 0 0 3px #121d2b; }

/* Axis: the demo screenshot flat in a plate frame beside the H1; the decision cards on card stock */
.pg-axis .axis-preview .float, .pg-axis .ax-stage:hover .axis-preview .float { position: relative; overflow: visible; border-radius: 0; box-shadow: none; animation: none; rotate: none; transform: none; transition: none; }
.pg-axis .axis-preview .float::after { content: ""; position: absolute; z-index: 3; inset: -36px -42px -39px -42px; border: solid transparent; border-width: 58px 64px 61px 64px; border-image: url(/pro/art/frame-727.webp) 92 101 97 101 / 58px 64px 61px 64px stretch; pointer-events: none; box-shadow: 0 1px 2px rgba(60, 45, 20, .08), 0 22px 44px -30px rgba(13, 27, 42, .45); }
.pg-axis .axis-preview { width: auto; margin: 36px 42px 0; }
.pg-axis .axis-preview figcaption { margin-top: 60px; }
.pg-axis .axis-preview img { display: block; }
.pg-axis .axis-decisions li { background: #f7f5f0; }
@media (min-width: 1101px) {
  /* ink-marks band 2 above Decisions */
  .pg-axis #decisions::before { content: ""; display: block; width: min(640px, 70%); height: 27px; margin: 0 auto 80px; background: url(/pro/art/body-rule2-1100.webp) 50% 50% / 100% auto no-repeat; }
}

/* phones: the cameo beside the Services H2, no stills, no project frames, a thin Axis frame, the navy steps on small tiles */
@media (max-width: 700px) {
  .pg-services .body-cable { width: 100%; margin: -24px 0 14px; overflow: hidden; }
  .pg-services .body-cable img { width: 110%; max-width: none; margin-left: -10%; } /* crop the faded cut end, keep the brass tab */
  .pg-services .chap figure.chap-art { float: right; width: 168px; margin: -6px -6px 6px 10px; }
  .pg-services .chap-side .btn { clear: both; }
  .pg-contact .body-seal { right: 16px; top: -30px; width: 72px; }
  .pg-contact .steps.ct-next { padding: 72px 0 76px; margin-bottom: 32px; background-image: url(/pro/art/corner-300.webp), url(/pro/art/navy-512.webp); background-size: 240px, 512px; background-position: -40px -8px, 0 0; }
  .pg-contact .ct-next::before, .pg-contact .ct-next::after { height: 64px; background-image: url(/pro/art/deckle-a-560.webp); }
  .pg-contact .ct-next::before { top: -32px; }
  .pg-contact .ct-next::after { bottom: -32px; background-image: url(/pro/art/deckle-b-560.webp); }
  .pg-axis .axis-preview { width: auto; margin: 20px 4px 0; }
  .pg-axis .axis-preview .float::after { inset: -16px -19px -18px -19px; border-width: 26px 28px 27px 28px; border-image-width: 26px 28px 27px 28px; }
  .pg-axis .axis-preview figcaption { margin-top: 28px; }
}
/* the old cool-grey bands behind the 3D special and the Axis architecture become a warm card tone on the paper */
.pg :is(.special, .axis-architecture-band)::before { background: rgba(247, 245, 240, .72); }
/* ==== end FOLIO inner pages: body art ==== */

/* ==== PRO fix pass B (2026-10-28): home sections look, readability, the husband & wife section, paper-and-ink motion ==== */
/* the owner: "everything looks plain and hard to read. no real section transition". Light sections get a darker ink, one size up;
   the problems get their own tinted band with torn edges, the work, problem and duo cards lift off the paper */
.pro-home :is(#work, #credits, #services) { --ink-2: #24344a; --ink-3: #3a4a5e; --paper-card: #fffdf9; --lift: 0 0 0 1px rgba(60, 45, 20, .1), 0 1px 2px rgba(60, 45, 20, .06), 0 22px 40px -26px rgba(13, 27, 42, .34); --lift-2: 0 0 0 1px rgba(60, 45, 20, .12), 0 2px 4px rgba(60, 45, 20, .06), 0 30px 50px -26px rgba(13, 27, 42, .42); }
.pro-home .group-head p, .pro-home .titles, .pro-home .cred-why { font-size: 17px; }
.pro-home .proj-copy > p:not(.kind), .pro-home .sc-copy > p:not(.kind) { font-size: 18px; line-height: 1.55; }
.pro-home #work .sec-head .sub { font-size: 19px; }
.pro-home #work .kind { color: #055a3c; }

/* work: each project on a warm white card, the plate frame inside it; the site windows lie flat so their text stays sharp */
.pro-home .proj { margin: 56px 0 72px; padding: 84px 100px 84px 56px; border-radius: 22px; background: var(--paper-card); box-shadow: var(--lift); }
.pro-home .proj.flip { padding: 84px 56px 84px 100px; }
.pro-home .sites { gap: 40px; perspective: none; }
.pro-home .site-card { padding: 18px 18px 28px; border-radius: 20px; background: var(--paper-card); box-shadow: var(--lift); }
.pro-home .site-card .sc-copy { padding: 0 10px; }
.pro-home .sites .win, html:not(.calm) .pro-home .site-card .win.lit, .pro-home .site-card:hover .win { transform: none; box-shadow: 0 0 0 1px rgba(13, 27, 42, .08), 0 12px 24px -16px rgba(13, 27, 42, .4); }
.pro-home .work { padding-bottom: 24px; }
/* the ink-wash rule between the work and the 76 films, in place of empty paper */
.pro-home .cred { padding-top: 40px; }
.pro-home .cred::before { content: ""; display: block; width: min(640px, 70vw); height: 27px; margin: 0 auto 64px; background: url(/pro/art/body-rule2-1100.webp) 50% 50% / 100% auto no-repeat; }

/* headaches: a mint band over the paper, the deckle tear in at the top and back out at the bottom, the cable over the seam */
.pro-home .svc { padding: 40px 0 120px; }
.pro-home .ache { position: relative; isolation: isolate; margin-top: 40px; padding-top: 76px; padding-bottom: 118px; background: linear-gradient(rgba(198, 230, 211, .5), rgba(198, 230, 211, .5)); }
.pro-home .ache::before, .pro-home .ache::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; height: 120px; pointer-events: none; background: url(/pro/art/deckle-a-1080.webp) 50% 0 / auto 100% repeat-x; }
.pro-home .ache::before { top: -60px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%); mask-image: linear-gradient(180deg, transparent, #000 30%); }
.pro-home .ache::after { bottom: -60px; background-image: url(/pro/art/deckle-b-1080.webp); background-position: 50% 100%; -webkit-mask-image: linear-gradient(0deg, transparent, #000 30%); mask-image: linear-gradient(0deg, transparent, #000 30%); }
.pro-home .ache .wrap { position: relative; z-index: 2; }
/* the watercolor wash, laid in lightly behind the heading's right side */
.pro-home .probs { position: relative; gap: 22px; margin-top: 44px; }
.pro-home .probs::before { content: ""; position: absolute; z-index: -1; right: -120px; top: -250px; width: 620px; aspect-ratio: 1024 / 683; background: url(/pro/art/wash-1024.webp) 50% 50% / contain no-repeat; opacity: .3; pointer-events: none; }
.pro-home .probs article { margin: 0; padding: 26px 24px 24px; border: 0; border-radius: 18px; background: var(--paper-card); box-shadow: inset 0 3px 0 var(--c, var(--green)), var(--lift); }
.pro-home .probs article:nth-child(2) { --c: var(--pink); }
.pro-home .probs article:nth-child(3) { --c: var(--amber); }
.pro-home .probs article:nth-child(4) { --c: var(--ink); }
.pro-home .probs article::after { inset: 0; -webkit-mask: none; mask: none; background: radial-gradient(320px circle at var(--sx, 50%) var(--sy, 50%), var(--lt), transparent 70%); }
.pro-home .probs h3 { font-size: 21px; margin: 12px 0 12px; }
.pro-home .probs p { font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.pro-home .probs ul { padding-top: 18px; border-top: 1px solid var(--line); }
.pro-home .probs p { margin-bottom: 20px; }
.pro-home .probs li { font-size: 16px; color: var(--ink); }

/* why a husband and wife team: the heading on top, then one card each opening on that person's own painting, then the reasons strip */
.pro-home .duo { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 110px; }
.pro-home .cols { gap: 32px; }
.pro-home .col { padding: 0 32px 22px; border-radius: 20px; background: linear-gradient(var(--tint), var(--tint)) 0 0 / 100% 286px no-repeat, var(--paper-card); box-shadow: var(--lift); --tint: #e2f2e8; --chip: var(--green-d); }
.pro-home .c-tara { --tint: #fbe6ee; --chip: var(--pink-d); }
.pro-home .col-art { display: block; box-sizing: border-box; width: calc(100% + 64px); height: 286px; margin: 0 -32px 24px; padding: 22px 28px 0; object-fit: contain; object-position: 50% 100%; }
.pro-home .who { font-size: 15px; }
.pro-home .say { font-size: 27px; margin: 4px 0 14px; }
.pro-home .col li a { min-height: 54px; padding: 8px 0; font-size: 16.5px; line-height: 1.3; color: var(--ink); }
/* the row's arrow (owner 2026-10-28: "these are ugly, and not even centered dude"): a thin ring in the person's colour that fills on hover. The arrow is a
   centred icon, the text arrow in the markup is only kept for the copy check (font-size 0) */
.pro-home .col li a span { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--chip) 32%, transparent); color: var(--chip); font-size: 0;
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease), color .2s, transform .25s var(--ease); }
.pro-home .col li a span::before { content: ""; position: absolute; inset: 0; margin: auto; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.pro-home .col li a:hover { color: var(--chip); }
.pro-home .col li a:is(:hover, :focus-visible) span { background-color: var(--chip); box-shadow: inset 0 0 0 1.5px var(--chip); color: #fff; }
@media (hover: hover) and (pointer: fine) { .pro-home .col li a:hover span { transform: translateX(3px); } }
.pro-home .pts { gap: 0; margin-top: 8px; padding: 32px 0; border-radius: 20px; background: var(--paper-card); box-shadow: var(--lift); }
.pro-home .pts li { padding: 0 30px; font-size: 16.5px; line-height: 1.55; }
.pro-home .pts li + li { border-left: 1px solid var(--line); }
.pro-home .pts b { font-size: 17.5px; margin-bottom: 6px; }
.pro-home .pts b::before { content: ""; display: block; width: 10px; height: 10px; margin: 0 0 14px 1px; border-radius: 2px; background: var(--green); transform: rotate(45deg); }
.pro-home .pts li:nth-child(2) b::before { background: var(--pink); }
.pro-home .pts li:nth-child(3) b::before { background: var(--amber); }
.pro-home .pts li:nth-child(4) b::before { background: var(--ink); }

@media (max-width: 1100px) {
  .pro-home .proj, .pro-home .proj.flip { gap: 64px; padding: 72px 72px 48px; }
  .pro-home .pts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .pro-home .pts li:nth-child(3) { border-left: 0; }
}
@media (max-width: 700px) {
  .pro-home :is(#work, #credits, #services) { --lift: 0 0 0 1px rgba(60, 45, 20, .1), 0 14px 26px -20px rgba(13, 27, 42, .34); }
  .pro-home .proj, .pro-home .proj.flip, .pro-home .site-card { padding: 12px; border-radius: 16px; background: var(--paper-card); }
  .pro-home #work .proj { margin: 0; }
  .pro-home #work :is(.proj-copy, .sc-copy) > p:not(.kind) { font-size: 15.5px; line-height: 1.5; }
  .pro-home #work .group-head p { font-size: 15.5px; }
  .pro-home .sites { gap: 12px; }
  .pro-home .site-card .sc-copy { padding: 0; }
  .pro-home .cred { padding-top: 12px; }
  .pro-home .cred::before { width: 72%; height: 16px; margin-bottom: 28px; }
  .pro-home #credits :is(.titles, .cred-why) { font-size: 15.5px; }
  .pro-home .svc#services { padding: 8px 0 40px; }
  .pro-home .ache { margin-top: 20px; padding-top: 30px; padding-bottom: 56px; }
  .pro-home .ache::before, .pro-home .ache::after { height: 64px; background-image: url(/pro/art/deckle-a-560.webp); }
  .pro-home .ache::before { top: -32px; }
  .pro-home .ache::after { bottom: -32px; background-image: url(/pro/art/deckle-b-560.webp); }
  .pro-home .probs::before { right: -110px; top: -120px; width: 300px; opacity: .2; }
  .pro-home #services .probs { gap: 10px; margin-top: 18px; border: 0; }
  .pro-home #services .probs article { padding: 4px 14px; border-radius: 14px; box-shadow: inset 0 3px 0 var(--c, var(--green)), var(--lift); }
  .pro-home #services .probs p { font-size: 15.5px; }
  .pro-home #services .probs ul { padding: 12px 0 12px; margin-top: 0; }
  .pro-home #services .probs li { font-size: 15px; }
  .pro-home .duo { margin-top: 64px; gap: 14px; }
  .pro-home #services .col { padding: 0 14px 14px; border-radius: 16px; background: linear-gradient(var(--tint), var(--tint)) 0 0 / 100% 178px no-repeat, var(--paper-card); box-shadow: var(--lift); }
  .pro-home .col-art { width: calc(100% + 28px); height: 178px; margin: 0 -14px 14px; padding: 12px 16px 0; }
  .pro-home #services .ph-seg ~ .cols .say { margin: 0 0 8px; }
  .pro-home #services .col li a { min-height: 48px; padding: 8px 10px 8px 14px; font-size: 15.5px; background: #fff; align-items: center; }
  .pro-home .col li a span { width: 30px; height: 30px; }
  .pro-home .col li a span::before { width: 13px; height: 13px; }
  .pro-home #services .pts { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 10px; padding: 4px 0; }
  .pro-home #services .pts li { padding: 16px 18px; font-size: 15.5px; line-height: 1.5; }
  .pro-home #services .pts li + li { border-left: 0; border-top: 1px solid var(--line); }
  .pro-home #services .pts b { font-size: 16px; }
  .pro-home .pts b::before { display: inline-block; width: 9px; height: 9px; margin: 0 11px 2px 1px; vertical-align: middle; }
}

/* motion: one paper-and-ink language. Cards are laid down (rise, a slight turn easing to 0), rules and ticks draw left to right,
   torn edges settle, the watercolor blooms, the duo paintings slide in from their side. Gated by html.js (set only when motion is on) */
.js .rv { transition-delay: var(--rd, 0ms); }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.calm) .pro-home :is(.probs article, .proj, .site-card, .col, .pts > li) { transition: opacity .5s var(--ease) var(--rd, 0ms), transform .8s var(--ease) var(--rd, 0ms), translate .3s var(--ease), box-shadow .3s var(--ease); }
  html.js:not(.calm) .pro-home :is(.probs article, .proj, .site-card, .col).rv:not(.in) { transform: translate3d(0, 36px, 0) rotate(-1.4deg); }
  html.js:not(.calm) .pro-home :is(.probs article:nth-child(2n), .proj.flip, .site-card + .site-card, .c-tara).rv:not(.in) { transform: translate3d(0, 36px, 0) rotate(1.4deg); }
  html.js:not(.calm) .pro-home :is(#work, #services) .sec-head h2::after { transition: clip-path .7s var(--ease-io) .35s; }
  html.js:not(.calm) .pro-home :is(#work, #services) .sec-head.rv:not(.in) h2::after, html.js:not(.calm) .pro-home .duo-head.rv:not(.in) h2::after { clip-path: inset(0 100% 0 0); }
  html.js:not(.calm) .pro-home .duo-head h2::after { transition: clip-path .7s var(--ease-io) .3s; }
  html.js:not(.calm) .pro-home .cred::before { transition: clip-path 1s var(--ease-io) .1s; }
  html.js:not(.calm) .pro-home .cred:not(.in)::before { clip-path: inset(0 100% 0 0); }
  html.js:not(.calm) .pro-home .ache::before { transition: opacity .6s var(--ease), transform .9s var(--ease); }
  html.js:not(.calm) .pro-home .ache:not(.in)::before { opacity: 0; transform: translateY(-18px); }
  html.js:not(.calm) .pro-home .probs::before { transition: opacity 1.2s var(--ease) .2s, scale 1.4s var(--ease) .2s; }
  html.js:not(.calm) .pro-home .ache:not(.in) .probs::before { opacity: 0; scale: .94; }
  html.js:not(.calm) .pro-home .col-art { transition: opacity .6s var(--ease) calc(var(--rd, 0ms) + .15s), transform .9s var(--ease) calc(var(--rd, 0ms) + .15s); }
  html.js:not(.calm) .pro-home .col.rv:not(.in) .col-art { opacity: 0; transform: translateX(-56px); }
  html.js:not(.calm) .pro-home .c-tara.rv:not(.in) .col-art { transform: translateX(56px); }
  html.js:not(.calm) .pro-home .col li { transition: opacity .4s var(--ease), transform .5s var(--ease); }
  html.js:not(.calm) .pro-home .col.rv:not(.in) li { opacity: 0; transform: translateY(12px); }
  html.js:not(.calm) .pro-home .col.in li:nth-child(1) { transition-delay: calc(var(--rd, 0ms) + .4s); }
  html.js:not(.calm) .pro-home .col.in li:nth-child(2) { transition-delay: calc(var(--rd, 0ms) + .47s); }
  html.js:not(.calm) .pro-home .col.in li:nth-child(3) { transition-delay: calc(var(--rd, 0ms) + .54s); }
  html.js:not(.calm) .pro-home .col.in li:nth-child(4) { transition-delay: calc(var(--rd, 0ms) + .61s); }
  html.js:not(.calm) .pro-home .col.in li:nth-child(5) { transition-delay: calc(var(--rd, 0ms) + .68s); }
  html.js:not(.calm) .pro-home .col.in li:nth-child(6) { transition-delay: calc(var(--rd, 0ms) + .75s); }
  /* hover devices: a card lifts off the paper */
  @media (hover: hover) and (pointer: fine) {
    html:not(.calm) .pro-home :is(.probs article, .proj, .site-card, .col):hover { translate: 0 -4px; box-shadow: var(--lift-2); }
    html:not(.calm) .pro-home .probs article:hover { box-shadow: inset 0 3px 0 var(--c, var(--green)), var(--lift-2); }
  }
  /* scroll-linked depth on the painted art and the torn edges: small travel, compositor only, none where unsupported */
  @supports (animation-timeline: view()) {
    html:not(.calm) .pro-home :is(.folio-plate, .col-art) { animation: b-drift linear both; animation-timeline: view(); }
    html:not(.calm) .pro-home .close-field img { animation: b-sink linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
    html:not(.calm) .pro-home :is(.steps, .close, .foot)::before, html:not(.calm) .pro-home .foot::after { animation: b-settle linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    html:not(.calm) .pro-home .foot::before { animation-name: b-draw; }
  }
}
@keyframes b-drift { from { translate: 0 22px; } to { translate: 0 -22px; } }
@keyframes b-sink { from { translate: 0 40px; } to { translate: 0 0; } }
@keyframes b-settle { from { opacity: 0; translate: 0 -16px; } to { opacity: 1; translate: 0 0; } }
@keyframes b-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
/* ==== end PRO fix pass B ==== */

/* Our work on desktop (owner 2026-10-28: "section is too large on pro theme"): the two apps sit side by side as cards like
   the sites below them, each screenshot in the small plate frame, so the section is about one screen shorter */
@media (min-width: 701px) {
  .pro-home .project-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 40px; }
  .pro-home .proj, .pro-home .proj.flip { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0; margin: 0; padding: 54px clamp(44px, 4vw, 58px) 32px; border-radius: 20px; }
  .pro-home .proj .proj-copy, .pro-home .proj.flip .proj-copy { order: 2; margin-top: 58px; }
  .pro-home .proj .win.big img { aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 0; }
  .pro-home .proj-vis::after { inset: -31px -36px -33px -36px; border-width: 50px 55px 52px 55px; border-image-width: 50px 55px 52px 55px; }
  .pro-home #work .group-head { margin-top: 64px; }
  .pro-home .sites { margin-top: 40px; }
}

/* PRO About special design (2026-10-28): "the spread". The page reads as an opened portfolio: the H1 set like a feature
   headline, then the two bios as facing pages (each person's painted art at the head, a running head, the gutter between,
   the camera strap laid across the top), the reasons as a ruled strip under the book, and Tara's posters as a film strip
   in a navy screening room with the full contact sheet in the fold. Motion: the pages open from the gutter, the rules
   draw, the frames slide in as the band arrives; all of it waits for html.js (not calm) and no-preference. */
.pg-about .ab-in { grid-template-columns: minmax(0, 1fr); padding-top: 56px; }
.pg-about .ab-in .sub-copy { max-width: 900px; }
.pg-about .ab-in h1 { font-size: clamp(42px, 6.4vw, 92px); }
.pg-about .hero.inner { padding-bottom: 40px; }
/* the head watercolour fades out on every side, so its paper and the plate edges baked into it (left seam, gold right) never show as a pasted tile */
.pg-about .hero.inner::before { -webkit-mask-image: linear-gradient(90deg, transparent 14%, #000 46%, #000 80%, transparent 92%), linear-gradient(180deg, #000 45%, transparent 90%); mask-image: linear-gradient(90deg, transparent 14%, #000 46%, #000 80%, transparent 92%), linear-gradient(180deg, #000 45%, transparent 90%); }
/* the book lies on a navy desk (owner 2026-10-28: "background same as notebook"): a navy band with torn paper edges, like the reel and the home demo */
.pg-about main #bios { position: relative; margin-top: 70px; padding: 130px 0 120px; background: #121d2b url(/pro/art/navy-768.webp) 0 0 / 768px; }
.pg-about .bios::before, .pg-about .bios::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; height: 120px; top: -60px; pointer-events: none; background: url(/pro/art/deckle-a-1080.webp) 50% 0 / auto 100% repeat-x; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%); mask-image: linear-gradient(180deg, transparent, #000 30%); }
.pg-about .bios::after { top: auto; bottom: -60px; background-image: url(/pro/art/deckle-b-1080.webp); background-position: 50% 100%; -webkit-mask-image: linear-gradient(0deg, transparent, #000 30%); mask-image: linear-gradient(0deg, transparent, #000 30%); }
.pg-about .bios-pts { padding-top: 40px; }
/* the book: two warm white pages lifted off the paper, the leaves under each page peeking at its outer edge */
.pg-about .bios-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; perspective: 2400px; }
.pg-about .bio { display: flex; flex-direction: column; padding: 34px clamp(30px, 4.4vw, 64px) 30px; border-radius: 0; background: url(/pro/art/paper-768.webp) 0 0 / 768px, #fbf9f4; }
.pg-about .b-tara { border-radius: 8px 0 0 8px; transform-origin: 100% 50%; background-image: linear-gradient(90deg, transparent 84%, rgba(70, 52, 24, .07) 95%, rgba(70, 52, 24, .16)), url(/pro/art/paper-768.webp);
  box-shadow: -3px 3px 0 -1px #f1ede4, -6px 6px 0 -2px #e7e2d7, 0 1px 2px rgba(0, 0, 0, .25), -18px 48px 80px -36px rgba(0, 0, 0, .75); }
.pg-about .b-eren { border-radius: 0 8px 8px 0; transform-origin: 0 50%; background-image: linear-gradient(270deg, transparent 84%, rgba(70, 52, 24, .07) 95%, rgba(70, 52, 24, .16)), url(/pro/art/paper-768.webp);
  box-shadow: 3px 3px 0 -1px #f1ede4, 6px 6px 0 -2px #e7e2d7, 0 1px 2px rgba(0, 0, 0, .25), 18px 48px 80px -36px rgba(0, 0, 0, .75); }
.pg-about .bio::before { display: none; }
/* the gutter crease */
.pg-about .bios-grid::after { content: ""; position: absolute; z-index: 1; left: calc(50% - 1px); top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, transparent, rgba(70, 52, 24, .22) 8%, rgba(70, 52, 24, .22) 92%, transparent); pointer-events: none; }
/* the camera strap laid across the top of the book, its loop on the gutter */
/* running head: the name and the trade at the top of each page, on a hairline */
.pg-about .bio .tag { position: static; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 16px; padding: 0 0 12px; border-radius: 0; background: none; box-shadow: none; border-bottom: 1px solid rgba(36, 52, 74, .2); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #3d4c60; animation: none; white-space: normal; }
.pg-about .bio .tag::before { display: none; }
.pg-about .bio .tag b { font-size: 12px; color: var(--pink-d); }
.pg-about .b-eren .tag { flex-direction: row-reverse; }
.pg-about .b-eren .tag b { color: var(--green-d); }
.pg-about .pg-art { margin: 28px auto 6px; width: min(100%, 460px); }
.pg-about .pg-art img { display: block; width: 100%; height: auto; aspect-ratio: 720 / 474; object-fit: contain; object-position: 50% 100%; }
/* the ink rule under the art */
.pg-about .pg-art::after { content: ""; display: block; height: 14px; margin: 18px auto 0; width: 82%; background: url(/pro/art/rule-720.webp) 50% 50% / 100% auto no-repeat; }
.pg-about .bio h2 { margin: 6px 0 14px; font-size: clamp(56px, 5.4vw, 80px); }
.pg-about .bio-k { margin-top: 18px; }
.pg-about .bio-t { color: #24344a; font-size: 17.5px; line-height: 1.7; }
.pg-about .bio-t strong { color: var(--ink); }
.pg-about .bio-links { margin-top: auto; padding-top: 14px; }
/* the reasons: a ruled strip under the book, four columns between hairlines */
.pg-about .bios-pts .pts { position: relative; gap: 0; margin: 64px 0 0; padding: 30px 0; }
.pg-about .bios-pts .pts::before, .pg-about .bios-pts .pts::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(36, 52, 74, .3); transform-origin: 0 50%; }
.pg-about .bios-pts .pts::after { top: auto; bottom: 0; transform-origin: 100% 50%; }
.pg-about .bios-pts .pts li { padding: 0 28px; color: #24344a; font-size: 15.5px; }
.pg-about .bios-pts .pts li + li { border-left: 1px solid rgba(36, 52, 74, .16); }
.pg-about .bios-pts .pts li:first-child { padding-left: 0; }

/* the screening room: navy card stock, the corner light, deckle tears in from the paper and back out */
.pg-about .reel { position: relative; margin: 96px 0 120px; padding: 130px 0 120px; overflow: clip visible; color: #fff; background: url(/pro/art/corner-520.webp) -40px 16px / 480px no-repeat, #121d2b url(/pro/art/navy-768.webp) 0 0 / 768px; }
.pg-about .reel::before, .pg-about .reel::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; height: 120px; top: -60px; pointer-events: none; background: url(/pro/art/deckle-a-1080.webp) 50% 0 / auto 100% repeat-x; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%); mask-image: linear-gradient(180deg, transparent, #000 30%); }
.pg-about .reel::after { top: auto; bottom: -60px; background-image: url(/pro/art/deckle-b-1080.webp); background-position: 50% 100%; -webkit-mask-image: linear-gradient(0deg, transparent, #000 30%); mask-image: linear-gradient(0deg, transparent, #000 30%); }
.pg-about .reel .eyebrow { color: #c9d6e3; }
.pg-about .reel h2 { color: #fff; }
.pg-about .reel .sub { color: #dfe7ef; }
/* the film strip: one row of frames end to end, the full width of the band, scrolled natively and snapped per frame */
.pg-about .shelf { position: relative; margin: 52px calc(50% - 50vw) 0; padding: 0; perspective: none; background: radial-gradient(70% 70% at 50% 42%, rgba(214, 226, 238, .5), rgba(214, 226, 238, .18) 60%, transparent 85%); } /* the projector light behind the strip shows through the sprocket holes */
.pg-about .shelf .posters { display: flex; gap: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: max(32px, 50vw - 568px); padding: 6px max(32px, 50vw - 568px) 10px; scrollbar-width: none; transform: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
.pg-about .shelf .posters::-webkit-scrollbar { display: none; }
.pg-about .shelf .posters li { flex: 0 0 212px; translate: none; scroll-snap-align: start; }
.pg-about .shelf .posters figure { padding: 9.88% 17.38% 0; background: url(/pro/art/film-294.webp) 50% 0 / 100% auto no-repeat; }
.pg-about .shelf .posters img { aspect-ratio: 383 / 612; border-radius: 0; box-shadow: none; }
.pg-about .shelf .posters figure::after { display: none; }
.pg-about .shelf .posters figcaption { margin: 15.3% -26.6% 0; padding: 0 12px; min-height: 2.6em; text-align: center; color: #dfe7ef; }
/* prev / next (main.js adds them): they share a row with "See all", at its right */
.pg-about .sn { position: relative; z-index: 1; display: flex; justify-content: flex-end; gap: 10px; margin: 30px 0 -52px; pointer-events: none; }
.pg-about .sn button { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; pointer-events: auto; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .6); transition: opacity .2s, transform .2s var(--ease); }
.pg-about .sn button[aria-disabled="true"] { opacity: .35; cursor: default; }
.pg-about .sn button:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
@media (hover: hover) { .pg-about .sn button:not([aria-disabled="true"]):hover { transform: scale(1.06); } }
.pg-about .reel .more { margin-top: 3px; }
.pg-about .reel .more summary:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
/* the contact sheet in the fold */
.pg-about .posters.sm { margin-top: 40px; }
.pg-about .posters.sm figcaption { color: #dfe7ef; }
.pg-about .posters.sm img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
.pg-about .pp:focus-visible { outline-color: var(--green); }
@media (min-width: 1101px) {
  .pg-about .reel .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 64px; }
  .pg-about .reel .sec-head { align-self: center; }
  .pg-about .reel .body-still { display: block; margin: 31px 36px 33px; }
  .pg-about .reel :is(.shelf, .sn, .more) { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .pg-about .bio { padding-inline: 30px; }
  .pg-about .bios-pts .pts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .pg-about .bios-pts .pts li:nth-child(odd) { padding-left: 0; border-left: 0; }
  /* the small corner light, clear of the eyebrow */
  .pg-about .reel { background: url(/pro/art/corner-300.webp) -40px -8px / 240px no-repeat, #121d2b url(/pro/art/navy-768.webp) 0 0 / 768px; }
}
/* phones: the pages become a swipeable pair (the Tara | Eren tabs above follow and steer it), the strip a touch row */
@media (max-width: 700px) {
  .pg-about .ab-in { padding-top: 30px; }
  .pg-about .hero.inner { padding-bottom: 20px; }
  .pg-about main #bios { margin-top: 40px; padding: 56px 0 40px; background-image: url(/pro/art/navy-512.webp); background-size: 512px; }
  .pg-about .bios::before, .pg-about .bios::after { height: 64px; top: -32px; background-image: url(/pro/art/deckle-a-560.webp); }
  .pg-about .bios::after { top: auto; bottom: -32px; background-image: url(/pro/art/deckle-b-560.webp); }
  .pg-about .bios-pts { padding-top: 24px; }
  .pg-about .bios-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px; margin: 0 -20px; padding: 6px 20px 26px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; perspective: none; }
  .pg-about .bios-grid::-webkit-scrollbar { display: none; }
  .pg-about .bios-grid::after { display: none; }
  .pg-about .bio { scroll-snap-align: start; padding: 22px 20px 12px; }
  .pg-about .b-tara, .pg-about .b-eren { border-radius: 8px; box-shadow: 0 1px 2px rgba(60, 45, 20, .1), 0 22px 40px -28px rgba(13, 27, 42, .5); }
  .pg-about .b-tara { background-image: url(/pro/art/paper-512.webp); background-size: 512px; }
  .pg-about .b-eren { background-image: url(/pro/art/paper-512.webp); background-size: 512px; }
  .pg-about .pg-art { margin: 18px auto 0; width: 92%; }
  .pg-about .pg-art::after { margin-top: 12px; height: 10px; }
  .pg-about .bio h2 { font-size: 44px; margin: 4px 0 10px; }
  .pg-about .bio-k { margin-top: 12px; }
  .pg-about .bio-t { font-size: 16px; line-height: 1.62; }
  .pg-about .fx-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin: 0 0 12px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 12px 26px -20px rgba(13, 27, 42, .45); }
  .pg-about .fx-seg::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--ink); transition: transform .35s var(--ease); }
  .pg-about .fx-seg[data-on="1"]::before { transform: translateX(100%); }
  .pg-about .fx-seg button { position: relative; z-index: 1; min-height: 46px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 16px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: color .3s; }
  .pg-about .fx-seg button[aria-pressed="true"] { color: #fff; }
  .pg-about .fx-seg button:focus-visible { outline: 2px solid var(--green-d); outline-offset: 2px; }
  .pg-about .bios-pts .pts { margin-top: 26px; padding: 22px 0; gap: 22px 0; }
  .pg-about .bios-pts .pts li { padding: 0 14px; font-size: 14.5px; line-height: 1.5; }
  .pg-about .bios-pts .pts li:nth-child(even) { padding-right: 0; }
  .pg-about .reel { margin: 60px 0 100px; padding: 64px 0 60px; background: url(/pro/art/corner-300.webp) -40px -8px / 240px no-repeat, #121d2b url(/pro/art/navy-512.webp) 0 0 / 512px; }
  .pg-about .reel::before, .pg-about .reel::after { height: 64px; top: -32px; background-image: url(/pro/art/deckle-a-560.webp); }
  .pg-about .reel::after { top: auto; bottom: -32px; background-image: url(/pro/art/deckle-b-560.webp); }
  .pg-about .reel .sub { font-size: 16px; }
  .pg-about .shelf { margin-top: 30px; }
  .pg-about .shelf .posters { padding-inline: 20px; scroll-padding-inline: 20px; -webkit-mask-image: none; mask-image: none; }
  .pg-about .shelf .posters li { flex-basis: 150px; }
  .pg-about .shelf .posters figcaption { font-size: 12px; }
  /* left on phones: the floating back-to-top button sits at the bottom right and would cover Next */
  .pg-about .sn { justify-content: flex-start; margin: 22px 0 14px; }
  .pg-about .sn button { width: 48px; height: 48px; }
  .pg-about .reel .more { margin-top: 1px; }
  /* prev / next sit on their own row above, so the long Turkish label gets the full width and may wrap */
  .pg-about .reel .more summary { min-height: 52px; padding-block: 8px; white-space: normal; text-align: center; }
  .pg-about .hero.inner::before { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .4) 70%, transparent 95%), linear-gradient(180deg, #000 35%, transparent 85%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .4) 70%, transparent 95%), linear-gradient(180deg, #000 35%, transparent 85%); }
  .pg-about .posters.sm { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; margin-top: 24px; }
  .pg-about .posters.sm figcaption { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  /* the pages open from the gutter: each leaf swings flat from a slight fold, Eren a beat after Tara */
  :where(html.js:not(.calm)) .pg-about .bio.rv { opacity: 1; transform: none; transition: transform 1.1s var(--ease-out), opacity .5s var(--ease-out); }
  :where(html.js:not(.calm)) .pg-about .b-eren.rv { transition-delay: .12s; }
  :where(html.js:not(.calm)) .pg-about .b-tara.rv:not(.in) { opacity: 0; transform: rotateY(24deg); }
  :where(html.js:not(.calm)) .pg-about .b-eren.rv:not(.in) { opacity: 0; transform: rotateY(-24deg); }
  :where(html.js:not(.calm)) .pg-about .bios-grid::after { transition: transform .9s var(--ease-io) .2s; transform-origin: 50% 0; }
  :where(html.js:not(.calm)) .pg-about .bios-grid:not(:has(.bio.in))::after { transform: scaleY(0); }
  :where(html.js:not(.calm)) .pg-about .pg-art::after { transition: clip-path .9s var(--ease-io) .7s; }
  :where(html.js:not(.calm)) .pg-about .bio.rv:not(.in) .pg-art::after { clip-path: inset(0 100% 0 0); }
  :where(html.js:not(.calm)) .pg-about .bios-pts .pts::before, :where(html.js:not(.calm)) .pg-about .bios-pts .pts::after { transition: transform 1s var(--ease-io); }
  :where(html.js:not(.calm)) .pg-about .bios-pts .pts::after { transition-delay: .25s; }
  :where(html.js:not(.calm)) .pg-about .bios-pts .pts:not(:has(.in))::before, :where(html.js:not(.calm)) .pg-about .bios-pts .pts:not(:has(.in))::after { transform: scaleX(0); }
  /* the frames slide in from the right as the band arrives */
  :where(html.js:not(.calm)) .pg-about .shelf.rv { opacity: 1; transform: none; }
  :where(html.js:not(.calm)) .pg-about .shelf.rv li { transition: transform .9s var(--ease-out), opacity .6s var(--ease-out); }
  :where(html.js:not(.calm)) .pg-about .shelf.rv:not(.in) li { opacity: 0; transform: translate3d(140px, 0, 0); }
  :where(html.js:not(.calm)) .pg-about .shelf.rv li:nth-child(2) { transition-delay: .06s; }
  :where(html.js:not(.calm)) .pg-about .shelf.rv li:nth-child(3) { transition-delay: .12s; }
  :where(html.js:not(.calm)) .pg-about .shelf.rv li:nth-child(4) { transition-delay: .18s; }
  :where(html.js:not(.calm)) .pg-about .shelf.rv li:nth-child(5) { transition-delay: .24s; }
  :where(html.js:not(.calm)) .pg-about .shelf.rv li:nth-child(n+6) { transition-delay: .3s; }
}

/* Our work as one row of small cards (owner 2026-10-28: "Our work / Real projects you can click. / still too long section"):
   the two apps and the two sites side by side under their group names, two by two below 1101 px; phones keep their own layout */
@media (min-width: 701px) {
  .pro-home #work .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
  .pro-home #work :is(.project-strip, .sites) { display: contents; }
  .pro-home #work :is(.sec-head, .group-head) { grid-column: 1 / -1; }
  .pro-home #work .group-head { margin: 40px 0 20px; }
  .pro-home #work :is(.proj, .proj.flip, .site-card) { display: flex; flex-direction: column; align-items: stretch; margin: 0; padding: 14px 14px 16px; border-radius: 18px; }
  .pro-home #work .proj-vis::after { display: none; }
  .pro-home #work :is(.proj .win.big, .sites .win) { border-radius: 10px; box-shadow: 0 0 0 1px rgba(13, 27, 42, .08), 0 12px 24px -16px rgba(13, 27, 42, .4); }
  .pro-home #work .win img { aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; }
  .pro-home #work :is(.proj-copy, .sc-copy) { flex: 1; display: flex; flex-direction: column; align-items: flex-start; margin: 16px 0 0; padding: 0 6px; }
  .pro-home #work :is(.proj, .site-card) h4 { font-size: 24px; }
  .pro-home #work :is(.proj-copy, .sc-copy) > p:not(.kind) { margin-top: 6px; font-size: 16px; line-height: 1.5; }
  .pro-home #work :is(.links, .sc-copy > .lnk) { margin-top: auto; padding-top: 6px; }
  .pro-home #work .links { gap: 0 16px; }
  .pro-home #work .lnk { font-size: 15px; }
}
@media (min-width: 1101px) {
  .pro-home #work .wrap { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pro-home #work .group-head { grid-row: 2; grid-column: 1 / 3; }
  .pro-home #work .group-head ~ .group-head { grid-column: 3 / 5; }
  .pro-home #work :is(.proj, .site-card) { grid-row: 3; }
}

/* ==== SHOWPIECE (2026-10-28, branch pro-show): PRO home motion and composition. Display face on --display (Clash Display 700,
   the owner's pick). Hidden start states wait for html.js (set by main.js only when motion is on) and for the split spans main.js adds;
   html.calm and prefers-reduced-motion show everything still. Phones get the CSS reveals and the scroll-driven bits only. ==== */
:root { --display: "Clash Display", "IS", "IS Fallback", system-ui, sans-serif; --display-w: 700; --ease-x: cubic-bezier(.16, 1, .3, 1); --t0: .05s; }
.pro-home :is(h1, h2, .bignum, .proj h4, .sc-copy h4, .probs h3, .say, .group-head h3, .track h3, .call-h) { font-family: var(--display); font-weight: var(--display-w); }
.pro-home h1 { font-size: clamp(46px, 6vw, 88px); line-height: .95; letter-spacing: -.005em; }
.pro-home h2 { font-size: clamp(34px, 4.6vw, 62px); line-height: 1; letter-spacing: -.005em; }
@media (max-width: 700px) { :where(.pro-home) #top h1 { letter-spacing: -.005em; } }
.pro-home .bignum { letter-spacing: -.005em; }
.pro-home :is(.proj h4, .sc-copy h4, .probs h3, .say, .group-head h3, .track h3) { letter-spacing: 0; }
@media (min-width: 1101px) { .pro-home .hero-copy { position: relative; z-index: 3; max-width: none; } .pro-home #top h1 { width: calc(100% + 110px); max-width: 680px; font-size: clamp(58px, 4.9vw, 76px); } }
/* tablets and small laptops (owner 2026-10-29: "doesnt look like you care about all viewports"): the headline and the plate stay side by
   side from 821px, both sized to the width, the plate inside the page */
@media (min-width: 821px) and (max-width: 1279.98px) {
  .pro-home .hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 36px; align-items: center; padding-top: 40px; }
  .pro-home .hero-copy { padding-top: 0; max-width: none; }
  .pro-home #top h1 { width: auto; max-width: none; font-size: clamp(42px, 5.1vw, 62px); }
  .pro-home .folio-plate { width: 100%; justify-self: stretch; margin: 0; }
}

/* hero (owner 2026-10-28: "hero still looks so empty.. smt is missing"): an intro line under the headline; phones skip it */
.pro-home #top .lede { max-width: 33em; margin: 24px 0 0; font-size: 18px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.pro-home #top .ctas { margin-top: 30px; }
@media (max-width: 700px) {
  .pro-home #top .lede { display: none; }
  .pro-home #top .ctas { margin-top: 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.calm) .pro-home #top .lede { animation: sp-fade .8s var(--ease-x) calc(var(--t0) + .6s) both; }
}

/* hero facts (owner 2026-10-28: "these are so bland"): each leads with a bold phrase in the display face over its colour bar, which draws in on arrival */
.pro-home #top .facts li { padding: 20px 26px 4px 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.pro-home #top .facts li::before { display: block; top: -1px; width: 44px; height: 3px; transform-origin: 0 50%; }
.pro-home #top .facts b { display: block; margin-bottom: 6px; font: var(--display-w) clamp(26px, 2.5vw, 38px)/1.02 var(--display); letter-spacing: -.005em; color: var(--ink); }
@media (max-width: 700px) { .pro-home #top .facts li { padding: 12px 0 8px; font-size: 13.5px; } .pro-home #top .facts b { margin-bottom: 4px; font-size: 22px; } }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.calm) .pro-home #top .facts li::before { transform: scaleX(0); transition: transform .8s var(--ease-x) calc(var(--rd, 0ms) + .25s); }
  html.js:not(.calm) .pro-home #top .facts li.in::before { transform: none; }
}

/* split headings (main.js wraps each word: .w is the mask, .wi the word) */
:is(.pro-home, .pg) .sp .w { display: inline-block; overflow: clip; vertical-align: top; padding: .08em .06em .2em; margin: -.08em -.06em -.2em; }
/* the masks' side margins (-.06em each) would eat most of a space between words, so the split heading gets it back */
:is(.pro-home, .pg) .sp { word-spacing: .12em; }
:is(.pro-home, .pg) .sp .wi { display: inline-block; }
@property --fill { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --r { syntax: "<percentage>"; inherits: false; initial-value: 130%; }
@keyframes sp-rise { from { transform: translate3d(0, 112%, 0) rotate(5deg); } }
@keyframes sp-ink { from { --fill: 0%; } to { --fill: 100%; } }
@keyframes sp-fade { from { opacity: 0; transform: translate3d(0, 16px, 0); } }
@keyframes sp-unhide { to { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  /* hero: the headline waits for its split (or 1.6 s, if the script stops), then each word rises out of its line */
  html:is(.js, .sp-wait):not(.calm) :is(.pro-home, .pg) #top h1:not(.sp) { opacity: 0; animation: sp-unhide 0s 1.6s forwards; }
  html.js:not(.calm) :is(.pro-home, .pg) #top h1.sp .wi { animation: sp-rise 1.05s var(--ease-x) calc(var(--t0) + .1s + var(--i) * 60ms) both; }
  /* desktop: the words come up filled with the owners' ink burst, then ink writes over each one, left to right */
  html.js:not(.calm) .pro-home #top h1.sp.paint .wi { color: transparent; background: linear-gradient(var(--ink), var(--ink)) 0 0 / var(--fill) 100% no-repeat, url(/pro/art/close-1536.webp) var(--bx) var(--by) / var(--bw) auto no-repeat; -webkit-background-clip: text; background-clip: text;
    animation: sp-rise 1.05s var(--ease-x) calc(var(--t0) + .1s + var(--i) * 60ms) both, sp-ink .7s var(--ease-io) calc(var(--t0) + .95s + var(--i) * 60ms) both; }
  html.js .pro-home #top h1.sp.inked .wi { color: inherit; background: none; }
  html.js:not(.calm) .pro-home #top :is(.kicker, .ctas) { animation: sp-fade .8s var(--ease-x) calc(var(--t0) + .05s) both; }
  html.js:not(.calm) .pro-home #top .ctas { animation-delay: calc(var(--t0) + .75s); }
  /* section heads: the words rise as the head arrives (main.js .rv/.in) */
  html.js:not(.calm) .pro-home main h2.sp .wi { transform: translate3d(0, 112%, 0) rotate(5deg); transition: transform 1s var(--ease-x) calc(.06s + var(--i) * 45ms); }
  html.js:not(.calm) .pro-home main .in h2.sp .wi { transform: none; }
  html.js .pro-home .sec-head.rv > h2.sp { opacity: 1; transform: none; }
}

/* hero plate, wide screens: the painting opens from a soft round mask, the bunnies drop in and settle (owner 2026-10-28 took the seal off the plate: "remove this") */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  html.js:not(.calm) .pro-home .fp-img {
    -webkit-mask-image: radial-gradient(circle at 60% 68%, #000 var(--r), transparent calc(var(--r) + 24%)), linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent); -webkit-mask-composite: source-in, source-in;
    mask-image: radial-gradient(circle at 60% 68%, #000 var(--r), transparent calc(var(--r) + 24%)), linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent); mask-composite: intersect;
    animation: plate-open 1.9s cubic-bezier(.55, 0, .2, 1) var(--t0) both; }
  html.js:not(.calm) .pro-home .fp-wash::before { animation: fp-in 1.4s var(--ease-out) calc(var(--t0) + .3s) both, fp-drift 24s ease-in-out calc(var(--t0) + 1.7s) infinite alternate; }
  html.js:not(.calm) .pro-home .fp-duo { animation: duo-drop 1.1s cubic-bezier(.3, 1.45, .45, 1) calc(var(--t0) + .7s) both; transform-origin: 50% 100%; }
}
@keyframes plate-open { from { --r: 0%; transform: scale(1.07); } to { --r: 130%; transform: none; } }
@keyframes duo-drop { 0% { opacity: 0; transform: translate3d(0, -46px, 0) scale(.94, 1.04); } 55% { opacity: 1; transform: translate3d(0, 4px, 0) scale(1.03, .96); } 100% { transform: none; } }
/* phones: the plate just fades up */
@media (max-width: 899.98px) and (prefers-reduced-motion: no-preference) {
  html.js:not(.calm) .pro-home .folio-plate { animation: sp-fade .9s var(--ease-x) .25s both; }
}

/* the one-time intro (desktop, once per session; the head script sets html.intro-pre before the first paint, main.js skips and ends it):
   a navy sheet with the seal lifts off the page on its torn edge. It never takes a click and ends on its own if the script stops */
html.intro-pre { --t0: .62s; }
html.intro-pre body.pro-home::before, html.intro-pre body.pro-home::after { content: ""; position: fixed; z-index: 300; pointer-events: none; animation: intro-up .7s cubic-bezier(.7, 0, .2, 1) .42s forwards; }
html.intro-pre body.pro-home::before { left: 0; right: 0; top: 0; height: 100vh; background: url(/pro/logo-132.webp) 50% calc(50% - 2px) / 58px auto no-repeat, url(/pro/art/seal-264.webp) 50% 50% / 132px no-repeat, #121d2b url(/pro/art/navy-768.webp) 0 0 / 768px; }
html.intro-pre body.pro-home::after { left: -40px; right: -40px; top: calc(100vh - 40px); height: 150px; background: url(/pro/art/deckle-b-1080.webp) 50% 100% / auto 100% repeat-x; }
html.intro-skip body.pro-home::before, html.intro-skip body.pro-home::after { animation: intro-out .2s ease forwards; }
html:is(.intro-done, .calm) body.pro-home::before, html:is(.intro-done, .calm) body.pro-home::after { display: none; }
@keyframes intro-up { to { transform: translate3d(0, calc(-100vh - 200px), 0); } }
@keyframes intro-out { to { opacity: 0; } }

/* scroll-driven storytelling (compositor-run where supported; phones too): torn edges slide like loose sheets,
   the navy bands are laid on the paper, the ink burst blooms, the hero plate leans in as it leaves */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html.js:not(.calm) .pro-home .demo#demo::before, html.js:not(.calm) .pro-home .demo#demo::after, html.js:not(.calm) .pro-home .ache::before, html.js:not(.calm) .pro-home .ache::after,
    html.js:not(.calm) .pro-home .steps::before, html.js:not(.calm) .pro-home .foot::after,
    html.js:not(.calm) .pg .close::before, html.js:not(.calm) .pv-sec::before, html.js:not(.calm) .pv-sec::after, html.js:not(.calm) .pg-about .bios::before, html.js:not(.calm) .pg-about .bios::after, html.js:not(.calm) .pg-about .reel::before, html.js:not(.calm) .pg-about .reel::after { left: -90px; right: -90px; opacity: 1; animation: edge-slide linear both; animation-timeline: view(); animation-range: cover; }
    html.js:not(.calm) .pro-home .demo#demo::after, html.js:not(.calm) .pro-home .ache::after, html.js:not(.calm) .pv-sec::after, html.js:not(.calm) .pg-about :is(.bios, .reel)::after { animation-direction: reverse; }
    html.js:not(.calm) :is(.pro-home, .pg) .close-field img { transform-origin: 50% 100%; animation: ink-bloom linear both; animation-timeline: view(); animation-range: entry 0% cover 62%; }
    html.js:not(.calm) .pro-home .cred .bignum span { animation: num-swell linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; transform-origin: 0 100%; }
  }
  @supports (animation-timeline: scroll()) {
    @media (min-width: 900px) {
      html.js:not(.calm) .pro-home .folio-plate { animation: plate-lean linear both; animation-timeline: scroll(root); animation-range: 0px 900px; }
      html.js:not(.calm) .pro-home .hero-copy { animation: copy-lift linear both; animation-timeline: scroll(root); animation-range: 0px 900px; }
      html.js:not(.calm) .pro-home .fp-duo { animation: duo-drop 1.1s cubic-bezier(.3, 1.45, .45, 1) calc(var(--t0) + .7s) both, duo-depth linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0px 900px; }
    }
  }
  @supports (animation-timeline: view()) {
    @media (min-width: 701px) {
      html.js:not(.calm) .pro-home :is(.demo#demo, .steps#process) { transform-origin: 0 0; animation: sheet-lay linear both; animation-timeline: view(); animation-range: entry 0% entry 85%; }
      html.js:not(.calm) .pro-home .steps#process { transform-origin: 100% 0; animation-name: sheet-lay-r; }
      html.js:not(.calm) .pg-about :is(#bios, .reel) { transform-origin: 0 0; animation: sheet-lay linear both; animation-timeline: view(); animation-range: entry 0% entry 85%; }
      html.js:not(.calm) .pg-about .reel { transform-origin: 100% 0; animation-name: sheet-lay-r; }
    }
  }
}
@keyframes edge-slide { from { translate: -70px 0; } to { translate: 70px 0; } }
@keyframes ink-bloom { from { opacity: .25; transform: translate3d(0, 22%, 0) scale(.72, .6); } to { opacity: 1; transform: none; } }
@keyframes num-swell { from { scale: .8; opacity: .3; } to { scale: 1; opacity: 1; } }
@keyframes plate-lean { to { scale: 1.07; translate: 0 70px; } }
@keyframes copy-lift { to { translate: 0 -90px; opacity: .15; } }
@keyframes duo-depth { to { translate: 0 -46px; } }
@keyframes sheet-lay { from { transform: translate3d(0, 120px, 0) rotate(-2.2deg); } to { transform: none; } }
@keyframes sheet-lay-r { from { transform: translate3d(0, 120px, 0) rotate(2.2deg); } to { transform: none; } }

/* Headaches (owner 2026-10-31: "Yes, show them"): each card shows its question, sentence and checklist at rest, the checklist on the
   card's bottom line (the sentence row takes the spare height). On arrival the cards are dealt in. Phones keep their list. */
@media (min-width: 701px) {
  .pro-home .ache .probs { margin-top: 36px; }
  .pro-home .ache .probs article { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; }
  .pro-home .ache .probs article > * { grid-column: 1; }
  .pro-home .ache .probs article > .num { grid-row: 1; }
  .pro-home .ache .probs h3 { grid-row: 2; margin: 8px 0 0; font-size: 26px; line-height: 1.08; }
  .pro-home .ache .probs article > p { grid-row: 3; margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink); }
  .pro-home .ache .probs ul { grid-row: 4; align-content: start; margin: 16px 0 0; padding-top: 18px; }
}
@media (min-width: 701px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  html.js:not(.calm) .pro-home .ache .probs article { transform-origin: 50% 100%; }
  html.js:not(.calm) .pro-home .ache .probs article.rv { transition: opacity .45s var(--ease-io) calc(var(--rd, 0ms) * 1.6), transform 1.1s var(--ease-x) calc(var(--rd, 0ms) * 1.6), translate .4s var(--ease-x), box-shadow .3s; }
  html.js:not(.calm) .pro-home .ache .probs article.rv:not(.in) { transform: translate3d(0, 110px, 0) rotate(var(--deal, -5deg)) scale(.9); }
  html.js:not(.calm) .pro-home .ache .probs article:nth-child(even) { --deal: 5deg; }
  html.js:not(.calm) .pro-home .ache .probs article.in:hover { translate: 0 -8px; }
}

/* Our work, fine pointer: the card lifts and leans to the hand (main.js sets rotate), the live sites scroll inside their window,
   the app screenshots drift down theirs */
@media (min-width: 701px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.js:not(.calm) .pro-home #work .wrap { perspective: 1800px; }
  html.js:not(.calm) .pro-home #work :is(.proj, .site-card) { transition: opacity .5s var(--ease) var(--rd, 0ms), transform .8s var(--ease) var(--rd, 0ms), translate .5s var(--ease-out), rotate .7s var(--ease-out), box-shadow .5s var(--ease); }
  html.js:not(.calm) .pro-home #work :is(.proj, .site-card):hover { translate: 0 -10px; transition: opacity .5s var(--ease) var(--rd, 0ms), transform .8s var(--ease) var(--rd, 0ms), translate .5s var(--ease-out), rotate .25s ease-out, box-shadow .5s var(--ease); }
  .pro-home #work .win .bar { position: relative; z-index: 2; }
  .pro-home #work .win .tall { position: absolute; z-index: 1; left: -5.52%; top: 28px; width: 111.04%; max-width: none; height: auto; aspect-ratio: auto; object-fit: fill; opacity: 0; transition: opacity .3s ease .9s, transform 1.1s var(--ease-io); }
  html.js:not(.calm) .pro-home #work .site-card:hover .win .tall.ld { opacity: 1; transform: translate3d(0, calc(-100% + var(--vh, 170px)), 0); transition: opacity .2s ease, transform 7s cubic-bezier(.4, 0, .3, 1) .25s; }
  html.js:not(.calm) .pro-home #work .proj .win img { transition: object-position 1.2s var(--ease-io), opacity .45s ease, transform .3s cubic-bezier(.17, .89, .32, 1.27); }
  html.js:not(.calm) .pro-home #work .proj:hover .win img { object-position: 50% 100%; transition: object-position 4s cubic-bezier(.4, 0, .3, 1) .2s, opacity .45s ease, transform .3s cubic-bezier(.17, .89, .32, 1.27); }
}

/* the film wall: the scroll's speed runs the film (main.js seeks the loops) and leans the wall (--sk) */
.pro-home .wall { transform: skewY(calc(var(--sk, 0) * 1deg)); transition: transform .5s var(--ease-out); }
html.calm .pro-home .wall { transform: none; }

/* buttons, fine pointer: an ink fill sweeps in from where the pointer entered (main.js --px/--py); the existing magnet pulls */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* the sweep is always a lighter tone than the button and the button lifts 2px, never goes dark
     (owner 2026-10-29: "hovering on buttons like book your free call makes them dark. it needs to be better bro") */
  html:not(.calm) :is(.pro-home, .pg) .btn { --sweep: var(--green); transition: box-shadow .2s, transform .22s var(--ease-out), translate .5s var(--ease-io), color .3s ease; }
  html:not(.calm) :is(.pro-home, .pg) .btn:hover { transform: translateY(-2px); }
  html:not(.calm) :is(.pro-home, .pg) .btn-ink:hover { color: var(--ink); }
  html:not(.calm) :is(.pro-home, .pg) .btn-ghost { --sweep: #fff; }
  html:not(.calm) :is(.pro-home, .pg) .btn-light { --sweep: var(--green); }
  html:not(.calm) :is(body.pro-home :is(header .btn-ink, #top .btn-ink, #contact .btn-light), body.pg .close .btn-light) { --sweep: #7ee6bf; }
  html:not(.calm) :is(body.pro-home #contact .btn-light, body.pro-home #top .btn-ghost, body.pg .close .btn-light)::after { box-shadow: inset 0 0 0 1.5px var(--ink); }
  html:not(.calm) body.pro-home #top .btn-ghost { --sweep: #d8f3e8; }
  html:not(.calm) :is(body.pro-home #contact, body.pg .close) .btn-light:hover::before { box-shadow: inset 0 0 0 1.5px var(--ink), 0 6px 0 var(--ink); }
  html:not(.calm) :is(.pro-home, .pg) .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--sweep); clip-path: circle(0 at var(--px, 0%) var(--py, 50%)); transition: clip-path .45s var(--ease-out); }
  html:not(.calm) :is(.pro-home, .pg) .btn:hover::after { clip-path: circle(160% at var(--px, 0%) var(--py, 50%)); transition-duration: .6s; }
  /* the base pill stays put under the sweep (it used to widen 4% and show at the sides), and the sweep is 1px larger so no base colour rims it
     (owner 2026-10-28: "look at the sides of buttons when hovered") */
  html:not(.calm) :is(.pro-home, .pg) .btn:hover::before { transform: none; }
  html:not(.calm) :is(.pro-home, .pg) .btn::after { inset: -1px; }
  html:not(.calm) :is(.pro-home, .pg) .btn-ghost:hover { color: var(--ink); }
  html:not(.calm) :is(.pro-home, .pg) a.btn.btn-ghost { translate: var(--bx, 0) var(--by, 0); }
}

/* inner pages (owner 2026-10-28: "do the other pages too"): the home's display face on their headings; the hero line rises word by word
   with the rest of the hero after it, section heads rise as they arrive (main.js .sp, .in on the h2 itself), and the head art fades in */
.pg :is(h1, h2, h4, .case h3, .svc-card h3, .q h3, .bignum, .post-mail, .pts b) { font-family: var(--display); font-weight: var(--display-w); letter-spacing: -.005em; }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.calm) .pg #top .kicker { animation: sp-fade .8s var(--ease-x) .05s both; }
  html.js:not(.calm) .pg #top :is(h1 ~ *, .axis-back) { animation: sp-fade .9s var(--ease-x) .55s both; }
  html.js:not(.calm) .pg #top h1 ~ * + * { animation-delay: .7s; }
  html.js:not(.calm) .pg .hero.inner::before { animation: sp-fade 1.4s var(--ease-out) .15s both; }
  html.js:not(.calm) .pg main h2.sp .wi { transform: translate3d(0, 112%, 0) rotate(5deg); transition: transform 1s var(--ease-x) calc(.06s + var(--i) * 45ms); }
  html.js:not(.calm) .pg main h2.sp.in .wi { transform: none; }
}
/* ==== end SHOWPIECE ==== */

/* ==== STICKY HEADER (owner 2026-10-28: "all header should be sticky, I told you this before dude"): the header stays at the top of every PRO page, EN and TR.
   It lives inside the hero (overflow: clip), so it is fixed, and the hero keeps its room with the same padding; the paper fills in behind it once
   the page moves (main.js html.top-on). The page's own sticky parts sit below it (--top-h). ==== */
:is(.pro-home, .pg) { --top-h: 80px; }
html:has(> body:is(.pro-home, .pg)) { scroll-padding-top: 80px; }
:is(.pro-home, .pg) .hero { padding-top: var(--top-h); }
:is(.pro-home, .pg) .hero > .top { position: fixed; z-index: 60; top: 0; left: 0; right: 0; width: auto; max-width: none; padding-inline: max(32px, calc(50% - 568px)); border-radius: 0; transition: top .4s var(--ease-out), left .4s var(--ease-out), right .4s var(--ease-out), padding .4s var(--ease-out), border-radius .4s var(--ease-out), background-color .3s, box-shadow .4s; }
/* premium pass (owner 2026-10-28: "all themes need to have modern, premium STICKY headers. sticky is done but they look pretty bad"):
   open on the paper at the top; once the page moves it settles into a floating card of cream paper, inset and rounded, with a warm hairline
   and a soft layered shadow, a little shorter, the logo a little smaller. Its content stays on the page's column. */
html.top-on :is(.pro-home, .pg) .hero > .top { top: 10px; left: max(16px, calc(50% - 584px)); right: max(16px, calc(50% - 584px)); padding: 8px 8px 8px 16px; border-radius: 18px;
  background: linear-gradient(rgba(250, 247, 241, .82), rgba(250, 247, 241, .82)), url(/pro/art/paper-512.webp) 0 0 / 512px #f3efe7;
  box-shadow: 0 0 0 1px rgba(60, 45, 20, .12), inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 4px rgba(60, 45, 20, .05), 0 14px 32px -14px rgba(13, 27, 42, .26), 0 30px 60px -36px rgba(13, 27, 42, .3); }
:is(.pro-home, .pg) .hero > .top .brand img { transition: width .4s var(--ease-out), transform .35s cubic-bezier(.34, 1.56, .64, 1); }
html.top-on :is(.pro-home, .pg) .hero > .top .brand img { width: 36px; }
html.top-on :is(.pro-home, .pg) .hero > .top :is([data-theme-switch], .theme-toggle) { height: 40px; }
/* 1700px and up: the header lines up with the wider page column (1360px) */
@media (min-width: 1700px) {
  :is(.pro-home, .pg) .hero > .top { padding-inline: calc(50% - 680px); }
  html.top-on :is(.pro-home, .pg) .hero > .top { left: calc(50% - 696px); right: calc(50% - 696px); }
}
/* nav: even links, a calm ink tint on hover, the current page a soft ink pill (no white box) */
:is(.pro-home, .pg) .nav { gap: 2px; }
:is(.pro-home, .pg) .nav a { padding: 8px 14px; border-radius: 999px; color: var(--ink-2); transition: color .2s, background-color .2s, scale .22s var(--ease-out); }
:is(.pro-home, .pg) .nav a:hover { color: var(--ink); background: rgba(13, 27, 42, .05); }
:is(.pro-home, .pg) .nav a[aria-current=page] { color: var(--ink); background: rgba(13, 27, 42, .075); box-shadow: none; }
:is(.pro-home, .pg) .nav-ind { border-radius: 999px; background: rgba(13, 27, 42, .075); box-shadow: none; }
html.pro-ind :is(.pro-home, .pg) .nav a:is(:hover, [aria-current=page]) { color: var(--ink); background: none; }
:is(.pro-home, .pg) .tools { gap: 10px; }
@media (max-width: 820px) {
  :is(.pro-home, .pg) { --top-h: 68px; }
  html:has(> body:is(.pro-home, .pg)) { scroll-padding-top: 68px; }
  :is(.pro-home, .pg) .hero > .top { padding-inline: 16px; }
  html.top-on :is(.pro-home, .pg) .hero > .top { top: 8px; left: 8px; right: 8px; padding: 6px 6px 6px 10px; border-radius: 16px; background: #f6f2ea; }
  html.top-on :is(.pro-home, .pg) .hero > .top .brand img { width: 34px; }
  html.top-on :is(.pro-home, .pg) .hero > .top :is([data-theme-switch], .theme-toggle) { height: 44px; }
  html.top-on :is(.pro-home, .pg) .sheet { top: 62px; left: 0; right: 0; }
  :is(.pro-home, .pg) .tools { gap: 8px; }
}

/* Services (owner 2026-10-29: "cant you make it easier to digest?? that's too plain and boring. structure it better"): each service
   carries its sticker icon. Tablets and up: each chapter is a picker (main.js .sx), its services listed by icon and name, the chosen
   one open beside them as a paper sheet with its icon, promise, what you get and who it suits. Phones keep their rows, icon first */
.sc-ic { flex: none; width: 48px; height: 48px; object-fit: contain; }
@media (min-width: 701px) {
  .pg-services .chap:has(.sx) figure.chap-art { display: none; }
  .pg-services .chap .sx { display: grid; grid-template-columns: minmax(250px, 4fr) minmax(0, 8fr); gap: 28px; align-items: stretch; margin-top: 56px; }
  .pg-services .sx-tabs { display: grid; align-content: start; gap: 4px; }
  .pg-services .sx-tab { display: grid; grid-template-columns: 50px 26px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; min-height: 66px; padding: 8px 18px 8px 10px; border: 0; border-radius: 16px; background: transparent; font: inherit; color: var(--ink-2); text-align: left; cursor: pointer; }
  .pg-services .sx-tab img { width: 50px; height: 50px; object-fit: contain; transition: transform .35s var(--ease-out); }
  .pg-services .sx-tab .num { font-size: 13px; color: var(--green-d); }
  .pg-services .c-tara .sx-tab .num { color: var(--pink-d); }
  .pg-services .sx-name { font: var(--display-w) 18px/1.2 var(--display); letter-spacing: -.005em; text-wrap: balance; }
  .pg-services .sx-tab:hover { background: rgba(255, 255, 255, .55); color: var(--ink); }
  .pg-services .sx-tab:hover img { transform: rotate(-6deg) scale(1.06); }
  .pg-services .sx-tab[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line), inset 4px 0 0 var(--green), 0 18px 34px -24px rgba(13, 27, 42, .45); }
  .pg-services .c-tara .sx-tab[aria-selected="true"] { box-shadow: 0 0 0 1px var(--line), inset 4px 0 0 var(--pink), 0 18px 34px -24px rgba(13, 27, 42, .45); }
  .pg-services .sx-tab:focus-visible { outline: 2px solid var(--green-d); outline-offset: 2px; }
  html:not(.calm) .pg-services .sx-tab { transition: background-color .25s, box-shadow .25s, color .25s; }

  /* the open service: one sheet of the notebook paper, a colour rule along its top, its icon pinned at the corner */
  .pg-services .chap .sx .chap-list { display: grid; grid-template-columns: minmax(0, 1fr); grid-column: auto; grid-row: auto; margin: 0; }
  .pg-services .sx .svc-card:not(.on) { display: none; }
  .pg-services .sx .svc-card { display: block; padding: 40px 44px 38px; border: 0; border-radius: 20px; background: url(/pro/art/paper-768.webp) 0 0 / 768px, #fbf9f4; box-shadow: inset 0 4px 0 var(--green), 0 0 0 1px var(--line), 0 40px 70px -44px rgba(13, 27, 42, .5); }
  .pg-services .c-tara .sx .svc-card { box-shadow: inset 0 4px 0 var(--pink), 0 0 0 1px var(--line), 0 40px 70px -44px rgba(13, 27, 42, .5); }
  .pg-services .sx .svc-card::after { display: none; }
  .pg-services .sx .sc-head { display: block; min-height: 132px; padding: 0 170px 0 0; }
  .pg-services .sx .svc-card .sc-ic { position: absolute; right: 34px; top: 28px; width: 140px; height: 140px; rotate: 5deg; }
  .pg-services .sx .sc-head .num { display: block; width: auto; margin-bottom: 12px; font-size: 14px; }
  .pg-services .sx .sc-head h3 { font-size: clamp(30px, 3.1vw, 42px); line-height: 1.04; }
  .pg-services .sx .tagline { margin-top: 12px; font-size: 19px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
  .pg-services .sx .sc-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 34px; margin-top: 30px; padding-top: 28px; border-top: 1px solid rgba(36, 52, 74, .16); }
  .pg-services .sx .sc-body > div { grid-column: auto; grid-row: auto; padding: 0; border: 0; }
  .pg-services .sx .sc-label { margin-bottom: 14px; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; }
  .pg-services .sx .checks { gap: 12px; }
  .pg-services .sx .checks li { padding-left: 26px; font-size: 16.5px; line-height: 1.5; }
  .pg-services .sx .pills li { padding: 8px 14px; font-size: 14px; }
  @media (prefers-reduced-motion: no-preference) {
    html:not(.calm) .pg-services .sx .svc-card.on { animation: sx-in .45s var(--ease-out) both; }
    html:not(.calm) .pg-services .sx .svc-card.on .sc-ic { animation: sx-pop .6s cubic-bezier(.3, 1.5, .5, 1) .08s both; }
  }
}
@media (min-width: 701px) and (max-width: 1000px) {
  .pg-services .chap .sx { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pg-services .sx-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-services .sx-tab:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 2px); }
  .pg-services .sx .svc-card { padding: 32px 30px 30px; }
  .pg-services .sx .sc-head { min-height: 112px; padding-right: 130px; }
  .pg-services .sx .svc-card .sc-ic { right: 24px; top: 24px; width: 110px; height: 110px; }
}
@media (min-width: 1101px) {
  .pg-services .chap .sx { grid-column: 1 / -1; grid-row: 6; margin-top: 88px; }
}
@keyframes sx-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
@keyframes sx-pop { from { opacity: 0; scale: .6; rotate: -14deg; } }
/* phones: the icon leads each row */
@media (max-width: 700px) {
  .pg-services .chap .sc-head { grid-template-columns: 38px auto minmax(0, 1fr); }
  .pg-services .chap .sc-ic { grid-row: 1 / span 2; align-self: start; width: 38px; height: 38px; margin-top: -6px; }
  .pg-services .chap .tagline { grid-column: 2 / -1; }
}

/* ==== STUDIO INDEX (2026-10-29, owner: "no text straight on the page background"; comp concept/pro-containers-2026-10-29/comp-codex-studio-index-*):
   PRO home only (body.pro-home). Every block sits in its own container, a studio filing system: a navy index panel, folder-tab cards,
   a tray, folder pockets, a shelf box, tabbed dividers, tabbed folders, fanned rows and a booking slip. One ink outline and ledge, varied shapes. ==== */
body:is(.pro-home, .pg) { --si-navy: #121d2b; --si-paper: #fffdf9; --si-card: #f7f5f0; --si-ring: 0 0 0 1.5px var(--ink); --si-edge: 0 0 0 1.5px var(--ink), 0 5px 0 var(--ink); --si-edge-n: 0 5px 0 #070f19; --si-lift: 0 0 0 1.5px var(--ink), 0 7px 0 var(--ink);
  --si-r: 20px; --si-rc: 14px; --si-pad: 40px; --si-padc: 24px; --si-padi: 16px; --si-tab: 36px; --si-gap: 24px; --si-sec: 96px; --si-w: min(1136px, 100% - 64px); }
@media (min-width: 1700px) { body:is(.pro-home, .pg) { --si-w: min(1296px, 100% - 64px); } }
@media (max-width: 700px) { body:is(.pro-home, .pg) { --si-w: calc(100% - 32px); --si-r: 16px; --si-rc: 12px; --si-pad: 20px; --si-padc: 16px; --si-padi: 12px; --si-tab: 32px; --si-gap: 16px; --si-sec: 56px;
  --si-edge: 0 0 0 1.5px var(--ink), 0 4px 0 var(--ink); --si-lift: 0 0 0 1.5px var(--ink), 0 6px 0 var(--ink); } }
/* a folder tab: a filled label whose right side slopes down to the container's top edge */
body.pro-home { --tab-o: 1.5px; }
body.pro-home main .eyebrow, body.pro-home #top .kicker { --tab-in: var(--si-pad); display: flex; width: fit-content; align-items: center; gap: 0; height: var(--si-tab); min-height: 0; margin: calc(-1 * (var(--tab-in) + var(--si-tab))) 0 24px calc(-1 * (var(--tab-in) + var(--tab-o))); padding: 1px 44px 0 calc(var(--tab-in) + var(--tab-o)); border-radius: 12px 0 0 0; font-weight: 600; font-size: 15px; line-height: 1; letter-spacing: 0; text-transform: none; color: var(--ink); opacity: 1; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 100%, 0 100%); }
body.pro-home main .eyebrow .dot { display: none; }
body.pro-home :is(#top > .hero-in, #credits .cred-grid, #process .wrap) { --tab-o: 0px; }

/* hero: a paper index panel with the eyebrow on an outlined tab; on the right the duo desk in front of the framed
   watercolour plate (owner picked option C, "Gallery") */
body.pro-home #top > .hero-in { width: var(--si-w); max-width: none; min-height: 0; margin: calc(28px + var(--si-tab)) auto 0; padding: var(--si-pad); align-items: center; gap: var(--si-pad); border-radius: 0 var(--si-r) var(--si-r) var(--si-r); background: var(--si-paper); box-shadow: var(--si-edge); }
body.pro-home #top .hero-copy { position: static; padding-top: 0; max-width: none; }
body.pro-home #top .kicker { position: absolute; left: -1.5px; top: calc(-1 * var(--si-tab)); margin: 0; border-style: solid; border-color: var(--ink); border-width: 1.5px 0 0 1.5px;
  background: linear-gradient(to top right, transparent calc(50% - 1.5px), var(--ink) calc(50% - 1.5px), var(--ink) 50%, transparent 50%) right top / 22px 100% no-repeat border-box, var(--si-paper); }
body.pro-home #top h1 { width: auto; max-width: 640px; }
@media (max-width: 400px) { html body.pro-home #top .kicker { padding-right: 34px; font-size: 13.5px; white-space: nowrap; } }
body.pro-home #top .btn-ink { color: var(--ink); }
body.pro-home #top .btn-ink::before { background: var(--green); }
body.pro-home #top .btn-ink:hover::before { background: #3fd19e; }
body.pro-home #top .btn-ghost::before { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
/* the plate hangs a little crooked with an ink edge; the duo desk sits in front of its lower edge */
body.pro-home #top .folio-plate { width: 90%; aspect-ratio: 930 / 892; margin: 0; justify-self: end; align-self: center; isolation: isolate; }
body.pro-home #top .folio-plate::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 4px; background: url(/pro/art/plate-930.webp) 50% 50% / 100% 100% no-repeat; box-shadow: 0 0 0 1.5px var(--ink), 0 22px 40px -12px rgba(18, 29, 43, .35); rotate: -1.2deg; }
body.pro-home #top .fp-wash { display: none; }
body.pro-home #top .fp-duo { inset: auto -8% -6%; width: 116%; filter: drop-shadow(0 14px 18px rgba(18, 29, 43, .22)); }
html:not(.calm) body.pro-home #top :is(.hero-copy, .folio-plate) { animation: none; translate: none; scale: none; opacity: 1; }
@media (min-width: 1101px) { body.pro-home #top > .hero-in { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); } body.pro-home #top h1 { font-size: clamp(52px, 4.7vw, 72px); } }
@media (max-width: 820.98px) { body.pro-home #top > .hero-in { grid-template-columns: minmax(0, 1fr); } body.pro-home #top .folio-plate { aspect-ratio: 720 / 548; width: min(100%, 560px); margin: 0 auto 8%; justify-self: center; } body.pro-home #top .folio-plate::before { background-image: url(/pro/art/plate-phone-720.webp); } body.pro-home #top .fp-duo { inset: auto 0 -12%; width: 100%; } }
@media (max-width: 700px) {
  body.pro-home #top > .hero-in { margin-top: calc(16px + var(--si-tab)); gap: var(--si-pad); }
}

/* hero facts: four folder-tab cards, each tab its own brand colour */
body.pro-home #top .facts { width: var(--si-w); max-width: none; margin: var(--si-gap) auto 0; padding: var(--si-tab) 0 8px; gap: var(--si-gap); }
body.pro-home #top .facts li { --c: var(--green); margin: 0; padding: var(--si-padc); border: 0; border-top: 6px solid var(--c); border-radius: 0 var(--si-rc) var(--si-rc) var(--si-rc); background: var(--si-paper); box-shadow: var(--si-edge); color: var(--ink-2); font-size: 15.5px; }
body.pro-home #top .facts li:nth-child(2) { --c: var(--pink); }
body.pro-home #top .facts li:nth-child(3) { --c: var(--amber); }
body.pro-home #top .facts li:nth-child(4) { --c: var(--ink); }
body.pro-home #top .facts li::before { display: block; top: calc(-6px - var(--si-tab) + 1px); left: -1.5px; width: 46%; height: var(--si-tab); border-radius: 12px 0 0 0; background: var(--c); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 100%, 0 100%); }
@media (max-width: 1100px) { body.pro-home #top .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: calc(var(--si-gap) + var(--si-tab) + 6px); } }
@media (max-width: 700px) {
  body.pro-home #top .facts { column-gap: 12px; }
  body.pro-home #top .facts li { font-size: 15px; line-height: 1.38; }
  body.pro-home #top .facts b { font-size: 21px; }
}
@media (max-width: 359px) { body.pro-home #top .facts { grid-template-columns: minmax(0, 1fr); } }

/* demo: a light tray; the controls in their own card with the "Try it" tab, the preview lying in the tray */
body.pro-home .demo#demo { color: var(--ink); }
body.pro-home #demo .demo-grid { position: relative; width: var(--si-w); max-width: none; padding: calc(var(--si-padc) + var(--si-tab)) var(--si-pad) var(--si-pad); column-gap: var(--si-pad); align-items: center; border-radius: var(--si-r); background: #e9e3d7; box-shadow: var(--si-edge), inset 0 2px 0 rgba(255, 255, 255, .6); }
body.pro-home #demo .demo-copy { align-self: stretch; padding: var(--si-pad); border-radius: 0 var(--si-rc) var(--si-rc) var(--si-rc); background: var(--si-paper); box-shadow: var(--si-edge); }
body.pro-home #demo .demo-copy > .eyebrow { background: var(--green); }
body.pro-home #demo h2 { color: var(--ink); font-size: clamp(34px, 3.3vw, 48px); }
body.pro-home #demo h2::after { display: none; }
body.pro-home #demo :is(.eyebrow, .sub) { color: var(--ink); }
body.pro-home #demo .sub { margin-top: 14px; color: var(--ink-2); font-size: 17px; }
body.pro-home #demo :is(.ctl label[for], .ctl legend, .maps b) { color: var(--ink); }
body.pro-home #demo .maps li, body.pro-home #demo .note { color: var(--ink-2); }
body.pro-home #demo .maps { padding-top: 18px; border-top: 1.5px dashed rgba(13, 27, 42, .22); }
body.pro-home #demo .ctl input[type=text] { border: 1.5px solid var(--ink); background: #fff; box-shadow: none; }
/* business types as separate keys with the ink outline and a ledge; the picked one is pressed in, navy, with a green light */
body.pro-home #demo .seg { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 10px; padding: 0 0 4px; border: 0; border-radius: 0; background: none; }
/* three keys on top, two below, at every width (owner: "buttons should be 3 top 2 bottom") */
body.pro-home #demo .seg label { grid-column: span 2; }
body.pro-home #demo .seg label:nth-child(n+4) { grid-column: span 3; }
body.pro-home #demo .seg span { gap: 9px; min-height: 46px; padding: 0 16px; border-radius: 10px; color: var(--ink); background: #fff; box-shadow: 0 0 0 1.5px var(--ink), 0 4px 0 var(--ink); font-size: 16px; transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out), background-color .2s, color .2s; }
body.pro-home #demo .seg label:hover span { color: var(--ink); background: var(--si-card); }
body.pro-home #demo .seg input:checked + span { color: #fff; background: var(--si-navy); box-shadow: 0 0 0 1.5px var(--ink), 0 1px 0 var(--ink); transform: translateY(3px); }
body.pro-home #demo .seg input:checked + span::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 30%, transparent); }
body.pro-home #demo .seg input:focus-visible + span { outline: 2px solid var(--green-d); outline-offset: 3px; }
body.pro-home #demo .demo-stage { margin-bottom: 34px; border-radius: 16px; background: #f4f0e8; box-shadow: inset 0 0 0 1.5px rgba(13, 27, 42, .18), inset 0 10px 24px -14px rgba(13, 27, 42, .3); }
body.pro-home #demo .demo-stage::before { display: none; }
body.pro-home #demo .d-rig { inset: 28px 28px 30px; }
body.pro-home #demo .note { bottom: -32px; }
body.pro-home #demo .sample { top: 8px; right: 14px; }
@media (min-width: 701px) { body.pro-home #demo .d-gl { right: -14px; bottom: -14px; } }
@media (min-width: 701px) and (max-width: 1100px) { body.pro-home #demo .demo-grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; } body.pro-home #demo .demo-stage { width: min(100%, 720px); } }
/* the preview sits on the site's own navy with a corner of the aurora wash, the same field for every type, so each sample stands
   out against it instead of matching it (owner: "URE MAKING BG THE SAME COLOR AND IT LOOKS AWFUL!"); an ink outline and ledge
   like the form card, and its own tab */
body.pro-home #demo .demo-stage { border-radius: 0 var(--si-rc) var(--si-rc) var(--si-rc); background: url(/pro/art/corner-520.webp) -40px -40px / 340px no-repeat, url(/pro/art/navy-768.webp) 0 0 / 768px, var(--si-navy); box-shadow: var(--si-edge); }
body.pro-home #demo :is(.d-site, .d-gl) { box-shadow: 0 0 0 1px rgba(0, 0, 0, .22), 0 30px 50px -24px rgba(0, 0, 0, .7); }
body.pro-home #demo .sample { display: flex; position: absolute; top: calc(-1 * var(--si-tab)); left: -1.5px; right: auto; bottom: auto; z-index: 1; align-items: center; height: var(--si-tab); margin: 0; padding: 2px 44px 0 calc(var(--si-padc) + 1.5px); border-radius: 12px 0 0 0;
  border-style: solid; border-color: var(--ink); border-width: 1.5px 0 0 1.5px; color: var(--ink); font: 600 15px/1 "IS", "IS Fallback", sans-serif; letter-spacing: 0; text-transform: none; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 100%, 0 100%);
  background: linear-gradient(to top right, transparent calc(50% - 1.5px), var(--ink) calc(50% - 1.5px), var(--ink) 50%, transparent 50%) right top / 22px 100% no-repeat border-box, var(--amber); }
/* the preview gets more of the width so the sample site reads big (owner: "the site preview looks so small") */
@media (min-width: 1101px) { body.pro-home #demo .demo-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
@media (min-width: 701px) { body.pro-home #demo .d-rig { inset: 24px 24px 26px; } }
/* phones: room above the board for its tab */
@media (max-width: 700px) { body.pro-home.pro-home #demo .demo-stage { margin-top: calc(24px + var(--si-tab)); } }
@media (max-width: 700px) {
  body.pro-home .demo#demo { padding: 64px 0 24px; }
  body.pro-home #demo .sub { font-size: 15.5px; }
  body.pro-home #demo .ctl { border: 1.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink), 0 14px 30px -18px rgba(13, 27, 42, .45); }
  body.pro-home #demo .ctl input[type=text] { border-width: 1px; }
  body.pro-home #demo .demo-stage { width: 100%; margin: 20px 0 64px; }
  body.pro-home #demo .d-rig { inset: 12px; }
  body.pro-home #demo .demo-stage { margin-bottom: 72px; }
  body.pro-home #demo .note { margin-top: 12px; font-size: 15px; }
  body.pro-home #demo .maps { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 14px; }
  body.pro-home #demo .maps li { display: flex; align-items: baseline; gap: 10px; font-size: 15px; line-height: 1.4; }
  body.pro-home #demo .maps i { width: 10px; height: 10px; margin: 0; border-radius: 3px; flex: none; }
  body.pro-home #demo .maps b { flex: none; min-width: 118px; margin: 0; font-size: 15px; }
}

/* section heads on paper: an index card with the eyebrow on its tab */
body.pro-home main .eyebrow { --tc: color-mix(in srgb, var(--green) 34%, #fffdf9); background: var(--tc); }
body.pro-home main .eyebrow:has(.dot.p) { --tc: color-mix(in srgb, var(--pink) 30%, #fffdf9); }
body.pro-home main .eyebrow:has(.dot.a) { --tc: color-mix(in srgb, var(--amber) 45%, #fffdf9); }
body.pro-home main .eyebrow .dot.p { background: var(--pink-d); }
body.pro-home main .eyebrow .dot.a { background: var(--amber-d); }
body.pro-home main :is(#work, #services) .sec-head, body.pro-home main .duo-head { max-width: none; padding: var(--si-pad); border-radius: 0 var(--si-r) var(--si-r) var(--si-r); background: var(--si-paper); box-shadow: var(--si-edge); }

/* our work: two folder pockets, green for the tools and pink for the websites, each with a numbered tab; the pockets are the
   wrap's own ::before and ::after laid into its grid, so the markup (and the phone switch in main.js) stays as it is */
body.pro-home .work#work { padding: 112px 0 40px; }
body.pro-home #work .group-head { position: relative; margin: 0; padding: var(--si-padc) 0 var(--si-padc); border: 0; }
body.pro-home #work .group-head h3 { font-size: 23px; }
body.pro-home #work .group-head p { color: var(--ink); }
body.pro-home #work .group-head > .num { position: absolute; top: calc(-1 * var(--si-tab)); left: calc(-1 * (var(--si-padc) + 1.5px)); display: flex; align-items: center; height: var(--si-tab); padding: 2px 44px 0 calc(var(--si-padc) + 1.5px); border-radius: 12px 0 0 0; background: var(--green-d); color: #fff; font: var(--display-w) 18px/1 var(--display); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 100%, 0 100%); }
body.pro-home #work .group-head + * .num, body.pro-home #work .group-head ~ .group-head > .num { background: var(--pink-d); }
body.pro-home #work :is(.proj, .proj.flip, .site-card) { padding: var(--si-padi); border-radius: var(--si-rc); box-shadow: var(--si-edge); }
@media (min-width: 701px) {
  body.pro-home #work .wrap { position: relative; isolation: isolate; width: var(--si-w); max-width: none; padding: 0; column-gap: 0;
    grid-template-columns: var(--si-padc) minmax(0, 1fr) var(--si-gap) minmax(0, 1fr) var(--si-padc); grid-template-rows: auto auto auto var(--si-padc) calc(var(--si-gap) + var(--si-tab) + 5px) auto auto var(--si-padc); }
  body.pro-home #work .wrap::before, body.pro-home #work .wrap::after { content: ""; z-index: -1; grid-column: 1 / -1; grid-row: 2 / 5; border-radius: 0 var(--si-r) var(--si-r) var(--si-r); background: color-mix(in srgb, var(--green) 32%, #fffdf9); box-shadow: var(--si-edge); }
  body.pro-home #work .wrap::after { grid-row: 6 / 9; background: color-mix(in srgb, var(--pink) 26%, #fffdf9); }
  body.pro-home #work .sec-head { grid-column: 1 / -1; grid-row: 1; margin-bottom: calc(var(--si-gap) + var(--si-tab) + 5px); }
  body.pro-home #work .group-head { grid-column: 2 / 5; grid-row: 2; }
  body.pro-home #work .group-head ~ .group-head { grid-column: 2 / 5; grid-row: 6; }
  body.pro-home #work .project-strip > :first-child { grid-column: 2; grid-row: 3; }
  body.pro-home #work .project-strip > :last-child { grid-column: 4; grid-row: 3; }
  body.pro-home #work .sites > :first-child { grid-column: 2; grid-row: 7; }
  body.pro-home #work .sites > :last-child { grid-column: 4; grid-row: 7; }
}
@media (min-width: 1101px) {
  body.pro-home #work .wrap { grid-template-columns: var(--si-padc) minmax(0, 1fr) var(--si-gap) minmax(0, 1fr) var(--si-padc) var(--si-gap) var(--si-padc) minmax(0, 1fr) var(--si-gap) minmax(0, 1fr) var(--si-padc); grid-template-rows: auto auto auto var(--si-padc); }
  body.pro-home #work .wrap::before { grid-column: 1 / 6; grid-row: 2 / 5; }
  body.pro-home #work .wrap::after { grid-column: 7 / 12; grid-row: 2 / 5; }
  body.pro-home #work .group-head ~ .group-head { grid-column: 8 / 11; grid-row: 2; }
  body.pro-home #work .sites > :first-child { grid-column: 8; grid-row: 3; }
  body.pro-home #work .sites > :last-child { grid-column: 10; grid-row: 3; }
}
@media (max-width: 700px) {
  body.pro-home .work#work { padding: 72px 0 24px; }
  body.pro-home #work .wrap { width: var(--si-w); padding: 0; }
  /* both pockets show, stacked (the phone switch stays out of the way) */
  body.pro-home #work .ph-seg { display: none; }
  body.pro-home #work .wrap[data-on] > :is(.ph-g0, .ph-g1) { display: block; }
  body.pro-home #work .wrap[data-on] > .group-head:is(.ph-g0, .ph-g1) { display: flex; }
  body.pro-home #work .wrap[data-on] > :is(.project-strip, .sites) { display: grid; }
  body.pro-home #work .ph-seg ~ .group-head :is(.num, h3) { display: revert; }
  body.pro-home #work .ph-seg ~ .group-head > .num { display: flex; }
  body.pro-home #work .group-head { margin-top: calc(var(--si-gap) + var(--si-tab) + 4px); padding: var(--si-padc) var(--si-padc) 4px; border-radius: 0 var(--si-r) 0 0; background: color-mix(in srgb, var(--green) 32%, #fffdf9); box-shadow: 0 0 0 1.5px var(--ink); clip-path: inset(-40px -4px 0 -4px); }
  body.pro-home #work .group-head > .num { left: -1.5px; font-size: 17px; }
  body.pro-home #work .group-head h3 { font-size: 20px; }
  body.pro-home #work .group-head p { font-size: 15px; }
  body.pro-home #work :is(.project-strip, .sites) { position: relative; margin: -2px 0 0; padding: 12px var(--si-padc) var(--si-padc); border-radius: 0 0 var(--si-r) var(--si-r); background: color-mix(in srgb, var(--green) 32%, #fffdf9); box-shadow: 0 0 0 1.5px var(--ink), 0 4px 0 1.5px var(--ink); clip-path: inset(1px -4px -8px -4px); }
  body.pro-home #work .group-head ~ .group-head, body.pro-home #work .sites { background: color-mix(in srgb, var(--pink) 26%, #fffdf9); }
  body.pro-home #work :is(.proj-copy, .sc-copy) > p:not(.kind) { font-size: 15px; }
  body.pro-home #work .kind { font-size: 15px; }
}

/* 76 films: a navy shelf box. The number on a yellow label, the copy and the button beside it, the posters standing on a shelf that
   scrolls sideways inside the box (the poster columns lie flat as one row; each poster still opens full size) */
:is(body.pro-home, body.pg-projects) .cred#credits { padding: 56px 0 40px; border: 0; }
:is(body.pro-home, body.pg-projects) .cred#credits::before { display: none; }
:is(body.pro-home, body.pg-projects) #credits .cred-grid { width: var(--si-w); max-width: none; padding: var(--si-pad); gap: var(--si-pad); grid-template-columns: minmax(0, 1fr); align-items: stretch; border-radius: var(--si-r); color: #fff; background: var(--si-navy) url(/pro/art/navy-768.webp) 0 0 / 768px; box-shadow: var(--si-edge-n); }
:is(body.pro-home, body.pg-projects) #credits .cred-copy { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 32px; align-content: start; }
:is(body.pro-home, body.pg-projects) #credits .cred-copy > :not(.bignum) { grid-column: 2; }
:is(body.pro-home, body.pg-projects) #credits .bignum { grid-column: 1; grid-row: 1 / span 5; align-self: start; display: block; width: max-content; margin: 0; padding: 18px 22px 18px; border-radius: 6px 16px 16px 16px; color: var(--ink); background: var(--amber); box-shadow: inset 0 0 0 1.5px var(--ink), 0 5px 0 #070f19; font-size: 24px; line-height: 1.1; }
:is(body.pro-home, body.pg-projects) #credits .bignum span, html.js:not(.calm) :is(body.pro-home, body.pg-projects) #credits .bignum span { display: block; margin: 0 0 4px; padding: 0; font-size: 128px; line-height: .88; color: var(--ink); background: none; -webkit-background-clip: border-box; background-clip: border-box; animation: none; }
:is(body.pro-home, body.pg-projects) #credits .cred-line { margin-top: 0; color: #fff; font-size: 22px; line-height: 1.3; }
:is(body.pro-home, body.pg-projects) #credits :is(.titles, .cred-why) { color: #c9d6e3; }
:is(body.pro-home, body.pg-projects) #credits .lnk { margin-top: 14px; padding: 0 20px; border-radius: 999px; background: #fff; color: var(--ink); justify-self: start; transition: background-color .2s; }
:is(body.pro-home, body.pg-projects) #credits .lnk:hover { background: var(--green); }
/* the poster wall keeps its tilt and its slow moving columns, running out to the edges of the box (owner: "you removed the poster animation? why?") */
:is(body.pro-home, body.pg-projects) #credits .cred-grid { overflow: clip; }
:is(body.pro-home, body.pg-projects) #credits .wall { height: 320px; margin: 0 calc(var(--si-pad) * -1) calc(var(--si-pad) * -1); }
@media (min-width: 701px) and (max-width: 1100px) { :is(body.pro-home, body.pg-projects) #credits .wall { height: 380px; } :is(body.pro-home, body.pg-projects) #credits .plane { left: 24%; width: 72%; top: -70%; } }
@media (min-width: 1101px) {
  :is(body.pro-home, body.pg-projects) #credits .cred-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
  :is(body.pro-home, body.pg-projects) #credits .wall { align-self: stretch; height: auto; min-height: 460px; margin: calc(var(--si-pad) * -1) calc(var(--si-pad) * -1) calc(var(--si-pad) * -1) 0; }
}
@media (max-width: 700px) {
  :is(body.pro-home, body.pg-projects) .cred#credits { padding: 40px 0 24px; }
  :is(body.pro-home, body.pg-projects) #credits .cred-grid { gap: 18px; }
  :is(body.pro-home, body.pg-projects) #credits .cred-copy { column-gap: 16px; }
  :is(body.pro-home, body.pg-projects) #credits .bignum { grid-row: 1 / span 2; padding: 12px 14px; font-size: 17px; }
  :is(body.pro-home, body.pg-projects) #credits .bignum span, html.js:not(.calm) :is(body.pro-home, body.pg-projects) #credits .bignum span { font-size: 76px; }
  :is(body.pro-home, body.pg-projects) #credits .cred-line { align-self: center; padding: 0; border: 0; font-size: 18px; }
  :is(body.pro-home, body.pg-projects) #credits .cred-copy > :is(.titles, .cred-why, .lnk) { grid-column: 1 / -1; }
  :is(body.pro-home, body.pg-projects) #credits :is(.titles, .cred-why) { margin-top: 12px; font-size: 15px; line-height: 1.5; }
  :is(body.pro-home, body.pg-projects) #credits .cred-copy > .titles { margin-top: 16px; }
  :is(body.pro-home, body.pg-projects) #credits .wall { height: 230px; }
}

/* the film strips around the posters are pink so they show on the navy box (owner: "they disappear cuz background is also black",
   then "can you make the film strips pink?"); the frame art's shape is filled with the site pink on its own layer, the poster stays as it is */
:is(body.pro-home, body.pg-projects) #credits .pcol .pp { position: relative; isolation: isolate; background: none; }
:is(body.pro-home, body.pg-projects) #credits .pcol .pp::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pink); -webkit-mask: url(/pro/art/film-294.webp) 0 0 / 100% 100% no-repeat; mask: url(/pro/art/film-294.webp) 0 0 / 100% 100% no-repeat; }

/* headaches: tabbed dividers, numbered tabs 01-04 in four colours; the mint band, torn edges and wash give way to the cards */
body.pro-home .svc#services { padding: 56px 0 72px; background: none; }
body.pro-home #services .probs { gap: var(--si-gap); margin-top: calc(var(--si-gap) + var(--si-tab) + 6px); }
body.pro-home #services .probs article { --c: var(--green); --on: var(--ink); overflow: visible; padding: var(--si-padc); border-top: 6px solid var(--c); border-radius: 0 var(--si-rc) var(--si-rc) var(--si-rc); background: var(--si-paper); box-shadow: var(--si-edge); }
body.pro-home #services .probs article:nth-child(2) { --c: var(--pink); }
body.pro-home #services .probs article:nth-child(3) { --c: var(--amber); }
body.pro-home #services .probs article:nth-child(4) { --c: var(--ink); --on: #fff; }
body.pro-home #services .probs article > .num { justify-self: start; display: flex; align-items: center; width: fit-content; height: var(--si-tab); margin: calc(-1 * (var(--si-padc) + var(--si-tab) + 5px)) 0 var(--si-padc) calc(-1 * (var(--si-padc) + 1.5px)); padding: 2px 44px 0 calc(var(--si-padc) + 1.5px); border-radius: 12px 0 0 0; background: var(--c); color: var(--on); font: var(--display-w) 18px/1 var(--display); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 100%, 0 100%); }
body.pro-home #services .probs article::after { border-radius: inherit; }
@media (min-width: 701px) { body.pro-home #services .probs article > .num { margin-bottom: 0; } }
@media (min-width: 701px) and (hover: hover) {
  html:not(.calm) body.pro-home #services .probs article:hover { box-shadow: var(--si-edge), 0 22px 36px -24px rgba(13, 27, 42, .45); }
}
@media (min-width: 701px) and (max-width: 1100px) { body.pro-home #services .probs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: calc(var(--si-gap) + var(--si-tab) + 6px); } }
@media (max-width: 700px) {
  body.pro-home .svc#services { padding: 32px 0 40px; }
  body.pro-home #services .ache { padding-top: 32px; }
  body.pro-home #services .probs { gap: 10px; margin-top: 20px; border: 0; }
  body.pro-home #services .probs article { grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; padding: 0 12px 0 0; overflow: hidden; border-top: 0; border-radius: 14px; box-shadow: 0 0 0 1.5px var(--ink) inset, 0 4px 0 var(--ink); }
  body.pro-home #services .probs article > .num { grid-column: 1; grid-row: 1 / 4; align-self: stretch; justify-self: stretch; justify-content: center; align-items: flex-start; width: auto; height: auto; margin: 0; padding: 15px 0 0; border-radius: 0; font-size: 18px; clip-path: none; box-shadow: inset 1.5px 1.5px 0 var(--ink), inset 0 -1.5px 0 var(--ink); }
  body.pro-home #services .probs h3 { min-height: 0; padding: 15px 0 12px; font-size: 18.5px; }
  body.pro-home #services .probs p, body.pro-home #services .probs li { font-size: 15px; }
}

/* team: two tabbed folders, the name on the tab (green for Eren, pink for Tara); the four reasons become one strip of small cards */
body.pro-home #services .duo { margin-top: 96px; gap: 0; }
body.pro-home #services .cols { gap: var(--si-gap); margin-top: calc(var(--si-gap) + var(--si-tab) + 6px); }
body.pro-home #services .col { --c: var(--green); --c-d: var(--green-d); display: flex; flex-direction: column; overflow: visible; padding: 0 var(--si-pad) var(--si-pad); border-top: 6px solid var(--c); border-radius: 0 var(--si-r) var(--si-r) var(--si-r); background: linear-gradient(var(--tint), var(--tint)) 0 0 / 100% 270px no-repeat, var(--si-paper); box-shadow: var(--si-edge); }
body.pro-home #services .c-tara { --c: var(--pink); --c-d: var(--pink-d); }
body.pro-home #services .col::before { display: none; }
body.pro-home #services .col-art { order: 1; width: calc(100% + 2 * var(--si-pad)); height: 264px; margin: 0 calc(-1 * var(--si-pad)) var(--si-padc); }
html:not(.calm) body.pro-home #services .col-art { animation: none; }
body.pro-home #services .who { order: 0; display: flex; align-items: center; width: fit-content; height: var(--si-tab); margin: calc(-6px - var(--si-tab) + 1px) 0 0 calc(-1 * (var(--si-pad) + 1.5px)); padding: 1px 44px 0 0; border-radius: 12px 0 0 0; background: color-mix(in srgb, var(--c) 30%, #fffdf9); color: var(--ink); font-size: 15px; font-weight: 600; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 100%, 0 100%); }
body.pro-home #services .who b { display: flex; align-items: center; align-self: stretch; margin: -1px 14px 0 0; padding: 2px 18px 0 20px; border-radius: 12px 0 0 0; background: var(--c-d); color: #fff; font: var(--display-w) 22px/1 var(--display); }
body.pro-home #services .say { order: 2; margin-top: 0; }
body.pro-home #services .col ul { order: 3; }
body.pro-home #services .pts { gap: var(--si-gap); margin-top: var(--si-gap); padding: 0; border-radius: 0; background: none; box-shadow: none; }
body.pro-home #services .pts li { padding: var(--si-padc); border-radius: var(--si-rc); background: var(--si-paper); box-shadow: var(--si-edge); }
body.pro-home #services .pts li + li { border: 0; }
body.pro-home #services .pts li:nth-child(1) { box-shadow: inset 4px 0 0 var(--green), var(--si-edge); }
body.pro-home #services .pts li:nth-child(2) { box-shadow: inset 4px 0 0 var(--pink), var(--si-edge); }
body.pro-home #services .pts li:nth-child(3) { box-shadow: inset 4px 0 0 var(--amber), var(--si-edge); }
body.pro-home #services .pts li:nth-child(4) { box-shadow: inset 4px 0 0 var(--ink), var(--si-edge); }
@media (max-width: 1100px) { body.pro-home #services .pts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  body.pro-home #services .duo { margin-top: 56px; }
  /* both folders show, stacked (the phone switch stays out of the way) */
  body.pro-home #services .ph-seg { display: none; }
  body.pro-home #services .cols[data-on] .col { display: flex; }
  body.pro-home #services .cols { gap: calc(var(--si-gap) + var(--si-tab) + 6px); }
  body.pro-home main .ph-seg ~ .cols .col, body.pro-home #services .col { padding: 0 var(--si-pad) var(--si-pad); background: linear-gradient(var(--tint), var(--tint)) 0 0 / 100% 170px no-repeat, var(--si-paper); }
  body.pro-home #services .col-art { height: 166px; padding: 12px 16px 0; }
  body.pro-home main .ph-seg ~ .cols .who, body.pro-home #services .who { display: flex; height: var(--si-tab); margin: calc(-6px - var(--si-tab) + 1px) 0 0 calc(-1 * (var(--si-pad) + 1.5px)); font-size: 15px; }
  body.pro-home #services .who b { font-size: 20px; }
  body.pro-home main .ph-seg ~ .cols .say, body.pro-home #services .say { margin: 0 0 8px; padding: 0; border: 0; font-size: 24px; }
  body.pro-home #services .col li a { font-size: 15px; }
  body.pro-home #services .pts li { font-size: 15px; line-height: 1.45; }
  body.pro-home #services .pts b { font-size: 16px; }
}
@media (max-width: 520px) { body.pro-home #services .pts { grid-template-columns: minmax(0, 1fr); } }

/* process: a navy panel holding four fanned rows, each opening on a coloured number tab */
body.pro-home #process .wrap { width: var(--si-w); max-width: none; padding: var(--si-pad); border-radius: 0 var(--si-r) var(--si-r) var(--si-r); color: #fff; background: var(--si-navy) url(/pro/art/navy-768.webp) 0 0 / 768px; box-shadow: var(--si-edge-n); }
body.pro-home #process .sec-head { max-width: none; }
body.pro-home #process .sec-head > .eyebrow { color: var(--ink); background: var(--si-navy) url(/pro/art/navy-768.webp) 0 0 / 768px; color: #fff; }
body.pro-home #process .sub { color: #c9d6e3; }
body.pro-home #process .track { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 34px; padding: 0; }
body.pro-home #process .track::before, body.pro-home #process .track::after, body.pro-home #process .track li::before { display: none; }
body.pro-home #process .track li { --c: var(--green); --on: var(--ink); display: grid; grid-template-columns: 88px minmax(0, 10.5em) minmax(0, 1fr); align-items: center; column-gap: 24px; min-height: 76px; margin-right: calc(var(--f) * 22px); margin-left: calc((3 - var(--f)) * 0px); padding: 0 28px 0 0; overflow: hidden; border-radius: 6px 16px 16px 6px; background: var(--si-paper); color: var(--ink); box-shadow: 0 4px 0 #070f19; }
body.pro-home #process .track li:nth-child(1) { --f: 3; }
body.pro-home #process .track li:nth-child(2) { --f: 2; --c: var(--pink); margin-left: 22px; }
body.pro-home #process .track li:nth-child(3) { --f: 1; --c: var(--amber); margin-left: 44px; }
body.pro-home #process .track li:nth-child(4) { --f: 0; --c: #5b7ea6; --on: #fff; margin-left: 66px; }
body.pro-home #process .track .num { align-self: stretch; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 12px 0 0; background: var(--c); color: var(--on); font: var(--display-w) 26px/1 var(--display); letter-spacing: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%); }
body.pro-home #process .track h3 { margin: 0; font-size: 22px; line-height: 1.15; color: var(--ink); }
body.pro-home #process .track p { padding: 14px 0; font-size: 16.5px; color: var(--ink-2); }
@media (max-width: 1100px) {
  body.pro-home #process .track li { grid-template-columns: 76px minmax(0, 1fr); row-gap: 4px; padding: 16px 20px 16px 0; }
  body.pro-home #process .track .num { grid-row: 1 / 3; margin: -16px 0; }
  body.pro-home #process .track h3 { grid-column: 2; }
  body.pro-home #process .track p { grid-column: 2; padding: 0; }
}
@media (max-width: 700px) {
  body.pro-home .steps#process { padding: 64px 0 24px; }
  body.pro-home #process .sub { font-size: 16px; }
  /* all four rows show (the phone stepper's tabs stay, but nothing hides behind them) */
  body.pro-home #process .track.ph-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 22px; }
  body.pro-home #process .track.ph-step::before, body.pro-home #process .track.ph-step::after { display: none; }
  body.pro-home #process .track li, body.pro-home #process .ph-step li { display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 14px; margin: 0; padding: 12px 14px 14px 0; }
  body.pro-home #process .track li:nth-child(n) { margin-left: calc((3 - var(--f)) * 6px); margin-right: calc(var(--f) * 6px); }
  body.pro-home #process .ph-step .num, body.pro-home #process .ph-step li.on .num { grid-column: 1; grid-row: 1 / 3; justify-self: stretch; width: auto; height: auto; margin: -12px 0 -14px; border-radius: 0; background: var(--c); color: var(--on); box-shadow: none; font-size: 20px; cursor: default; }
  body.pro-home #process .ph-step :is(h3, p) { grid-column: 2; visibility: visible; animation: none; }
  body.pro-home #process .ph-step h3, body.pro-home #process .track h3 { grid-row: 1; margin: 0 0 4px; font-size: 19px; }
  body.pro-home #process .ph-step p, body.pro-home #process .track p { grid-row: 2; font-size: 15px; line-height: 1.45; }
}

/* close: a booking slip (the inner pages too), the pitch on the paper side and the three promises on a navy stub past a perforation */
:is(body.pro-home .close#contact, body.pg .close) { overflow: visible; color: var(--ink); }
:is(body.pro-home #contact, body.pg .close) .close-grid { width: var(--si-w); max-width: none; padding: 0; gap: 0; grid-template-columns: minmax(0, 7fr) minmax(0, 4.4fr); align-items: stretch; border-radius: var(--si-r); background: var(--si-paper); box-shadow: var(--si-edge); }
:is(body.pro-home #contact, body.pg .close) .close-grid > div:first-child { padding: var(--si-pad); }
:is(body.pro-home #contact, body.pg .close) .close-grid > div:first-child :focus-visible { outline-color: var(--green-d); box-shadow: none; }
:is(body.pro-home #contact, body.pg .close) .eyebrow { height: 32px; margin: 0 0 18px; padding: 1px 14px 0; border-radius: 8px; clip-path: none; color: var(--ink); }
:is(body.pro-home #contact, body.pg .close) h2 { color: var(--ink); font-size: clamp(36px, 4vw, 56px); }
:is(body.pro-home #contact, body.pg .close) .sub { color: var(--ink-2); }
:is(body.pro-home #contact, body.pg .close) .mail { color: var(--ink-2); }
:is(body.pro-home #contact, body.pg .close) .mail a { color: var(--ink); }
:is(body.pro-home #contact, body.pg .close) .btn-light { color: var(--ink); }
:is(body.pro-home #contact, body.pg .close) .btn-light::before { background: var(--green); box-shadow: inset 0 0 0 1.5px var(--ink), 0 4px 0 var(--ink); }
:is(body.pro-home #contact, body.pg .close) .btn-light:hover::before { background: #3fd19e; }
:is(body.pro-home #contact, body.pg .close) .call { display: flex; flex-direction: column; justify-content: center; margin: 0; padding: var(--si-pad); border-radius: 0 var(--si-r) var(--si-r) 0; color: #fff; background: var(--si-navy) url(/pro/art/navy-768.webp) 0 0 / 768px; box-shadow: -2px 0 0 var(--si-paper), -4px 0 0 transparent; border-left: 3px dashed var(--si-paper); outline: 0; }
:is(body.pro-home #contact, body.pg .close) .call-h { font-size: 22px; }
:is(body.pro-home #contact, body.pg .close) .call span { color: #c9d6e3; }
@media (max-width: 1100px) {
  :is(body.pro-home #contact, body.pg .close) .close-grid { grid-template-columns: minmax(0, 1fr); }
  :is(body.pro-home #contact, body.pg .close) .call { border-left: 0; border-top: 3px dashed var(--si-paper); border-radius: 0 0 var(--si-r) var(--si-r); box-shadow: none; }
}
@media (max-width: 700px) {
  body.pro-home .close#contact { padding: 48px 0 32px; }
  :is(body.pro-home #contact, body.pg .close) .eyebrow { font-size: 15px; }
  :is(body.pro-home #contact, body.pg .close) .mail { font-size: 15px; }
  :is(body.pro-home #contact, body.pg .close) .call li { font-size: 15px; }
  :is(body.pro-home #contact, body.pg .close) .call li span { font-size: 15px; }
}

/* footer: a paper base card instead of the torn edge */
/* the footer is a paper band again with the torn edge and the painted rule over the link columns, no outlined card
   (owner: "I like the idea but black sides make it look bad. also doesnt blend well, you can clearly see the white line") */
@media (max-width: 700px) { body.pro-home .foot :is(.fh, .f-brand p, .foot-grid a, .foot-grid span, .foot-bar a, .foot-bar span, .motion-switch, .motion-more) { font-size: 15px; } body.pro-home .foot-bar { font-size: 15px; } }

/* polish: section heads are compact index cards (no dash), one type system, links on one bottom line */
body.pro-home main :is(.sec-head, .duo-head, .demo-copy) h2::after { display: none; }
body.pro-home main :is(#work, #services) .sec-head, body.pro-home main .duo-head { width: fit-content; max-width: 100%; }
body.pro-home :is(h1, h2, h3, h4) { text-wrap: balance; }
body.pro-home :is(p, li) { text-wrap: pretty; }
body.pro-home :is(.lede, .sub, .cred-why, .titles, .track p, .proj-copy > p, .sc-copy > p, .probs p) { max-width: 62ch; }
body.pro-home :is(.proj h4, .sc-copy h4, .probs h3, .group-head h3, .track h3, .call-h) { font-family: "IS", "IS Fallback", system-ui, sans-serif; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
body.pro-home #work :is(.proj h4, .sc-copy h4, .group-head h3), body.pro-home #services .probs h3 { font-size: 22px; }
body.pro-home :is(#process .track h3, #contact .call-h) { font-size: 20px; }
body.pro-home :is(main .eyebrow, #top .kicker, #work .kind, #services .who, #demo .ctl label[for], #demo .ctl legend) { font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
body.pro-home :is(#top .kicker, main .eyebrow, #services .who) { line-height: 1; }
/* stat cards: titles sized to stay on one line, so every card in the row is the same height with no empty lower half */
body.pro-home #top .facts b { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; white-space: nowrap; }
body.pro-home #top .facts li { display: flex; flex-direction: column; gap: 8px; }
body.pro-home #top .facts span { margin: 0; }
/* project and site cards: the links sit on one row on the card's bottom line */
body.pro-home #work :is(.proj-copy, .sc-copy) { flex: 1 1 auto; }
body.pro-home #work :is(.proj-copy, .sc-copy) > p:not(.kind) { margin-bottom: 12px; }
body.pro-home #work .links, body.pro-home #work .sc-copy > .lnk { margin-top: auto; padding-top: 0; }
body.pro-home #work .links { flex-wrap: nowrap; gap: 0 14px; }
body.pro-home #work .lnk { min-height: 40px; white-space: nowrap; }
/* headaches: every question takes the same two-line slot, so the lists line up */
@media (min-width: 701px) { body.pro-home #services .probs h3 { max-width: none; min-height: 2.4em; } }
@media (max-width: 700px) {
  body.pro-home #top .facts b { font-size: 21px; white-space: normal; }
  body.pro-home #work :is(.proj h4, .sc-copy h4, .group-head h3), body.pro-home #services .probs h3 { font-size: 19px; }
  body.pro-home #work .links { flex-wrap: wrap; }
}
/* project screenshots: one thin browser bar, small muted dots, the address set left after them and cut cleanly */
@media (min-width: 701px) {
  body.pro-home #work .win .bar { height: 22px; padding: 0 10px; gap: 5px; background: #f2f3f5; border-bottom: 1px solid rgba(13, 27, 42, .08); }
  body.pro-home #work .win .bar i { width: 6px; height: 6px; background: #d2d7dd; }
  body.pro-home #work .win .bar span { display: block; flex: 1 1 0; min-width: 0; margin: 0 0 0 6px; text-align: left; font-size: 11px; line-height: 22px; color: #7b8693; letter-spacing: 0; }
}
/* one spacing rhythm: --si-sec between sections (96 desktop, 56 phone), --si-gap between cards, measured edge to edge past the 5px ledge
   and any tab sticking up; every container on the same left and right edges */
body.pro-home.pro-home main > section:is(#demo, #work, #credits, #services, #process, #contact) { margin-top: 0; padding-top: calc(var(--si-sec) + 5px); padding-bottom: 0; }
body.pro-home.pro-home main > section:is(#work, #process) { padding-top: calc(var(--si-sec) + 5px + var(--si-tab)); }
body.pro-home.pro-home #services .ache { margin: 0; padding-top: var(--si-tab); }
body.pro-home.pro-home #services .duo { margin-top: calc(var(--si-sec) + 5px + var(--si-tab)); }
body.pro-home.pro-home #services .wrap { width: var(--si-w); max-width: none; padding-inline: 0; }
body.pro-home.pro-home #contact { padding-bottom: 0; }
body.pro-home.pro-home #top .facts { margin-top: calc(var(--si-gap) + 10px); padding-bottom: 0; }
body.pro-home.pro-home #services .probs { margin-top: calc(var(--si-gap) + var(--si-tab) + 11px); }
body.pro-home.pro-home #services .cols { margin-top: calc(var(--si-gap) + var(--si-tab) + 11px); }
body.pro-home.pro-home #services .pts { margin-top: calc(var(--si-gap) + 5px); }
@media (max-width: 1100px) { body.pro-home.pro-home #services .pts { row-gap: calc(var(--si-gap) + 5px); } body.pro-home.pro-home #top .facts { row-gap: calc(var(--si-gap) + var(--si-tab) + 10px); } }
@media (min-width: 701px) and (max-width: 1100px) { body.pro-home.pro-home #services .probs { row-gap: calc(var(--si-gap) + var(--si-tab) + 11px); } }
@media (max-width: 700px) {
  body.pro-home.pro-home #services .probs { margin-top: calc(var(--si-gap) + 5px); gap: calc(var(--si-gap) - 4px); }
  body.pro-home.pro-home #services .cols { gap: calc(var(--si-gap) + var(--si-tab) + 11px); }
  body.pro-home.pro-home #services .pts { gap: calc(var(--si-gap) + 5px); }
}
/* booking slip: an even row of punched holes for the perforation, the stub content on the slip padding past it */
:is(body.pro-home.pro-home #contact, body.pg .close.close) .call { position: relative; padding-left: calc(var(--si-pad) + 8px); border: 0; box-shadow: none; }
@media (max-width: 1100px) { :is(body.pro-home.pro-home #contact, body.pg .close.close) .call { padding: calc(var(--si-pad) + 8px) var(--si-pad) var(--si-pad); } }
:is(body.pro-home #contact, body.pg .close) .call::before { content: ""; position: absolute; z-index: 1; top: 10px; bottom: 10px; left: 8px; width: 8px; background: radial-gradient(circle at 50% 50%, var(--si-paper) 2.5px, transparent 3px) 50% 0 / 8px 12px repeat-y; pointer-events: none; }
@media (max-width: 1100px) { :is(body.pro-home #contact, body.pg .close) .call::before { top: 8px; bottom: auto; left: 10px; right: 10px; width: auto; height: 8px; background-size: 12px 8px; background-repeat: repeat-x; } }
/* states: interactive cards lift 2px with the ledge growing to match; text links underline; one focus ring everywhere */
@media (hover: hover) and (pointer: fine) {
  html body.pro-home.pro-home.pro-home :is(#work .proj, #work .site-card, #services .probs article) { transition: translate .2s var(--ease-out), box-shadow .2s var(--ease-out); }
  html body.pro-home.pro-home.pro-home :is(#work .proj, #work .site-card, #services .probs article):hover { translate: 0 -2px; box-shadow: var(--si-lift); }
  html body.pro-home.pro-home.pro-home #services .col:hover { translate: none; box-shadow: var(--si-edge); }
  body.pro-home :is(.foot a, #contact .mail a):hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
}
body.pro-home.pro-home :is(a, button, summary, input, select, [tabindex]):focus-visible { outline: 2px solid var(--green-d); outline-offset: 3px; box-shadow: none; }
body.pro-home.pro-home :is(#top > .hero-in, #credits, #process, #contact .call) :is(a, button, [tabindex]):focus-visible { outline-color: var(--green); }
@media (min-width: 701px) and (max-width: 1100px) { body.pro-home #top .facts b { font-size: 30px; } }
/* the four-up row shares its rows across the cards, so questions, sentences and checklists line up in either language */
@media (min-width: 1101px) {
  body.pro-home #services .probs { row-gap: 0; }
  body.pro-home #services .probs article { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
}

/* tabs on outlined cards (owner: label pieces like "our work" don't blend with the box): the tab carries the card's own
   ink outline up its left side, across the top and down the slant, so tab and card read as one folder */
body.pro-home :is(main :is(#demo, #work, #services) .eyebrow, #work .group-head > .num, #services .who), body.pro-home #top .facts li::before {
  border-style: solid; border-color: var(--ink); border-width: 1.5px 0 0 1.5px;
  background-image: linear-gradient(to top right, transparent calc(50% - 1.5px), var(--ink) calc(50% - 1.5px), var(--ink) 50%, transparent 50%);
  background-size: 22px 100%; background-position: right top; background-repeat: no-repeat; background-origin: border-box;
}
/* the border now holds the 1.5px the padding used to add, so labels stay on the card's inner padding edge */
body.pro-home main :is(#demo, #work, #services) .eyebrow { padding-left: var(--tab-in); }
body.pro-home #work .group-head > .num { padding-left: var(--si-padc); }
/* headache numbers are tabs only above phone width (phones show them as row blocks) */
@media (min-width: 701px) {
  body.pro-home #services .probs article > .num {
    border-style: solid; border-color: var(--ink); border-width: 1.5px 0 0 1.5px; padding-left: var(--si-padc);
    background-image: linear-gradient(to top right, transparent calc(50% - 1.5px), var(--ink) calc(50% - 1.5px), var(--ink) 50%, transparent 50%);
    background-size: 22px 100%; background-position: right top; background-repeat: no-repeat; background-origin: border-box;
  }
}

/* the hero clips its overflow, so it keeps room for the stat cards' outline and ledge */
body.pro-home #top { padding-bottom: 12px; }
/* the section backgrounds are back (owner: "what happened to my cool section backgrounds?"): the navy demo band, the mint
   headaches band and the navy process + close band, with their torn edges, splashes and the painting at the foot of the close.
   The bands get room for the 60px torn edges above and below; the containers sit on them. */
body.pro-home.pro-home main > section#demo { margin-top: 120px; padding: 120px 0 130px; }
body.pro-home.pro-home main > section#work { padding-top: calc(var(--si-sec) + 5px + var(--si-tab) + 40px); }
/* the mint band carries its own space above, so the section adds none (it doubled the gap under the poster box) */
body.pro-home.pro-home main > section#services { padding-top: 0; }
body.pro-home.pro-home #services .ache { margin-top: 120px; padding: calc(80px + var(--si-tab)) 0 110px; }
body.pro-home.pro-home #services .duo { margin-top: calc(var(--si-sec) + 5px + var(--si-tab) + 40px); }
body.pro-home.pro-home main > section#process { margin-top: 120px; padding: calc(110px + var(--si-tab)) 0 40px; }
body.pro-home.pro-home main > section#contact { padding: 72px 0 430px; }
@media (max-width: 700px) {
  body.pro-home.pro-home main > section#demo { margin-top: 72px; padding: 72px 0 80px; }
  body.pro-home.pro-home main > section#work { padding-top: calc(var(--si-sec) + 5px + var(--si-tab) + 24px); }
  body.pro-home.pro-home #services .ache { margin-top: 72px; padding: calc(56px + var(--si-tab)) 0 72px; }
  body.pro-home.pro-home #services .duo { margin-top: calc(var(--si-sec) + 5px + var(--si-tab) + 24px); }
  body.pro-home.pro-home main > section#process { margin-top: 72px; padding: calc(64px + var(--si-tab)) 0 24px; }
  body.pro-home.pro-home main > section#contact { padding: 48px 0 260px; }
}
/* containers that sit on the navy band: a paper-coloured outline and a black ledge, and a slightly lifted navy fill,
   so the process panel and the booking slip's stub read as their own pieces on the band */
body.pro-home #process .wrap { background: linear-gradient(rgba(255, 255, 255, .045), rgba(255, 255, 255, .045)), var(--si-navy) url(/pro/art/navy-768.webp) 0 0 / 768px; box-shadow: 0 0 0 1.5px #fffdf9, 0 6px 0 #05090f; }
body.pro-home #process .sec-head > .eyebrow { border-style: solid; border-color: #fffdf9; border-width: 1.5px 0 0 1.5px; padding-left: var(--tab-in);
  background: linear-gradient(to top right, transparent calc(50% - 1.5px), #fffdf9 calc(50% - 1.5px), #fffdf9 50%, transparent 50%) right top / 22px 100% no-repeat border-box,
    linear-gradient(rgba(255, 255, 255, .045), rgba(255, 255, 255, .045)), var(--si-navy) url(/pro/art/navy-768.webp) 0 0 / 768px; }
:is(body.pro-home #contact, body.pg .close) .close-grid { box-shadow: 0 0 0 1.5px #fffdf9, 0 6px 0 #05090f; }
:is(body.pro-home #contact, body.pg .close) .call { background: linear-gradient(rgba(255, 255, 255, .045), rgba(255, 255, 255, .045)), var(--si-navy) url(/pro/art/navy-768.webp) 0 0 / 768px; }

/* Home short copy inside the Studio Index containers. */
body.pro-home #services .service-answer .ticks { display: grid; gap: 7px; margin: 12px 0 0; padding: 0; border: 0; list-style: none; }
body.pro-home #services .service-answer .ticks li { display: flex; gap: 9px; align-items: baseline; font-size: 14.5px; font-weight: 500; line-height: 1.4; }
body.pro-home #services .service-answer .ticks li::before { content: ""; width: 9px; height: 5px; border-left: 1.6px solid var(--c-d); border-bottom: 1.6px solid var(--c-d); transform: rotate(-45deg) translateY(-2px); flex: none; }
body.pro-home #services .service-pick { border-top: 1px solid var(--line); }
body.pro-home #services .service-pick summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 10px 0; color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.3; list-style: none; cursor: pointer; }
body.pro-home #services .service-pick summary::-webkit-details-marker { display: none; }
body.pro-home #services .service-pick summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ink); transition: transform .25s var(--ease); }
body.pro-home #services .service-pick[open] summary::after { transform: rotate(45deg); }
body.pro-home #services .service-pick summary:is(:hover, :focus-visible) { color: var(--c-d); }
body.pro-home #services .service-answer { padding: 16px; margin-bottom: 12px; border-radius: 12px; background: #efebe3; color: var(--ink); }
body.pro-home #services .service-answer p { margin: 0; font-size: 16px; line-height: 1.5; }
body.pro-home #services .service-answer .lnk { display: inline-flex; min-height: 44px; margin-top: 12px; padding: 8px 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 14px; }
@media (max-width: 700px) {
  body.pro-home #services .service-pick summary { min-height: 48px; font-size: 15px; }
  body.pro-home #services .service-answer { padding: 12px; }
}
html.calm body.pro-home #services .service-pick summary::after { transition: none; }
@media (prefers-reduced-motion: reduce) {
  body.pro-home #services .service-pick summary::after { transition: none; }
}

/* ==== inner pages in the home's Studio Index look (owner: "yes go" on the Services mock) ==== */
body.pg { --si-key: inset 0 0 0 1.5px var(--ink), 0 4px 0 var(--ink); }
/* the outlined folder tab, as on the home */
body.pg :is(.sub-in .kicker, .pj-in .kicker, .special .eyebrow, .faq .sec-head .eyebrow, .axis-section-title > .eyebrow, .axis-section-heading .eyebrow) { position: absolute; left: -1.5px; top: auto; bottom: 100%; display: flex; align-items: center; gap: 8px; width: auto; max-width: calc(100% - 12px); height: auto; min-height: var(--si-tab); margin: 0; padding: 6px 44px 5px var(--si-pad); border-radius: 12px 0 0 0; border: solid var(--ink); border-width: 1.5px 0 0 1.5px; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 100%, 0 100%);
  background: linear-gradient(to top right, transparent calc(50% - 1.5px), var(--ink) calc(50% - 1.5px), var(--ink) 50%, transparent 50%) right top / 22px 100% no-repeat border-box, var(--si-paper); font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: .04em; color: var(--ink); opacity: 1; }
body.pg .close .eyebrow { width: fit-content; background: color-mix(in srgb, var(--green) 30%, #fffdf9); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; }
body.pg .close .eyebrow .dot { display: none; }
/* the Axis close has no promises stub, so it is the paper half of the slip on its own */
body.pg .ax-close-in { width: var(--si-w); max-width: none; padding: var(--si-pad); border-radius: var(--si-r); background: var(--si-paper); box-shadow: 0 0 0 1.5px #fffdf9, 0 6px 0 #05090f; }

/* services hero: a paper index panel; the three chapters as keys */
body.pg-services .sv-in { position: relative; width: var(--si-w); max-width: none; margin: calc(36px + var(--si-tab)) auto 0; padding: var(--si-pad); gap: var(--si-pad); align-items: center; border-radius: 0 var(--si-r) var(--si-r) var(--si-r); background: var(--si-paper); box-shadow: var(--si-edge); }
body.pg-services .sv-in .sub-copy { position: static; }
body.pg-services .where { max-width: 440px; margin-top: 28px; border-radius: 12px; background: color-mix(in srgb, var(--green) 12%, #fffdf9); box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink-2); }
body.pg-services .jumps { width: min(100%, 440px); gap: 16px; }
body.pg-services .jump { --c: var(--green); grid-template-columns: 58px minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 0 18px; min-height: 76px; padding: 0 20px 0 0; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: var(--si-key); }
body.pg-services .j-tara { --c: var(--pink); }
body.pg-services .j-3d { --c: var(--amber); }
body.pg-services .jump::before { display: none; }
body.pg-services .jump .j-l { grid-column: 2; grid-row: 1; align-self: end; font-size: 18px; font-weight: 700; color: var(--ink); }
body.pg-services .jump small { grid-column: 2; grid-row: 2; align-self: start; margin-top: 3px; }
body.pg-services .jump .arr { grid-column: 1; grid-row: 1 / 3; align-self: stretch; width: auto; height: auto; border-radius: 0; background: var(--c); box-shadow: inset -1.5px 0 0 var(--ink); color: var(--ink); font-size: 20px; }
@media (max-width: 1100px) { body.pg-services .jumps { width: 100%; } }
@media (hover: hover) and (pointer: fine) { html:not(.calm) body.pg-services .jump:hover { translate: 0 -2px; box-shadow: inset 0 0 0 1.5px var(--ink), 0 6px 0 var(--ink); } }

/* a chapter: one paper panel with a coloured top edge */
body.pg-services .chap { --c: var(--green); }
body.pg-services .c-tara { --c: var(--pink); }
body.pg-services .chap > .wrap.chap-grid { width: var(--si-w); max-width: none; padding: var(--si-pad); border-top: 6px solid var(--c); border-radius: var(--si-r); background: var(--si-paper); box-shadow: var(--si-edge); }
/* the picker: services as keys, the open one pressed in navy; the detail an inner card with its number on a tab */
body.pg-services .sx-tabs { gap: 10px; }
body.pg-services .sx-tab { min-height: 60px; border-radius: 12px; background: #fff; box-shadow: var(--si-key); color: var(--ink); }
body.pg-services .sx-tab .num, body.pg-services .c-tara .sx-tab .num { color: var(--ink-3); }
body.pg-services .sx-tab[aria-selected="true"], body.pg-services .c-tara .sx-tab[aria-selected="true"] { translate: 0 3px; background: var(--si-navy); color: #fff; box-shadow: inset 0 0 0 1.5px var(--ink), 0 1px 0 var(--ink); }
body.pg-services .sx-tab[aria-selected="true"] .num, body.pg-services .c-tara .sx-tab[aria-selected="true"] .num { color: var(--c); }
@media (hover: hover) and (pointer: fine) { body.pg-services .sx-tab:not([aria-selected="true"]):hover { background: color-mix(in srgb, var(--c) 10%, #fff); } }
body.pg-services .sx .svc-card, body.pg-services .c-tara .sx .svc-card { margin-top: var(--si-tab); border-radius: 0 var(--si-rc) var(--si-rc) var(--si-rc); background: var(--si-card); box-shadow: inset 0 0 0 1.5px var(--ink); overflow: visible; }
body.pg-services .sx .sc-head .num { position: absolute; left: 0; top: calc(-1 * var(--si-tab)); display: flex; align-items: center; height: var(--si-tab); margin: 0; padding: 2px 44px 0 24px; border-radius: 12px 0 0 0; background: var(--c); color: var(--ink); font: var(--display-w) 17px/1 var(--display); box-shadow: inset 1.5px 1.5px 0 var(--ink); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 100%, 0 100%); }
body.pg-services .sx .sc-body { border-top: 1.5px dashed rgba(13, 27, 42, .22); }

/* together: the same panel with an amber tab; the three things as small keys. It stays paper on phones (it used to turn navy). */
body.pg-services .special { background: none; color: var(--ink); }
body.pg-services .special .special-grid { position: relative; width: var(--si-w); max-width: none; margin-top: var(--si-tab); padding: var(--si-pad); border-radius: 0 var(--si-r) var(--si-r) var(--si-r); background: var(--si-paper); box-shadow: var(--si-edge); }
body.pg-services .special .special-copy { position: static; }
body.pg-services .special .eyebrow { background: linear-gradient(to top right, transparent calc(50% - 1.5px), var(--ink) calc(50% - 1.5px), var(--ink) 50%, transparent 50%) right top / 22px 100% no-repeat border-box, var(--amber); }
body.pg-services .special .eyebrow .dot { display: none; }
body.pg-services .special-win { border-radius: 14px; box-shadow: 0 0 0 1.5px var(--ink), 0 5px 0 var(--ink); }
body.pg-services .special :is(.sub, .print-note, .queue span) { color: var(--ink-2); }
body.pg-services .special .queue h3, body.pg-services .special .lnk { color: var(--ink); }
body.pg-services .special .queue { gap: 10px; }
body.pg-services .special .queue li { padding: 12px 16px; border: 0; border-radius: 12px; background: #fff; box-shadow: var(--si-key); }
@media (max-width: 700px) {
  body.pg :is(.sub-in .kicker, .pj-in .kicker, .special .eyebrow, .faq .sec-head .eyebrow, .axis-section-title > .eyebrow, .axis-section-heading .eyebrow) { font-size: 13px; }
  body.pg-services .jumps { width: 100%; gap: 10px; }
  body.pg-services .jump { min-height: 60px; grid-template-columns: 48px minmax(0, 1fr); padding: 0 14px 0 0; }
  body.pg-services .jump .j-l { font-size: 16px; }
  body.pg-services .special { padding: 40px 0 56px; }
}

/* about: the hero on a paper index panel, the call to action at its foot; the four promises as folder-tab cards like the home's facts */
body.pg-about .ab-in { position: relative; width: var(--si-w); max-width: none; margin: calc(36px + var(--si-tab)) auto 0; padding: var(--si-pad); border-radius: 0 var(--si-r) var(--si-r) var(--si-r); background: var(--si-paper); box-shadow: var(--si-edge); }
body.pg-about .ab-in .sub-copy { position: static; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px var(--si-pad); max-width: none; }
body.pg-about .ab-in .ctas { margin: 0 0 10px; }
body.pg-about .bios-pts .pts { gap: var(--si-gap); margin-top: calc(56px + var(--si-tab)); padding: 0; }
body.pg-about .bios-pts .pts::before, body.pg-about .bios-pts .pts::after { display: none; }
body.pg-about .bios-pts .pts li, body.pg-about .bios-pts .pts li:is(:first-child, :nth-child(odd), :nth-child(even)) { --c: var(--green); position: relative; padding: var(--si-padc); border: 0; border-top: 6px solid var(--c); border-radius: 0 var(--si-rc) var(--si-rc) var(--si-rc); background: var(--si-paper); box-shadow: var(--si-edge); color: var(--ink-2); }
body.pg-about .bios-pts .pts li:nth-child(2) { --c: var(--pink); }
body.pg-about .bios-pts .pts li:nth-child(3) { --c: var(--amber); }
body.pg-about .bios-pts .pts li:nth-child(4) { --c: var(--ink); }
body.pg-about .bios-pts .pts li::before { content: ""; display: block; position: absolute; top: calc(-6px - var(--si-tab) + 1px); left: -1.5px; width: 46%; height: var(--si-tab); margin: 0; border-radius: 12px 0 0 0; background: var(--c); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 100%, 0 100%); }
body.pg-about .bios-pts .pts b { display: block; margin-bottom: 8px; color: var(--ink); font: var(--display-w) clamp(20px, 1.8vw, 24px)/1.1 var(--display); }
@media (max-width: 1100px) { body.pg-about .bios-pts .pts { row-gap: calc(var(--si-gap) + var(--si-tab) + 6px); } }
@media (max-width: 820px) { body.pg-about .ab-in .sub-copy { grid-template-columns: minmax(0, 1fr); } }

/* projects: the hero on a paper index panel; the jump list and chips as keys; each group a tinted folder with its part on a tab,
   each project a paper panel inside it; the films box is the home's navy one */
body.pg-projects .pj-in { position: relative; width: var(--si-w); max-width: none; min-height: 0; margin: calc(36px + var(--si-tab)) auto 0; padding: var(--si-pad); gap: var(--si-pad); border-radius: 0 var(--si-r) var(--si-r) var(--si-r); background: var(--si-paper); box-shadow: var(--si-edge); }
body.pg-projects .pj-in .hero-copy { position: static; padding-top: 0; }
body.pg-projects .tabs .tab { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink), 0 3px 0 var(--ink); color: var(--ink); }
body.pg-projects .inside { width: var(--si-w); max-width: none; padding: 0; }
body.pg-projects .inside-list a { background: #fff; box-shadow: var(--si-key); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { body.pg-projects .inside-list a:hover { translate: 0 -2px; box-shadow: inset 0 0 0 1.5px var(--ink), 0 6px 0 var(--ink); } }
body.pg-projects .pgroup { --tint: color-mix(in srgb, var(--green) 32%, #fffdf9); --gd: var(--green-d); }
body.pg-projects #projects-websites { --tint: color-mix(in srgb, var(--pink) 26%, #fffdf9); --gd: var(--pink-d); }
body.pg-projects #projects-demos .case { --c: var(--green); --cd: var(--green-d); }
body.pg-projects #projects-websites .case { --c: var(--pink); --cd: var(--pink-d); }
body.pg-projects .pgroup > .wrap { position: relative; width: var(--si-w); max-width: none; margin-top: var(--si-tab); padding: var(--si-pad); border-radius: 0 var(--si-r) var(--si-r) var(--si-r); background: var(--tint); box-shadow: var(--si-edge); }
body.pg-projects .group-head { position: static; margin: 0 0 var(--si-pad); padding: 0; border: 0; }
body.pg-projects .group-head > .num { position: absolute; top: calc(-1 * var(--si-tab)); left: -1.5px; display: flex; align-items: center; width: auto; height: var(--si-tab); margin: 0; padding: 2px 44px 0 var(--si-pad); border-radius: 12px 0 0 0; background: var(--gd); color: #fff; font: var(--display-w) 17px/1 var(--display); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 100%, 0 100%); }
body.pg-projects .pgroup .case, body.pg-projects #projects-websites .case + .case { margin: 0; padding: var(--si-pad); border: 0; border-top: 6px solid var(--c); border-radius: var(--si-r); background: var(--si-paper); box-shadow: var(--si-edge); }
body.pg-projects .pgroup .case ~ .case, body.pg-projects #projects-websites .case + .case { margin-top: calc(var(--si-gap) + 5px); }
body.pg-projects .feat { background: var(--si-card); box-shadow: inset 0 0 0 1.5px var(--ink); }
body.pg-projects :is(.clip, .trynote) { background: color-mix(in srgb, var(--c) 10%, #fffdf9); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* contact: the hero on a paper index panel with the letter as an inner card; the questions in their own panel */
body.pg-contact .ct-in { position: relative; width: var(--si-w); max-width: none; margin: calc(36px + var(--si-tab)) auto 0; padding: var(--si-pad); gap: var(--si-pad); border-radius: 0 var(--si-r) var(--si-r) var(--si-r); background: var(--si-paper); box-shadow: var(--si-edge); }
body.pg-contact .ct-in .ct-copy { position: static; }
body.pg-contact .ct-facts { background: color-mix(in srgb, var(--green) 12%, #fffdf9); box-shadow: inset 0 0 0 1.5px var(--ink); }
body.pg-contact .form-card { margin-top: 0; border-radius: var(--si-rc); box-shadow: var(--si-edge); }
body.pg-contact .faq .faq-grid { position: relative; width: var(--si-w); max-width: none; margin-top: var(--si-tab); padding: var(--si-pad); border-radius: 0 var(--si-r) var(--si-r) var(--si-r); background: var(--si-paper); box-shadow: var(--si-edge); }
body.pg-contact .faq .sec-head { position: static; }
body.pg-contact .faq .sec-head .eyebrow .dot { display: none; }
@media (max-width: 700px) { body.pg-contact .form-card { margin: 0; } }
/* axis case study: the hero on the same paper index panel */
body.pg-axis .ax-in { position: relative; width: var(--si-w); max-width: none; margin: calc(36px + var(--si-tab)) auto 0; padding: var(--si-pad); border-radius: 0 var(--si-r) var(--si-r) var(--si-r); background: var(--si-paper); box-shadow: var(--si-edge); }
body.pg-axis .ax-in .sub-copy { position: static; }
/* axis case study: each chapter a paper panel with its number on the folder tab; the cards inside get the ink ring */
body.pg-axis :is(.axis-section, .axis-architecture-band > .wrap, .axis-implementation-band > .wrap) { position: relative; width: var(--si-w); max-width: none; margin: calc(var(--si-sec) + var(--si-tab)) auto 0; padding: var(--si-pad); border-radius: 0 var(--si-r) var(--si-r) var(--si-r); background: var(--si-paper); box-shadow: var(--si-edge); }
body.pg-axis :is(.axis-architecture-band, .axis-implementation-band) { margin-top: 0; padding: 0; }
body.pg-axis .axis-architecture-band::before { display: none; }
body.pg-axis :is(.axis-section-title, .axis-section-heading, .axis-section-heading > div) { position: static; }
body.pg-axis :is(.axis-section-title, .axis-section-heading) .eyebrow .dot { display: none; }
body.pg-axis :is(.axis-scope-grid article, .axis-outcome-grid article, .axis-decisions li, .axis-layer, .axis-table-wrap, .axis-measured-panel) { box-shadow: inset 0 0 0 1.5px var(--ink); }
body.pg-axis :is(.axis-scope-grid article, .axis-outcome-grid article)::before { height: 6px; }
body.pg-axis .axis-role { background: color-mix(in srgb, var(--green) 12%, #fffdf9); box-shadow: inset 0 0 0 1.5px var(--ink); }
body.pg-axis .axis-hosting-plane { box-shadow: 0 0 0 1.5px var(--ink), 0 5px 0 var(--ink); }
/* the decisions divider sits in the gap above its panel, and the last panel keeps clear of the close's torn edge */
body.pg-axis #decisions::before { position: absolute; left: 50%; top: calc(-1 * (var(--si-tab) + var(--si-sec) / 2) - 13px); translate: -50% 0; margin: 0; }
body.pg-axis .axis-section.axis-outcomes { margin-bottom: var(--si-sec); }
body.pg .ax-close h2 { line-height: 1.04; }

/* Packages: a key on the English services page (the Turkish page has no .j-pack, so it keeps its three-key hero) and their own page, /pricing */
body.pg-services .j-pack { --c: var(--ink); animation-delay: -9s; }
body.pg-services .j-pack .arr { color: #fff; }
@media (hover: hover) and (pointer: fine) { body.pg-services .j-pack:hover .arr { transform: translateX(3px); } }
body.pg-pricing .sv-in { grid-template-columns: minmax(0, 1fr) auto; }
body.pg-pricing .sv-in .sub-copy { max-width: none; }
@media (min-width: 1001px) { body.pg-pricing .sv-in .body-still { display: block; width: 282px; margin: 31px 36px 33px; } }
@media (max-width: 1000px) { body.pg-pricing .sv-in { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 901px) and (max-width: 1100px) { body:has(.j-pack) .jumps { grid-template-columns: repeat(2, minmax(0, 1fr)); } body:has(.j-pack) .jump { animation: none; } }

.pk-sec { position: relative; display: flow-root; padding: 0 0 var(--si-sec); scroll-margin-top: 16px; }
.pk-w { width: var(--si-w); margin: 0 auto; }

.pk-group { display: flex; align-items: center; gap: 10px; margin-top: 44px; font: var(--display-w) 24px/1.15 var(--display); letter-spacing: -.005em; color: var(--ink); }
.pk-group img { width: 40px; height: 40px; }
.pk-price { font: var(--display-w) 22px/1.1 var(--display); color: var(--ink); white-space: nowrap; }
.pk-from { display: block; margin-bottom: 5px; font: 600 14px/1.2 "IS", system-ui, sans-serif; color: var(--ink-2); }
.pk-group, .pk-tier h4, .pk-extras h3, .pk-ex h4 { word-spacing: .12em; }
@media (min-width: 901px) { .pk-tiers.pk-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pk-for { color: var(--ink-2); font-size: 15.5px; line-height: 1.45; }

/* extras and the closing line, shared */
.pk-extras { margin-top: calc(var(--si-gap) + 20px); padding: var(--si-padc) var(--si-pad) calc(var(--si-padc) + 4px); border-radius: var(--si-rc); background: var(--si-paper); box-shadow: var(--si-edge); }
.pk-extras h3 { font: var(--display-w) 22px/1.15 var(--display); letter-spacing: -.005em; color: var(--ink); }
.pk-ex-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: 14px; padding-top: 16px; border-top: 1.5px dashed rgba(13, 27, 42, .22); }
.pk-ex { display: grid; gap: 6px; align-content: start; padding-right: var(--si-pad); }
.pk-ex + .pk-ex { padding: 0 0 0 var(--si-pad); border-left: 1.5px dashed rgba(13, 27, 42, .22); }
.pk-ex h4 { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.pk-ex-t { color: var(--ink-2); font-size: 15.5px; line-height: 1.45; }
.pk-strip { display: flex; align-items: center; justify-content: space-between; gap: var(--si-pad); margin-top: calc(var(--si-gap) + 5px); padding: var(--si-padc) var(--si-pad); border-radius: var(--si-rc); background: var(--si-card); box-shadow: var(--si-edge); }
.pk-strip p { color: var(--ink); font-size: 17px; font-weight: 500; line-height: 1.4; }
.pk-strip .btn { flex: none; }

/* folder cards; the rows of the grid keep sentence, price and ticks level across the row, the name sits on the tab */
.pk-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--si-gap); }
.pk-tier { --c: var(--green); --on: var(--ink); position: relative; display: grid; grid-row: span 3; grid-template-rows: subgrid; margin-top: calc(var(--si-tab) + 14px); padding: var(--si-padc); border-top: 6px solid var(--c); border-radius: 0 var(--si-rc) var(--si-rc) var(--si-rc); background: var(--si-paper); box-shadow: var(--si-edge); }
.pk-tier:nth-child(2) { --c: var(--pink); }
.pk-tier:nth-child(3) { --c: var(--amber); }
.pk-tier h4 { position: absolute; left: -1.5px; top: calc(-6px - var(--si-tab)); display: flex; align-items: center; height: var(--si-tab); padding: 2px 44px 0 var(--si-padc); border-radius: 12px 0 0 0; background: var(--c); color: var(--on); font: var(--display-w) 18px/1 var(--display); white-space: nowrap; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 100%, 0 100%); }
.pk-tier .pk-price { margin-top: 14px; font-size: clamp(21px, calc(3vw - 6px), 30px); }
.pk-tier .checks { align-self: start; margin-top: 16px; padding-top: 16px; border-top: 1.5px dashed rgba(13, 27, 42, .22); }
.pk-tier .checks li { font-size: 15px; }
@media (min-width: 701px) and (max-width: 900px) {
  .pk-tiers { grid-template-columns: minmax(0, 1fr); }
  .pk-tier { grid-row: auto; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--si-padc); }
  .pk-tier .pk-price { margin-top: 12px; font-size: 28px; }
  .pk-tier .checks { grid-column: 2; grid-row: 1 / 3; margin: 0; padding: 0 0 0 var(--si-padc); border-top: 0; border-left: 1.5px dashed rgba(13, 27, 42, .22); }
}
@media (max-width: 700px) {
  .pk-group { margin-top: 32px; font-size: 22px; }
  .pk-group img { width: 34px; height: 34px; }
  .pk-tiers { grid-template-columns: minmax(0, 1fr); }
  .pk-tier { grid-row: auto; grid-template-rows: none; }
  .pk-tier .pk-price { font-size: 28px; }
  .pk-extras { margin-top: calc(var(--si-gap) + 16px); padding: var(--si-padc); }
  .pk-ex-cols { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pk-ex { padding: 0; }
  .pk-ex + .pk-ex { padding: 16px 0 0; border-left: 0; border-top: 1.5px dashed rgba(13, 27, 42, .22); }
  .pk-strip { flex-direction: column; align-items: stretch; gap: 14px; padding: var(--si-padc); }
  .pk-strip .btn { justify-content: center; }
}
@media (max-width: 340px) { .pk-tier .pk-price { font-size: 25px; } }

/* Privacy: Home's filing system. The title and the flat lay share a paper index card with a tab; the six clauses are
   folder cards on the torn navy sheet. */
.pg-privacy .hero.inner { padding-bottom: 0; }
.pg-privacy .hero.inner::before { content: none; }
.pg-privacy #top > .pv-in { width: var(--si-w); max-width: none; margin: calc(28px + var(--si-tab)) auto 0; padding: var(--si-pad); gap: var(--si-pad); align-items: center; border-radius: 0 var(--si-r) var(--si-r) var(--si-r); background: var(--si-paper); box-shadow: var(--si-edge); }
.pg-privacy #top > .pv-in::before { content: ""; position: absolute; left: -1.5px; top: calc(-1 * var(--si-tab)); width: 184px; height: var(--si-tab); box-sizing: border-box; border-style: solid; border-color: var(--ink); border-width: 1.5px 0 0 1.5px; border-radius: 12px 0 0 0; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 100%, 0 100%);
  background: linear-gradient(to top right, transparent calc(50% - 1.5px), var(--ink) calc(50% - 1.5px), var(--ink) 50%, transparent 50%) right top / 22px 100% no-repeat border-box, var(--si-paper); }
.pg-privacy .sub-copy h1 { margin-top: 0; }
.pg-privacy .body-still { display: block; overflow: hidden; width: min(100%, 460px); justify-self: center; margin: 0; border-radius: var(--si-rc); box-shadow: var(--si-ring), 0 14px 24px -14px rgba(18, 29, 43, .5); rotate: -1.2deg; transition: rotate .6s var(--ease-x), scale .6s var(--ease-x); }
.pg-privacy .body-still::after { content: none; }
.pv-sec { position: relative; margin: 70px 0 60px; padding: 130px 0 150px; color: #fff; background: url(/pro/art/corner-520.webp) -40px 16px / 480px no-repeat, #121d2b url(/pro/art/navy-768.webp) 0 0 / 768px; }
.pv-sec::before, .pv-sec::after { content: ""; display: block; position: absolute; z-index: 3; left: 0; right: 0; height: 120px; pointer-events: none; }
.pv-sec::before { inset: -60px 0 auto; background: url(/pro/art/deckle-a-1080.webp) 50% 0 / auto 100% repeat-x; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%); mask-image: linear-gradient(180deg, transparent, #000 30%); }
.pv-sec::after { bottom: -60px; background: url(/pro/art/deckle-b-1080.webp) 50% 100% / auto 100% repeat-x; -webkit-mask-image: linear-gradient(0deg, transparent, #000 30%); mask-image: linear-gradient(0deg, transparent, #000 30%); }
.pg-privacy .pv-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 58px var(--si-gap); width: var(--si-w); max-width: none; margin: 0 auto; padding: 0; }
.pv-row { --c: var(--green); position: relative; margin: 26px 0 0; padding: var(--si-padc); border-top: 6px solid var(--c); border-radius: 0 var(--si-rc) var(--si-rc) var(--si-rc); background: var(--si-paper); box-shadow: var(--si-edge-n); font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.pv-row:nth-child(3n+2) { --c: var(--pink); }
.pv-row:nth-child(3n) { --c: var(--amber); }
.pv-row::before { content: ""; position: absolute; left: 0; top: -32px; width: 132px; height: 26px; border-radius: 10px 0 0 0; background: var(--c); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 100%, 0 100%); transition: translate .35s var(--ease-x); }
.pv-row strong { display: block; margin-bottom: 8px; font: var(--display-w) clamp(24px, 2vw, 30px)/1.1 var(--display); letter-spacing: -.005em; color: var(--ink); }
.pv-row a { color: #077a55; text-underline-offset: 4px; }
.pv-date { grid-column: 1 / -1; margin: 0; text-align: center; color: rgba(255, 255, 255, .72); font-size: 15px; }
.js .pv-row.rv { transition: opacity .32s var(--ease-io) var(--rd, 0ms), transform .32s var(--ease-io) var(--rd, 0ms), translate .35s var(--ease-x), box-shadow .35s var(--ease-x); }
@media (hover: hover) {
  .pg-privacy .body-still:hover { rotate: 0deg; scale: 1.02; }
  .pv-row:hover { translate: 0 -6px; box-shadow: var(--si-edge-n), 0 22px 34px -18px rgba(0, 0, 0, .6); }
  .pv-row:hover::before { translate: 0 -5px; }
}
@media (prefers-reduced-motion: no-preference) {
  :where(html.js:not(.calm)) .pg-privacy .body-still { animation: pv-deal .9s var(--ease-x) .15s both; }
}
@keyframes pv-deal { from { opacity: 0; rotate: 5deg; translate: 0 26px; } }
@media (max-width: 700px) {
  .pg-privacy #top > .pv-in { margin-top: calc(14px + var(--si-tab)); }
  .pg-privacy #top > .pv-in::before { width: 132px; }
  .pg-privacy .body-still { width: 100%; }
  .pv-sec { margin: 44px 0 40px; padding: 64px 0 76px; background: url(/pro/art/corner-300.webp) -40px -8px / 240px no-repeat, #121d2b url(/pro/art/navy-512.webp) 0 0 / 512px; }
  .pv-sec::before, .pv-sec::after { height: 64px; background-image: url(/pro/art/deckle-a-560.webp); }
  .pv-sec::before { top: -32px; }
  .pv-sec::after { bottom: -32px; background-image: url(/pro/art/deckle-b-560.webp); }
  .pg-privacy .pv-list { grid-template-columns: minmax(0, 1fr); gap: 46px; }
  .pv-row { margin-top: 22px; font-size: 17px; }
}