/* ============================================================
   Roche Digital — site styles
   Loaded after assets/brand.css (the kit: tokens + .rd-* helpers,
   a copy of code/roche-digital/_brand/styles.css).

   Every page on this site is built from the same parts, so a new
   page is markup only:

     .nav / .foot          the shared header and footer
     .wrap                 the centred column (--wide, --narrow)
     .sec-head             mono index + name + hairline drawn across
     .hero / .page-head    the homepage hero, and a subpage header
     .prose                lead paragraph and body copy
     .cards / .card        raised white cards in a grid
     .steps                numbered rows with a faint italic numeral
     .band                 a full-width photograph
     .frames               the photograph grids (--two, --three, --mosaic)
     .tiers / .tier        pricing tiers (hidden pages only)
     .tbl                  the fee and package tables (hidden pages only)
     .faq                  details/summary list
     .close                the closing block with contact actions
     .dark                 the one ink surface a page is allowed
     .browser / .phone     device frames round a screenshot
     .caret .cursor .spec .hood   the code accents, see their block

   Phone first. Two breakpoints only: 620px and 980px.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; overflow-x: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.dark :focus-visible { outline-color: var(--accent-on-ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Labels: the kit's --ink-3 is decorative only, so labels use their own
   accessible grey (4.8:1 on paper). See BRAND.md section 5. */
:root { --label: #726D64; --accent-on-ink: #7C86FF; }
.mono { font-family: var(--font-mono); font-size: var(--text-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.dark .mono { color: rgba(247, 246, 243, .6); }

/* --- Layout ------------------------------------------------- */
.wrap { max-width: 78rem; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3.5rem); }
.wrap--narrow { max-width: 54rem; }
.wrap--wide { max-width: 90rem; }
section { padding-block: clamp(4rem, 3rem + 4vw, 7rem); }
/* On a phone a split is one column: give the second half room, so a lead never
   sits hard against the list under it. */
.split { display: grid; gap: 2.5rem; }
.sec-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.sec-head .idx { color: var(--accent); }
.dark .sec-head .idx { color: var(--accent-on-ink); }
.sec-head .line { flex: 1; height: 1px; background: var(--hairline-strong); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease-inout); }
.dark .sec-head .line { background: var(--hairline-on-ink); }
.sec-head.in .line, html.no-js .sec-head .line { transform: none; }

/* --- Type --------------------------------------------------- */
.d { font-family: var(--font-display); font-weight: var(--display-weight); line-height: 1.03; letter-spacing: var(--track-display); color: var(--ink); text-wrap: balance; }
.d em { font-style: italic; font-weight: 400; font-variation-settings: "SOFT" 60; }
.dark .d { color: var(--paper); }
h1.d { font-size: clamp(2.6rem, 1.2rem + 6vw, 5.4rem); }
h2.d { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.6rem); max-width: 18ch; }
h3.d { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); line-height: 1.2; }
/* Paragraphs avoid a one-word last line where the browser can (Chrome and
   Safari honour text-wrap: pretty; the rest ignore it). */
.lead, .prose p, .steps p, .card p, .faq p, .bullets li, .tier li, .tbl small { text-wrap: pretty; }
.lead { font-size: var(--text-lead); line-height: 1.55; color: var(--ink-2); max-width: 54ch; margin-top: 1.5rem; }
.dark .lead { color: rgba(247, 246, 243, .75); }
.prose p { color: var(--ink-2); max-width: 62ch; }
.prose p + p { margin-top: 1rem; }
.dark .prose p { color: rgba(247, 246, 243, .75); }
strong { color: var(--ink); font-weight: 600; }
.dark strong { color: var(--paper); }
.price { font-family: var(--font-display); font-style: italic; font-weight: 400; font-variation-settings: "SOFT" 60; color: var(--ink); }
.dark .price { color: var(--paper); }
.nw { white-space: nowrap; }

/* --- Buttons and links -------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: .6em; padding: .95em 1.7em; border: 0; border-radius: var(--radius-pill); background: var(--ink); color: var(--paper); font-family: var(--font-body); font-size: var(--text-small); font-weight: 500; text-decoration: none; cursor: pointer; transition: background var(--dur-fast) ease, transform var(--dur-fast) var(--ease-hover); }
.btn:hover { background: #000; transform: translateY(-1px); }
.btn .arw { transition: transform var(--dur-fast) var(--ease-hover); }
.btn:hover .arw { transform: translateX(4px); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.btn--ghost:hover { background: var(--paper-raised); }
.dark .btn { background: var(--paper); color: var(--ink); }
.dark .btn--ghost { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px var(--hairline-on-ink); }
.tlink { position: relative; padding-bottom: 2px; text-decoration: none; font-weight: 500; color: var(--ink); }
.tlink::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--dur-fast) var(--ease-inout); }
.tlink:hover::after { transform: scaleX(1); transform-origin: left; }
.dark .tlink { color: var(--paper); }

/* --- Nav ---------------------------------------------------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-height); display: flex; align-items: center; background: transparent; border-bottom: 1px solid transparent; transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, backdrop-filter var(--dur-fast) ease; }
.nav.is-scrolled { background: rgba(247, 246, 243, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: var(--hairline); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; }
.brand { display: inline-block; padding-block: .35rem; font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.brand em { font-style: italic; font-weight: 400; font-variation-settings: "SOFT" 60; }
.nav-links { display: none; align-items: center; gap: 1.75rem; }
.nav-links a { display: inline-block; padding-block: .75rem; color: var(--ink-2); text-decoration: none; transition: color var(--dur-fast) ease; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-cta { display: none; }
.burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; border: 0; background: none; cursor: pointer; }
.burger span { display: block; height: 1.5px; background: var(--ink); transition: transform var(--dur-fast) var(--ease-inout), opacity var(--dur-fast) ease; }
.nav.is-open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav.is-open .burger span:nth-child(2) { opacity: 0; }
.nav.is-open .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.menu { position: fixed; inset: var(--nav-height) 0 auto 0; background: var(--paper); border-bottom: 1px solid var(--hairline); padding: 1rem clamp(1.25rem, 4vw, 3.5rem) 2rem; display: grid; gap: .25rem; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
.nav.is-open .menu { opacity: 1; transform: none; pointer-events: auto; }
.menu a { display: flex; align-items: baseline; gap: .8rem; padding: .9rem 0; border-top: 1px solid var(--hairline); font-family: var(--font-display); font-weight: 460; font-size: 1.6rem; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.menu a .mono { color: var(--accent); }

/* --- Hero (homepage) ---------------------------------------- */
.hero { position: relative; min-height: min(96svh, 54rem); display: flex; align-items: flex-end; padding-top: calc(var(--nav-height) + 2rem); padding-bottom: 3rem; overflow: hidden; }
.hero-field { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s ease; mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 70%, transparent 98%); }
.hero-field.in { opacity: 1; }
.hero .wrap { position: relative; z-index: 1; width: 100%; }
.hero .kicker { display: inline-flex; align-items: center; gap: .75em; color: var(--ink-2); }
.hero .kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hero h1 { margin-top: 1.75rem; max-width: 15ch; }
.hero-aside { margin-top: 2rem; max-width: 34rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero-foot { display: flex; align-items: center; gap: 1.25rem; margin-top: 3.5rem; padding-top: 1.25rem; border-top: 1px solid var(--hairline); }
.hero-foot .line { flex: 1; height: 1px; background: var(--hairline); }
.hero-foot .mono:last-child { white-space: nowrap; }
.hero-foot .mono:first-child { min-width: 0; }

/* --- Subpage header ----------------------------------------- */
.page-head { padding-top: calc(var(--nav-height) + clamp(3rem, 2rem + 5vw, 6rem)); padding-bottom: clamp(2.5rem, 2rem + 3vw, 4rem); }
.page-head .kicker { display: inline-flex; align-items: center; gap: .75em; color: var(--ink-2); }
.page-head .kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.page-head h1 { margin-top: 1.5rem; max-width: 16ch; }
.page-head .lead { margin-top: 1.75rem; }
.page-head .btn { margin-top: 2rem; }
.page-head + section:not(.dark) { padding-top: 2.5rem; }

/* --- Cards -------------------------------------------------- */
.cards { display: grid; gap: 1rem; }
.card { display: flex; flex-direction: column; gap: .75rem; padding: 1.75rem; background: var(--paper-raised); border: 1px solid var(--hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); text-decoration: none; color: inherit; transition: transform var(--dur-fast) var(--ease-hover), border-color var(--dur-fast) ease; }
a.card:hover { transform: translateY(-3px); border-color: var(--hairline-strong); }
.card p { color: var(--ink-2); font-size: .97rem; max-width: 60ch; }
.card .go { margin-top: auto; padding-top: .5rem; display: inline-flex; align-items: center; gap: .5em; font-size: var(--text-small); font-weight: 500; color: var(--ink); }
a.card:hover .go .arw { transform: translateX(4px); }
.card .go .arw { transition: transform var(--dur-fast) var(--ease-hover); }
.card--flat { box-shadow: none; background: transparent; }

/* --- Numbered rows ------------------------------------------ */
.steps { display: grid; gap: 0; }
.steps--row { margin-top: 2.5rem; }
.steps li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.5rem 0; border-top: 1px solid var(--hairline); }
.steps li:last-child { border-bottom: 1px solid var(--hairline); }
.dark .steps li { border-color: var(--hairline-on-ink); }
.steps .n { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 2.2rem; line-height: 1; color: rgba(22, 21, 19, .22); }
.dark .steps .n { color: rgba(247, 246, 243, .3); }
.steps p { margin-top: .4rem; color: var(--ink-2); max-width: 46ch; }
.dark .steps p { color: rgba(247, 246, 243, .72); }

/* --- Bullets ------------------------------------------------ */
.bullets li { position: relative; padding: .35rem 0 .35rem 1.15rem; color: var(--ink-2); max-width: 62ch; }
.bullets li::before { content: ""; position: absolute; left: 0; top: .95rem; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.dark .bullets li { color: rgba(247, 246, 243, .75); }
.dark .bullets li::before { background: var(--accent-on-ink); }

/* --- Photographs -------------------------------------------- */
.band { position: relative; }
.band img { width: 100%; height: clamp(18rem, 52vh, 40rem); object-fit: cover; }
.band figcaption { max-width: 78rem; margin-inline: auto; padding: .9rem clamp(1.25rem, 4vw, 3.5rem) 0; }
/* A figure is a column: the image takes its aspect ratio, then grows to fill the
   grid row, so two frames side by side end level and their captions share a
   baseline. Wide frames (.span2) span two columns from 620px up and pack densely,
   so a mosaic never leaves a hole beside a portrait. */
.frames { display: grid; gap: .75rem; }
.frames figure { margin: 0; display: flex; flex-direction: column; }
.frames img { width: 100%; height: auto; flex: 1 0 auto; min-height: 0; object-fit: cover; border-radius: 4px; }
.frames figcaption { margin-top: .6rem; }
.frames--two, .frames--three, .frames--mosaic { grid-template-columns: 1fr; }
.frames--two img { aspect-ratio: 1 / 1; }
.frames--mosaic img { aspect-ratio: 4 / 5; }
.frames--mosaic .span2 img { aspect-ratio: 3 / 2; }
.frames--three img { aspect-ratio: 4 / 5; }
/* a row of three in landscape, for mixed sources where a tall crop loses the shot */
.frames--three.frames--wide img { aspect-ratio: 3 / 2; }
.frames--four { grid-template-columns: 1fr 1fr; }
.frames--four img { aspect-ratio: 4 / 5; }
/* Two photographs across the full width, no gutter, for a change of pace
   between sections. Stacks on a phone. */
.pair { display: grid; }
.pair img { width: 100%; height: clamp(15rem, 40vh, 28rem); object-fit: cover; }
/* A photograph beside a block of copy. The photograph leads on a phone. */
.duo { display: grid; gap: 1.5rem; }
.duo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-card); }
.duo .copy { align-self: center; }
.tall img { aspect-ratio: 4 / 5; }
.wide img { aspect-ratio: 3 / 2; }

/* --- Device frames: a browser window and a phone round a screenshot --- */
.browser { position: relative; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--hairline-strong); box-shadow: var(--shadow-card); }
.browser-bar { display: flex; gap: 6px; padding: 9px 12px; background: var(--paper-deep); border-bottom: 1px solid var(--hairline); }
.browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(22,21,19,.16); }
.browser img { width: 100%; height: auto; }
.browser--dark { border-color: rgba(247,246,243,.14); box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); }
.browser--dark .browser-bar { background: #26241f; border-bottom-color: rgba(247,246,243,.08); }
.browser--dark .browser-bar i { background: rgba(247,246,243,.2); }
/* The phone is drawn in proportion, like an iPhone: the bezel, the corner radius and the island all
   scale with its width, so it reads right at any size. The screenshot sits below a status-bar strip
   and above a home-bar strip (the img's own padding, coloured to match the app's top and bottom edge
   with --top and --bot), so the rounded corners only ever cut empty screen, never the app. Set them
   inline when an app's edge isn't paper: style="--top:#263c3e;--bot:#f7f3eb". */
.phone { --top: #f7f6f2; --bot: #f7f6f2; position: relative; padding: 3.4%; border-radius: 16.3% / 7.4%; background: #0d0c0b; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.1); }
.phone::after { content: ""; position: absolute; left: 50%; top: 2.7%; width: 30%; height: 3.6%; transform: translateX(-50%); border-radius: 999px; background: #000; }
.phone img { display: block; width: 100%; height: auto; box-sizing: border-box; padding: 13% 0 5%; background: linear-gradient(var(--top) 50%, var(--bot) 50%); border-radius: 13.5% / 6.2%; }

/* --- The code accents (29 Sep 2026) -------------------------
   JetBrains Mono borrowed from the homepage intro, used as an accent only:
   headlines and body copy stay Fraunces and Inter.
   .caret     the blue block that types a section label (site.js)
   .cursor    the same block, blinking at the end of a key headline
   .spec      a one-line spec under a project, prompt first
   .hood      "under the hood": a real record beside what it becomes */
.sec-head .typing .ch { visibility: hidden; }
.sec-head .typing .ch.on { visibility: visible; }
.caret { display: inline-block; width: .6em; height: 1.2em; margin-left: .1em; vertical-align: -.25em; background: var(--accent); }
.dark .caret { background: var(--accent-on-ink); }
.caret.blink { animation: blink 1s steps(1) infinite; }
.cursor { display: inline-block; width: .3em; height: .7em; margin-left: .08em; vertical-align: -.02em; background: var(--accent); animation: blink 1.1s steps(1) infinite; }
.dark .cursor { background: var(--accent-on-ink); }
@keyframes blink { 50% { opacity: 0; } }
.spec { display: flex; flex-wrap: wrap; gap: .1rem .55rem; align-items: baseline; font-family: var(--font-mono); font-size: .8rem; font-weight: 400; letter-spacing: 0; color: var(--ink-2); }
.spec::before { content: "\203a"; color: var(--accent); font-weight: 500; }
.spec span { white-space: nowrap; }
.spec span + span::before { content: "\00b7"; margin-right: .55rem; color: var(--label); }
.dark .spec span + span::before { color: rgba(247, 246, 243, .4); }
.dark .spec { color: rgba(247, 246, 243, .62); }
.dark .spec::before { color: var(--accent-on-ink); }
.hood { display: grid; gap: 1.75rem; }
.code { margin: 0; padding: 1.25rem 1.4rem; overflow-x: auto; background: var(--paper-raised); border: 1px solid var(--hairline-strong); border-radius: 12px; box-shadow: var(--shadow-soft); font-family: var(--font-mono); font-size: clamp(.78rem, .74rem + .2vw, .86rem); line-height: 1.75; color: var(--ink); tab-size: 2; }
.code .k { color: var(--ink-2); }
.code .s { color: var(--accent); }
.code .n { color: #8A5A1E; }
.code .c { color: var(--label); }
.code-bar { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; padding-bottom: .7rem; border-bottom: 1px solid var(--hairline); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--label); }
@media (prefers-reduced-motion: reduce) {
  .cursor, .caret.blink { animation: none; }
}
@media (min-width: 980px) {
  .hood { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 1rem + 4vw, 5rem); align-items: center; }
}

/* --- Pull quote --------------------------------------------- */
.pull { padding-block: 2rem; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.pull p { font-family: var(--font-display); font-style: italic; font-weight: 400; font-variation-settings: "SOFT" 60; font-size: var(--text-pull); line-height: 1.25; color: var(--ink); max-width: 26ch; }

/* --- Dark surface ------------------------------------------- */
.dark { background: var(--ink); color: var(--paper); }

/* --- Tiers (hidden pricing pages) --------------------------- */
.tiers { display: grid; gap: 1rem; align-items: stretch; }
.tier { position: relative; display: flex; flex-direction: column; padding: 1.9rem 1.5rem 1.5rem; background: var(--paper-raised); border: 1px solid var(--hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); }
.tier--pick { border-color: var(--ink); box-shadow: var(--shadow-card); }
.tier .flag { position: absolute; top: 1.1rem; right: 1.1rem; padding: .3rem .6rem; border-radius: var(--radius-pill); background: var(--accent); color: var(--paper); font-size: .62rem; }
.tier .nm { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.7rem; letter-spacing: -0.01em; color: var(--ink); }
.tier .for { margin-top: .3rem; color: var(--ink-2); font-size: .95rem; }
.tier .amt { display: flex; align-items: baseline; gap: .5rem; margin-top: 1.4rem; }
.tier .amt .price { font-size: clamp(2.4rem, 2rem + 1.6vw, 3.2rem); line-height: 1; }
.tier .note { margin-top: .7rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--hairline); color: var(--ink-2); font-size: .85rem; }
.tier ul { margin: .5rem 0 1.5rem; }
.tier li { position: relative; padding: .6rem 0 .6rem 1.15rem; font-size: .93rem; line-height: 1.5; color: var(--ink-2); border-top: 1px solid var(--hairline); }
.tier li:first-child { border-top: 0; }
.tier li::before { content: ""; position: absolute; left: 0; top: 1.1rem; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.tier li.inc { padding-left: 0; color: var(--accent); font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: .14em; text-transform: uppercase; }
.tier li.inc::before { display: none; }
.tier .btn { margin-top: auto; justify-content: center; }

/* --- Tables (fees, add-ons, packages) ----------------------- */
.tbl { width: 100%; border-collapse: collapse; }
.wrap > .tbl { max-width: 64rem; }
.tbl th { font-family: var(--font-mono); font-size: var(--text-label); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--label); text-align: left; padding: 0 1rem .6rem 0; }
.tbl td { padding: .9rem 1rem .9rem 0; border-top: 1px solid var(--hairline); color: var(--ink-2); vertical-align: top; font-size: .95rem; }
.tbl td:last-child, .tbl th:last-child { text-align: right; padding-right: 0; white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 1px solid var(--hairline); }
.tbl .row-h { color: var(--ink); font-weight: 500; }
.tbl small { display: block; margin-top: .25rem; color: var(--ink-3); font-size: .82rem; line-height: 1.45; }

/* --- FAQ ---------------------------------------------------- */
.faq details { border-top: 1px solid var(--hairline); }
.faq details:last-of-type { border-bottom: 1px solid var(--hairline); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.1rem 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 460; font-size: 1.1rem; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--accent); transition: transform var(--dur-fast) ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 2rem 1.2rem 0; max-width: 64ch; color: var(--ink-2); }

/* --- Close block -------------------------------------------- */
.close { text-align: center; }
.close h2, .close .lead { margin-inline: auto; }
.close .lead { max-width: 46ch; }
.acts { display: grid; gap: .6rem; margin-top: 2.5rem; text-align: left; }
.acts li { display: flex; }
.acts .act { width: 100%; }
.close .acts { max-width: 28rem; margin-inline: auto; }
.act strong, .act small { overflow-wrap: anywhere; }
.act { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; background: var(--paper-raised); border: 1px solid var(--hairline); border-radius: var(--radius-card); text-decoration: none; color: var(--ink); transition: transform var(--dur-fast) var(--ease-hover), border-color var(--dur-fast) ease; }
.act:hover { transform: translateY(-2px); border-color: var(--hairline-strong); }
.act svg { width: 22px; height: 22px; flex: none; color: var(--accent); }
.act small { display: block; margin-top: .15rem; color: var(--ink-2); font-size: .85rem; }

/* --- Contact form ------------------------------------------- */
.form { display: grid; gap: 1rem; }
.field { display: grid; gap: .4rem; }
.field input, .field textarea { width: 100%; padding: .85rem 1rem; font: inherit; color: var(--ink); background: var(--paper-raised); border: 1px solid var(--hairline-strong); border-radius: 10px; }
.field textarea { resize: vertical; }
.hp { position: absolute; left: -9999px; }
.form-done { display: none; padding: 1.1rem 1.25rem; border: 1px solid var(--accent); border-radius: var(--radius-card); color: var(--ink); }
.form.is-done .field, .form.is-done .btn { display: none; }
.form.is-done .form-done { display: block; }

/* --- Footer ------------------------------------------------- */
.foot { padding-block: 3rem; border-top: 1px solid var(--hairline); }
.foot .wrap { display: grid; gap: 1.75rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 1.75rem; }
.foot-links a { display: inline-block; padding-block: .8rem; color: var(--ink-2); text-decoration: none; }
.foot-links a:hover { color: var(--ink); }
.foot .note { color: var(--ink-3); font-size: .85rem; }

/* --- Reveals ------------------------------------------------ */
html.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform 1s var(--ease-out); }
html.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .sec-head .line { transform: none; }
}

/* ============================================================
   620px and up
   ============================================================ */
@media (min-width: 620px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .frames--two { grid-template-columns: 1fr 1fr; }
  .frames--three { grid-template-columns: repeat(3, 1fr); }
  .pair { grid-template-columns: 1fr 1fr; }
  .frames--mosaic { grid-template-columns: 1fr 1fr; grid-auto-flow: dense; }
  .frames--mosaic .span2 { grid-column: span 2; }
  .frames--mosaic .span2 img { aspect-ratio: 8 / 5; }
  .cards--3 > :nth-child(3):last-child { grid-column: 1 / -1; }
  .foot .wrap { grid-template-columns: 1fr auto; align-items: center; }
  .foot-links { grid-column: 1 / -1; order: 3; }
}

/* ============================================================
   980px and up
   ============================================================ */
@media (min-width: 980px) {
  .burger, .menu { display: none; }
  .nav-links, .nav-cta { display: inline-flex; }
  .hero h1 { max-width: 14ch; font-size: clamp(3.6rem, 1rem + 4.7vw, 5.4rem); }
  .hero-aside { margin-left: auto; max-width: 30rem; }
  .hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 2.5rem; align-items: end; }
  .split { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2.5rem, 1.5rem + 4vw, 5rem); align-items: start; }
  .split--even { grid-template-columns: 1fr 1fr; }
  .split > .sticky { position: sticky; top: calc(var(--nav-height) + 2rem); }
  .cards--3 { grid-template-columns: repeat(3, 1fr); }
  .cards--3 > :nth-child(3):last-child { grid-column: auto; }
  .cards--4 { grid-template-columns: repeat(4, 1fr); }
  .steps--row { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
  .steps--row.steps--3 { grid-template-columns: repeat(3, 1fr); }
  .steps--row li { border-bottom: 0; }
  .steps--row li:last-child { border-bottom: 0; }
  .tiers--3 { grid-template-columns: repeat(3, 1fr); }
  .frames--mosaic { grid-template-columns: repeat(3, 1fr); }
  .frames--four { grid-template-columns: repeat(4, 1fr); }
  .pair { grid-template-columns: 1fr 1fr; }
  .duo { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; }
  .duo--flip img { order: 2; }
  .frames--mosaic .span2 { grid-column: span 2; }
  .frames--mosaic .span2 img { aspect-ratio: 8 / 5; }
  .acts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .close .acts { max-width: 56rem; }
}