/* ==========================================================================
   Dividendo — "the printed annual". A web studio's page laid out like the
   report that pays shareholders their dividend: one column axis at 34%,
   large serif titles, flat blocks of paper, ink and gold. No ornaments.
   ========================================================================== */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/instrument-serif-latin.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/instrument-sans-latin.woff2) format("woff2")}

:root{
  --bg:#FFFFFF; --bg2:#F1F0EC; --bg3:#E4E2DB;
  --ink:#0E0E10; --ink2:#1C1C20; --muted:#5E5D58; --soft:#6B6963;
  --accent:#B08D4A; --accent-hi:#C49F5A; --accent-ink:#7A5C22;
  --on-ink:#FFFFFF; --muted-on-ink:#A9A7A0;
  --line:#CFCCC3;
  --bad:#B42318; --good:#067647;
  --serif:"Instrument Serif","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Instrument Sans","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  /* five working sizes, plus one title step for names inside sections */
  --step-small:.875rem;
  --step-body:clamp(1.0625rem,1rem + .22vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.05rem + .6vw,1.5rem);
  --step-title:clamp(1.75rem,1.25rem + 1.5vw,2.625rem);
  --step-head:clamp(2.5rem,1.5rem + 3.6vw,4.5rem);
  --step-display:clamp(3.25rem,1rem + 8.6vw,8.75rem);
  --gutter:clamp(20px,2.3vw,32px);
  --sec:clamp(96px,11vw,176px);
  --hh:64px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:light;scroll-padding-top:var(--hh)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--step-body)/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
fieldset{margin:0;padding:0;border:0;min-width:0}
legend{padding:0}
::selection{background:var(--accent);color:var(--ink)}
/* The parts the browser draws carry the palette too. */
html{scrollbar-color:#BDB9AF var(--bg)}
input,textarea{caret-color:var(--accent-ink)}
.pt,.compare,.pc-price,.pr-price,.hero-fig-n,.q-plan-price{font-variant-numeric:tabular-nums lining-nums}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--gutter);top:-80px;background:var(--ink);color:#fff;padding:12px 18px;font-weight:600;z-index:100;text-decoration:none}
.skip:focus{top:12px}
.wrap{width:100%;max-width:1504px;margin:0 auto;padding:0 var(--gutter)}
/* The axis: every section hangs from a vertical line at about 34% of the page. */
.axis{display:grid;grid-template-columns:minmax(0,34fr) minmax(0,66fr);column-gap:var(--gutter)}
main{position:relative;z-index:1;background:var(--bg);overflow-x:clip}

h2{font:400 var(--step-head)/1 var(--serif);letter-spacing:-.02em;text-wrap:balance}
h3{font:400 var(--step-title)/1.08 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.sub{margin-top:24px;font-size:var(--step-lead);line-height:1.4;max-width:34ch;text-wrap:pretty}
.fine{margin-top:32px;color:var(--muted);font-size:1rem;line-height:1.55;max-width:66ch}
.section{padding:var(--sec) 0}
.section-stone{background:var(--bg2)}

/* ---------- Buttons and links: one shape, square corners ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border:0;border-radius:0;
  font:600 1rem/1.1 var(--sans);letter-spacing:.005em;text-decoration:none;text-align:center;cursor:pointer;
  transition:background-color .2s,color .2s,transform .25s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-accent{background:var(--accent);color:var(--ink)}
.btn-accent:hover{background:var(--accent-hi)}
.btn-ink{background:var(--ink);color:var(--on-ink)}
.btn-ink:hover{background:#2A2A2F}
.btn-sm{min-height:44px;padding:0 18px;font-size:1rem}
.btn[disabled]{opacity:.6;cursor:wait;transform:none}
.link-u{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:.32em;text-decoration-color:var(--accent);transition:text-underline-offset .25s var(--ease),text-decoration-color .2s}
.link-u:hover{text-underline-offset:.2em;text-decoration-color:currentColor}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:36px}

/* ---------- Header: a plain bar ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--bg)}
.bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;min-height:var(--hh)}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.logo-mark{display:block;width:30px;height:30px}
.logo-text{font:400 1.75rem/1 var(--serif);letter-spacing:-.01em}
.logo-text .l2{color:var(--accent)}
.nav{display:flex;justify-content:center;gap:4px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--muted);text-decoration:none;font-size:1rem;font-weight:500;transition:color .15s}
.nav a:hover{color:var(--ink)}
.nav .nav-cta{display:none}
.bar-right{display:flex;align-items:center;gap:18px}
.lang{display:inline-flex;gap:2px}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:44px;font-size:.875rem;font-weight:600;color:var(--soft);text-decoration:none}
.lang a[aria-current]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.4em}
.burger{display:none;min-height:44px;padding:0 4px;border:0;background:none;font:600 1rem/1 var(--sans);color:var(--ink);cursor:pointer;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.35em}

/* ---------- 1. Masthead ---------- */
.hero{padding-top:clamp(36px,6vh,80px);overflow:clip}
.hero-grid{grid-template-rows:auto auto;row-gap:0}
.hero-h{grid-column:2;grid-row:1;font:400 var(--step-display)/.9 var(--serif);letter-spacing:-.03em}
.lines .line{display:block;overflow:clip;padding-bottom:.08em;margin-bottom:-.08em}
.lines [data-line]{display:block}
.hero-talk{grid-column:1;grid-row:1;align-self:end;padding-bottom:.6em}
.hero-lead{font-size:var(--step-lead);line-height:1.38;max-width:24ch;text-wrap:pretty}
.hero-talk .actions{margin-top:28px}
.hero-media{grid-column:2;grid-row:2;position:relative;margin-top:clamp(56px,7vh,88px)}
.hero-fig{position:absolute;z-index:2;left:0;top:0;width:min(272px,62%);transform:translateY(-50%);background:var(--accent);color:var(--ink);padding:18px 22px 20px}
.hero-fig-n{font:400 var(--step-title)/1 var(--serif);letter-spacing:-.01em}
.hero-fig-t{margin-top:8px;font-size:var(--step-small);line-height:1.45}
.mosaic-sites{display:grid;grid-template-columns:1fr 1fr;background:var(--bg2)}
/* Each tile is a window onto a whole concept page; on desktop the page scrolls slowly inside it. */
.site-tile{position:relative;aspect-ratio:1200/780;overflow:clip;container-type:size;background:#fff}
.site-tile img{position:absolute;left:0;top:0;display:block;width:100%;height:auto}
.stage-inner{position:absolute;left:0;top:0;width:1200px;transform-origin:0 0}
@keyframes site-scroll{0%,12%{transform:none}88%,100%{transform:translateY(calc(-100% + 100cqh))}}
@media (min-width:821px) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .site-tile img{animation:site-scroll 40s cubic-bezier(.45,0,.55,1) infinite alternate;will-change:transform}
  .site-1 img{animation-delay:2.5s}.site-2 img{animation-delay:6s}.site-3 img{animation-delay:9.5s}.site-4 img{animation-delay:13s}
}

/* ---------- 2. Work: small index, large picture ---------- */
.work{position:relative;padding-top:var(--sec)}
.work-side h1{max-width:16ch}
.work-note{margin-top:20px;font-size:var(--step-body);max-width:40ch}
.work-credit{display:block;margin-top:8px;font-size:var(--step-small);color:var(--muted)}
.work-index{display:none}
.work-stage{max-width:1504px;margin:0 auto;padding:0 var(--gutter)}
.work-item{display:grid;grid-template-columns:minmax(0,34fr) minmax(0,66fr);column-gap:var(--gutter);align-items:center;margin-top:clamp(56px,7vw,112px)}
.work-shot{position:relative;grid-column:2;grid-row:1;aspect-ratio:16/10;background:var(--bg2);overflow:clip}
.work-desk{position:absolute;left:7%;top:9%;width:104%;aspect-ratio:1200/780;overflow:clip;background:#fff}
.work-desk img,.work-phone img{display:block;width:100%;height:auto}
.work-phone{position:absolute;left:3%;bottom:6%;width:17%;min-width:76px;aspect-ratio:390/800;border:5px solid var(--ink);border-radius:22px;overflow:clip;background:var(--ink)}
.work-meta{grid-column:1;grid-row:1;padding-right:clamp(0px,2vw,32px)}
.work-d{margin-top:10px;color:var(--muted);font-size:var(--step-small)}
.work-meta p:not(.work-d){margin-top:16px;max-width:38ch}
.work-meta .btn{margin-top:28px}

/* Pinned version (wide screens with a mouse): the index stays, the pictures wipe in. */
.work.is-pinned{height:calc(var(--n) * 68svh + 32svh);padding-top:0}
.work.is-pinned .work-pin{position:sticky;top:var(--hh);height:calc(100svh - var(--hh));overflow:clip}
.work.is-pinned .work-side{position:absolute;inset:0;z-index:3;display:grid;grid-template-columns:minmax(0,34fr) minmax(0,66fr);align-content:stretch;
  padding-top:clamp(24px,5vh,56px);padding-bottom:clamp(20px,4vh,40px);pointer-events:none}
.work.is-pinned .work-side > *{grid-column:1;pointer-events:auto}
.work.is-pinned .work-side{grid-template-rows:auto auto 1fr}
.work.is-pinned .work-index{display:block;align-self:end;margin-top:24px}
.work-index li{padding:6px 0}
.wi{display:flex;justify-content:space-between;align-items:baseline;gap:16px;width:100%;min-height:48px;padding:0;border:0;background:none;color:var(--soft);cursor:pointer;text-align:left;font:inherit;transition:color .3s}
.wi-name{display:inline-flex;align-items:baseline;gap:12px;font:400 clamp(1.5rem,1rem + 1.05vw,2.25rem)/1.1 var(--serif);letter-spacing:-.01em}
.wi-name::before{content:"";flex:none;width:12px;height:12px;background:var(--accent);opacity:0;transform:scale(.5);transition:transform .45s var(--ease),opacity .3s}
.wi-d{flex:none;font-size:var(--step-small)}
.wi:hover{color:var(--ink)}
.work-index li.on .wi{color:var(--ink)}
.work-index li.on .wi-name::before{transform:none;opacity:1}
.wi-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.wi-more > div{overflow:hidden;visibility:hidden;transition:visibility 0s .55s}
.work-index li.on .wi-more > div{visibility:visible;transition:visibility 0s}
.wi-more p{padding-top:8px;max-width:40ch;font-size:var(--step-body)}
.wi-more .btn{margin:16px 0 8px}
.work-index li.on .wi-more{grid-template-rows:1fr}
.work.is-pinned .work-stage{position:absolute;inset:0;max-width:none;padding:0}
.work.is-pinned .work-item{position:absolute;inset:0;margin:0;display:block;pointer-events:none}
.work.is-pinned .work-meta{display:none}
.work.is-pinned .work-shot{position:absolute;top:0;bottom:0;right:0;aspect-ratio:auto;
  left:calc(max(var(--gutter),(100vw - 1504px) / 2 + var(--gutter)) + (min(100vw,1504px) - 3 * var(--gutter)) * .34 + var(--gutter));
  clip-path:inset(calc((1 - var(--w,1)) * 100%) 0 0 0)}
.work.is-pinned .work-desk{left:8%;top:12%;width:112%;transform:translateY(calc((1 - var(--w,1)) * 60px))}
.work.is-pinned .work-phone{left:4%;bottom:8%;width:min(19%,200px);transform:translateY(calc((1 - var(--w,1)) * 140px))}

/* ---------- 3. Services: mosaic of unlike tiles ---------- */
.mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;
  grid-template-areas:
    "head head head head head head pho pho pho pho pho pho"
    "biz biz biz biz biz biz pho pho pho pho pho pho"
    "loc loc loc ai ai ai lan lan lan red red red"
    "pic pic pic pic care care care care care care care care"}
.tile{display:flex;flex-direction:column;gap:14px;min-height:200px;padding:clamp(22px,2.2vw,32px)}
.tile p{max-width:44ch}
.tile .link-u{margin-top:auto;align-self:flex-start}
.t-head{grid-area:head;background:var(--bg2)}
.t-head h1{max-width:8ch}
.t-sub{font-size:var(--step-lead);line-height:1.35;max-width:30ch!important}
.t-photo{grid-area:pho;padding:0;gap:0;background:var(--bg2);overflow:clip}
.t-photo img{display:block;width:100%;flex:1;min-height:0;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.t-photo:hover img{transform:scale(1.03)}
.t-photo figcaption{padding:14px 18px;font-size:var(--step-small);color:var(--muted)}
.t-photo-sm{grid-area:pic}
.t-ink{grid-area:biz;background:var(--ink);color:var(--on-ink)}
.t-ink .link-u{text-decoration-color:var(--accent)}
.t-big{font-size:var(--step-lead);line-height:1.35}
.t-figure{grid-area:ai;background:var(--bg2)}
.t-num{font:400 var(--step-display)/.9 var(--serif);letter-spacing:-.03em;color:var(--accent-ink)}
.t-list{grid-area:loc;background:var(--bg3)}
.t-list ul{display:grid;gap:4px;font-size:var(--step-lead);line-height:1.3}
.t-plain{grid-area:lan;background:var(--bg3)}
.t-plain + .t-plain{grid-area:red;background:var(--ink);color:var(--on-ink)}
.t-gold{grid-area:care;background:var(--accent);color:var(--ink)}
.t-gold .link-u{text-decoration-color:var(--ink)}

/* ---------- 4. Pricing: the packages as one large table ---------- */
.pt{width:100%;border-collapse:collapse;table-layout:fixed}
.pt-head{margin-bottom:clamp(40px,5vw,72px)}
.pt-head .sub{margin-top:0;max-width:40ch;align-self:end}
.pt-corner{width:32%;text-align:left;vertical-align:top;padding:0 32px 40px 0}
.pt-sub{margin-top:20px;font-size:var(--step-body);font-weight:400;line-height:1.5;max-width:40ch}
.pt-plan{text-align:left;vertical-align:bottom;padding:28px 20px 24px}
.pt-name{display:block;font:400 var(--step-title)/1.05 var(--serif)}
.pt-price{display:block;margin-top:6px;font:400 var(--step-title)/1.05 var(--serif);color:var(--accent-ink)}
.pt-tag{display:block;margin-top:10px;font-size:var(--step-small);font-weight:400;color:var(--muted);line-height:1.4}
.pt tbody th,.pt tbody td{padding:18px 20px;text-align:left;vertical-align:top;font-weight:400;line-height:1.4}
.pt tbody th{font-weight:600}
.pt tbody tr:nth-child(odd):not(.pt-actions) > *{background:var(--bg2)}
.pt .feat{background:var(--accent)!important;color:var(--ink)}
.pt .feat .pt-price,.pt .feat .pt-tag{color:var(--ink)}
.pt-actions td{padding:24px 20px 28px}
.pt-actions .btn{width:100%;padding:0 14px}
.pt-cards,.pt-head-m{display:none}
.pt-fine{margin-top:28px}

/* ---------- 5. The quote calculator (ink page) ---------- */
.quote{background:var(--ink);color:var(--on-ink);padding:var(--sec) 0}
.quote-sub{margin-top:24px;font-size:var(--step-body);color:var(--muted-on-ink);max-width:40ch}
.q-form{margin-top:44px;display:grid;gap:36px}
.q-form legend{font-size:var(--step-small);font-weight:600;color:var(--muted-on-ink);margin-bottom:10px}
.q-plans{display:grid}
.q-plan{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:16px;min-height:52px;padding:4px 0;cursor:pointer;color:var(--muted-on-ink);transition:color .25s}
.q-plan input{position:absolute;opacity:0;width:1px;height:1px}
.q-plan-name{display:inline-flex;align-items:baseline;gap:12px;font:400 var(--step-title)/1.1 var(--serif)}
.q-plan-name::before{content:"";flex:none;width:12px;height:12px;background:var(--accent);opacity:0;transform:scale(.5);transition:transform .4s var(--ease),opacity .25s}
.q-plan-price{font-size:var(--step-small);white-space:nowrap;text-align:right}
.q-plan-langs{display:block;margin-top:2px;font-size:.8125rem;color:var(--muted-on-ink)}
.q-plan:hover{color:var(--on-ink)}
.q-plan:has(input:checked){color:var(--on-ink)}
.q-plan:has(input:checked) .q-plan-name::before{transform:none;opacity:1}
.q-plan:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:4px}
.q-extras{display:grid;gap:4px}
.q-extra{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px;padding:6px 14px;background:var(--ink2);cursor:pointer}
.q-extra input{appearance:none;-webkit-appearance:none;flex:none;order:2;width:24px;height:24px;margin:0;background:#33333A;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.q-extra input::after{content:"";width:12px;height:12px;background:var(--ink);opacity:0;transform:scale(.5);transition:transform .25s var(--ease),opacity .2s}
.q-extra input:checked{background:var(--accent)}
.q-extra input:checked::after{transform:none;opacity:1}
.q-extra input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.q-extra input:disabled{opacity:.35;cursor:default}
.q-extra-name{flex:1;font-size:var(--step-body);line-height:1.3}
.q-extra-price{display:block;font-size:var(--step-small);color:var(--muted-on-ink)}
.q-extra-note{font-size:var(--step-small);color:var(--accent)}
.q-qty{cursor:default}
.q-step{display:inline-flex;align-items:center;gap:2px}
.q-step button{width:40px;height:40px;border:0;background:#33333A;color:var(--on-ink);font:600 1rem/1 var(--sans);cursor:pointer;transition:background .2s}
.q-step button:hover{background:#45454D}
.q-step button:active{transform:scale(.95)}
.q-step output{min-width:32px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.quote-stage{display:flex;align-items:flex-start;background:var(--ink2);padding:clamp(32px,5vw,72px) clamp(20px,4.4vw,64px)}
.sheet{width:100%;max-width:560px;background:#FFFFFF;color:var(--ink);padding:clamp(24px,3vw,40px);font-size:.9375rem;line-height:1.45}
.sheet-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:18px;border-bottom:2px solid var(--ink)}
.sheet-brand{display:inline-flex;align-items:center;gap:8px;font:400 1.5rem/1 var(--serif)}
.sheet-brand img{width:22px;height:22px}
.sheet-title{font:400 1.5rem/1 var(--serif);color:var(--accent-ink)}
.sheet-meta{display:grid;gap:4px;margin:16px 0 22px}
.sheet-meta div{display:grid;grid-template-columns:72px 1fr;gap:12px}
.sheet-meta dt{color:var(--muted)}
.sheet-lines{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.sheet-lines th,.sheet-lines td{padding:9px 0;text-align:right;vertical-align:top;border-bottom:1px solid var(--line);font-weight:400}
.sheet-lines th:first-child,.sheet-lines td:first-child{text-align:left;padding-right:12px}
.sheet-lines thead th{font-size:var(--step-small);color:var(--muted);font-weight:600}
.sheet-lines tbody tr{animation:line-in .35s var(--ease)}
.sheet-lines td:nth-child(2),.sheet-lines td:nth-child(3){white-space:nowrap;padding-left:12px}
.sheet-lines tfoot th,.sheet-lines tfoot td{border-bottom:0;padding-top:12px;font-weight:600}
.sheet-lines tfoot tr:first-child > *{border-top:2px solid var(--ink)}
.sheet-lines tfoot td{font:400 1.75rem/1 var(--serif)}
.sheet-foot{margin-top:18px;font-size:var(--step-small);color:var(--muted)}
.sheet-cta{margin-top:22px;width:100%}
@keyframes line-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- 6. Compare (a real table) ---------- */
.axis-split{align-items:start}
.axis-left{grid-column:1}
.axis-right{grid-column:2}
.compare{width:100%;border-collapse:collapse}
.compare th,.compare td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.4}
.compare thead th{font:400 var(--step-lead)/1.2 var(--serif);border-bottom:2px solid var(--ink)}
.compare tbody th{font-weight:600;width:24%;padding-left:0}
.compare .us{background:var(--bg);font-weight:600}
.compare thead .us{background:var(--ink);color:var(--on-ink)}
.compare + .fine{margin-top:20px}

/* ---------- 7. Process: many into one ---------- */
.process-head{margin-bottom:clamp(40px,5vw,72px)}
.process-head .sub{margin-top:0;max-width:30ch;align-self:end}
.flow svg{display:block;width:100%;height:auto}
.flow .flow-v{display:none}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter);margin-top:36px}
.steps h3{font:600 var(--step-lead)/1.25 var(--sans);letter-spacing:-.01em}
.steps p{margin-top:8px;max-width:30ch}

/* ---------- 8. About ---------- */
.about-facts{margin-top:32px;display:grid;gap:6px;font-size:var(--step-small);color:var(--muted)}
.about-big{font:400 clamp(1.5rem,1.1rem + 1.1vw,2.125rem)/1.22 var(--serif);letter-spacing:-.005em;text-wrap:pretty;max-width:30em}
.about-photo{display:block;width:100%;max-width:400px;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;margin-top:36px}
.about-more{margin-top:40px;columns:2;column-gap:var(--gutter);max-width:60em}
.about-more p{break-inside:avoid;margin-bottom:18px}

/* ---------- 9. Questions as reading text ---------- */
.faq-text{columns:2;column-gap:56px}
.faq-text p{break-inside:avoid;margin-bottom:22px;max-width:40ch}
.faq-text strong{font-weight:600}

/* ---------- 10. Contact and form ---------- */
.contact-card{display:flex;gap:18px;align-items:flex-start;margin-top:36px}
.contact-card img{flex:none;width:168px;height:210px;object-fit:cover;object-position:50% 18%}
.contact-card a{overflow-wrap:anywhere}
.contact-card p{font-size:var(--step-small)}
.contact-card .contact-name{font:400 var(--step-lead)/1.2 var(--serif)}
.contact-card .link-u{min-height:36px}
.aside-t{margin-top:36px;font:600 var(--step-body)/1.3 var(--sans)}
.aside-list{margin-top:10px;display:grid;gap:6px;max-width:40ch}
.aside-list li{padding-left:22px;position:relative}
.aside-list li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;background:var(--accent)}
.form{display:grid;gap:22px;background:var(--bg2);padding:clamp(22px,3vw,44px)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{display:grid;gap:8px;position:relative}
.field label{font-size:var(--step-small);font-weight:600}
.opt{font-weight:400;color:var(--muted)}
input[type=text],input[type=email],select,textarea{width:100%;min-height:52px;padding:13px 15px;border-radius:0;border:1px solid var(--line);background:#fff;color:var(--ink);font:400 1rem/1.4 var(--sans);transition:border-color .15s,box-shadow .15s}
textarea{min-height:150px;resize:vertical}
input::placeholder,textarea::placeholder{color:#8A8882}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(176,141,74,.45)} /* taste-skill-ignore: focus ring on a form field */
select{appearance:none;-webkit-appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E0E10' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--bad)}
.err{color:var(--bad);font-size:var(--step-small)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* taste-skill-ignore: hidden anti-spam field, not a line */
.field.check{grid-template-columns:auto 1fr;column-gap:12px;align-items:start}
.field.check input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--ink)}
.field.check label{font-weight:400}
.field.check .err{grid-column:2}
.form .btn{justify-self:start}
.status{padding:18px 20px}
.status p{margin-top:4px}
.status-ok{background:#E3F4EA}
.status-ok strong{color:var(--good)}
.status-err{background:#FBE7E5}
.status-err strong{color:var(--bad)}

/* ---------- Pages: one title per page, the same voice as the section titles ---------- */
.h-page{font:400 var(--step-head)/1 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.h-name{font:400 var(--step-title)/1.08 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.section.page-first,.work.page-first{padding-top:clamp(48px,7vw,104px)}
.nav a[aria-current]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.45em}

/* Home: the four websites as a customer sees them, on a phone */
.strip-copy h2{max-width:9ch}
.strip-copy .link-u{margin-top:24px}
.phones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter);align-items:start}
.phones li:nth-child(even){margin-top:clamp(32px,5vw,88px)}
.phone-card{display:flex;flex-direction:column;text-decoration:none}
.phone-frame{display:block;aspect-ratio:390/800;border:6px solid var(--ink);border-radius:26px;overflow:clip;background:var(--ink);transition:transform .6s var(--ease)}
.phone-frame img{display:block;width:100%;height:auto}
.phone-card:hover .phone-frame{transform:translateY(-8px)}
.phone-name{margin-top:16px;font:400 var(--step-lead)/1.2 var(--serif)}
.phone-d{margin-top:4px;font-size:var(--step-small);color:var(--muted)}

/* Home: who it is for */
.for h2{max-width:10ch}
.sectors{display:grid;grid-template-columns:1fr 1fr;gap:6px var(--gutter);align-content:start}
.sectors li{position:relative;padding:8px 0 8px 26px;font:400 var(--step-title)/1.12 var(--serif);letter-spacing:-.01em}
.sectors li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;background:var(--accent)}

/* Home: the price, in writing (ink) */
.price-ink{background:var(--ink);color:var(--on-ink)}
.price-ink h2{max-width:8ch}
.price-text{margin-top:24px;color:var(--muted-on-ink);max-width:34ch}
.price-rows{display:grid;gap:4px;align-content:start}
/* One line per package: the name and its starting price. */
.price-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:8px 24px;padding:28px clamp(18px,2.4vw,32px);background:var(--ink2);text-decoration:none;transition:background-color .3s}
.price-row:hover{background:#27272C}
.pr-name{font:400 var(--step-title)/1.05 var(--serif)}
.pr-price{font:400 var(--step-title)/1 var(--serif);color:var(--accent-hi);white-space:nowrap;text-align:right}

/* Home: who you will talk to */
.me-photo img{display:block;width:100%;max-width:460px;aspect-ratio:4/5;height:auto;object-fit:cover;object-position:50% 20%}
.me-copy{align-self:center}
.me-copy h2{max-width:10ch}
.me-big{margin-top:28px;font:400 clamp(1.5rem,1.1rem + 1.1vw,2.125rem)/1.22 var(--serif);letter-spacing:-.005em;max-width:24em;text-wrap:pretty}

/* The closing band of every page: the next step, said once */
.band{background:var(--bg2);padding:clamp(80px,10vw,152px) 0}
.band-grid{align-items:end}
.band-h{grid-column:2;grid-row:1;max-width:11ch;font-size:var(--step-display);line-height:.92;letter-spacing:-.03em}
.band-talk{grid-column:1;grid-row:1;align-self:end}
.band-talk p{font-size:var(--step-lead);line-height:1.35;max-width:22ch;text-wrap:pretty}
.band-talk .btn{margin-top:28px}

/* About: how I work, and where the studio is */
.about h1{max-width:8ch}
.how h2{max-width:8ch}
.how-list{display:grid;grid-template-columns:1fr 1fr;gap:44px var(--gutter)}
.how-list h3{font:600 var(--step-lead)/1.25 var(--sans);letter-spacing:-.01em}
.how-list p{margin-top:10px;max-width:38ch}
.place-h{max-width:12ch;margin-bottom:clamp(36px,4.5vw,64px)}
.place-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 8px}
.place-1{grid-column:1 / span 7}
.place-2{grid-column:8 / span 5;align-self:end}
.place-3{grid-column:4 / span 9}
.place-grid img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.place-grid figcaption,.contact-place figcaption{margin-top:12px;font-size:var(--step-small);color:var(--muted)}
.credit{display:block;margin-top:2px;font-size:.8125rem;color:var(--soft)}
.credit a{color:inherit;text-underline-offset:.2em}

/* Contact: the place the studio is in */
.contact-place{padding-bottom:clamp(72px,8vw,128px)}
.contact-place-t{font:400 var(--step-title)/1.1 var(--serif);max-width:24ch;margin-bottom:28px}
.contact-place-row{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px}
.contact-place-row img{display:block;width:100%;height:clamp(220px,26vw,420px);object-fit:cover}

/* A row of four photographs, edge to edge */
.photo-band{padding:0 0 clamp(64px,8vw,120px)}
.section-stone + .photo-band{padding-top:0;background:var(--bg2)}
.photo-band-row{display:grid;grid-template-columns:1.25fr 1fr .9fr 1.1fr;gap:8px}
.photo-band-row img{display:block;width:100%;height:clamp(200px,24vw,380px);object-fit:cover}
.photo-band figcaption{margin-top:12px;font-size:1rem;color:var(--muted)}

/* ---------- Footer: ink, the name across the whole width ---------- */
.site-footer{position:sticky;bottom:0;z-index:0;background:var(--ink);color:var(--on-ink)}
.foot{min-height:calc(100svh - var(--hh));display:grid;grid-template-rows:auto 1fr auto auto;padding-top:clamp(40px,6vh,72px);padding-bottom:24px}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px var(--gutter)}
.foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:1rem;color:var(--muted-on-ink)}
.foot-col a{display:inline-flex;align-items:center;min-height:36px;color:var(--muted-on-ink);text-decoration:none;transition:color .15s}
.foot-col a:hover{color:var(--on-ink)}
.foot-h{font:600 1rem/1.4 var(--sans);letter-spacing:0;color:var(--on-ink);margin-bottom:8px}
.foot-mark{grid-row:3;align-self:end;padding-top:40px}
.foot-mark svg{display:block;width:100%;height:auto;overflow:visible}
.foot-mark text{font:400 200px var(--serif);fill:var(--on-ink);letter-spacing:-.01em}
.foot-mark .dot{fill:var(--accent)}
.foot-legal{grid-row:4;margin-top:20px;display:grid;gap:4px;font-size:1rem;color:var(--muted-on-ink)}
.foot-legal p{max-width:62ch}

/* ---------- Full-page preview of a concept ---------- */
.modal{width:min(1240px,calc(100vw - 32px));height:calc(100dvh - 32px);max-height:none;padding:0;border:0;border-radius:0;background:#fff;color:var(--ink);overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.45)} /* taste-skill-ignore: dialog that floats over the page */
.modal[open]{display:flex;flex-direction:column;animation:pop .3s var(--ease)}
.modal::backdrop{background:rgba(14,14,16,.7)}
@keyframes pop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px 12px 20px;background:var(--bg2);flex:none}
.modal-title{display:flex;align-items:baseline;gap:14px;min-width:0}
.modal-title h2{font:400 var(--step-lead)/1.2 var(--serif);letter-spacing:0}
.modal-badge{font-size:var(--step-small);color:var(--muted)}
.modal-actions{display:flex;align-items:center;gap:10px}
.icon-btn{width:44px;height:44px;border:0;background:transparent;color:inherit;cursor:pointer;display:grid;place-items:center;flex:none;transition:background .15s}
.icon-btn:hover{background:rgba(14,14,16,.08)}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.modal-body{flex:1;min-height:0;overflow:auto;background:var(--bg2);overscroll-behavior:contain}
.full{position:relative;width:100%}
.full .stage-inner{position:absolute;left:0;top:0}
.modal-hint{flex:none;padding:8px 20px;font-size:var(--step-small);color:var(--muted);text-align:center;background:var(--bg2)}
html.modal-open{overflow:hidden}

/* ---------- The AI assistant ---------- */
@keyframes bot-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes dots{0%,80%,100%{opacity:.25}40%{opacity:1}}
.bot{position:fixed;right:20px;bottom:20px;z-index:60}
.bot-fab{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px 0 12px;border:0;border-radius:0;background:var(--accent);color:var(--ink);font:600 1rem/1 var(--sans);cursor:pointer;
  transition:transform .25s var(--ease),background .2s}
.bot-fab:hover{transform:translateY(-2px);background:var(--accent-hi)}
.bot-fab:active{transform:scale(.98)}
.bot-fab-mark{width:26px;height:26px}
.bot-panel{position:absolute;right:0;bottom:64px;width:min(400px,calc(100vw - 32px));height:min(620px,calc(100dvh - 120px));display:flex;flex-direction:column;background:#fff;overflow:hidden;
  box-shadow:0 40px 100px -24px rgba(14,14,16,.5);transform-origin:bottom right;animation:bot-in .35s var(--ease)} /* taste-skill-ignore: chat panel floats over the page */
.bot-panel[hidden]{display:none}
.bot-head{display:flex;align-items:center;gap:12px;padding:14px 10px 14px 16px;background:var(--ink);color:#fff}
.bot-av{width:34px;height:34px;flex:none}
.bot-id{flex:1;min-width:0}
.bot-id h2{font:400 1.375rem/1.1 var(--serif);letter-spacing:0}
.bot-badge{margin-top:2px;font-size:var(--step-small);color:var(--muted-on-ink)}
.bot-x{color:#fff}
.bot-x:hover{background:rgba(255,255,255,.12)}
.bot-note{padding:10px 16px;font-size:var(--step-small);line-height:1.45;color:var(--muted);background:var(--bg2)}
.bot-note a{color:var(--ink)}
.bot-log{flex:1;min-height:0;overflow:auto;padding:18px 16px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.msg{max-width:88%;padding:11px 14px;font-size:1rem;line-height:1.5;animation:line-in .3s var(--ease)}
.msg p{white-space:pre-wrap;overflow-wrap:anywhere}
.msg-bot{align-self:flex-start;background:var(--bg2)}
.msg-user{align-self:flex-end;background:var(--ink);color:#fff}
.msg .btn{margin-top:10px;min-height:42px;font-size:.875rem;padding:0 16px}
.msg .btn + .btn{margin-left:6px}
.msg-note{align-self:center;max-width:100%;padding:0;font-size:var(--step-small);color:var(--muted);text-align:center;background:none}
.typing{display:inline-flex;gap:5px;padding:5px 0}
.typing i{width:7px;height:7px;background:var(--soft);animation:dots 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
.bot-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px}
.bot-chips[hidden]{display:none}
.chip{min-height:40px;padding:8px 12px;border:0;background:var(--bg2);color:var(--ink);font:500 .875rem/1.2 var(--sans);cursor:pointer;text-align:left;transition:background .15s,color .15s}
.chip:hover{background:var(--ink);color:#fff}
.bot-form{display:flex;align-items:flex-end;gap:8px;padding:10px;background:var(--bg2)}
.bot-form textarea{flex:1;min-height:48px;max-height:120px;padding:12px 14px;resize:none;font-size:1rem;line-height:1.4}
.bot-send{display:grid;place-items:center;width:48px;height:48px;flex:none;border:0;background:var(--accent);color:var(--ink);cursor:pointer;transition:background .2s}
.bot-send:hover{background:var(--accent-hi)}
.bot-send[disabled]{opacity:.45;cursor:default}
.bot-send svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Legal pages, language chooser, 404 ---------- */
.legal{max-width:calc(760px + 2 * var(--gutter));padding-top:56px;padding-bottom:var(--sec)}
.legal .crumb{margin-bottom:28px}
.legal .crumb a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.3em}
.legal h1{font:400 var(--step-head)/1 var(--serif);letter-spacing:-.02em}
.legal .draft{margin:24px 0 8px;padding:14px 18px;background:var(--bg2);color:var(--accent-ink);font-size:var(--step-small)}
.legal section{margin-top:44px}
.legal h2{font:400 var(--step-title)/1.1 var(--serif)}
.legal p{margin-top:12px}
.legal ul.plain{margin-top:12px;display:grid;gap:8px;padding-left:1.2em;list-style:square}
.legal ul.plain li::marker{color:var(--accent)}
.ph{background:none;color:inherit;padding:0;font-style:normal}
.chooser{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;gap:40px;padding-top:48px;padding-bottom:48px}
.chooser .logo-mark{width:56px;height:56px}
.chooser .logo-text{font-size:2.25rem}
.chooser h1{font:400 var(--step-display)/.95 var(--serif);letter-spacing:-.03em}
.chooser .alt{color:var(--muted)}
.chooser .actions .btn-ghost{background:var(--ink);color:#fff}
.chooser .actions .btn:not(.btn-ghost){background:var(--accent);color:var(--ink)}

/* ---------- Motion: entrances once, transform and opacity only ---------- */
@keyframes line-up{to{transform:none}}
@keyframes fade-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .js .lines [data-line]{transform:translateY(105%);animation:line-up .95s var(--ease) forwards;animation-delay:calc(var(--i) * 110ms + 150ms)}
  .js [data-in]{animation:fade-up .9s var(--ease) .55s both}
  .js .hero-media[data-in]{animation-delay:.75s}
  .js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease) var(--rd,0s),transform 1s var(--ease) var(--rd,0s)}
  .js [data-reveal].in{opacity:1;transform:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .mosaic{grid-template-areas:
    "head head head head head head pho pho pho pho pho pho"
    "biz biz biz biz biz biz pho pho pho pho pho pho"
    "loc loc loc loc loc loc ai ai ai ai ai ai"
    "lan lan lan lan lan lan red red red red red red"
    "pic pic pic pic pic pic care care care care care care"}
}
@media (max-width:1040px){
  .bar{grid-template-columns:auto 1fr;gap:12px}
  .bar-right{justify-self:end}
  .burger{display:inline-flex;align-items:center}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 24px;background:var(--bg);box-shadow:0 30px 40px -30px rgba(14,14,16,.35)} /* taste-skill-ignore: dropdown menu floats over the page */
  .nav.open{display:flex}
  .nav a{min-height:52px;padding:0;font:400 var(--step-title)/1.1 var(--serif);color:var(--ink)}
  .nav .nav-cta{display:inline-flex;margin-top:14px;align-self:flex-start;min-height:52px;padding:0 24px;background:var(--accent);font:600 1rem/1 var(--sans)}
  .bar-cta{display:none}
}
@media (max-width:900px){
  .axis,.axis-split{grid-template-columns:minmax(0,1fr)}
  .axis-left,.axis-right{grid-column:1}
  .axis-right{margin-top:36px}
  .hero-h{grid-column:1;grid-row:1}
  .hero-talk{grid-row:2;padding:28px 0 0}
  .hero-media{grid-column:1;grid-row:3;margin:clamp(100px,16vw,140px) calc(-1 * var(--gutter)) 0}
  .hero-fig{left:var(--gutter);width:min(280px,66%);transform:translateY(-50%)}
  /* One picture on phones: the first concept site, full width and readable. */
  .mosaic-sites{grid-template-columns:1fr}
  .site-tile{aspect-ratio:4/3}
  .site-tile:not(.site-1){display:none}
  .work-item{grid-template-columns:minmax(0,1fr)}
  .work-shot,.work-meta{grid-column:1}
  .work-meta{grid-row:2;padding:22px 0 0}
  .work-shot{aspect-ratio:4/3;margin:0 calc(-1 * var(--gutter))}
  .work-desk{left:6%;top:8%;width:118%}
  .work-phone{width:24%}
  .pt{display:none}
  .pt-head-m{display:block;margin-bottom:48px}
  .pt-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:48px 8px}
  .pc{padding:clamp(22px,5vw,32px);background:var(--bg2)}
  .pc.feat{background:var(--accent)}
  .pc h2{font-size:clamp(2rem,9vw,2.75rem)}
  .pc-price{margin-top:4px;font:400 clamp(2rem,9vw,2.75rem)/1.05 var(--serif);color:var(--accent-ink)}
  .pc.feat .pc-price{color:var(--ink)}
  .pc-tag{margin-top:8px;color:var(--muted)}
  .pc.feat .pc-tag{color:var(--ink)}
  .pc dl{margin-top:20px;display:grid;gap:14px}
  .pc dt{font-size:var(--step-small);color:var(--muted)}
  .pc.feat dt{color:var(--ink)}
  .pc dd{font-size:1.0625rem}
  .pc .btn{margin-top:24px;width:100%}
  .quote-stage{margin:44px calc(-1 * var(--gutter)) 0}
  .about-more{columns:1}
  .phones{grid-template-columns:1fr 1fr;gap:28px 16px}
  .sectors{grid-template-columns:1fr}
  .how-list{grid-template-columns:1fr}
  .me-photo img,.about-photo{max-width:280px}
  .about-big{font-size:1.25rem;line-height:1.4}
  /* Price under the name, on the left: the chat button sits bottom right. */
  .price-row{grid-template-columns:minmax(0,1fr)}
  .pr-price{text-align:left}
  .band-h,.price-ink h2,.for h2,.me-copy h2,.strip-copy h2{max-width:none}
  .band-h,.band-talk{grid-column:1}
  .band-talk{grid-row:2;margin-top:28px}
  .place-1,.place-2,.place-3{grid-column:1 / -1}
  .photo-band-row{grid-template-columns:1fr 1fr}
  .photo-band-row img{height:clamp(160px,40vw,280px)}
  .contact-place-row{grid-template-columns:1fr}
  /* On phones and tablets the chat button is just the mark, so it never sits on top of a heading. */
  .bot-fab{width:52px;padding:0;justify-content:center}
  .bot-fab-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .faq-text{columns:1}
  .steps{grid-template-columns:1fr 1fr;row-gap:28px}
  .foot-cols{grid-template-columns:1fr 1fr}
  .foot{min-height:auto}
  .foot-mark{padding-top:20svh}
}
@media (max-width:760px){
  .mosaic{grid-template-columns:1fr 1fr;gap:6px;grid-template-areas:
    "head head" "pho pho" "biz biz" "loc loc" "ai ai" "lan lan" "red red" "pic pic" "care care"}
  .tile{min-height:0}
  .t-photo img{aspect-ratio:4/3;height:auto}
  .t-photo-sm img{aspect-ratio:16/10}
  .t-num{font-size:clamp(2.5rem,13vw,3.5rem);order:1}
  .t-figure h2{order:0}
  .t-figure p:not(.t-num),.t-figure .link-u{order:2}
  .t-list ul{font-size:1.125rem}
  .flow .flow-h{display:none}
  .flow .flow-v{display:block;max-width:420px;margin:0 auto}
  .steps{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .compare thead{display:none}
  .compare,.compare tbody,.compare tr,.compare th,.compare td{display:block;width:100%}
  .compare tr{padding:16px 0;border-bottom:1px solid var(--line)}
  .compare th,.compare td{padding:5px 0;border:0}
  .compare tbody th{width:auto;font-size:1.0625rem;margin-bottom:4px}
  .compare td{display:flex;justify-content:space-between;gap:16px;font-size:1rem}
  .compare td::before{content:attr(data-label);color:var(--muted)}
  .compare td.us{background:var(--bg);padding:6px 8px;margin-top:4px}
  .modal{width:calc(100vw - 16px);height:calc(100dvh - 16px)}
  .modal-badge{display:none}
}
@media (max-width:560px){
  .lang a{min-width:34px}
  .bar-right{gap:10px}
  .logo-text{font-size:1.5rem}
  .hero-talk .actions{flex-direction:column;align-items:stretch}
  .hero-talk .btn{width:100%}
  .hero-talk .link-u{align-self:flex-start}
  .modal-actions .btn{padding:0 12px;font-size:.875rem}
  .bot{right:12px;bottom:12px}
  .bot.open .bot-fab{display:none}
  .bot-panel{position:fixed;left:8px;right:8px;bottom:8px;width:auto;height:min(640px,calc(100dvh - 16px))}
  .foot-cols{grid-template-columns:1fr 1fr;gap:28px 16px}
  .foot-col{font-size:.9375rem}
  .contact-card{flex-direction:column}
}
/* Phones on their side and short windows (up to 600 px tall, such as a 1280 × 720 laptop with the browser bars): the
   chat takes the whole height, wider and more compact, so the conversation keeps room to be read. Before, at 390 px tall
   it had 36 px left and the header slid out of view when the field took the focus, and up to 600 px it still had under
   110 px (01/11/2026). The question buttons go in one row that scrolls sideways. */
@media (max-height:600px){
  .bot.open .bot-fab{display:none}
  .bot-panel{position:fixed;top:8px;right:8px;bottom:8px;left:auto;width:min(560px,calc(100vw - 16px));height:auto}
  .bot-head{padding:6px 8px 6px 12px}
  .bot-id h2{font-size:1.125rem}
  .bot-note{padding:6px 12px;line-height:1.35}
  .bot-log{padding:10px 12px}
  .bot-chips{flex-wrap:nowrap;overflow-x:auto;padding:0 12px 8px;overscroll-behavior-x:contain;scrollbar-width:none}
  .bot-chips .chip{flex:none;white-space:nowrap}
  .bot-form{padding:6px}
  .bot-form textarea{min-height:40px;padding:8px 12px}
  .bot-send{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ==========================================================================
   Dividendo — premium layer (25/10/2026). Loaded after style.css.
   Page-to-page transitions, finer type, the language chips of the quote
   calculator and the founding-client offer. Transform and opacity only.
   ========================================================================== */

/* ---------- Finer type ---------- */
body{font-kerning:normal;font-optical-sizing:auto;text-rendering:optimizeLegibility}
p,li,dd,figcaption{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
.pt-price,.pr-price,.pc-price,.pc-found,.pt-found,.hero-fig-n,.q-plan-price,.sheet-lines,.t-num,.found-left-n{font-variant-numeric:lining-nums tabular-nums}
.hero-h,.h-page,.band-h,.foot-mark text{font-feature-settings:"kern","liga"}

/* ---------- Press: everything you can press gives a little under the finger ---------- */
.btn:active,.bot-fab:active,.q-step button:active,.chip:active,.bot-send:active{transform:scale(.97);transition-duration:.08s}
.link-u:active{opacity:.7}

/* ---------- Moving between pages: the bar stays put, the new page rises into place ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .site-header{view-transition-name:site-header}
  .bot{view-transition-name:bot}
  ::view-transition-old(root){animation:vt-out .2s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:vt-in .5s var(--ease) .04s both}
  ::view-transition-group(site-header),::view-transition-group(bot){animation-duration:0s}
}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}

/* ---------- Quote calculator: the languages, picked one by one ---------- */
.q-langs-hint{margin:-2px 0 12px;font-size:var(--step-small);line-height:1.45;color:var(--muted-on-ink)}
.q-chips{display:flex;flex-wrap:wrap;gap:6px}
.q-chip{position:relative;cursor:pointer}
.q-chip input{position:absolute;opacity:0;width:1px;height:1px}
.q-chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:var(--ink2);color:var(--muted-on-ink);
  font-size:1rem;line-height:1.1;transition:background-color .2s,color .2s,transform .2s var(--ease)}
.q-chip:hover span{background:#26262B;color:var(--on-ink)}
.q-chip input:checked + span{background:var(--accent);color:var(--ink)}
.q-chip input:focus-visible + span{outline:2px solid var(--accent);outline-offset:3px}
.q-chip:active span{transform:scale(.97);transition-duration:.08s}
.sheet-lines td.q-note{color:var(--muted);font-size:var(--step-small)}
.sheet-lines td.q-minus{color:var(--accent-ink)}
.q-found .q-extra-price{color:var(--accent-hi)}
.q-extra-price[hidden]{display:none}
.q-extra-note{color:var(--accent-hi)}

/* ---------- Founding clients: a real, limited offer, shown as two plain prices ---------- */
.found{margin:clamp(8px,2vw,24px) 0 clamp(48px,6vw,88px);padding:clamp(24px,3.2vw,48px) clamp(20px,3vw,44px);background:var(--ink);color:var(--on-ink);align-items:start}
.found-left{grid-column:1}
.found-right{grid-column:2}
.found-left-n{margin-top:12px;font:400 var(--step-title)/1.05 var(--serif);color:var(--accent-hi)}
.found-right p{font-size:var(--step-lead);line-height:1.4;max-width:44ch}
.found .link-u{margin-top:18px;text-decoration-color:var(--accent)}
.pt-found{display:block;margin-top:8px;font-size:1rem;font-weight:600;color:var(--ink)}
.nw{white-space:nowrap}
/* Plan names start on one line across the table, however long the price below them. */
.pt-plan{vertical-align:top}
.pc-found{margin-top:6px;font-size:1.0625rem;font-weight:600}

/* ---------- Real client websites on the Work page (when there are some) ---------- */
.work-item.is-real .work-desk{left:6%;top:8%}
/* The concept page fits its frame instead of losing its menu button off the edge. */
.work.is-pinned .work-desk{left:6%;width:94%}

/* =================== Polish after the Impeccable critique (25/10/2026) =================== */

/* Pricing: the recommended package sits on ink; gold is kept for the one action in its column. */
.pt .feat{background:var(--ink)!important;color:var(--on-ink)}
.pt .feat .pt-price{color:var(--accent-hi)}
.pt .feat .pt-tag{color:var(--muted-on-ink)}
.pt .feat .pt-found{color:var(--on-ink)}
.pt-rec{display:block;margin-top:10px;font-size:1rem;font-weight:600;color:var(--accent-hi)}
.pt-actions .btn{height:auto;min-height:52px;padding:10px 12px;line-height:1.2}
.pt-fine{max-width:58ch}

/* The estimate sheet stays in view while you choose (wide screens). */
@media (min-width:901px){
  .quote-stage .sheet{position:sticky;top:calc(var(--hh) + 24px)}
}
.q-bar{display:none}

/* Contact: the estimate echoed above the form (arriving at #quote-form, the form clears the bar and its own entrance rise). */
#quote-form{scroll-margin-top:calc(var(--hh) + 44px)}
.q-echo{padding:18px 20px;background:var(--bg)}
.q-echo-t{font-size:var(--step-small);font-weight:600;color:var(--muted)}
.q-echo-n{margin-top:4px;font:400 var(--step-title)/1.1 var(--serif);font-variant-numeric:lining-nums tabular-nums}
.q-echo-d{margin-top:6px;font-size:var(--step-small)}

/* Small fixes from the critique */
.t-head h1,.about h1{max-width:none}
.foot-legal p{max-width:52ch}
input::placeholder,textarea::placeholder{color:var(--soft)}
/* Anti-spam field: hidden the accessible way, never pushed off the screen. */
.hp{position:absolute!important;left:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.place-3{grid-column:6 / span 7}

/* The assistant: a link in the bar on wide screens, the logo button elsewhere. */
.bar-ai{display:none;align-items:center;gap:8px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--ink);
  font:600 1rem/1 var(--sans);cursor:pointer;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;
  text-underline-offset:.4em;transition:text-underline-offset .25s var(--ease),color .2s}
.bar-ai img{width:22px;height:22px}
.bar-ai:hover{text-underline-offset:.25em}
.bar-ai[aria-expanded="true"]{color:var(--accent-ink)}
.bot-fab{width:52px;padding:0;justify-content:center;transition:transform .35s var(--ease),opacity .25s,background .2s}
.bot-fab-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.bot.is-away .bot-fab{opacity:0;transform:translateY(14px) scale(.9);pointer-events:none}
@media (min-width:1200px){
  .bar-ai{display:inline-flex}
  .bot-fab{display:none}
  .bot-panel{bottom:0}
}

@media (max-width:1040px){
  .nav .nav-cta,.nav .nav-cta:hover{background:var(--ink);color:var(--on-ink)}
  .nav .nav-cta:hover{background:#2A2A2F}
}
@media (max-width:900px){
  .found-left,.found-right{grid-column:1}
  .found-right{margin-top:20px}
  /* One column: the standfirst needs its own space under the page title. */
  .pt-head .sub,.process-head .sub{margin-top:20px}
  /* Phones: the first concept site shows its own first screen, and the starting price sits under it. */
  .hero-media{display:flex;flex-direction:column-reverse;margin-top:clamp(36px,8vw,56px)}
  .site-tile{aspect-ratio:1200/760}
  .hero-fig{position:static;transform:none;width:auto;padding:18px var(--gutter) 20px}
  /* Pricing cards: the decisive facts, the rest one tap away. */
  .pc.feat{background:var(--ink);color:var(--on-ink)}
  .pc.feat .pc-price{color:var(--accent-hi)}
  .pc.feat .pc-tag,.pc.feat dt{color:var(--muted-on-ink)}
  .pc-more{margin-top:12px}
  .pc-more summary{display:flex;align-items:center;min-height:44px;cursor:pointer;list-style:none;font-weight:600;
    text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.32em}
  .pc-more summary::-webkit-details-marker{display:none}
  .pc-more:not([open]) > :not(summary){display:none}
  .pc-more dl{margin-top:8px}
  /* The running total: it slides up only while you are past the packages and the sheet is not yet on screen,
     so it never sits on a package name or on the sheet itself. */
  .q-bar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;align-items:baseline;gap:12px;
    padding:14px var(--gutter) calc(14px + env(safe-area-inset-bottom));background:var(--accent);color:var(--ink);
    transform:translateY(110%);transition:transform .45s var(--ease);pointer-events:none}
  .quote.bar-on .q-bar{transform:none;pointer-events:auto}
  .quote-side{padding-bottom:24px}
  .q-bar-t{font-size:var(--step-small);font-weight:600}
  .q-bar-n{font:400 1.5rem/1 var(--serif);font-variant-numeric:lining-nums tabular-nums}
  .q-bar-a{margin-left:auto;font-weight:600;text-decoration-thickness:2px;text-underline-offset:.3em}
  /* Contact on phones: the form comes straight after the title; the portrait and the checklist follow. */
  .contact .axis-split{display:flex;flex-direction:column}
  .contact-copy{display:contents}
  .contact-copy h1{order:1}
  .contact-copy > .sub{order:2}
  .contact .form{order:3;margin-top:32px}
  .contact-card{order:4;margin-top:48px}
  .aside-t{order:5}
  .aside-list{order:6}
  .contact-copy > .fine{order:7}
}
/* =================== Guide and sector pages (25/10/2026) ===================
   The title runs across the whole page; under it, the talk on the left of the axis and the proof on the right. */
:root{--step-guide:clamp(2.75rem,1.4rem + 5.4vw,7rem)}
.g-h{grid-column:1 / -1;font:400 var(--step-guide)/.94 var(--serif);letter-spacing:-.03em;text-wrap:balance}
.g-talk{grid-column:1;margin-top:clamp(32px,3.4vw,48px)}
.g-lead{font-size:var(--step-lead);line-height:1.38;max-width:26ch}
.g-talk .actions{margin-top:28px}
.g-media{grid-column:2;margin-top:clamp(32px,3.4vw,48px)}
.g-media figcaption{margin-top:12px;font-size:var(--step-small);color:var(--muted)}
/* The Marea page scrolls slowly inside its window (desktop with a mouse only). */
.g-scroll{container-type:size}
.g-scroll img{position:absolute;left:0;top:0;width:100%;height:auto}
@media (min-width:821px) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .g-scroll img{animation:site-scroll 44s cubic-bezier(.45,0,.55,1) 1.6s infinite alternate;will-change:transform}
}
/* Marea, piece by piece: the whole page as a proof next to what each part does. */
.g-parts{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,3vw,48px);align-items:start}
.g-proof{background:var(--bg2);padding:clamp(12px,1.4vw,22px)}
.g-proof img{display:block;width:100%;height:auto}
.g-parts-list{display:grid;gap:30px}
.g-parts-list dt{font:400 var(--step-title)/1.08 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.g-parts-list dd{margin:8px 0 0;max-width:38ch}
.g-head{margin-bottom:clamp(36px,4.5vw,64px)}
.g-head .sub{margin-top:0;max-width:44ch;align-self:end}
/* The same websites in Spanish and in English, on four phones. */
.g-phones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,20px);padding:clamp(18px,2.4vw,36px);background:var(--bg2)}
.g-phones .phone-frame{border-width:5px;border-radius:22px}
.g-ph-l{display:block;margin-top:10px;font-size:var(--step-small);font-weight:600}
.g-who .aside-list{margin-top:18px}
/* Ink sections with rows: a name, what it means and, where it applies, what it costs with me. */
.g-ink{background:var(--ink);color:var(--on-ink)}
.g-ink-sub{margin-top:24px;font-size:var(--step-lead);line-height:1.4;color:var(--muted-on-ink);max-width:30ch}
/* Typeset like a printed table: no boxes and no rules, the rows kept apart by space alone. */
.g-rows{display:grid;align-content:start}
.g-rows li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr) minmax(0,.85fr);align-items:baseline;gap:8px 28px;padding:18px 0 22px}
.g-rows-2 li{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
.gr-h{font:400 clamp(1.5rem,1.15rem + .9vw,2rem)/1.1 var(--serif);letter-spacing:-.01em}
.gr-m{color:var(--accent-hi);font-weight:600;line-height:1.35}
/* A written sheet on a stone stage (the two-languages prices). */
.g-sheet-stage{display:flex;justify-content:center;align-items:flex-start;padding:clamp(24px,4vw,64px) clamp(16px,3vw,48px);background:var(--bg2)}
.g-sheet-stage .sheet-top{margin-bottom:6px}
.g-sheet-stage .sheet-lines td:last-child{font:400 1.375rem/1.1 var(--serif)}
/* The cost guide: the short answer as three large figures, each with its source. */
.c-answer{display:grid;gap:8px}
.c-market{display:grid;padding:clamp(4px,.8vw,10px) 0;background:var(--bg2)}
.c-fig{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:8px 28px;padding:clamp(18px,2vw,26px) clamp(18px,2.4vw,32px)}
.c-n{font:400 clamp(2.5rem,1.6rem + 2.8vw,4.5rem)/1 var(--serif);letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}
.c-say{display:flex;flex-direction:column}
.c-what{line-height:1.4}
.c-src{margin-top:6px;font-size:var(--step-small);color:var(--muted)}
.c-src a,.c-table a{color:inherit;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.2em}
.c-me{background:var(--ink);color:var(--on-ink)}
.c-me .c-n{color:var(--accent-hi)}
.c-me .c-src{color:var(--muted-on-ink)}
.c-table-h{margin-bottom:12px}
.c-table + .c-table-h{margin-top:56px}
.c-table tbody th{width:46%}
.c-range{white-space:nowrap}
.how-list .c-src{margin-top:8px}
/* My prices on paper: the same rows as the home page, in stone. */
.price-rows.paper .price-row{background:var(--bg2)}
.price-rows.paper .price-row:hover{background:var(--bg3)}
.price-rows.paper .pr-price{color:var(--accent-ink)}
.pr-tag{grid-column:1 / -1;font-size:var(--step-small);color:var(--muted)}
/* Rows that link to the guides. */
.guide-rows{display:grid;gap:4px;align-content:start}
.guide-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:baseline;gap:8px 32px;padding:26px clamp(18px,2.4vw,32px);background:var(--bg2);text-decoration:none;transition:background-color .3s}
.guide-row:hover{background:var(--bg3)}
.gr-name{font:400 var(--step-title)/1.08 var(--serif);letter-spacing:-.01em;text-wrap:balance;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.16em;transition:text-decoration-color .2s}
.guide-row:hover .gr-name{text-decoration-color:var(--accent)}
.foot-h-more{margin-top:22px}
/* Work page, pinned index (wide screens): the page-first top space would push the bottom of the index off the
   first screen; the pinned panel keeps its own top padding, so the five projects fit from the first scroll. */
.work.is-pinned.page-first{padding-top:0}
/* Shorter screens (laptops): the same index, set tighter, so all the projects stay in view.
   28/10/2026, six projects: from 960 px high down (1440 x 900 and 1536 x 864 now need it), and one step tighter
   from 700 px down (1280 x 660). Measured with each project open; below that, main.js shows the stacked page. */
@media (min-width:1041px) and (max-height:1020px){
  .work.is-pinned .work-side h1{font-size:clamp(2.25rem,1.2rem + 2.4vw,3.25rem)}
  .work.is-pinned .work-note{margin-top:12px}
  .work.is-pinned .work-index{margin-top:12px}
  .work.is-pinned .work-index li{padding:1px 0}
  .work.is-pinned .wi{min-height:40px}
  .work.is-pinned .wi-name{font-size:clamp(1.375rem,1rem + .7vw,1.75rem)}
  .work.is-pinned .wi-more p{font-size:1rem;padding-top:4px}
  .work.is-pinned .wi-more .btn{margin:10px 0 6px}
}
/* Seven projects (28/10/2026): one step tighter from 800 px high (1366 x 768, 1280 x 720), measured with each one open. */
@media (min-width:1041px) and (max-height:800px){
  .work.is-pinned .work-side h1{font-size:2.25rem}
  .work.is-pinned .work-note{font-size:1rem;margin-top:8px}
  .work.is-pinned .work-index{margin-top:8px}
  .work.is-pinned .work-index li{padding:0}
  .work.is-pinned .wi{min-height:32px}
  .work.is-pinned .wi-more p{padding-top:2px}
  .work.is-pinned .wi-more .btn{margin:8px 0 4px}
}
@media (min-width:1041px) and (max-height:700px){
  .work.is-pinned .wi{min-height:30px}
  /* 28/10/2026: at 1280 x 660 the index still ran 7 px past the bottom with some projects open. */
  .work.is-pinned .work-note{margin-top:4px}
  .work.is-pinned .work-index{margin-top:4px}
  .work.is-pinned .wi-more .btn{margin:6px 0 2px}
}
/* 28/10/2026: the project name stays on one line ("Casa de huéspedes en Kerry" took two lines and touched the next name).
   If name and description do not fit side by side, the whole description drops to its own line, on the right:
   splitting it left a "·" hanging at the end of a line. */
.work.is-pinned .wi{flex-wrap:wrap;row-gap:0;column-gap:12px}
.work.is-pinned .wi-name{white-space:nowrap}
.work.is-pinned .wi-d{margin-left:auto;text-align:right}
/* Around 1280 px wide the index column is narrow: "Empresa de reformas" + its description were 10 px too wide. */
@media (min-width:1041px) and (max-width:1300px){
  .work.is-pinned .wi-name{font-size:1.4375rem}
}
/* Narrower still, name and description no longer share a line: only the names, and the description of the open project. */
@media (min-width:1041px) and (max-width:1279px){
  .work.is-pinned .work-index li:not(.on) .wi-d{display:none}
}
/* Tall screens (above the compact steps): names up to 32 px, not 36 px, so name and description share a line at 1920 px. */
@media (min-width:1301px) and (min-height:1021px){
  .work.is-pinned .wi-name{font-size:clamp(1.5rem,1rem + .9vw,2rem)}
}
/* Work page: the credits of the concept photos, under the projects. */
.work-credits{padding:clamp(32px,4vw,56px) var(--gutter) clamp(56px,7vw,104px)}
.work-credits .fine{margin-top:0;max-width:110ch;font-size:var(--step-small);color:var(--ink)}
.work-credits a{color:inherit;text-decoration-color:var(--accent);text-underline-offset:.2em}
.foot-col a[aria-current]{color:var(--on-ink)}
@media (max-width:1180px){
  .g-rows li{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
  .gr-m{grid-column:2}
}
@media (max-width:900px){
  /* The third Killarney photo goes full width on phones and tablets too (About page and the guesthouse page). */
  .place-3{grid-column:1 / -1}
  .g-talk,.g-media{grid-column:1}
  .g-media{margin-top:40px}
  .g-head .sub{margin-top:20px}
  .g-sheet-stage{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter))}
}
@media (max-width:760px){
  .g-parts{grid-template-columns:minmax(0,1fr)}
  .g-proof{max-width:240px}
  .guide-row{grid-template-columns:minmax(0,1fr)}
  .c-range{white-space:normal}
  .c-table .cite{text-align:right}
}
@media (max-width:560px){
  .g-media{margin-top:64px}
  .g-phones{grid-template-columns:1fr 1fr}
  .g-rows li,.g-rows-2 li{grid-template-columns:minmax(0,1fr)}
  .gr-m{grid-column:1}
  /* One column: each source sits right under its figure, like a caption. */
  .c-fig{grid-template-columns:minmax(0,1fr)}
  .c-src{order:-1;margin:0 0 8px}
}

@media (max-width:560px){
  .q-chip span{padding:0 14px}
  /* The email address gets the whole row, so it never touches the screen edge. */
  .foot-col:last-child{grid-column:1 / -1}
  /* A dimmed page behind the open chat. */
  .bot.open::before{content:"";position:fixed;inset:0;z-index:-1;background:rgba(14,14,16,.55)}
}

/* ---------- Top menu: the sections of each page (25/10/2026) ----------
   On a wide screen each name opens a flat ink panel under the bar: on hover with a mouse, or with its small
   arrow (keyboard and touch). In the phone menu the arrow unfolds the sections under the name.
   Closed panels are display:none, so nothing hidden is left on the page. */
.nav-item{position:relative;display:flex;align-items:center}
.sub-t{display:inline-flex;align-items:center;justify-content:center;width:24px;min-height:44px;margin:0 8px 0 -8px;padding:0;
  border:0;background:none;color:var(--soft);cursor:pointer;transition:color .15s}
.sub-t svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s var(--ease)}
.nav-item:hover .sub-t,.sub-t:hover,.nav-item.is-open .sub-t{color:var(--ink)}
.nav-item.is-open .sub-t svg{transform:rotate(180deg)}
.nav-sub{display:none}
@media (min-width:1041px){
  .nav-sub{position:absolute;top:100%;left:4px;z-index:60;min-width:260px;margin-top:10px;padding:14px 0 16px;background:var(--ink);
    opacity:0;transform:translateY(-6px);
    transition:opacity .16s var(--ease) .14s,transform .22s var(--ease) .14s,display .22s .14s allow-discrete}
  /* A bridge, so the pointer can travel from the name down to the panel without closing it. */
  .nav-sub::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:12px}
  .nav-item.is-open .nav-sub{display:block;opacity:1;transform:none;transition-delay:0s}
  .nav .nav-sub a{display:flex;align-items:center;min-height:42px;padding:0 24px;color:var(--muted-on-ink);
    font:500 .9375rem/1.3 var(--sans);white-space:nowrap;text-decoration:none;transition:color .15s}
  .nav .nav-sub a:hover,.nav .nav-sub a:focus-visible{color:var(--on-ink)}
  .nav .nav-sub a[aria-current]{color:var(--on-ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.4em}
  .nav .nav-sub a:focus-visible{outline-color:var(--accent);outline-offset:-4px}
}
/* The guide pages close the list, a little apart from the page's own sections. */
.nav-sub .sub-g{margin-top:12px}
@media (min-width:1041px) and (hover:hover){
  .nav-item.has-sub:hover .nav-sub{display:block;opacity:1;transform:none;transition-delay:0s}
  .nav-item.has-sub.is-shut .nav-sub{display:none}
}
@starting-style{
  .nav-item.is-open .nav-sub{opacity:0;transform:translateY(-6px)}
}
@media (hover:hover){
  @starting-style{ .nav-item.has-sub:hover .nav-sub{opacity:0;transform:translateY(-6px)} }
}
@media (max-width:1040px){
  .nav{max-height:calc(100dvh - var(--hh));overflow-y:auto;overscroll-behavior:contain}
  .nav-item{flex-wrap:wrap}
  .nav-item > .nav-a{flex:1}
  .sub-t{width:52px;min-height:52px;margin:0;color:var(--ink)}
  .sub-t svg{width:16px;height:16px}
  .nav-sub{flex-basis:100%;padding:0 0 16px}
  .nav-item.is-open .nav-sub{display:block}
  .nav .nav-sub a{display:flex;align-items:center;min-height:44px;padding:0;color:var(--muted);font:500 1.0625rem/1.3 var(--sans)}
  .nav .nav-sub a[aria-current]{color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){
  .nav-sub,.sub-t svg{transition:none}
}

/* ---------- The assistant, easy to find (25/10/2026, Iván found it hard to find) ----------
   A chat bubble instead of the logo (the logo read as a link home), a stone button in the bar, its own row in
   the phone menu and a plain link where people decide (the price, the calculator, Contact). The floating button
   stays icon only, as the house rules ask: a label on it covered titles. */
.ico-chat{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.ico-chat circle{fill:currentColor;stroke:none}
.bar-ai{gap:10px;padding:0 16px;background:var(--bg2);text-decoration:none;white-space:nowrap;transition:background-color .2s}
/* 1200–1299 px: the bar has no room for the words, so the bubble stands alone (the name stays for screen readers). */
@media (min-width:1200px) and (max-width:1299px){
  .bar-ai{width:44px;padding:0;justify-content:center}
  .bar-ai-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
.nav .nav-a,.bar-cta{white-space:nowrap}
.bar-ai:hover,.bar-ai[aria-expanded="true"]{background:var(--bg3);color:var(--ink)}
.bot-fab .ico-chat{width:26px;height:26px}
.ask-bot{padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:600;text-align:left;cursor:pointer}
.sheet-ask{margin-top:14px;text-align:center}
.sheet-ask .ask-bot{font-size:1rem;text-align:center;justify-content:center}
.nav-ai{display:none}
@media (max-width:1040px){
  .nav-ai{display:flex;align-items:center;gap:14px;margin-top:18px;padding:14px 16px;border:0;background:var(--bg2);color:var(--ink);
    font:inherit;text-align:left;cursor:pointer}
  .nav-ai .ico-chat{width:26px;height:26px}
  .nav-ai b{display:block;font:600 1.0625rem/1.25 var(--sans)}
  .nav-ai small{display:block;margin-top:3px;color:var(--muted);font:500 .9375rem/1.3 var(--sans)}
}

/* =================== Showcase on Work, gallery on Home (26/10/2026) ===================
   From the study of fromanother.love (a showcase held by the scroll, a row that passes sideways) and
   modusprojects.nl (the page travels through its frame). Transform and opacity only. main.js decides the mode:
   reduced motion, no script or a short screen keep the page as it was (the websites one under another). */

/* ---------- Work: what only the held versions show ---------- */
.work{--thumb-h:58px}
.work-count,.work-now,.work-thumbs{display:none}

/* Wide screens with a mouse (is-pinned): the index stays, each website wipes in, and while it is on, its whole
   page travels through the frame, as if you were visiting it. A little longer than before, so it reads calmly. */
.work.is-pinned{height:calc(var(--n) * 96svh + 20svh)}
.work.is-pinned .work-desk{container-type:size}
.work.is-pinned .work-desk img{transform:translate3d(0,calc(var(--s,0) * (100cqh - 100%)),0)}
.work.is-pinned .work-item.is-cur .work-desk img,.work.is-pinned .work-item.is-next .work-desk img{will-change:transform}
/* "1 of 5", like the page number of a printed report, above the right end of the frame. */
.work.is-pinned .work-count{display:block;position:absolute;right:var(--gutter);top:clamp(18px,4.2%,38px);font:400 var(--step-body)/1.2 var(--serif);color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.wc-b{font:500 1rem/1.2 var(--sans);color:var(--muted)}

/* Phones and tablets (is-show): the title and the note scroll away, then one website per screen. The stage holds
   while the scroll moves from one website to the next; "1 of 5" and the small pictures say where you are. */
.work.is-show{height:calc(var(--top,0px) + var(--n) * 76svh)}
.work.is-show .work-pin{position:sticky;top:calc(var(--hh) - var(--side,0px))}
.work.is-show .work-stage{position:relative;height:calc(100svh - var(--hh));max-width:none;padding:0;overflow:clip}
.work.is-show .work-item{position:absolute;inset:0;margin:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto;align-items:stretch;
  padding:clamp(10px,2svh,22px) var(--gutter) calc(var(--thumb-h) + clamp(22px,4svh,36px));
  visibility:hidden;opacity:0;transition:opacity .4s ease,visibility 0s linear .4s}
.work.is-show .work-item.is-cur{visibility:visible;opacity:1;transition-delay:0s}
/* The words change at once; only the pictures cross-fade (two names one over the other read as a collision). */
.work.is-show .work-item:not(.is-cur) :is(.h-name,.work-d,.work-desc,.btn){visibility:hidden}
.work.is-show .work-meta{display:contents}
.work.is-show .h-name{grid-row:1;padding-right:4.5em;transform:translateY(10px);transition:transform .6s var(--ease)}
.work.is-show .work-item.is-cur .h-name{transform:none}
.work.is-show .work-d{grid-row:2;margin-top:4px}
.work.is-show .work-desc{display:none}
.work.is-show .work-shot{grid-row:3;aspect-ratio:auto;margin:clamp(10px,1.8svh,20px) calc(-1 * var(--gutter));container-type:size}
.work.is-show .work-meta .btn{grid-row:5;justify-self:start;margin-top:0}
/* On a phone, its phone version, as large as the screen allows. With the script on (class js, set before the first
   paint), the desktop pictures are never laid out on a phone, so they are never downloaded either. */
@media (max-width:599px) and (prefers-reduced-motion:no-preference){
  .js .work .work-desk{display:none}
  .js .work:not(.is-show) .work-shot{aspect-ratio:auto;height:min(72svh,600px)}
  .js .work:not(.is-show) .work-phone{left:50%;top:5%;bottom:auto;height:90%;width:auto;min-width:0;transform:translateX(-50%)}
}
.work.is-show .work-desk{display:none}
.work.is-show .work-phone{left:50%;top:5cqh;bottom:auto;height:90cqh;width:auto;min-width:0;aspect-ratio:390/800;
  transform:translate3d(-50%,18px,0);transition:transform .7s var(--ease)}
.work.is-show .work-item.is-cur .work-phone{transform:translate3d(-50%,0,0)}
.work.is-show .work-now{display:block;position:absolute;right:var(--gutter);top:clamp(10px,2svh,22px);z-index:2;
  font:400 var(--step-body)/1.75 var(--serif);font-variant-numeric:tabular-nums lining-nums}
.work.is-show .work-thumbs{display:flex;gap:8px;position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(12px,2.4svh,22px);z-index:2}
.work-thumbs button{flex:none;width:44px;height:var(--thumb-h);padding:0;border:0;background:var(--bg2);cursor:pointer;overflow:clip;opacity:.55;
  outline:2px solid transparent;outline-offset:2px;transition:opacity .2s,outline-color .2s}
.work-thumbs button:hover{opacity:1}
.work-thumbs button[aria-current]{opacity:1;outline-color:var(--ink)}
.work-thumbs img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
/* Tablets: the desktop website, its page travelling through the frame, with the phone in front of it. */
@media (min-width:600px){
  .work.is-show .work-shot{--dw:min(86cqw,calc(82cqh * 1.5385))}
  .work.is-show .work-desk{display:block;left:calc((100cqw - var(--dw)) / 2 + 3cqw);top:50%;width:var(--dw);transform:translateY(-50%);container-type:size}
  .work.is-show .work-desk img{transform:translate3d(0,calc(var(--s,0) * (100cqh - 100%)),0)}
  .work.is-show .work-item.is-cur .work-desk img{will-change:transform}
  .work.is-show .work-phone{left:calc((100cqw - var(--dw)) / 2 - 1cqw);top:auto;bottom:4cqh;height:auto;width:calc(var(--dw) * .2);min-width:84px;transform:translate3d(0,18px,0)}
  .work.is-show .work-item.is-cur .work-phone{transform:none}
}
@media (min-width:600px) and (min-height:820px){
  .work.is-show .work-desc{display:block;grid-row:4;margin:0 0 18px;max-width:52ch}
}

/* ---------- Home: the websites pass sideways ---------- */
/* At rest (reduced motion or no script on a wide screen): the phones side by side, as before. */
.strip-gallery .strip-track{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(12px,1.6vw,24px);align-items:start}
.strip-gallery .strip-card:nth-child(even){margin-top:clamp(32px,5vw,88px)}
.strip-link{display:flex;flex-direction:column;text-decoration:none}
.strip-shot{display:block;position:relative}
.strip-desk{display:none}
.strip-phone{display:block;aspect-ratio:390/800;border:6px solid var(--ink);border-radius:26px;overflow:clip;background:var(--ink);transition:transform .6s var(--ease)}
.strip-phone img,.strip-desk img{display:block;width:100%;height:auto}
.strip-link:hover .strip-phone{transform:translateY(-8px)}
/* A card's name shows once the card is wholly in view (main.js), so no words are left sliced at the screen edge. */
.strip-gallery .strip-card .phone-name,.strip-gallery .strip-card .phone-d{transition:opacity .3s ease,visibility 0s}
.strip-gallery .strip-card.is-out .phone-name,.strip-gallery .strip-card.is-out .phone-d{visibility:hidden;opacity:0;transition:opacity .2s ease,visibility 0s linear .2s}
.strip-nav{display:none}
/* Phones and tablets: a row of phones that slides under the finger, "1 of 5" and two arrows (on the left: the
   chat button sits bottom right). */
@media (max-width:1040px){
  .strip-gallery .strip-track{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter)}
  .strip-gallery .strip-track::-webkit-scrollbar{display:none}
  .strip-gallery .strip-card{flex:0 0 clamp(190px,58vw,280px);scroll-snap-align:start}
  .strip-gallery .strip-card:nth-child(even){margin-top:0}
  .js .strip-gallery .strip-nav{display:flex;align-items:center;gap:8px;margin-top:20px}
}
@media (max-width:900px){
  .strip-gallery .strip-track{margin-left:calc(-1 * var(--gutter));padding-left:var(--gutter);scroll-padding-left:var(--gutter)}
}
.strip-arrow{display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;background:var(--bg2);color:var(--ink);cursor:pointer;transition:background-color .2s,opacity .2s}
.strip-arrow:hover{background:var(--bg3)}
.strip-arrow[aria-disabled="true"]{opacity:.4;cursor:default}
.strip-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:square;stroke-linejoin:miter}
.strip-count{margin-right:10px;font:400 var(--step-lead)/1.2 var(--serif);font-variant-numeric:tabular-nums lining-nums}
/* Wide screens with a mouse (is-live): the section holds while the row slides left. It starts on the axis, already
   in view, and stops with the last website at the right margin. Each card is the website with its phone in front. */
.strip-gallery.is-live{height:calc(var(--sec) + (var(--hold,2) + 1) * 100svh - var(--hh));padding:var(--sec) 0 0}
.strip-gallery.is-live .strip-pin{position:sticky;top:var(--hh);height:calc(100svh - var(--hh));overflow:clip;padding-top:clamp(28px,6svh,64px)}
.strip-gallery.is-live .strip-rail{position:absolute;left:0;right:0;top:var(--rail-top,40%);bottom:clamp(24px,5svh,56px);margin:0;container-type:size}
.strip-gallery.is-live .strip-track{display:flex;gap:clamp(24px,2.4vw,40px);width:max-content;will-change:transform}
.strip-gallery.is-live .strip-card,.strip-gallery.is-live .strip-card:nth-child(even){flex:none;width:min(44vw,calc((100cqh - 84px) * 1.6));margin-top:0}
.strip-gallery.is-live .strip-shot{aspect-ratio:16/10;background:var(--bg2);overflow:clip;transition:transform .6s var(--ease)}
.strip-gallery.is-live .strip-desk{display:block;position:absolute;left:7%;top:9%;width:104%;aspect-ratio:1200/780;overflow:clip;background:#fff}
.strip-gallery.is-live .strip-phone{position:absolute;left:3%;bottom:6%;width:17%;min-width:64px;border-width:5px;border-radius:20px}
.strip-gallery.is-live .strip-link:hover .strip-phone{transform:translateY(-6px)}
.strip-gallery.is-live .phone-name{margin-top:14px}

/* ---------- Home: Graham's line (quoted by Buffett) in the price block, and "When does your website pay for itself?" (26/10/2026)
   A sum with the visitor's own numbers on the same paper sheet as the estimate. The packages are rows with the gold square
   of the chosen one (no equal boxes in a row), and only sizes the page already uses. ---------- */
.price-quote{margin-top:24px}
.price-quote blockquote{margin:0}
.price-quote p{font:400 var(--step-lead)/1.3 var(--serif);color:var(--on-ink);max-width:26ch;text-wrap:balance}
.price-quote figcaption{margin-top:8px;font-size:var(--step-small);line-height:1.45;color:var(--muted-on-ink);max-width:42ch}
.roi-sheet{max-width:520px;font-size:1rem}
.roi .fine,.roi-sheet .sheet-foot{color:var(--ink)}
.roi-hint{margin:16px 0 4px;font-size:var(--step-small);color:var(--muted)}
.roi-plans{display:grid;margin:0 0 8px;padding:0;border:0;min-width:0}
.roi-label{display:block;padding:12px 0 2px;font-size:var(--step-small);font-weight:600;color:var(--muted)}
/* Rows separated by air, not rules (house style): an empty square for each choice, filled gold for the chosen one. */
.roi-plan{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:16px;min-height:44px;padding:8px 0;
  color:var(--ink);cursor:pointer}
.roi-plan input{position:absolute;opacity:0;width:1px;height:1px}
.roi-plan-name{display:inline-flex;align-items:baseline;gap:12px;font-weight:600}
.roi-plan-name::before{content:"";flex:none;width:12px;height:12px;background:var(--bg2);transition:background-color .25s var(--ease),transform .35s var(--ease)}
.roi-plan:hover .roi-plan-name::before{background:var(--bg3)}
.roi-plan:has(input:checked) .roi-plan-name::before{background:var(--accent);transform:scale(1.1)}
.roi-plan:has(input:focus-visible){outline:2px solid var(--accent-ink);outline-offset:2px}
.roi-plan-price{white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}
.roi-field{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 0}
/* Estate agents (28/10/2026): the date the rules were checked, under the list, with the same air as between rows. */
.rules-note{margin-top:56px}
/* Pricing (28/10/2026): extras on their own, for a website the customer already has. The price sits under its name. */
.how-list .solo-price{margin-top:4px;font-weight:600;font-variant-numeric:lining-nums tabular-nums}
.solo-note{margin-top:56px;max-width:52ch}
.roi-field .roi-label{padding:0;font-size:inherit;font-weight:400;color:var(--ink);max-width:24ch}
.roi-step{flex:none}
.roi-step input{width:68px;height:40px;margin:0 2px;padding:0;border:0;background:var(--bg2);color:var(--ink);font:600 1rem/1 var(--sans);
  text-align:center;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.roi-step input::-webkit-outer-spin-button,.roi-step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.roi-step input:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
.roi-unit{padding:0 4px;font-weight:600}
.roi-out{display:grid;margin:18px 0 0;border-top:2px solid var(--ink)}
.roi-out div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:14px}
.roi-out dt{font-weight:600}
.roi-out dd{margin:0;text-align:right;font:400 var(--step-lead)/1.1 var(--serif);font-variant-numeric:lining-nums tabular-nums}
.roi-out dd.is-new{animation:line-in .35s var(--ease)}
@media (max-width:440px){
  .roi-field{flex-wrap:wrap}
  .roi-field .roi-label{max-width:none}
  .roi-out div{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  .roi-out dd.is-new{animation:none}
}

/* ==========================================================================
   Concept mockups — decorative pages, 1200px design width (390px phones),
   scaled by JS inside .stage frames. Four distinct art directions.
   ========================================================================== */
.mk{position:relative;width:1200px;overflow:hidden;text-align:left;pointer-events:none;user-select:none;font:400 16px/1.5 system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.mk *{box-sizing:border-box}
:where(.mk) p{margin:0}
.mk::after{content:"";position:absolute;inset:0;z-index:50;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.mk-art{display:block;width:100%;height:100%}
.mk-mobile{width:390px}
.mk-burger{display:grid;gap:6px}
.mk-burger i{display:block;width:26px;height:2px;border-radius:2px;background:currentColor}
.mk-defs{position:absolute}


/* Photography: every .ph-* element gets its picture from --img (set per class) */
.ph-rs-hero{--img:url(/assets/concepts/rs-hero.jpg)}
.ph-rs-hall{--img:url(/assets/concepts/rs-hall.jpg)}
.ph-rs-hands{--img:url(/assets/concepts/rs-hands.jpg)}
.ph-rs-plate{--img:url(/assets/concepts/rs-plate.jpg)}
.ph-cn-hero{--img:url(/assets/concepts/cn-hero.jpg)}
.ph-cn-book{--img:url(/assets/concepts/cn-book.jpg)}
.ph-cn-stairs{--img:url(/assets/concepts/cn-stairs.jpg)}
.ph-cn-meet{--img:url(/assets/concepts/cn-meet.jpg)}
.ph-mr-hero{--img:url(/assets/concepts/mr-hero.jpg)}
.ph-mr-room{--img:url(/assets/concepts/mr-room.jpg)}
.ph-mr-chair{--img:url(/assets/concepts/mr-chair.jpg)}
.ph-mr-table{--img:url(/assets/concepts/mr-table.jpg)}
.ph-mr-tea{--img:url(/assets/concepts/mr-tea.jpg)}
.ph-mr-walk{--img:url(/assets/concepts/mr-walk.jpg)}
.ph-rn-hero{--img:url(/assets/concepts/rn-hero.jpg)}
.ph-rn-island{--img:url(/assets/concepts/rn-island.jpg)}
.ph-rn-shelf{--img:url(/assets/concepts/rn-shelf.jpg)}
.ph-rn-glass{--img:url(/assets/concepts/rn-glass.jpg)}
.ph-bb-hero{--img:url(/assets/concepts/bb-hero.jpg)}
.ph-bb-shop{--img:url(/assets/concepts/bb-shop.jpg)}
.ph-bb-scissors{--img:url(/assets/concepts/bb-scissors.jpg)}
.ph-bb-clip{--img:url(/assets/concepts/bb-clip.jpg)}
.ph-bb-razor{--img:url(/assets/concepts/bb-razor.jpg)}
.ph-bb-chair{--img:url(/assets/concepts/bb-chair.jpg)}
[class*=" ph-"],[class^="ph-"]{background:#15110d var(--img) center/cover no-repeat}

/* ==========================================================================
   1 · SAKURA — black, gold and cream; Japanese dining
   ========================================================================== */
.mk-rs{--tx:#f4ecdc;--mut:#c9bca3;--ac:#c9a96e;--ac2:#e3cb95;--line:rgba(201,169,110,.28);--ink:#1b140b;
  background:#0b0907;color:var(--tx);font-family:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
.rs-nav{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:24px;height:100px;padding:0 48px;white-space:nowrap;border-bottom:1px solid var(--line)}
.rs-logo{display:inline-flex;align-items:center;gap:16px}
.rs-logo b{font-weight:400;font-size:30px;letter-spacing:.16em;line-height:1}
.rs-logo u{text-decoration:none;font-size:30px;color:var(--ac);line-height:1}
.rs-branch{width:84px;height:auto;display:block}
.rs-links{display:flex;gap:30px;font:500 12px/1 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--tx)}
.rs-links .on{color:var(--ac2);position:relative}
.rs-links .on::after{content:"";position:absolute;left:50%;bottom:-16px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--ac)}
.rs-navr{display:flex;align-items:center;gap:22px}
.rs-lang{font:500 12px/1 system-ui,sans-serif;letter-spacing:.1em}
.rs-lang i{font-style:normal;color:#6f6552}
.rs-btn{display:inline-flex;align-items:center;justify-content:center;padding:19px 28px;white-space:nowrap;background:linear-gradient(180deg,#e0c68f,#c9a96e);color:var(--ink);font:600 13px/1 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;border:1px solid #c9a96e}
.rs-btn-o{background:transparent;color:var(--tx);padding:17px 22px;font-weight:500;font-size:12px}
.rs-hero{position:relative;height:640px}
.rs-photo{position:absolute;right:0;top:0;width:560px;height:100%;background-position:55% 40%}
.rs-hero .rs-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0b0907 0,rgba(11,9,7,.35) 28%,transparent 55%)}
.rs-vert{position:absolute;z-index:2;right:26px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font:500 12px/1 system-ui,sans-serif;letter-spacing:.3em;color:rgba(227,203,149,.7)}
.rs-copy{position:relative;z-index:2;height:100%;padding:96px 0 0 80px}
.rs-kick{font:500 15px/1 system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--ac);margin-bottom:26px}
.rs-h1{font-weight:400;line-height:1.03;letter-spacing:-.02em;margin-bottom:34px}
.rs-h1 em{display:block;font-size:66px;font-style:italic;color:#f6eddc}
.rs-h1 span{display:block;font-size:66px;white-space:nowrap}
.rs-lead{font:400 19px/1.65 system-ui,sans-serif;color:var(--mut);max-width:540px}
.rs-row{display:flex;align-items:center;gap:38px;margin-top:36px}
.rs-link{white-space:nowrap;display:inline-flex;align-items:center;gap:14px;font:500 14px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--tx)}
.rs-link b{display:block;width:30px;height:1px;background:currentColor;position:relative}
.rs-link b::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.rs-link.dark{color:var(--ink)}
.rs-scroll{position:absolute;left:80px;bottom:30px;display:flex;align-items:flex-end;gap:16px;font:500 14px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.rs-scroll i{display:block;width:1px;height:46px;background:var(--ac)}
.rs-band{display:grid;grid-template-columns:1fr 1fr;height:420px}
.rs-hall{margin-left:80px;height:100%}
.rs-phil{background:#f4ecdd;color:var(--ink);padding:58px 70px 0 76px}
.rs-kick2{display:flex;align-items:center;gap:20px;font:500 14px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#a07f48;margin-bottom:26px}
.rs-kick2 i{display:block;flex:1;height:1px;background:rgba(160,127,72,.5)}
.rs-kick2.gold{color:var(--ac)}.rs-kick2.gold i{background:var(--line);max-width:200px}
.rs-h2{font-size:46px;line-height:1.08;font-weight:400;text-transform:uppercase;letter-spacing:.005em;margin-bottom:22px}
.rs-h2.lt{color:var(--tx);text-transform:none;font-size:60px;letter-spacing:-.015em}
.rs-philrow{display:block}
.rs-philrow p{font:400 17.5px/1.6 system-ui,sans-serif;color:#41382a}
.rs-philrow .rs-link{margin-top:24px}
.rs-menu{padding:120px 80px 100px;border-bottom:1px solid var(--line)}
.rs-courses{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px}
.rs-course{position:relative;padding:40px 34px 44px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(201,169,110,.08),transparent 60%);min-height:320px;overflow:hidden}
.rs-num{font:italic 400 22px/1 Georgia,serif;color:var(--ac)}
.rs-cn{font-size:42px;line-height:1.1;margin:44px 0 14px}
.rs-cd{font:400 16.5px/1.6 system-ui,sans-serif;color:var(--mut);max-width:270px}
.rs-kan{position:absolute;right:20px;bottom:6px;font-size:120px;line-height:1;color:var(--ac);opacity:.14}
.rs-gal{display:grid;grid-template-columns:.9fr 1.5fr 1.1fr;gap:20px;height:520px;padding:100px 80px 0;box-sizing:content-box}
.rs-gal>div{position:relative;border:1px solid var(--line)}
.rs-gal>div::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.rs-gal span{position:absolute;z-index:2;left:24px;bottom:22px;font:500 13px/1 system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase}
.rs-g1{background-position:60% 40%!important}.rs-g3{background-position:30% 50%!important}
.rs-res{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;padding:130px 80px}
.rs-res .rs-lead{margin-top:6px}
.rs-book{padding:38px 44px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(201,169,110,.1),rgba(201,169,110,.02))}
.rs-field{display:flex;align-items:baseline;justify-content:space-between;padding:20px 0;border-bottom:1px solid var(--line)}
.rs-field span,.rs-lab{font:500 12.5px/1 system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--ac)}
.rs-field b{font-size:28px;font-weight:400}
.rs-book .rs-btn{display:flex;margin-top:30px;padding:22px}
.rs-foot{display:grid;grid-template-columns:1fr 1fr auto;gap:60px;align-items:center;padding:56px 80px 64px;border-top:1px solid var(--line)}
.rs-foot p{font-size:24px;margin-top:12px}
.rs-logo.sm b{font-size:26px}.rs-logo.sm u{font-size:26px}.rs-logo.sm .rs-branch{width:70px}

.mk-rs.mk-mobile .rs-nav{height:68px;padding:0 20px}
.mk-rs.mk-mobile .rs-logo{gap:8px}
.mk-rs.mk-mobile .rs-logo b,.mk-rs.mk-mobile .rs-logo u{font-size:22px}
.mk-rs.mk-mobile .rs-branch{width:58px}
.mk-rs.mk-mobile .rs-hero{height:auto}
.mk-rs.mk-mobile .rs-copy{padding:34px 24px 0}
.mk-rs.mk-mobile .rs-kick{font-size:11.5px;margin-bottom:18px}
.mk-rs.mk-mobile .rs-h1{margin-bottom:20px}
.mk-rs.mk-mobile .rs-h1 em,.mk-rs.mk-mobile .rs-h1 span{font-size:42px;white-space:normal}
.mk-rs.mk-mobile .rs-lead{font-size:15.5px}
.mk-rs.mk-mobile .rs-row{margin-top:26px}
.mk-rs.mk-mobile .rs-btn{padding:17px 24px;font-size:12.5px}
.mk-rs.mk-mobile .rs-photo{position:relative;width:auto;height:340px;margin-top:34px}
.mk-rs.mk-mobile .rs-hero .rs-photo::after{background:linear-gradient(180deg,#0b0907 0,transparent 40%)}
.mk-rs.mk-mobile .rs-menu{padding:44px 24px 50px}
.mk-rs.mk-mobile .rs-h2.lt{font-size:38px;margin-bottom:6px}
.mk-rs.mk-mobile .rs-courses,.mk-rs.mk-mobile .rs-menu .rs-course{margin-top:14px}
.mk-rs.mk-mobile .rs-course{min-height:0;padding:22px 22px 26px}
.mk-rs.mk-mobile .rs-cn{font-size:30px;margin:14px 0 8px}
.mk-rs.mk-mobile .rs-cd{font-size:14.5px}

/* ==========================================================================
   2 · HALDEN & ROSS — navy, paper and burnt orange; business advisors
   ========================================================================== */
.mk-cn{--paper:#F3F0E9;--navy:#15233F;--ink:#1A1F2B;--mut:#565D6C;--acc:#B5532A;--line:rgba(21,35,63,.14);
  background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.mk-cn::after{filter:invert(1);opacity:.035}
.cn-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:96px;padding:0 56px;border-bottom:1px solid var(--line);white-space:nowrap}
.cn-logo{display:inline-flex;flex-direction:column;align-items:flex-start}
.cn-logo b{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:25px;line-height:1;letter-spacing:.14em;color:var(--navy)}
.cn-logo i{font:600 10.5px/1 system-ui,sans-serif;font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-top:8px}
.cn-links{display:flex;gap:30px;font-size:14.5px}
.cn-links .on{color:var(--navy);font-weight:600}
.cn-btn{display:inline-flex;align-items:center;justify-content:center;padding:17px 24px;background:var(--navy);color:#fff;font-size:14.5px;font-weight:600;white-space:nowrap}
.cn-hero{display:grid;grid-template-columns:610px 1fr;height:640px}
.cn-copy{padding:92px 44px 0 56px}
.cn-kick{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin-bottom:28px}
.cn-kick.lt{color:#EBA483}
.cn-h1{font-family:Georgia,"Times New Roman",serif;font-size:60px;line-height:1.05;letter-spacing:-.02em;color:var(--navy);margin-bottom:28px}
.cn-lead{font-size:19px;line-height:1.6;color:var(--mut);max-width:470px}
.cn-lead.lt{color:#C5CBD8}
.cn-row{display:flex;align-items:center;gap:28px;margin-top:38px;white-space:nowrap}
.cn-link{font-size:15px;font-weight:600;color:var(--navy);padding-bottom:4px;border-bottom:2px solid var(--acc)}
.cn-photo{position:relative;height:100%;background-position:50% 35%!important}
.cn-note{position:absolute;left:-44px;bottom:60px;display:flex;flex-direction:column;gap:6px;padding:22px 28px;background:#fff;box-shadow:0 24px 50px -24px rgba(21,35,63,.45)}
.cn-note b{font-family:Georgia,serif;font-weight:400;font-size:24px;color:var(--navy)}
.cn-note span{font-size:14px;color:var(--mut)}
.cn-svc{padding:100px 56px 104px}
.cn-svch{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end}
.cn-h2{font-family:Georgia,"Times New Roman",serif;font-size:46px;line-height:1.08;letter-spacing:-.015em;color:var(--navy)}
.cn-h2.lt{color:#fff}
.cn-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
.cn-cimg{height:270px;margin-bottom:22px}
.cn-card b{display:block;font-family:Georgia,serif;font-weight:400;font-size:28px;color:var(--navy);margin-bottom:8px}
.cn-card p{font-size:16.5px;line-height:1.55;color:var(--mut)}
.cn-appr{display:grid;grid-template-columns:1.25fr 1fr;gap:80px;align-items:center;padding:100px 56px;background:var(--navy);color:#fff}
.cn-appr .cn-h2{margin-bottom:18px}
.cn-appr ul{list-style:none;margin:0;padding:0;display:grid;gap:24px}
.cn-appr li{position:relative;padding-left:36px;font-family:Georgia,serif;font-size:27px}
.cn-appr li::before{content:"";position:absolute;left:0;top:15px;width:20px;height:2px;background:var(--acc)}
.cn-meet{display:grid;grid-template-columns:1fr 1fr}
.cn-mimg{min-height:580px}
.cn-form{padding:76px 72px}
.cn-form .cn-lead{margin:14px 0 26px}
.cn-fld{display:flex;justify-content:space-between;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.cn-fld span{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.cn-fld b{font-weight:400;font-size:18px}
.cn-form .cn-btn{display:flex;margin-top:30px}
.cn-foot{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:46px 56px 52px;background:#0E1930;color:#C5CBD8;font-size:14px;white-space:nowrap}
.cn-foot .cn-logo b{color:#fff}.cn-foot .cn-logo i{color:#97A0B3}

.mk-cn.mk-mobile .cn-nav{height:76px;padding:0 22px;color:var(--navy)}
.mk-cn.mk-mobile .cn-logo b{font-size:19px}
.mk-cn.mk-mobile .cn-logo i{font-size:8px;letter-spacing:.16em}
.mk-cn.mk-mobile .cn-hero{display:block;height:auto}
.mk-cn.mk-mobile .cn-copy{padding:36px 22px 0}
.mk-cn.mk-mobile .cn-kick{font-size:10px;margin-bottom:16px}
.mk-cn.mk-mobile .cn-h1{font-size:37px;margin-bottom:18px}
.mk-cn.mk-mobile .cn-lead{font-size:16px}
.mk-cn.mk-mobile .cn-row{margin-top:24px}
.mk-cn.mk-mobile .cn-photo{height:300px;margin-top:32px}
.mk-cn.mk-mobile .cn-note{left:22px;bottom:-26px;padding:14px 18px}
.mk-cn.mk-mobile .cn-note b{font-size:19px}
.mk-cn.mk-mobile .cn-note span{font-size:12.5px}
.mk-cn.mk-mobile .cn-svc{padding:64px 22px 40px}
.mk-cn.mk-mobile .cn-h2{font-size:30px}
.mk-cn.mk-mobile .cn-cards{grid-template-columns:1fr;gap:24px;margin-top:22px}
.mk-cn.mk-mobile .cn-cimg{height:150px;margin-bottom:12px}
.mk-cn.mk-mobile .cn-card b{font-size:22px}

/* ==========================================================================
   3 · MAREA — sea blue, sand and white; guesthouse by the sea
   ========================================================================== */
.mk-mr{--sea:#1C3847;--sand:#EDE5D6;--foam:#FAF7F2;--ink:#17232A;--mut:#56636A;--acc:#2E6E72;
  background:var(--foam);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.mk-mr::after{opacity:.04}
.mr-hero{position:relative;height:780px;color:#fff;background-position:50% 62%!important}
.mr-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,20,28,.55) 0,rgba(8,20,28,0) 26%,rgba(8,20,28,0) 44%,rgba(8,20,28,.62) 100%)}
.mr-nav{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px;height:104px;padding:0 56px;white-space:nowrap}
.mr-logo{display:inline-flex;flex-direction:column;align-items:flex-start}
.mr-logo b{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:30px;line-height:1;letter-spacing:.4em}
.mr-logo i{font-size:10.5px;font-style:normal;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-top:8px;opacity:.9}
.mr-links{display:flex;gap:30px;font-size:14.5px}
.mr-btn{display:inline-flex;align-items:center;justify-content:center;padding:17px 26px;background:var(--sea);color:#fff;font-size:14.5px;font-weight:600;white-space:nowrap}
.mr-btn-l{background:#fff;color:var(--sea)}
.mr-copy{position:absolute;z-index:2;left:56px;bottom:178px;max-width:660px}
.mr-kick{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:20px}
.mr-h1{font-family:Georgia,"Times New Roman",serif;font-size:86px;line-height:.98;letter-spacing:-.025em;margin-bottom:22px}
.mr-lead{font-size:19px;line-height:1.55;max-width:540px}
.mr-lead.d{color:var(--mut)}
.mr-avail{position:absolute;z-index:2;left:56px;right:56px;bottom:44px;display:grid;grid-template-columns:1fr 1fr 1fr auto;background:#fff;color:var(--ink)}
.mr-f{padding:20px 26px;border-right:1px solid rgba(23,35,42,.12)}
.mr-f span{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:7px}
.mr-f b{font-weight:500;font-size:19px}
.mr-avail .mr-btn{padding:0 38px}
.mr-intro{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;padding:104px 56px 56px}
.mr-h2{font-family:Georgia,"Times New Roman",serif;font-size:48px;line-height:1.06;letter-spacing:-.015em;color:var(--sea)}
.mr-h2.lt{color:#fff}
.mr-rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:0 56px 104px}
.mr-rimg{height:420px;margin-bottom:18px}
.mr-room b{display:block;font-family:Georgia,serif;font-weight:400;font-size:27px;color:var(--sea);margin-bottom:4px}
.mr-room span{font-size:15.5px;color:var(--mut)}
.mr-day{display:grid;grid-template-columns:1fr 1fr;background:var(--sand)}
.mr-dimg{min-height:600px}
.mr-dl{padding:84px 64px}
.mr-dl .mr-h2{margin-bottom:30px}
.mr-dr{display:grid;grid-template-columns:96px 1fr;gap:20px;padding:22px 0;border-top:1px solid rgba(28,56,71,.18)}
.mr-dr span{font-family:Georgia,serif;font-size:27px;color:var(--acc)}
.mr-dr p{font-size:18px;line-height:1.5}
.mr-coast{position:relative;height:460px;display:flex;align-items:flex-end;padding:56px;background-position:50% 55%!important}
.mr-coast::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,20,28,.6),rgba(8,20,28,0) 62%)}
.mr-coast .mr-h2{position:relative;max-width:700px}
.mr-foot{display:flex;justify-content:space-between;align-items:center;padding:46px 56px 52px;background:var(--sea);color:#D2DCDF;font-size:14px;white-space:nowrap}

.mk-mr.mk-mobile .mr-hero{height:700px;background-position:38% 60%!important}
.mk-mr.mk-mobile .mr-nav{height:76px;padding:0 22px}
.mk-mr.mk-mobile .mr-logo b{font-size:22px;letter-spacing:.32em}
.mk-mr.mk-mobile .mr-logo i{font-size:7.5px;letter-spacing:.14em}
.mk-mr.mk-mobile .mr-copy{left:22px;right:22px;bottom:118px}
.mk-mr.mk-mobile .mr-kick{font-size:10px;margin-bottom:14px}
.mk-mr.mk-mobile .mr-h1{font-size:54px;margin-bottom:16px}
.mk-mr.mk-mobile .mr-lead{font-size:16px}
.mr-cta{position:absolute;z-index:2;left:22px;right:22px;bottom:34px;display:flex}
.mr-cta .mr-btn{flex:1;padding:19px}
.mk-mr.mk-mobile .mr-rooms{grid-template-columns:1fr;padding:40px 22px}
.mk-mr.mk-mobile .mr-rimg{height:220px}
.mk-mr.mk-mobile .mr-room b{font-size:22px}

/* ==========================================================================
   4 · ATELIER RENOVATIONS — warm cream, charcoal and bronze; serif
   ========================================================================== */
.mk-rn{--ink:#25282a;--cream:#fbf8f2;--br:#9a7b57;--mut:#4a4d4f;--line:rgba(37,40,42,.14);
  background:var(--cream);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.mk-rn::after{filter:invert(1);opacity:.045}
.rn-logo{display:inline-flex;flex-direction:column;align-items:flex-start}
.rn-logo b{font-family:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;font-weight:500;font-size:27px;line-height:1;letter-spacing:.005em;text-transform:uppercase;white-space:nowrap}
.rn-logo i{font:500 11.5px/1 system-ui,sans-serif;font-style:normal;letter-spacing:.16em;text-transform:uppercase;margin:7px 0 0 4px}
.rn-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:118px;padding:0 56px;white-space:nowrap;border-bottom:1px solid var(--line)}
.rn-links{display:flex;gap:28px;font:400 13px/1 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.rn-links .on{padding-bottom:7px;border-bottom:1.5px solid var(--br)}
.rn-btn{display:inline-flex;align-items:center;justify-content:center;padding:19px 24px;white-space:nowrap;background:var(--ink);color:#fff;font:400 13px/1 system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;box-shadow:0 0 0 2px var(--br)}
.rn-hero{display:grid;grid-template-columns:640px 1fr;height:600px}
.rn-copy{padding:104px 0 0 56px;position:relative;z-index:2}
.rn-kick{font:400 15px/1.3 system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--br);margin-bottom:26px}
.rn-h1{font-family:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;font-weight:400;font-size:52px;line-height:1.12;letter-spacing:-.01em;margin-bottom:28px;white-space:nowrap}
.rn-lead{font-size:19.5px;line-height:1.65;color:var(--mut);max-width:470px}
.rn-row{display:flex;align-items:center;gap:30px;margin-top:36px;white-space:nowrap}
.rn-link{white-space:nowrap;font:400 13px/1 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.rn-photo{height:100%;background-position:42% 50%}
.rn-spaces{padding:84px 56px 88px}
.rn-h2{font-family:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;font-weight:400;font-size:48px;line-height:1.1;letter-spacing:.005em;text-transform:uppercase}
.rn-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:38px}
.rn-card{position:relative;height:360px;overflow:hidden;color:#fff}
.rn-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,26,22,.62),rgba(30,26,22,0) 46%)}
.rn-card span{position:absolute;left:28px;top:26px;font-size:23px}
.rn-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding:44px 56px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rn-facts i{display:block;width:34px;height:2px;background:var(--br);margin-bottom:16px}
.rn-facts b{display:block;font-family:"Cormorant Garamond","Iowan Old Style",Georgia,serif;font-weight:500;font-size:28px;margin-bottom:6px}
.rn-facts span{font-size:16px;color:var(--mut)}
.rn-proc{display:grid;grid-template-columns:1fr 1.35fr;gap:80px;padding:110px 56px}
.rn-proc .rn-h2{margin-bottom:22px;font-size:52px;text-transform:none}
.rn-steps{display:grid;grid-template-columns:1fr 1fr;gap:38px 36px;align-content:center}
.rn-step{display:flex;gap:20px}
.rn-step span{font-family:"Cormorant Garamond","Iowan Old Style",Georgia,serif;font-style:italic;font-size:46px;line-height:1;color:var(--br)}
.rn-step b{display:block;font-size:22px;font-weight:500;margin-bottom:6px}
.rn-step p{font-size:16px;line-height:1.55;color:var(--mut)}
.rn-quote{display:grid;grid-template-columns:1fr 1fr;background:var(--ink);color:var(--cream)}
.rn-qimg{min-height:560px;background-position:18% 50%!important}
.rn-qf{padding:72px 72px 70px}
.rn-qf .rn-h2{font-size:46px;text-transform:none;margin-bottom:12px}
.rn-qf .rn-lead{color:#cfd0cf;margin-bottom:26px}
.rn-fld{display:flex;justify-content:space-between;align-items:baseline;padding:17px 0;border-bottom:1px solid rgba(255,255,255,.22)}
.rn-fld span{font:400 12px/1 system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#cdb08a}
.rn-fld b{font-weight:400;font-size:18px;color:#e8e6e1}
.rn-qf .rn-btn{display:flex;margin-top:30px;background:var(--cream);color:var(--ink);box-shadow:none}
.rn-foot{display:flex;align-items:center;justify-content:space-between;padding:50px 56px 56px}
.rn-foot .rn-links{font-size:13px;gap:32px}

.mk-rn.mk-mobile .rn-nav{height:80px;padding:0 22px}
.mk-rn.mk-mobile .rn-logo b{font-size:21px}
.mk-rn.mk-mobile .rn-logo i{font-size:7px;letter-spacing:.1em}
.mk-rn.mk-mobile .rn-hero{display:block;height:auto}
.mk-rn.mk-mobile .rn-copy{padding:34px 24px 0}
.mk-rn.mk-mobile .rn-kick{font-size:11.5px;margin-bottom:16px}
.mk-rn.mk-mobile .rn-h1{font-size:40px;white-space:normal;margin-bottom:18px}
.mk-rn.mk-mobile .rn-lead{font-size:16px}
.mk-rn.mk-mobile .rn-row{margin-top:26px}
.mk-rn.mk-mobile .rn-btn{padding:19px 24px;font-size:13px}
.mk-rn.mk-mobile .rn-photo{height:300px;margin-top:32px}
.mk-rn.mk-mobile .rn-spaces{padding:44px 22px 40px}
.mk-rn.mk-mobile .rn-h2{font-size:30px}
.mk-rn.mk-mobile .rn-cards{grid-template-columns:1fr;gap:12px;margin-top:22px}
.mk-rn.mk-mobile .rn-card{height:150px}
.mk-rn.mk-mobile .rn-card span{font-size:18px;left:18px;top:16px}

/* ==========================================================================
   5 · SIR — black, chalk white and lime; barbershop (concept, 25/10/2026).
   The name is the sign: the I is a window with the chair inside. Bebas Neue +
   EB Garamond, served from /assets/fonts (SIL OFL). Photos without faces.
   ========================================================================== */
@font-face{font-family:"Bebas Neue";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/bebas-neue-400.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/eb-garamond-400.woff2) format("woff2")}
.mk-bb{--bk:#0E0F0D;--bk2:#1A1C18;--lime:#8DDC2F;--lime2:#7AC624;--chalk:#F3F4EE;--soft:#A3A69C;background:var(--bk);color:var(--chalk);font:400 19px/1.45 "EB Garamond",Georgia,serif}
.mk-bb .bb-display,.bb-logo b,.bb-btn,.bb-name b,.bb-h2,.bb-flist b,.bb-pbig,.bb-band span,.bb-svcs b,.bb-cvals p,.bb-giant,.bb-l2 text{font-family:"Bebas Neue",Impact,"Arial Narrow",sans-serif;font-weight:400}
.bb-nav{display:flex;align-items:center;gap:26px;height:84px;padding:0 40px;white-space:nowrap}
.bb-logo{display:inline-flex;align-items:center;gap:10px}
.bb-logo i{display:block;width:22px;height:22px;background:var(--lime)}
.bb-logo b{font-size:32px;line-height:1;letter-spacing:.02em}
.bb-open{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--chalk)}
.bb-open i{display:block;width:8px;height:8px;border-radius:50%;background:var(--lime)}
.bb-links{display:flex;gap:26px;margin-left:auto;font-size:16px}
.bb-btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 22px 11px;background:var(--lime);color:var(--bk);font-size:22px;line-height:1;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.bb-btn.dk{background:var(--bk);color:var(--chalk)}
.bb-hero{display:grid;grid-template-columns:auto 1fr;align-items:end;column-gap:56px;row-gap:34px;padding:64px 40px 60px}
.bb-name{display:flex;align-items:stretch;gap:16px}
.bb-name b{display:block;font-size:330px;line-height:1;letter-spacing:-.01em;color:var(--chalk);text-box:trim-both cap alphabetic}
.bb-win{display:block;width:96px;background-position:50% 60%!important}
.bb-talk{padding-bottom:6px}
.bb-lead{font-size:23px;line-height:1.38;max-width:360px}
.bb-talk .bb-btn{margin-top:24px}
.bb-l2{grid-column:1 / -1;display:block;width:100%;height:auto;overflow:visible}
.bb-l2 text{fill:var(--lime)}
.bb-intro{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end;padding:96px 40px 48px}
.bb-h2{font-size:96px;line-height:.9;letter-spacing:-.005em;text-transform:uppercase}
.bb-txt{font-size:20px;line-height:1.45;max-width:440px}
.bb-facts{display:grid;grid-template-columns:300px 1fr;gap:40px;padding:0 40px 96px}
.bb-flist{display:grid;align-content:space-between;padding:6px 0}
.bb-flist b{display:block;font-size:46px;line-height:.95;text-transform:uppercase}
.bb-flist span{display:block;margin-top:8px;font-size:17px;color:var(--soft);max-width:240px}
.bb-shop{height:540px;background-position:50% 55%!important}
.bb-price{padding:84px 40px 88px;background:var(--lime);color:var(--bk)}
.bb-pbig{font-size:150px;line-height:.9;text-transform:uppercase}
.bb-pbig b{display:inline-block;padding:2px 22px 0;background:var(--bk);color:var(--chalk);font-weight:400}
.bb-prow{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-top:34px}
.bb-price .bb-txt{font-size:23px;max-width:560px}
.bb-band{display:flex;gap:6px;height:380px;padding:6px 0;background:var(--bk)}
.bb-band > div{position:relative;flex:2}
.bb-band .bb-b1{flex:5}.bb-band .bb-b3{flex:3}
.bb-band span{position:absolute;left:0;bottom:0;padding:10px 14px 8px;background:var(--bk);color:var(--chalk);font-size:28px;line-height:1;text-transform:uppercase}
.bb-book{display:grid;grid-template-columns:1fr 440px;gap:48px;align-items:start;padding:96px 40px;background:var(--lime);color:var(--bk)}
.bb-book .bb-txt{margin-top:18px}
.bb-svcs{display:grid;gap:6px;margin-top:34px}
.bb-svcs div{display:flex;justify-content:space-between;align-items:baseline;padding:16px 18px 12px;background:var(--lime2)}
.bb-svcs div.on{background:var(--bk);color:var(--lime)}
.bb-svcs b{font-size:30px;line-height:1;text-transform:uppercase}
.bb-svcs span{font-size:17px}
.bb-card{padding:30px 32px 34px;background:var(--bk);color:var(--chalk)}
.bb-card .bb-logo b{font-size:28px}
.bb-cvals{margin:30px 0 28px}
.bb-cvals p{font-size:64px;line-height:.95;text-transform:uppercase}
.bb-cvals p.g{color:var(--lime)}
.bb-card .bb-btn{display:flex}
.bb-foot{background:var(--lime);color:var(--bk);overflow:hidden}
.bb-ftop{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;padding:88px 40px 40px}
.bb-fcols{display:grid;grid-template-columns:1fr 1fr;gap:24px;font-size:17px}
.bb-fcols span{display:block;font-weight:500;margin-bottom:4px}
.bb-giant{height:250px;padding-left:28px;font-size:560px;line-height:.82;letter-spacing:-.01em}

.mk-bb.mk-mobile .bb-nav{height:64px;gap:12px;padding:0 18px}
.mk-bb.mk-mobile .bb-logo b{font-size:28px}
.mk-bb.mk-mobile .bb-logo i{width:18px;height:18px}
.mk-bb.mk-mobile .bb-nav .bb-btn{margin-left:auto;padding:10px 14px 8px;font-size:19px}
.mk-bb.mk-mobile .mk-burger{color:var(--chalk)}
.mk-bb.mk-mobile .bb-hero{display:block;padding:40px 18px 40px}
.mk-bb.mk-mobile .bb-name{gap:8px}
.mk-bb.mk-mobile .bb-name b{font-size:196px}
.mk-bb.mk-mobile .bb-win{width:56px}
.mk-bb.mk-mobile .bb-l2{margin-top:22px}
.mk-bb.mk-mobile .bb-talk{margin-top:26px}
.mk-bb.mk-mobile .bb-lead{font-size:19px}
.mk-bb.mk-mobile .bb-talk .bb-btn{margin-top:20px;padding:14px 20px 12px}
.mk-bb.mk-mobile .bb-price{padding:44px 18px 48px}
.mk-bb.mk-mobile .bb-pbig{font-size:66px}
.mk-bb.mk-mobile .bb-pbig b{padding:2px 12px 0}
.mk-bb.mk-mobile .bb-price .bb-txt{margin-top:20px;font-size:19px}