@font-face { font-family: 'Sofia Sans Extra Condensed'; src: url('fonts/sofia-sans-extra-condensed-latin-wght-normal.woff2') format('woff2'); font-weight: 1 1000; 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+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Sofia Sans Extra Condensed'; src: url('fonts/sofia-sans-extra-condensed-cyrillic-wght-normal.woff2') format('woff2'); font-weight: 1 1000; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Sofia Sans'; src: url('fonts/sofia-sans-latin-wght-normal.woff2') format('woff2'); font-weight: 1 1000; 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+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Sofia Sans'; src: url('fonts/sofia-sans-cyrillic-wght-normal.woff2') format('woff2'); font-weight: 1 1000; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Vollkorn'; src: url('fonts/vollkorn-latin-wght-normal.woff2') format('woff2'); font-weight: 400 900; 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+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Vollkorn'; src: url('fonts/vollkorn-cyrillic-wght-normal.woff2') format('woff2'); font-weight: 400 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  --cyan: #05adef;
  --navy: #0a2f66;
  --ink: #0a2747;
  --ink-soft: #33496a;
  --paper: #ffffff;
  --rule: #0a2747;
  --go: #28c257;
  --go-hover: #3dd46c;
  --go-ink: #04210f;
  --chat: #dcf8c6;
  --pen: #d92f27;
  --logo-blue: #1e75bc;
  --on-navy: #ffffff;
  --on-navy-soft: #c6d6ea;

  --display: 'Sofia Sans Extra Condensed', 'Arial Narrow', sans-serif;
  --text: 'Vollkorn', Georgia, serif;
  --ui: 'Sofia Sans', 'Segoe UI', sans-serif;

  --gutter: clamp(16px, 2.6vw, 40px);
  --band: clamp(56px, 8vw, 112px);
  --top: 68px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--top) + 16px); scrollbar-color: var(--navy) var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.125rem/1.55 var(--text); caret-color: var(--pen); }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
legend { padding: 0; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--navy); color: #fff; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.top :focus-visible, .how :focus-visible, .foot :focus-visible, .dock :focus-visible, .related :focus-visible { outline-color: #fff; }
.menu nav :focus-visible { outline-color: var(--ink); }

h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 0.94; letter-spacing: 0; text-wrap: balance; }
h1 { font-size: clamp(3.4rem, 7.4vw, 7rem); line-height: 0.9; }
h2 { font-size: clamp(2.8rem, 5vw, 4.75rem); }
h3 { font-size: clamp(1.9rem, 2.6vw, 2.3rem); line-height: 1; }
.lead { font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.4; max-width: 34em; }

.wrap { max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap-steps { max-width: 860px; }
.wrap-narrow { max-width: 760px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.i { width: 1.25em; height: 1.25em; flex: none; }

.skip { position: absolute; left: 12px; top: -80px; z-index: 40; padding: 10px 14px; background: #fff; font: 700 1rem var(--ui); transition: transform 160ms var(--ease-out); }
.skip:focus { transform: translateY(92px); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 52px; padding: 0.55em 1.2em; border: 0; border-radius: 3px; background: var(--go); color: var(--go-ink); font: 800 1.2rem/1.1 var(--ui); text-decoration: none; text-align: center; transition: transform 140ms var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn-big { min-height: 62px; padding-inline: 1.4em; font-size: 1.35rem; }
.btn-small { min-height: 44px; padding: 0.3em 0.85em; font-size: 1.05rem; }
.btn-outline { width: 100%; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn[disabled] { opacity: 0.6; cursor: wait; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--go-hover); }
  .btn-outline:hover { background: var(--ink); color: #fff; }
}

/* Masthead */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); height: var(--top); padding-inline: var(--gutter); background: var(--navy); color: var(--on-navy); }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; font: 800 clamp(1.3rem, 2vw, 1.6rem)/1 var(--display); letter-spacing: 0.015em; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.brand img { width: 44px; height: 44px; padding: 3px; border-radius: 50%; background: #fff; }
.top nav { display: flex; gap: clamp(16px, 2vw, 30px); font: 600 1.05rem var(--ui); }
.top nav a, .lang { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.lang { font: 700 1.05rem var(--ui); }
@media (hover: hover) and (pointer: fine) {
  .top nav a:hover, .lang:hover { text-decoration: underline; text-decoration-thickness: 2px; }
}
.menu { display: none; position: relative; }
.menu summary { display: grid; place-items: center; width: 44px; height: 44px; list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu .i { width: 28px; height: 28px; }
.menu nav { position: absolute; right: 0; top: 52px; display: grid; gap: 0; min-width: 220px; padding: 8px; background: #fff; color: var(--ink); box-shadow: 0 16px 36px -14px rgb(6 24 48 / 0.6); transform-origin: top right; }
.menu[open] nav { animation: pop 180ms var(--ease-out); }
.menu nav a { padding: 8px 12px; }
@keyframes pop { from { opacity: 0; transform: scale(0.96) translateY(-4px); } }

/* Cover */
.cover { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 29vw, 420px); grid-template-rows: auto minmax(0, 1fr); column-gap: clamp(20px, 2.6vw, 40px); min-height: calc(100svh - var(--top)); padding-right: var(--gutter); background: var(--cyan); }
.cover h1 { grid-column: 1; padding: clamp(18px, 2.2vw, 30px) 0 clamp(16px, 1.8vw, 24px) var(--gutter); }
.cover-photo { position: relative; grid-column: 1; min-height: clamp(280px, 44vh, 620px); overflow: hidden; }
.cover-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 38% 66%; animation: settle 700ms var(--ease-out) both; }
.dropped { position: absolute; right: clamp(14px, 2.4vw, 36px); bottom: clamp(14px, 2.4vw, 36px); width: clamp(132px, 19vw, 280px); padding: 7px; background: #fff; box-shadow: 0 12px 26px -8px rgb(6 24 48 / 0.6); transform: rotate(1.6deg); animation: drop 520ms var(--ease-out) 220ms both; }
.dropped img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 75% 80%; }
@keyframes settle { from { opacity: 0; transform: scale(1.035); } }
@keyframes drop { from { opacity: 0; transform: translateY(-16px) rotate(-3deg) scale(1.05); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

.slip { position: absolute; left: 0; bottom: 0; max-width: min(56%, 600px); padding: 7px var(--gutter) 7px var(--gutter); background: #fff; color: var(--ink); font: 500 0.8125rem/1.3 var(--ui); }
.slip a, figcaption a { color: inherit; }

/* The white panel */
.panel { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; margin-block: clamp(16px, 1.8vw, 26px) var(--gutter); padding: clamp(20px, 1.8vw, 26px); background: var(--paper); animation: rise 480ms var(--ease-out) 80ms both; }
.panel-sub { font-size: 1.125rem; line-height: 1.35; margin-bottom: 18px; }
.panel h2 { font-size: 2.4rem; margin-bottom: 12px; }
.picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 2px; justify-items: start; margin-inline: -4px; }
.pick { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 4px 14px; border: 0; background: none; font: 600 1.15rem/1.15 var(--ui); cursor: pointer; transition: transform 140ms var(--ease-out); -webkit-tap-highlight-color: transparent; }
.pick:active { transform: scale(0.97); }
.pick > span { position: relative; }
.pick input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.pick:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 1px; }
.ring, .ring-rest { position: absolute; left: -7px; top: -1px; width: calc(100% + 14px); height: calc(100% + 2px); overflow: visible; pointer-events: none; }
.ring-rest path { fill: none; stroke: var(--ink); stroke-width: 1.2; opacity: 0.38; stroke-linecap: round; }
.pick[aria-pressed='true'] .ring-rest, .pick input:checked ~ .ring-rest { opacity: 0; }
.ring { opacity: 0; transform: scale(0.93) rotate(-2.5deg); transition: opacity 120ms ease-out, transform 200ms var(--ease-out); pointer-events: none; }
.ring path { fill: none; stroke: var(--pen); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pick[aria-pressed='true'] .ring, .pick input:checked ~ .ring { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .pick:hover .ring { opacity: 0.45; transform: none; }
  .pick[aria-pressed='true']:hover .ring, .pick input:checked ~ .ring { opacity: 1; }
}

.where { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: 14px; }
.where legend { float: none; width: 100%; padding-block: 0 2px; font: 600 1.05rem/1.2 var(--ui); color: var(--ink-soft); }
.send { margin-top: auto; padding-top: 16px; }
.bubble { position: relative; margin-bottom: 12px; padding: 11px 14px; background: var(--chat); border-radius: 10px 10px 2px 10px; font-size: 1.125rem; line-height: 1.32; min-height: 3.2em; }
.send .btn { display: flex; width: 100%; }

/* Printed pictures */
.crop { overflow: hidden; }
.crop img { width: 100%; }
figcaption { padding-top: 7px; font: 500 0.8125rem/1.3 var(--ui); color: var(--ink-soft); }
.tilted { transform: rotate(-1.2deg); padding: 8px 8px 6px; background: #fff; box-shadow: 0 16px 34px -14px rgb(6 24 48 / 0.5); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .drift .crop img { animation: drift linear both; animation-timeline: view(); }
    @keyframes drift { from { transform: translateY(-3%) scale(1.07); } to { transform: translateY(3%) scale(1.07); } }
  }
}

/* Contents */
.services { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); padding-block: var(--band); padding-right: var(--gutter); }
.services-photo .print { position: sticky; top: calc(var(--top) + 24px); }
.services-photo figcaption { padding-left: var(--gutter); }
.services-list .lead { margin-top: 14px; }
.contents { margin-top: clamp(24px, 3vw, 40px); border-top: 4px solid var(--ink); }
.contents a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 20px; padding: 16px 0 18px; border-bottom: 2px solid var(--ink); text-decoration: none; }
.contents strong { grid-column: 1; font: 800 clamp(1.9rem, 2.8vw, 2.5rem)/1 var(--display); transition: transform 180ms var(--ease-out); }
.contents-text { grid-column: 1; font-size: 1.0625rem; line-height: 1.4; color: var(--ink-soft); max-width: 40em; }
.contents-more { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; gap: 0.4em; font: 700 1rem var(--ui); white-space: nowrap; }
.contents-more .i { transition: transform 180ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .contents a:hover strong { transform: translateX(6px); }
  .contents a:hover .contents-more .i { transform: translateX(4px); }
}
.services-all { padding-block: var(--band); }
.services-all .contents { margin-top: 0; }

/* Picture story */
.how { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); background: var(--navy); color: var(--on-navy); }
.how-in { padding: var(--band) clamp(24px, 4vw, 64px) var(--band) var(--gutter); }
.how h2 { color: var(--cyan); }
.story { counter-reset: step; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px) clamp(24px, 3vw, 48px); margin-top: clamp(28px, 3.4vw, 48px); }
.story li { counter-increment: step; }
.story li::before { content: counter(step); display: block; font: 800 clamp(3.6rem, 5vw, 4.75rem)/0.9 var(--display); color: var(--cyan); }
.story h3 { margin-top: 6px; }
.story p { margin-top: 8px; color: var(--on-navy-soft); font-size: 1.0625rem; line-height: 1.45; }
.how-photo { display: flex; flex-direction: column; min-height: 100%; }
.how-photo .crop { flex: 1; min-height: 320px; position: relative; }
.how-photo img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: 62% 60%; }
.how-photo figcaption { padding: 8px var(--gutter) 10px 14px; color: var(--on-navy-soft); }

/* What we do, what they decide */
.honest { padding-block: var(--band); }
.honest-in { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.penned { position: relative; display: inline-block; }
.pen-under { position: absolute; left: -2px; bottom: -0.2em; width: calc(100% + 4px); height: 0.26em; overflow: visible; }
.pen-under path, .tick path { fill: none; stroke: var(--pen); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.honest .lead { margin-top: 24px; }
.ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); margin-top: clamp(26px, 3vw, 40px); }
.ledger ul { margin-top: 10px; }
.ledger li { position: relative; padding: 9px 0 10px; border-top: 2px solid var(--ink); line-height: 1.35; }
.marked li { padding-left: 34px; }
.tick { position: absolute; left: 0; top: 9px; width: 26px; height: 22px; overflow: visible; }
.values { margin-top: clamp(24px, 3vw, 36px); font: 800 clamp(1.6rem, 2.3vw, 2rem)/1.05 var(--display); text-wrap: balance; }
.proof { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 24px; font: 600 1.05rem var(--ui); }
.proof strong { font: 800 2.4rem/1 var(--display); }

/* FAQ */
.faq { padding-block: var(--band); background: var(--cyan); }
.faq-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 4vw, 56px); }
.faq h2 { position: sticky; top: calc(var(--top) + 24px); align-self: start; }
.faq details { border-top: 2px solid var(--ink); }
.faq details:last-child { border-bottom: 2px solid var(--ink); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding-block: 10px; font: 800 clamp(1.5rem, 2.2vw, 1.85rem)/1.05 var(--display); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq-mark { width: 26px; height: 26px; transition: transform 200ms var(--ease-out); }
.faq details[open] .faq-mark { transform: rotate(45deg); }
.faq details p { padding-bottom: 18px; max-width: 40em; }
.faq :focus-visible { outline-offset: 0; }

/* Close */
.close { position: relative; isolation: isolate; padding-block: clamp(32px, 5vw, 72px) clamp(56px, 6vw, 84px); }
.close-photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.close-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.close-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: start; gap: clamp(20px, 3vw, 40px); max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); }
.close-card { padding: clamp(22px, 3vw, 40px); background: var(--cyan); }
.close-card h2 { font-size: clamp(3rem, 6vw, 5.5rem); }
.close-card p { margin-block: 12px 20px; font-size: 1.25rem; line-height: 1.35; max-width: 26em; }

/* Form */
form.lead { display: grid; gap: 14px; padding: clamp(20px, 2.4vw, 28px); background: var(--paper); font: 500 1.05rem/1.3 var(--ui); }
form.lead h2, form.lead h3 { font-size: 2.1rem; }
.field { display: grid; gap: 4px; font-weight: 600; }
.field input { width: 100%; height: 52px; padding: 0 12px; border: 0; border-radius: 3px; background: #fff; box-shadow: inset 0 0 0 2px var(--ink); font: 500 1.125rem var(--ui); }
.field input:focus { outline: 3px solid var(--logo-blue); outline-offset: 1px; }
.field input[aria-invalid='true'] { box-shadow: inset 0 0 0 2px var(--pen); }
.field small { font: 500 0.9rem var(--ui); color: var(--ink-soft); }
.field .error { font: 600 0.95rem var(--ui); color: #b4231c; font-style: normal; }
.chips legend { font-weight: 600; margin-bottom: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-inline: -6px; }
.chips legend { padding-inline: 6px; }
.chips .pick { font-size: 1.05rem; padding-inline: 14px; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; }
.consent { font-size: 0.9rem; color: var(--ink-soft); }
.form-status { padding: 10px 12px; background: var(--chat); font-weight: 600; }
.form-status[data-state='error'] { background: #fde4e2; color: #8c1a14; }

/* Inner pages */
.spread { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(420px, 66vh, 680px); background: var(--cyan); }
.spread-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; padding: clamp(28px, 4vw, 64px) clamp(20px, 3vw, 48px) clamp(28px, 4vw, 64px) var(--gutter); }
.spread h1 { font-size: clamp(3.2rem, 6.2vw, 6rem); }
.spread .back { font: 700 1.1rem var(--ui); }
.spread-photo { position: relative; display: flex; flex-direction: column; }
.spread-photo .crop { position: relative; flex: 1; min-height: 280px; }
.spread-photo img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: 50% 70%; animation: settle 600ms var(--ease-out) both; }
.at-abra img { object-position: 38% 66%; }
.spread-photo figcaption { padding: 6px var(--gutter) 8px 12px; background: #fff; color: var(--ink); }
.page-body { padding-block: var(--band); }
.page-body h2 { margin-top: clamp(36px, 5vw, 64px); }
.page-body h2:first-child { margin-top: 0; }
.steps { counter-reset: step; margin-top: 18px; border-top: 4px solid var(--ink); }
.steps li { counter-increment: step; position: relative; padding: 14px 0 16px 58px; border-bottom: 2px solid var(--ink); }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 12px; font: 800 2.8rem/0.95 var(--display); color: var(--logo-blue); }
.steps h3 { font-size: 1.7rem; }
.steps p { margin-top: 4px; }
.related { padding-block: clamp(40px, 5vw, 72px); background: var(--navy); color: var(--on-navy); }
.related h2 { font-size: clamp(2.2rem, 3.6vw, 3.2rem); color: var(--cyan); }
.related ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); margin-top: 20px; }
.related a { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 64px; padding-block: 10px; border-top: 2px solid var(--on-navy-soft); font: 800 clamp(1.5rem, 2vw, 1.8rem)/1.02 var(--display); text-decoration: none; }
.related a .i { transition: transform 180ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .related a:hover .i { transform: translateX(4px); } }
.plain-head { padding-block: clamp(36px, 6vw, 80px); background: var(--cyan); }
.prose h2 { font-size: clamp(2rem, 3vw, 2.6rem); margin-top: 32px; }
.prose p { margin-top: 8px; max-width: 40em; }

.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(20px, 4vw, 56px); align-items: start; padding: clamp(28px, 5vw, 72px) var(--gutter) var(--band); background: var(--cyan); }
.contact-text { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.reach { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 22px; margin-top: 10px; font: 500 1.15rem/1.35 var(--ui); font-variant-numeric: tabular-nums; }
.reach dt { font-weight: 800; }

/* Footer */
.foot { padding: clamp(36px, 5vw, 64px) var(--gutter) 24px; background: var(--navy); color: var(--on-navy); font: 500 1rem/1.45 var(--ui); }
.foot-main { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; max-width: 1240px; margin-inline: auto; }
.foot-name { font: 800 1.9rem/1 var(--display); margin-bottom: 8px; }
.foot-main > div > p { color: var(--on-navy-soft); }
.foot-contact { margin-top: 14px; color: var(--on-navy) !important; font-variant-numeric: tabular-nums; }
.foot-links { columns: 2; column-gap: 28px; }
.foot-links li { break-inside: avoid; }
.foot-links a { display: inline-block; padding-block: 5px; }
.foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; max-width: 1240px; margin: 28px auto 0; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / 0.3); color: var(--on-navy-soft); font-size: 0.95rem; }
.linkish { padding: 0; border: 0; background: none; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }

/* Phone dock and cookie slip */
.dock { display: none; }
.cookie { position: fixed; left: var(--gutter); bottom: var(--gutter); z-index: 30; width: min(380px, calc(100vw - 2 * var(--gutter))); padding: 14px 16px; background: #fff; box-shadow: 0 14px 34px -12px rgb(6 24 48 / 0.6); font: 500 1rem/1.35 var(--ui); animation: rise 320ms var(--ease-out) both; }
.cookie div { display: flex; gap: 10px; margin-top: 10px; }
.cookie button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 3px; background: var(--ink); color: #fff; font: 700 1rem var(--ui); transition: transform 140ms var(--ease-out); }
.cookie button + button { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.cookie button:active { transform: scale(0.97); }

@media (max-width: 1080px) {
  .top > nav { display: none; }
  .menu { display: block; }
  .story { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 901px) and (max-height: 760px) {
  .cover h1 { font-size: clamp(3.2rem, 6.2vw, 5.6rem); }
  .panel-sub { font-size: 1.0625rem; margin-bottom: 10px; }
  .panel h2 { font-size: 2.1rem; }
  .bubble { min-height: 0; }
}

@media (min-width: 901px) {
  .cover > .slip { max-width: min(34vw, 600px); }
}

@media (min-width: 600px) and (max-width: 900px) {
  .picks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
}

@media (min-width: 1200px) and (min-height: 820px) {
  .panel h2 { font-size: 3rem; }
  .picks { row-gap: 10px; }
  .panel .pick { min-height: 50px; font-size: 1.25rem; }
}

@media (max-width: 900px) {
  :root { --top: 60px; }
  .top > .btn-small { display: none; }
  html { scroll-padding-top: 12px; }
  .top { position: relative; }
  .brand { font-size: 1.28rem; gap: 9px; }
  .brand img { width: 38px; height: 38px; }
  h1 { font-size: clamp(3.1rem, 15vw, 5.4rem); }
  .cover { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; min-height: 0; padding-right: 0; }
  .cover h1 { padding: 16px var(--gutter) 14px; }
  .cover-photo { min-height: 0; aspect-ratio: 16 / 10; }
  .dropped { width: 36vw; padding: 5px; }
  .slip { position: static; max-width: none; padding: 7px var(--gutter); }
  .cover > .slip { max-width: none; background: var(--cyan); }
  .panel { grid-column: 1; grid-row: auto; margin: 0; padding: 18px var(--gutter) 22px; }
  .services { grid-template-columns: minmax(0, 1fr); padding-top: 0; padding-right: 0; }
  .services-list { padding-inline: var(--gutter); }
  .services-photo .print { position: static; }
  .contents a { grid-template-columns: minmax(0, 1fr); }
  .contents-more { grid-column: 1; grid-row: auto; margin-top: 4px; }
  .how { grid-template-columns: minmax(0, 1fr); }
  .how-in { padding-right: var(--gutter); }
  .how-photo .crop { min-height: 56vw; }
  .honest-in, .ledger, .faq-in { grid-template-columns: minmax(0, 1fr); }
  .tilted { max-width: 88%; }
  .faq h2 { position: static; }
  .close { padding-top: 56vw; padding-bottom: 0; background: var(--paper); }
  .close-photo { bottom: auto; height: 62vw; }
  .close-in { grid-template-columns: minmax(0, 1fr); gap: 0; padding-inline: 0; }
  .close-card { padding: 22px var(--gutter) 26px; }
  .close .slip { position: static; }
  .close-card .btn { width: 100%; }
  form.lead { padding-inline: var(--gutter); }
  .spread { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .spread-text { padding: 26px var(--gutter); }
  .spread-text .btn { width: 100%; }
  .spread-photo .crop { min-height: 58vw; }
  .related ul { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .contact { grid-template-columns: minmax(0, 1fr); padding-inline: 0; padding-bottom: 0; }
  .contact-text { padding-inline: var(--gutter); padding-bottom: 26px; }
  .contact-text .btn { width: 100%; }
  .foot { padding-bottom: 96px; }
  .foot-main { grid-template-columns: minmax(0, 1fr); }
  .dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: block; padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom)); background: var(--navy); box-shadow: 0 -8px 22px -14px rgb(6 24 48 / 0.7); transition: transform 240ms var(--ease-out); }
  .dock-off .dock { transform: translateY(110%); }
  .dock .btn { display: flex; width: 100%; min-height: 56px; }
  .dock-msg { margin-bottom: 6px; padding: 7px 10px; background: var(--chat); border-radius: 8px 8px 2px 8px; font-size: 1rem; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .cookie { left: 0; right: 0; bottom: 74px; width: auto; padding-inline: var(--gutter); }
  .dock-off .cookie { bottom: 0; }
}

@media (max-width: 600px) {
  .cover-photo { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; }
  .btn, .pick, .ring, .skip, .cookie button, .contents strong, .contents-more .i, .related a .i, .faq-mark, .dock { transition: opacity 120ms ease-out !important; }
  .pick:active, .btn:active, .cookie button:active { transform: none; }
}