/* ==========================================================================
   AMAKU studio - amaku.css
   Design system for the rebuilt pages. Playfair Display + Jost.
   Loaded only by pages that have been rebuilt; css/style.css still serves
   the project and journal pages until each of those is migrated.
   Breakpoints: 1300 / 800 / 450, consolidated at the end of this file.
   ========================================================================== */


/* ══════════════════════════════════════════════════════════════
   NEW - to be merged into css/style.css § :root (top of file)
   Playfair Display + Jost. Palette approved 8 Sep 2026.
   ══════════════════════════════════════════════════════════════ */
:root{
  --ground:#FBFAF8; --ground-alt:#F4F1EC; --ground-deep:#EAE4DB;
  --ink:#1C1917; --ink-body:#4A443E; --ink-muted:#6B645D;
  --brand:#8B7355; --brand-deep:#6D5C46; --gold:#D1B97F; --line:#D2C8B7; --line-strong:#C2B5A0; --numeral:#A08A6E;
  --on-ink:#E8E3DC; --on-ink-mute:#A29A90; --line-ink:#464039;

  --f-head:'Playfair Display', Georgia, serif;
  --f-body:'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* Two-slope fluid scale, anchored at 430px.
     clamp() floors a size at its minimum, so below roughly 430px the type
     stopped shrinking while the column kept narrowing: a 360px phone was given
     the 440px phone's 46px headline inside a measure 18% tighter, which is why
     the hero filled the screen and pushed the second button off it. The inner
     min() adds a second, steeper arm that only bites under 430px - the width
     this layout was tuned at - so 430 and up is byte for byte what it was and
     360 lands at 84%, which is the 83% zoom that reads correctly on a phone.
     Written as min/max rather than a fourth breakpoint: the curve is
     continuous, so there is no step anywhere to test for or to get wrong.
     The vw figure inside each min() is that size in px divided by 4.30. */
  --t-display:min(6.2rem,max(7.4vw,min(2.9rem,10.79vw)));
  --t-h1:min(3.5rem,max(4.2vw,min(2.25rem,8.37vw)));
  --t-h2:min(3.2rem,max(4vw,min(2rem,7.44vw)));
  --t-h3:min(1.5rem,max(1.8vw,min(1.25rem,4.65vw)));
  --t-lead:min(1.25rem,max(1.3vw,min(1.0625rem,3.95vw)));
  --t-body:max(0.875rem,min(1.0625rem,3.95vw));
  --t-small:max(0.8125rem,min(0.9375rem,3.49vw));
  --t-micro:max(0.75rem,min(0.8125rem,3.02vw));
  --t-numeral:min(5.2rem,max(6vw,min(3rem,11.16vw)));

  --sp-section:min(160px,max(10vw,min(80px,18.6vw)));
  --ca-lift:20px;   /* Context Assistant clearance; mirrored in js/amaku.js */
  --container:1280px;
  /* the nav rides the same 430px anchor: 82px down to 64px, which is what
     keeps the hero one screen on a narrow phone once the type has shrunk */
  --nav-h:max(64px,min(82px,19.07vw));
  --head-h:calc(var(--nav-h) + 41px);   /* utility strip 40 + nav + 1px rule */
  --bar-h:0px;      /* fixed action bar, below 1300 only */
  --gutter:clamp(16px,5vw,64px);
  --ease:cubic-bezier(.22,.68,.24,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
section[id],footer{scroll-margin-top:96px;}
body{margin:0;background:var(--ground);color:var(--ink-body);font-family:var(--f-body);
  font-size:var(--t-body);line-height:1.7;-webkit-font-smoothing:antialiased;}
.container{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter);}
h1,h2,h3,h4{font-family:var(--f-head);color:var(--ink);font-weight:400;margin:0;text-wrap:balance;}
h2{font-size:var(--t-h2);line-height:1.06;letter-spacing:-.016em;}
h3{font-size:var(--t-h3);line-height:1.24;}
p{margin:0 0 15px;max-width:68ch;}
a{color:var(--brand-deep);}
:where(a,button,summary):focus-visible{outline:2px solid var(--brand-deep);outline-offset:3px;}
img{max-width:100%;display:block;}
.num{font-variant-numeric:tabular-nums;}

.eyebrow{font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--brand-deep);margin:0 0 18px;}

/* section header: eyebrow + big head + full-width rule */
.head{display:flex;flex-wrap:wrap;gap:18px 40px;align-items:flex-end;justify-content:space-between;
  padding-bottom:26px;border-bottom:1px solid var(--line-strong);margin-bottom:clamp(38px,5vw,72px);}
.head h2{max-width:16ch;}
.head .lead{font-size:var(--t-lead);color:var(--ink-muted);max-width:40ch;margin:0;}

.btn{font-family:var(--f-body);font-size:max(13.5px,min(15px,3.49vw));font-weight:500;letter-spacing:.03em;
  padding:max(13px,min(15px,3.49vw)) max(22px,min(32px,7.44vw));
  border:1px solid transparent;cursor:pointer;text-decoration:none;display:inline-block;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);}
.btn-p{background:var(--brand-deep);color:#fff;}
.btn-p:hover{background:var(--ink);}
.btn-s{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-s:hover{border-color:var(--brand-deep);}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6);}
.btn-ghost:hover{background:#fff;color:var(--ink);}
.link-more{font-family:var(--f-body);font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:500;text-decoration:none;color:var(--ink);white-space:nowrap;margin-left:auto;
  border:1px solid var(--line-strong);padding:12px 22px;display:inline-flex;align-items:center;gap:10px;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);}
.link-more::after{content:'\2192';font-size:16px;line-height:1;transition:transform .3s var(--ease);}
.link-more:hover{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff;}
.link-more:hover::after{transform:translateX(3px);}

/* ── utility strip + nav ── */
.util{background:var(--ink);color:var(--on-ink-mute);font-size:13px;letter-spacing:.03em;}
.util-in{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);height:40px;
  display:flex;align-items:center;gap:28px;}
.util a{color:var(--on-ink);text-decoration:none;}
.util a:hover{color:var(--gold);}
.util .tel{font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.05em;}
.util .hrs{margin-right:auto;}
.util .msg{display:flex;gap:18px;align-items:center;}
.util .msg a{display:inline-flex;align-items:center;gap:7px;}
.util .msg i{width:6px;height:6px;border-radius:50%;display:inline-block;}
.util .lang{display:flex;gap:14px;}
.util .lang .cur{color:var(--gold);}

.nav{position:sticky;top:0;z-index:50;background:rgba(251,250,248,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.nav-in{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);height:var(--nav-h);display:flex;align-items:center;gap:32px;}
.nav-logo img{height:max(24px,min(30px,6.98vw));width:auto;}
.nav-links{display:flex;gap:30px;margin-left:auto;}
.nav-links a{font-size:14.5px;letter-spacing:.04em;color:var(--ink-body);text-decoration:none;
  padding:5px 0;border-bottom:1px solid transparent;transition:border-color .3s var(--ease),color .3s var(--ease);}
.nav-links a:hover,.nav-links a.on{color:var(--ink);border-color:var(--brand);}
.nav .btn{padding:12px 26px;font-size:14px;}
.nav-quick{display:none;align-items:center;gap:18px;}
.nav-compact .nav-quick{display:flex;}
.nav-quick a{display:inline-flex;align-items:center;gap:8px;font-size:14px;letter-spacing:.03em;
  color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums;
  border-bottom:1px solid transparent;padding-bottom:3px;transition:border-color .3s var(--ease);}
.nav-quick a:hover{border-color:var(--brand-deep);}
.nav-quick i{width:7px;height:7px;border-radius:50%;display:inline-block;}

/* ── hero ── */
/* From 800px up the hero and the proof bar share one screen: the block owns the
   viewport height, the bar takes what it needs and the image keeps the rest.
   Below 800 the block steps aside and the image is full screen on its own. */
.hero-block{display:flex;flex-direction:column;
  min-height:min(calc(100vh - var(--head-h) - var(--bar-h)),260vw,1600px);
  min-height:min(calc(100svh - var(--head-h) - var(--bar-h)),260vw,1600px);}
.hero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
  flex:1 1 auto;min-height:0;}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.6s var(--ease);}
.hero>img.on{opacity:1;}
.hero>img:first-of-type{opacity:1;}
.hero>img:first-of-type.off{opacity:0;}
.hero .veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,25,23,.42) 0%,rgba(28,25,23,.20) 28%,rgba(28,25,23,.42) 62%,rgba(28,25,23,.82) 100%);}
/* Height cap: Google renders on a screen stretched to the full page length, and a
   pure svh hero grows with it until it swallows every section (20000px on the
   homepage). 260vw and 1600px sit above every real phone, tablet and monitor, so
   visitors still get one full screen; only that stretched render is capped. */
/* the copy block is tighter here than below 800, because the black bar under it
   is the base of the composition and the whole thing has to hold one screen.
   The svh line wins where it is supported, the vw line is the fallback. */
.hero-in{position:relative;width:100%;max-width:var(--container);margin:0 auto;
  padding:0 var(--gutter) clamp(28px,3.4vw,54px);color:#fff;}
.hero-in{padding-bottom:clamp(28px,4.2svh,54px);}
.hero .eyebrow{color:#fff;opacity:.92;text-shadow:0 1px 14px rgba(0,0,0,.75);letter-spacing:.22em;
  margin-bottom:12px;}
.hero h1{font-size:var(--t-display);line-height:1.0;letter-spacing:-.028em;color:#fff;
  margin-bottom:16px;max-width:15ch;text-shadow:0 2px 34px rgba(0,0,0,.42);}
.hero .sub{font-size:var(--t-lead);line-height:1.6;color:#EFEAE3;max-width:52ch;margin-bottom:22px;
  text-shadow:0 1px 16px rgba(0,0,0,.55);}
.hero-btns{display:flex;flex-wrap:wrap;gap:14px;}

/* full-bleed proof bar at the hero's bottom edge */
.proofbar{position:relative;background:var(--ink);border-top:1px solid var(--line-ink);}
.proofbar-in{max-width:var(--container);margin:0 auto;padding:clamp(22px,2.6vw,32px) var(--gutter);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,48px);}
.pb{display:flex;align-items:baseline;gap:14px;text-decoration:none;}
.pb .big{font-family:var(--f-head);font-size:clamp(2rem,3.4vw,2.9rem);line-height:1;color:var(--gold);
  font-variant-numeric:tabular-nums;}
.pb .lab{font-size:14.5px;line-height:1.4;color:var(--on-ink);}
.pb .lab small{display:block;font-size:12.5px;color:var(--on-ink-mute);letter-spacing:.04em;}
a.pb:hover .big{color:#fff;}
a.pb:hover .lab{color:#fff;}

/* ── bands ── */
/* section and article alike: the 15 article bodies are <article class="band"> and were
   matching nothing here, so the hero image sat flush against the first paragraph */
.band{padding-block:var(--sp-section);}
.band.slim{padding-block:clamp(44px,5.4vw,86px);}
.band.alt{background:var(--ground-alt);}
.band.deep{background:var(--ground-deep);}
.band.dark{background:var(--ink);color:var(--on-ink);}
.band.dark h2,.band.dark h3{color:#fff;}
.band.dark .eyebrow{color:var(--gold);}
.band.dark .head{border-color:var(--line-ink);}
.band.dark .head .lead{color:var(--on-ink-mute);}

/* ── portfolio: 2 per row, staggered ── */
.pf-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(26px,3.4vw,56px);}
.pf-grid>*:nth-child(even){margin-top:clamp(44px,6vw,76px);}   /* staggered while two columns */
.pf-card{text-decoration:none;color:inherit;display:block;}
/* the filter sets [hidden]; without this, display:block wins and nothing is filtered */
.pf-card[hidden]{display:none;}
.pf-shot{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--ground-alt);}
.pf-shot img{width:100%;height:100%;object-fit:cover;}
/* second photograph, revealed on hover. The url sits in a custom property so the
   file is never fetched on touch devices, where the rule below never applies. */
.pf-alt{position:absolute;inset:0;z-index:1;background-size:cover;background-position:center;
  opacity:0;transition:opacity .48s var(--ease);}
@media (hover:hover){
  .pf-grid.pf-hov .pf-alt{background-image:var(--hov);}
  .pf-card:hover .pf-alt,.pf-card:focus-visible .pf-alt{opacity:1;}
}
.pf-tag{position:absolute;z-index:2;top:16px;left:16px;background:var(--ground);color:var(--ink);
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;padding:7px 13px;font-weight:500;}
.pf-name{font-family:var(--f-head);font-size:clamp(1.6rem,2.4vw,2.1rem);color:var(--ink);
  margin:22px 0 7px;line-height:1.12;}
.pf-meta{font-size:var(--t-small);color:var(--ink-muted);font-variant-numeric:tabular-nums;
  display:flex;flex-wrap:wrap;gap:3px 16px;letter-spacing:.02em;}
.pf-meta span:not(:last-child)::after{content:'·';margin-left:16px;color:var(--line);}

/* ── clients + partners ── */
.cli-card{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(28px,4vw,68px);align-items:center;}
.cli-logo img{max-width:200px;height:auto;}
.cli-card h3{font-size:clamp(1.5rem,2.2vw,1.9rem);margin-bottom:8px;}
.cli-facts{display:flex;flex-wrap:wrap;gap:4px 24px;font-size:var(--t-small);color:var(--ink-muted);
  margin-bottom:16px;font-variant-numeric:tabular-nums;letter-spacing:.02em;}
.cli-facts span:not(:last-child)::after{content:'·';margin-left:24px;color:var(--line);}
.cli-card p{margin:0;max-width:60ch;}
.pt-head{margin-top:clamp(64px,8vw,110px);}
.pt-row{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(34px,4.2vw,54px) clamp(26px,3.2vw,44px);
  border-bottom:1px solid var(--line-strong);
  padding-block:0 clamp(40px,4.8vw,62px);}
.pt-item{position:relative;display:flex;align-items:center;justify-content:center;}
.pt-item img{width:100%;height:auto;display:block;}
.pt-item .pt-g{opacity:.88;transition:opacity .4s var(--ease);}
.pt-item .pt-c{position:absolute;inset:0;opacity:0;filter:drop-shadow(0 0 0 rgba(28,25,23,0));
  transition:opacity .4s var(--ease),filter .4s var(--ease);}
.pt-item:hover .pt-g{opacity:0;}
.pt-item:hover .pt-c{opacity:1;
  filter:drop-shadow(0 0px 8px rgba(28,25,23,.03)) drop-shadow(0 0 3px rgba(28,25,23,.20));}

/* ── why + process: one shared system ── */
.why-grid,.ps-grid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(34px,4.4vw,72px) clamp(28px,4vw,64px);}
.why-grid>div,.ps-step{border-top:1px solid var(--line-strong);padding-top:30px;}
.why-n,.ps-n{font-family:var(--f-head);font-size:var(--t-numeral);line-height:1;color:var(--numeral);
  margin:0 0 30px;font-variant-numeric:tabular-nums;}
.why-grid h3,.ps-step h3{font-size:clamp(1.3rem,1.8vw,1.55rem);margin-bottom:10px;}
.why-grid p,.ps-step p{font-size:15.5px;line-height:1.65;margin:0;color:var(--ink-body);}

/* ── price ── */
.pr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,34px);}
.pr-card{background:var(--ground);border:1px solid var(--line);padding:clamp(26px,3vw,42px);display:flex;flex-direction:column;}
.pr-card.pop{border-color:var(--brand);position:relative;}
.pr-card.pop::before{content:'Cel mai ales';position:absolute;top:-1px;right:-1px;background:var(--brand);
  color:#fff;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:6px 14px;font-weight:500;}
.pr-card h3{font-size:1.45rem;margin-bottom:20px;}
.pr-price{display:flex;align-items:baseline;gap:10px;border-top:1px solid var(--line-strong);padding-top:20px;margin-bottom:7px;}
.pr-price b{font-family:var(--f-head);font-size:clamp(2.8rem,4vw,3.6rem);font-weight:400;color:var(--ink);
  line-height:.95;font-variant-numeric:tabular-nums;}
.pr-price span{font-size:15px;color:var(--ink-muted);}
.pr-days{font-size:var(--t-small);color:var(--brand-deep);font-variant-numeric:tabular-nums;
  margin-bottom:24px;letter-spacing:.05em;text-transform:uppercase;}
.pr-card ul{list-style:none;margin:0 0 30px;padding:0;font-size:15.5px;}
.pr-card li{padding:10px 0 10px 22px;position:relative;border-bottom:1px solid var(--line-strong);}
.pr-card li:last-child{border-bottom:none;}
.pr-card li::before{content:'';position:absolute;left:0;top:18px;width:7px;height:7px;background:var(--gold);}
.pr-card .btn{margin-top:auto;text-align:center;}
.pr-note{margin-top:30px;font-size:var(--t-small);color:var(--ink-muted);max-width:74ch;}

/* ── process footer ── */
.ps-foot{margin-top:clamp(44px,5vw,72px);padding-top:24px;border-top:1px solid var(--line-strong);
  display:flex;flex-wrap:wrap;gap:14px 40px;align-items:baseline;}
.ps-foot p{margin:0;font-size:var(--t-small);color:var(--ink-muted);}
.ps-foot b{color:var(--ink);font-weight:500;}

/* ── reviews, on the dark band ── */
.rv-head{display:flex;flex-wrap:wrap;gap:26px 52px;align-items:center;justify-content:space-between;
  padding-bottom:32px;border-bottom:1px solid var(--line-ink);margin-bottom:clamp(38px,5vw,64px);}
.rv-score{display:flex;align-items:center;gap:20px;text-decoration:none;}
.rv-num{font-family:var(--f-head);font-size:clamp(3.4rem,5.6vw,4.6rem);line-height:1;color:#fff;font-variant-numeric:tabular-nums;}
.stars{display:flex;gap:4px;margin-bottom:8px;}
.stars svg{width:19px;height:19px;}
.rv-src{font-size:14.5px;color:var(--on-ink-mute);margin:0;}
.rv-src b{color:#fff;font-weight:500;}
a.rv-score:hover .rv-src b{color:var(--gold);}
.rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,4vw,60px);}
.rv-mark{font-family:var(--f-head);font-size:3.8rem;line-height:.6;color:var(--gold);opacity:.55;
  display:block;margin-bottom:38px;height:28px;}
.rv-q blockquote{margin:0 0 18px;font-size:17px;line-height:1.7;color:var(--on-ink);}
.rv-who{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-ink-mute);margin:0;}
.rv-who a{color:var(--gold);text-transform:none;letter-spacing:.02em;font-size:13.5px;text-decoration:none;border-bottom:1px solid rgba(209,185,127,.4);}
.rv-who a:hover{border-color:var(--gold);}
.rv-tr{font-size:11.5px;letter-spacing:.1em;color:var(--brand);}

/* ── faq ── */
.faq-list{border-top:1px solid var(--line-strong);max-width:920px;}
.faq-list details{border-bottom:1px solid var(--line-strong);}
.faq-list summary{list-style:none;cursor:pointer;padding:26px 52px 26px 0;position:relative;
  font-family:var(--f-head);font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.32;color:var(--ink);}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{content:'';position:absolute;right:10px;top:34px;width:11px;height:11px;
  border-right:1px solid var(--brand-deep);border-bottom:1px solid var(--brand-deep);
  transform:rotate(45deg);transform-origin:60% 60%;transition:transform .5s var(--ease);}
.faq-list details[open] summary::after{transform:rotate(-135deg);}
.faq-list .ans{padding:0 52px 30px 0;opacity:0;transform:translateY(-8px);
  transition:opacity .5s var(--ease) .04s,transform .5s var(--ease) .04s;}
.faq-list details[open] .ans{opacity:1;transform:none;}
.faq-list .ans p{margin:0 0 13px;}
.faq-list .ans p:first-child{color:var(--ink);font-size:1.08rem;}
.faq-list .ans p:last-child{margin-bottom:0;}
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords;}
  .faq-list details::details-content{block-size:0;overflow:hidden;
    transition:block-size .5s var(--ease),content-visibility .5s allow-discrete;}
  .faq-list details[open]::details-content{block-size:auto;}
}
.faq-more{margin-top:32px;font-size:var(--t-small);color:var(--ink-muted);}

/* ── team ── */
.tm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,52px);}
.tm-card .shot{aspect-ratio:3/4;overflow:hidden;background:var(--ground-alt);}
.tm-card .shot img{width:100%;height:100%;object-fit:cover;}
.tm-card h3{font-size:1.45rem;margin:22px 0 4px;}
.tm-role{font-size:var(--t-small);letter-spacing:.1em;text-transform:uppercase;color:var(--brand-deep);margin-bottom:14px;}
.tm-card p{font-size:15.5px;margin:0;}

/* ── journal: 4 items, 2 per row ── */
.jr-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,3.6vw,56px);}
.jr-card{text-decoration:none;color:inherit;display:block;}
.jr-shot{aspect-ratio:16/10;overflow:hidden;background:var(--ground-alt);}
.jr-shot img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);}
.jr-card:hover .jr-shot img{transform:scale(1.04);}
.jr-meta{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);
  margin:20px 0 9px;font-variant-numeric:tabular-nums;}
.jr-card h3{font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.24;}

/* ── contact ── */
.ct-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(34px,5vw,88px);}
.ct-line{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line-strong);align-items:baseline;}
.ct-line .k{font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted);min-width:92px;}
.ct-line .v{font-size:1.0625rem;color:var(--ink);font-variant-numeric:tabular-nums;}
.ct-line .v a{text-decoration:none;border-bottom:1px solid var(--line-strong);transition:border-color .3s var(--ease);}
.ct-line .v a:hover{border-color:var(--brand-deep);}
.ct-msg{display:flex;flex-wrap:wrap;gap:11px;margin-top:28px;}
.ct-msg a{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);padding:12px 20px;
  text-decoration:none;font-size:14.5px;color:var(--ink);background:var(--ground);
  transition:border-color .3s var(--ease);}
.ct-msg a:hover{border-color:var(--brand-deep);}
.ct-msg .d{width:7px;height:7px;border-radius:50%;}
.frm{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.frm .full{grid-column:1/-1;}
.frm label{display:block;font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:8px;}
.frm input,.frm select,.frm textarea{width:100%;font-family:var(--f-body);font-size:16px;color:var(--ink);
  background:var(--ground);border:1px solid var(--line);padding:14px 15px;border-radius:0;}
.frm input:focus,.frm select:focus,.frm textarea:focus{outline:2px solid var(--brand-deep);outline-offset:1px;border-color:transparent;}
.frm textarea{min-height:122px;resize:vertical;}
@keyframes prefill{0%{border-color:var(--brand-deep);background:var(--ground-alt);}100%{border-color:var(--line);background:var(--ground);}}
.frm select.prefilled{animation:prefill 1.6s var(--ease);}
.map{margin-top:clamp(44px,5vw,76px);aspect-ratio:21/9;border:1px solid var(--line);background:var(--ground-alt);}
.map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.35) contrast(1.02);}

/* ── footer ── */
.ft{background:var(--ink);color:var(--on-ink-mute);padding:clamp(58px,7vw,92px) 0 0;}
.ft a{color:var(--on-ink-mute);text-decoration:none;transition:color .3s var(--ease);}
.ft a:hover{color:#fff;}
.ft-brand{padding-bottom:44px;margin-bottom:44px;border-bottom:1px solid var(--line-ink);}
.ft-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,48px);padding-bottom:54px;}
.ft h4{font-family:var(--f-body);font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin:0 0 18px;font-weight:500;}
.ft ul{list-style:none;margin:0;padding:0;font-size:15px;}
.ft li{margin-bottom:10px;}
.ft-logo img{height:34px;width:auto;margin-bottom:20px;}
.ft-about{font-size:15.5px;line-height:1.65;margin:0;max-width:52ch;}
.ft-bot{border-top:1px solid var(--line-ink);padding:24px 0 32px;display:flex;flex-wrap:wrap;
  gap:10px 30px;justify-content:space-between;font-size:13.5px;}

/* ── mobile action bar ── */
.mbar{display:none;grid-template-columns:1fr 1.5fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:60;
  border-top:1px solid var(--line-strong);background:rgba(251,250,248,.97);backdrop-filter:blur(10px);}
.mbar a{padding:17px 6px;text-align:center;font-size:14.5px;font-weight:500;text-decoration:none;
  letter-spacing:.02em;color:var(--ink);}
.mbar a.p{background:var(--brand-deep);color:#fff;}

/* ── hamburger + menu panel ── */
.burger{display:none;margin-left:auto;width:44px;height:44px;padding:0;border:0;background:none;
  cursor:pointer;position:relative;}
.burger span{position:absolute;left:11px;width:22px;height:1.5px;background:var(--ink);
  transition:transform .38s var(--ease),opacity .2s var(--ease);}
.burger span:nth-child(1){top:16px;}
.burger span:nth-child(2){top:22px;}
.burger span:nth-child(3){top:28px;}
.menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.menu-open .burger span:nth-child(2){opacity:0;}
.menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.menu{position:fixed;inset:0;z-index:70;background:var(--ground);display:flex;flex-direction:column;align-items:center;
  overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .38s var(--ease),transform .38s var(--ease),visibility .38s;}
.menu.on{opacity:1;visibility:visible;transform:none;}
.menu-top{display:flex;align-items:center;height:82px;padding-inline:var(--gutter);flex:none;
  border-bottom:1px solid var(--line-strong);width:100%;max-width:620px;}
.menu-top img{height:30px;width:auto;}
.menu-close{margin-left:auto;width:44px;height:44px;border:0;background:none;cursor:pointer;
  font-size:26px;line-height:1;color:var(--ink);font-family:var(--f-body);}
.menu-body{padding:clamp(28px,6vw,48px) var(--gutter) 48px;display:flex;flex-direction:column;gap:0;
  width:100%;max-width:620px;}
.menu-nav a{display:block;font-family:var(--f-head);font-size:clamp(1.65rem,7vw,2.3rem);line-height:1.1;
  color:var(--ink);text-decoration:none;padding:18px 0;border-bottom:1px solid var(--line);}
.menu-nav a:first-child{border-top:1px solid var(--line);}
.menu .btn{margin-top:32px;text-align:center;width:100%;}
.menu-tel{display:block;font-family:var(--f-head);font-size:clamp(1.5rem,6vw,2rem);color:var(--ink);
  text-decoration:none;margin-top:34px;font-variant-numeric:tabular-nums;letter-spacing:.01em;}
.menu-msg{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.menu-msg a{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-strong);
  padding:11px 18px;text-decoration:none;font-size:14.5px;color:var(--ink);}
.menu-msg i{width:7px;height:7px;border-radius:50%;}
.menu-meta{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px 30px;align-items:baseline;
  font-size:14.5px;color:var(--ink-muted);}
.menu-lang{display:flex;gap:16px;margin-left:auto;}
.menu-lang a,.menu-lang span{text-decoration:none;color:var(--ink-muted);letter-spacing:.08em;}
.menu-lang .cur{color:var(--ink);border-bottom:1px solid var(--brand);}
body.locked{overflow:hidden;}

/* ══════════════════════════════════════════════════════════
   INTERIOR PAGES - shared shell
   Page header, breadcrumb, closing CTA band, consent banner.
   Added 10 Sep 2026 with the six new page types.
   ══════════════════════════════════════════════════════════ */

/* ── breadcrumb ── */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px 11px;list-style:none;margin:0 0 clamp(22px,3vw,38px);
  padding:0;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);}
.crumbs li{display:flex;align-items:center;gap:11px;}
.crumbs li+li::before{content:'/';color:var(--line-strong);}
.crumbs a{color:var(--ink-muted);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .3s var(--ease),border-color .3s var(--ease);}
.crumbs a:hover{color:var(--ink);border-color:var(--brand);}
.crumbs [aria-current]{color:var(--ink);}

/* ── page header ── */
/* Interior pages open typographically rather than photographically: the homepage
   owns the image hero, everything else earns its air from whitespace. */
.phead{padding-block:clamp(44px,5.4vw,84px) clamp(52px,6.4vw,104px);}
.phead-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(24px,4.4vw,76px);align-items:end;}
.phead h1{font-size:var(--t-h1);line-height:1.02;letter-spacing:-.022em;max-width:16ch;}
.phead .lead{font-size:var(--t-lead);line-height:1.6;color:var(--ink-muted);max-width:46ch;margin:0;}
.phead .lead b{color:var(--ink);font-weight:500;}
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,44px);
  border-top:1px solid var(--line-strong);margin-top:clamp(38px,4.6vw,70px);padding-top:clamp(24px,2.8vw,38px);}
.statrow div{min-width:0;}
.statrow b{display:block;font-family:var(--f-head);font-weight:400;font-size:clamp(2rem,3.6vw,3rem);
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;margin-bottom:8px;}
.statrow span{display:block;font-size:14px;line-height:1.45;color:var(--ink-muted);}

/* ── closing CTA, one pattern on every interior page ── */
.cta{background:var(--ink);color:var(--on-ink);padding-block:clamp(66px,8vw,124px);}
.cta .eyebrow{color:var(--gold);}
.cta-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(26px,4.6vw,76px);align-items:end;}
.cta h2{color:#fff;font-size:var(--t-h2);line-height:1.04;max-width:17ch;}
.cta p{color:var(--on-ink);font-size:var(--t-lead);line-height:1.6;max-width:44ch;margin:0 0 26px;}
.cta-btns{display:flex;flex-wrap:wrap;gap:13px;}
.cta-facts{display:flex;flex-wrap:wrap;gap:18px 46px;align-items:baseline;
  margin-top:clamp(36px,4.4vw,62px);padding-top:26px;border-top:1px solid var(--line-ink);}
.cta-facts div{display:flex;align-items:baseline;gap:12px;}
.cta-facts b{font-family:var(--f-head);font-weight:400;font-size:1.7rem;line-height:1;color:var(--gold);
  font-variant-numeric:tabular-nums;}
.cta-facts span{font-size:14px;color:var(--on-ink-mute);}
.cta-facts a{color:inherit;text-decoration:none;}
.cta-facts a:hover b{color:#fff;}

/* ── cookie consent, Law 195/2024 ── */
/* Google Consent Mode v2: the tag ships on every page but storage stays denied
   until the visitor answers. It sits above the mobile action bar, never over it. */
.cookie{position:fixed;left:0;right:0;bottom:var(--bar-h);z-index:80;background:var(--ink);
  color:var(--on-ink);border-top:1px solid var(--line-ink);
  transform:translateY(115%);transition:transform .55s var(--ease);}
.cookie.on{transform:none;}
.cookie-in{max-width:var(--container);margin:0 auto;padding:19px var(--gutter);
  display:flex;flex-wrap:wrap;gap:15px 40px;align-items:center;}
.cookie p{margin:0;font-size:14.5px;line-height:1.55;color:var(--on-ink);max-width:76ch;}
.cookie a{color:var(--gold);}
.cookie-btns{display:flex;flex-wrap:wrap;gap:11px;margin-left:auto;}
.cookie .btn{padding:11px 24px;font-size:14px;}
.cookie .btn-line{background:transparent;color:var(--on-ink);border-color:var(--line-ink);}
.cookie .btn-line:hover{border-color:var(--gold);color:#fff;}

/* ── consent gate over the map ── */
.map{position:relative;}
.map-hold{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:15px;text-align:center;padding:26px;background:var(--ground-alt);}
.map-hold p{margin:0;font-size:15px;color:var(--ink-muted);max-width:44ch;}

/* ── Context Assistant: the opening nudge ──
   Ours, not the vendor's. The widget lives in a shadow root, so the bubble and
   the unread mark are built here in the page instead, where they can be styled
   and measured like anything else. --ca-lift mirrors the value js/amaku.js
   injects into that shadow root to clear the fixed action bar; the two are one
   number in two places and must be changed together. */
.ca-nudge{position:fixed;z-index:2147483001;
  right:max(20px,env(safe-area-inset-right));
  bottom:calc(max(var(--ca-lift),calc(env(safe-area-inset-bottom) + var(--ca-lift))) + 68px);
  width:max-content;max-width:min(300px,calc(100vw - 40px));
  display:flex;align-items:flex-start;
  background:var(--ink);border:1px solid var(--gold);
  box-shadow:0 16px 36px rgba(28,25,23,.24);
  opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);}
.ca-nudge.on{opacity:1;transform:none;}
.ca-nudge-say{flex:1 1 auto;min-width:0;text-align:left;font-family:var(--f-body);
  font-size:14.5px;line-height:1.45;color:var(--on-ink);
  background:transparent;border:0;cursor:pointer;padding:14px 2px 14px 16px;}
.ca-nudge-say:hover{color:#fff;}
.ca-nudge-x{flex:0 0 auto;background:transparent;border:0;cursor:pointer;
  color:var(--on-ink-mute);font-size:12px;line-height:1;padding:13px 13px 13px 8px;}
.ca-nudge-x:hover{color:#fff;}
/* sits on the launcher's top right corner; pointer events off, so the tap goes
   through to the launcher underneath rather than dying on the mark */
/* While the assistant panel is up it is the only thing on the screen. The action
   bar showed through it on an old iPhone and stole the height the panel needed,
   the nudge sat on top of it, and the page behind scrolled under the keyboard and
   opened a gap between the keyboard and the composer. js/amaku.js sets .ca-open
   on the body from the panel's own open state, and drops --ca-lift back to 20px
   in the same moment, which is the height the panel gets back. */
/* The menu panel is full screen and the language switch sits low in it, right
   where the launcher and its nudge are anchored, so they covered the very thing
   the visitor opened the menu for. The whole widget host goes while the menu is
   up; it comes back untouched, unread mark included, when the menu closes.
   .menu-open only exists below 1300px, where the burger is, so no width test is
   needed here. */
body.menu-open [data-context-assistant],
body.menu-open .ca-nudge,
body.menu-open .ca-nudge-mark{display:none;}

body.ca-open{overflow:hidden;}
body.ca-open .mbar{display:none;}
body.ca-open .ca-nudge,body.ca-open .ca-nudge-mark{display:none;}
body.ca-open .cookie{display:none;}   /* one decision at a time; it returns when the chat closes */

.ca-nudge-mark{position:fixed;z-index:2147483002;pointer-events:none;
  right:calc(max(20px,env(safe-area-inset-right)) - 8px);
  bottom:calc(max(var(--ca-lift),calc(env(safe-area-inset-bottom) + var(--ca-lift))) + 44px);
  min-width:22px;height:22px;border-radius:50%;background:#B3261E;color:#fff;
  box-shadow:0 0 0 2px var(--ground);
  font-family:var(--f-body);font-size:12px;font-weight:500;line-height:22px;
  text-align:center;font-variant-numeric:tabular-nums;}

/* ── small shared pieces ── */
.note{border-left:2px solid var(--brand);padding:16px 0 16px 24px;margin:clamp(28px,3.4vw,46px) 0 0;
  font-size:15.5px;line-height:1.65;color:var(--ink-body);max-width:74ch;}
.note b{color:var(--ink);font-weight:500;}
.prose{max-width:68ch;}
.prose h3{margin:clamp(34px,4vw,54px) 0 12px;}
.prose ul{margin:0 0 18px;padding-left:0;list-style:none;}
.prose li{position:relative;padding:9px 0 9px 24px;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.6;}
.prose li::before{content:'';position:absolute;left:0;top:18px;width:9px;height:1px;background:var(--line-strong);}


/* ══════════════════════════════════════════════════════════
   PRICE PAGE - calculator, comparison table, payment stages
   ══════════════════════════════════════════════════════════ */

.calc{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.7fr);
  gap:clamp(30px,4.4vw,78px);align-items:start;}
.calc-ctl{border-top:1px solid var(--line-strong);padding-top:clamp(22px,2.6vw,34px);}
.calc-ctl label{display:block;font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:14px;}
.calc-field{display:flex;align-items:baseline;gap:10px;margin-bottom:22px;}
.calc-field input{width:100%;max-width:180px;font-family:var(--f-head);font-size:clamp(2.4rem,3.6vw,3.2rem);
  font-weight:400;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line-strong);
  padding:0 0 8px;font-variant-numeric:tabular-nums;border-radius:0;}
.calc-field input:focus{outline:none;border-bottom-color:var(--brand-deep);}
.calc-field span{font-size:1.1rem;color:var(--ink-muted);font-variant-numeric:tabular-nums;}
.calc-range{width:100%;-webkit-appearance:none;appearance:none;background:transparent;margin:0 0 10px;}
.calc-range:focus{outline:none;}
.calc-range:focus-visible{outline:2px solid var(--brand-deep);outline-offset:6px;}
.calc-range::-webkit-slider-runnable-track{height:1px;background:var(--line-strong);}
.calc-range::-moz-range-track{height:1px;background:var(--line-strong);}
.calc-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--brand-deep);
  border:0;border-radius:50%;margin-top:-8.5px;cursor:pointer;}
.calc-range::-moz-range-thumb{width:18px;height:18px;background:var(--brand-deep);border:0;border-radius:50%;cursor:pointer;}
.calc-scale{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-muted);
  font-variant-numeric:tabular-nums;letter-spacing:.06em;}
.calc-disc{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink-muted);}
.calc-disc b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums;}

.calc-out{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,38px);}
.co{border-top:1px solid var(--line-strong);padding-top:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;}
.co.pop{border-top-color:var(--brand);}
.co-name{font-family:var(--f-head);font-size:1.35rem;color:var(--ink);margin:0 0 4px;}
.co-rate{font-size:13.5px;letter-spacing:.08em;color:var(--brand-deep);
  font-variant-numeric:tabular-nums;margin:0 0 22px;}
.co-total{font-family:var(--f-head);font-size:clamp(2.3rem,3.9vw,3.3rem);line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;margin:0 0 10px;letter-spacing:-.01em;}
.co-sub{font-size:14px;color:var(--ink-muted);margin:0 0 6px;font-variant-numeric:tabular-nums;}
/* same defect as .pf-card: the minimum-price note could appear but never hide again */
.co-flag[hidden]{display:none;}
.co-flag{display:inline-block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--ground-alt);color:var(--brand-deep);padding:5px 11px;margin:0 0 6px;}
.co-days{font-size:14px;color:var(--ink-muted);font-variant-numeric:tabular-nums;margin:14px 0 22px;
  padding-top:14px;border-top:1px solid var(--line);}
.co .btn{margin-top:auto;text-align:center;}
.calc-foot{margin-top:clamp(30px,3.6vw,50px);padding-top:24px;border-top:1px solid var(--line-strong);
  display:flex;flex-wrap:wrap;gap:14px 44px;align-items:baseline;}
.calc-foot p{margin:0;font-size:var(--t-small);color:var(--ink-muted);max-width:70ch;}

.cmp-wrap{overflow-x:auto;border-top:1px solid var(--line-strong);}
.cmp{border-collapse:collapse;width:100%;min-width:700px;font-size:15.5px;}
.cmp th,.cmp td{text-align:left;padding:15px 20px 15px 0;border-bottom:1px solid var(--line);vertical-align:top;}
.cmp thead th:not(:first-child){text-align:center;}
.cmp thead th{padding-top:26px;padding-bottom:22px;border-bottom:1px solid var(--line-strong);
  font-family:var(--f-head);font-weight:400;font-size:1.3rem;color:var(--ink);}
.cmp tbody th{font-weight:400;color:var(--ink-body);width:38%;}
.cmp td{text-align:center;width:20.6%;}
.cmp .mark{display:inline-block;width:9px;height:9px;background:var(--brand);}
.cmp .off{display:inline-block;width:9px;height:1px;background:var(--line-strong);vertical-align:middle;}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:1px solid var(--line-strong);}

.disc{width:100%;border-collapse:collapse;font-size:15.5px;max-width:640px;}
.disc th,.disc td{text-align:left;padding:13px 22px 13px 0;border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums;}
.disc thead th{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);
  border-bottom:1px solid var(--line-strong);font-weight:500;}
.disc td:first-child{color:var(--ink);}


/* ══════════════════════════════════════════════════════════
   PROCESS PAGE - the timeline from the studio's own document
   ══════════════════════════════════════════════════════════ */

.tl{border-top:1px solid var(--line-strong);}
.tl-stage{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.7fr);
  gap:clamp(22px,3.8vw,72px);padding-block:clamp(40px,5vw,80px);border-bottom:1px solid var(--line-strong);}
.tl-n{font-family:var(--f-head);font-size:var(--t-numeral);line-height:1;color:var(--numeral);
  font-variant-numeric:tabular-nums;margin:0 0 26px;}
.tl-side h2{font-size:clamp(1.6rem,2.5vw,2.1rem);line-height:1.1;margin-bottom:14px;}
.tl-say{font-size:15.5px;line-height:1.65;color:var(--ink-body);margin:0 0 20px;max-width:38ch;}
.tl-facts{list-style:none;margin:0;padding:0;font-size:14px;color:var(--ink-muted);}
.tl-facts li{padding:8px 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums;}
.tl-facts b{color:var(--ink);font-weight:500;}
.tl-list{list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(26px,3.2vw,52px);}
.tl-list.short{columns:1;}
.tl-list li{break-inside:avoid;position:relative;padding:10px 0 10px 26px;font-size:15.5px;line-height:1.5;
  border-bottom:1px solid var(--line);color:var(--ink-body);}
.tl-list li::before{content:'';position:absolute;left:0;top:18px;width:10px;height:1px;background:var(--line-strong);}
.tl-list li.key{color:var(--ink);}
.tl-list li.key::before{top:15px;width:8px;height:8px;background:var(--ink);}
.tl-list li.gate{color:var(--ink);font-weight:500;}
.tl-list li.gate::before{top:14px;width:9px;height:9px;background:var(--brand);}
.tl-tail{margin-top:22px;font-size:14px;color:var(--ink-muted);}
.tl-legend{display:flex;flex-wrap:wrap;gap:12px 30px;margin-bottom:clamp(30px,3.4vw,46px);
  font-size:13.5px;color:var(--ink-muted);}
.tl-legend span{display:inline-flex;align-items:center;gap:10px;}
.tl-legend i{width:9px;height:9px;display:inline-block;}
.tl-legend i.k{background:var(--ink);}
.tl-legend i.g{background:var(--brand);}
.tl-legend i.s{width:10px;height:1px;background:var(--line-strong);}


/* ══════════════════════════════════════════════════════════
   INDEX PAGES - portfolio filters, journal grid, article cards
   ══════════════════════════════════════════════════════════ */

/* portfolio to price: the three rates as numerals, the site's own device, placed where
   the visitor has just finished looking at six projects */
.pfrate{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3.4vw,54px);
  border-top:1px solid var(--line-strong);padding-top:clamp(24px,2.8vw,38px);}
.pfrate>div{min-width:0;}
.pfrate b{display:block;font-family:var(--f-head);font-weight:400;font-size:var(--t-numeral);
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;margin-bottom:14px;}
.pfrate .pfrate-k{display:block;font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;
  color:var(--brand-deep);margin-bottom:6px;}
.pfrate span{display:block;font-size:14.5px;line-height:1.5;color:var(--ink-muted);}

.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(30px,3.6vw,54px);}
.filters button{font-family:var(--f-body);font-size:14px;letter-spacing:.05em;color:var(--ink);
  background:transparent;border:1px solid var(--line-strong);padding:11px 21px;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);}
.filters button:hover{border-color:var(--brand-deep);}
.filters button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink);}
.filter-count{align-self:center;margin-left:auto;font-size:14px;color:var(--ink-muted);font-variant-numeric:tabular-nums;}
.pf-empty{padding:40px 0;color:var(--ink-muted);}

.jr-grid.three{grid-template-columns:repeat(3,1fr);}
.jr-lead{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(26px,4vw,64px);
  align-items:center;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--line-strong);padding-bottom:clamp(38px,4.6vw,70px);
  margin-bottom:clamp(38px,4.6vw,70px);}
.jr-lead .jr-shot{aspect-ratio:16/10;}
.jr-lead h2{font-size:clamp(1.7rem,2.9vw,2.5rem);line-height:1.12;margin-bottom:14px;}
.jr-lead p{font-size:16px;color:var(--ink-body);margin:0;max-width:52ch;}
.jr-tag{display:inline-block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-deep);border:1px solid var(--line-strong);padding:5px 12px;margin-bottom:16px;}


/* ══════════════════════════════════════════════════════════
   ABOUT PAGE
   ══════════════════════════════════════════════════════════ */

.ab-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,4.6vw,80px);align-items:start;}
.ab-split .shot{aspect-ratio:4/5;overflow:hidden;background:var(--ground-alt);}
.ab-split .shot img{width:100%;height:100%;object-fit:cover;}
.ab-mk{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,3.6vw,58px);}
.ab-mk div{border-top:1px solid var(--line-strong);padding-top:26px;}
.ab-mk h3{margin-bottom:10px;}
.ab-mk p{font-size:15.5px;margin:0;}


/* ══════════════════════════════════════════════════════════
   404
   ══════════════════════════════════════════════════════════ */

.e404{padding-block:clamp(70px,9vw,150px);}
.e404 .big{font-family:var(--f-head);font-size:clamp(5rem,16vw,13rem);line-height:.86;color:var(--numeral);
  font-variant-numeric:tabular-nums;margin:0 0 clamp(24px,3vw,44px);}
.e404-langs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,56px);
  border-top:1px solid var(--line-strong);padding-top:clamp(26px,3vw,42px);}
.e404-langs h2{font-size:1.35rem;margin-bottom:10px;}
.e404-langs p{font-size:15.5px;color:var(--ink-body);margin:0 0 16px;}
.e404-langs ul{list-style:none;margin:0;padding:0;font-size:15px;}
.e404-langs li{margin-bottom:8px;}

/* ══════════════════════════════════════════════════════════
   PROJECT PAGES - editorial long scroll
   Spec strip, story column, paced gallery, lightbox, prev/next.
   Added 10 Sep 2026 with the legacy redesign.
   ══════════════════════════════════════════════════════════ */

/* The hero never crops: Cuerno and Durazno have no landscape render at all, so a
   16:9 band would butcher them. The image keeps its own shape, capped by height.
   Journal heroes share this rule since 19 Sep 2026, so an article and a project
   open the same way and neither one is cropped. */
.prj-hero,.art-hero{background:var(--ground-alt);display:flex;justify-content:center;}
.prj-hero img,.art-hero img{max-height:78vh;max-width:100%;width:auto;height:auto;object-fit:contain;}

.spec{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(20px,2.4vw,40px);
  border-top:1px solid var(--line-strong);margin-top:clamp(34px,4.2vw,64px);
  padding-top:clamp(22px,2.6vw,36px);}
.spec div{min-width:0;}
.spec .k{display:block;font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:9px;}
.spec .v{display:block;font-family:var(--f-head);font-size:clamp(1.05rem,1.4vw,1.28rem);
  line-height:1.24;color:var(--ink);font-variant-numeric:tabular-nums;}

.prj-story{display:grid;grid-template-columns:minmax(0,.66fr) minmax(0,1.5fr);
  gap:clamp(26px,4.4vw,84px);align-items:start;}
.prj-client{border-top:1px solid var(--line-strong);padding-top:26px;position:sticky;top:110px;}
.prj-client h2{font-size:clamp(1.2rem,1.7vw,1.45rem);margin-bottom:12px;}
.prj-client p{font-size:15.5px;line-height:1.65;margin:0;color:var(--ink-body);}
.prj-text{max-width:68ch;}
.prj-text h2{font-size:clamp(1.5rem,2.2vw,1.95rem);margin:0 0 16px;}
.prj-text section+section{margin-top:clamp(38px,4.6vw,68px);}
.prj-text p{font-size:1.0625rem;line-height:1.75;}

/* Gallery rhythm: portraits pair two up, landscapes run full width with a pair
   after every one. Orientations are never mixed inside a pair, so the crop is at
   most a few per cent and no wide room is ever squeezed into a tall frame. */
.gal{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,30px);}
.gal a{display:block;overflow:hidden;background:var(--ground-alt);position:relative;}
.gal img{width:100%;height:auto;display:block;transition:transform .9s var(--ease);}
.gal a:hover img,.gal a:focus-visible img{transform:scale(1.04);}
.gal-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,30px);}
.gal-pair a{aspect-ratio:4/5;}
.gal-pair.wide a{aspect-ratio:3/2;}
.gal-pair img{height:100%;object-fit:cover;}
/* when both images of a pair are the same shape nothing has to be cropped */
.gal-pair.nat a{aspect-ratio:auto;}
.gal-pair.nat img{height:auto;object-fit:fill;}
.gal-note{margin:0 0 clamp(20px,2.4vw,32px);font-size:var(--t-small);color:var(--ink-muted);}

/* lightbox */
.lb{position:fixed;inset:0;z-index:90;background:rgba(28,25,23,.97);
  display:none;align-items:center;justify-content:center;padding:clamp(56px,7vw,96px) clamp(16px,5vw,80px);}
.lb.on{display:flex;}
.lb-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
.lb button{position:absolute;background:transparent;border:1px solid var(--line-ink);color:var(--on-ink);
  width:50px;height:50px;cursor:pointer;font-family:var(--f-body);font-size:20px;line-height:1;
  transition:border-color .3s var(--ease),color .3s var(--ease);}
.lb button:hover{border-color:var(--gold);color:#fff;}
.lb-close{top:18px;right:18px;}
.lb-prev{left:14px;top:50%;transform:translateY(-50%);}
.lb-next{right:14px;top:50%;transform:translateY(-50%);}
.lb-bar{position:absolute;left:0;right:0;bottom:0;padding:16px clamp(16px,5vw,80px) 20px;
  display:flex;gap:18px 30px;align-items:baseline;justify-content:space-between;flex-wrap:wrap;}
.lb-cap{font-size:14px;line-height:1.5;color:var(--on-ink);margin:0;max-width:78ch;}
.lb-count{font-size:13.5px;color:var(--on-ink-mute);font-variant-numeric:tabular-nums;white-space:nowrap;}

/* previous and next, on projects and articles alike */
.pn{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-strong);}
.pn>*{padding-block:clamp(26px,3.4vw,48px);text-decoration:none;color:inherit;min-width:0;}
.pn>*+*{border-left:1px solid var(--line-strong);padding-left:clamp(22px,3vw,46px);text-align:right;}
.pn .k{display:block;font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:12px;}
.pn .t{display:block;font-family:var(--f-head);font-size:clamp(1.35rem,2.1vw,1.85rem);
  line-height:1.16;color:var(--ink);}
.pn a:hover .t{color:var(--brand-deep);}
.pn span.t{color:var(--ink-muted);}


/* ══════════════════════════════════════════════════════════
   ARTICLE PAGES
   ══════════════════════════════════════════════════════════ */

/* .art-hero is declared with .prj-hero in the project block above. */
.art-wrap{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.6fr);
  gap:clamp(26px,4.4vw,84px);align-items:start;}
.art-side{position:sticky;top:110px;border-top:1px solid var(--line-strong);padding-top:26px;}
.art-side h2{font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-muted);font-family:var(--f-body);font-weight:500;margin:0 0 16px;}
.art-toc{list-style:none;margin:0 0 30px;padding:0;}
.art-toc li{margin-bottom:2px;}
.art-toc a{display:block;padding:9px 0;font-size:15px;line-height:1.4;color:var(--ink-body);
  text-decoration:none;border-bottom:1px solid var(--line);transition:color .3s var(--ease);}
.art-toc a:hover{color:var(--ink);}
.art-meta{list-style:none;margin:0;padding:0;font-size:14.5px;color:var(--ink-muted);}
.art-meta li{padding:9px 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums;}
.art-meta b{color:var(--ink);font-weight:500;}
.art-body{max-width:68ch;}
.art-body h2{font-size:clamp(1.45rem,2.2vw,1.95rem);line-height:1.18;
  margin:clamp(38px,4.4vw,64px) 0 16px;scroll-margin-top:110px;}
.art-body p{font-size:1.0625rem;line-height:1.75;margin:0 0 18px;}
.art-body ul{list-style:none;margin:0 0 24px;padding:0;}
.art-body li{position:relative;padding:13px 0 13px 26px;border-bottom:1px solid var(--line);
  font-size:1.0625rem;line-height:1.65;}
.art-body li::before{content:'';position:absolute;left:0;top:23px;width:10px;height:1px;background:var(--line-strong);}
.art-body li strong{color:var(--ink);font-weight:500;}
.art-fig{margin:clamp(30px,3.6vw,52px) 0;}
.art-fig img{width:100%;height:auto;display:block;}


/* ══════════════════════════════════════════════════════════
   Breakpoints. Three, and only three: 1300, 800, 450.
   1300  desktop  ->  tablet (menu becomes a panel)
    800  tablet   ->  large phone
    450  large phone -> phone
   ══════════════════════════════════════════════════════════ */

@media (max-width:1299px){
  .util{display:none;}
  .nav-links,.nav-quick,.nav-compact .nav-quick,.nav>.nav-in>.btn{display:none;}
  .burger{display:block;}
  .mbar{display:grid;}
  body{padding-bottom:60px;}
  .why-grid,.ps-grid{grid-template-columns:repeat(2,1fr);}
  .tm-grid{grid-template-columns:repeat(2,1fr);}
  :root{--head-h:calc(var(--nav-h) + 1px);--bar-h:60px;--ca-lift:72px;}  /* nav + its 1px rule; assistant clears the action bar */
  .calc{grid-template-columns:1fr;}
  .jr-grid.three{grid-template-columns:repeat(2,1fr);}
  .ab-split{grid-template-columns:1fr;}
  .spec{grid-template-columns:repeat(3,1fr);}
  .prj-story,.art-wrap{grid-template-columns:1fr;gap:30px;}
  .prj-client,.art-side{position:static;}
  /* stacked, the client column reads as a caption next to the project text; give it the
     same type so the two blocks look like one piece of writing */
  .prj-client h2{font-size:clamp(1.5rem,2.2vw,1.95rem);}
  .prj-client p{font-size:1.0625rem;line-height:1.75;}
}

@media (max-width:799px){
  /* the proof bar stacks and is far too tall to share the screen, so the image
     goes back to being full screen on its own and the copy gets its air back */
  .hero-block{min-height:0;}
  .hero{min-height:min(calc(100vh - var(--head-h) - var(--bar-h)),260vw,1600px);
        min-height:min(calc(100svh - var(--head-h) - var(--bar-h)),260vw,1600px);}
  .hero-in{padding-bottom:min(80px,max(5vw,min(44px,10.23vw)));}
  .hero .eyebrow{margin-bottom:min(18px,4.19vw);}
  .hero h1{margin-bottom:min(26px,6.05vw);}
  .hero .sub{margin-bottom:min(34px,7.91vw);}
  .proofbar-in{grid-template-columns:1fr;gap:18px;}
  .pf-grid{grid-template-columns:1fr;}
  .pf-grid>*:nth-child(even){margin-top:0;}
  .cli-card{grid-template-columns:1fr;gap:24px;}
  .pt-row{grid-template-columns:repeat(2,1fr);}
  .why-grid,.ps-grid{grid-template-columns:1fr;gap:36px;}
  .pr-grid{grid-template-columns:1fr;}
  .rv-grid{grid-template-columns:1fr;gap:40px;}
  .jr-grid{grid-template-columns:1fr;}
  .ct-grid{grid-template-columns:1fr;}
  .map{aspect-ratio:4/3;}
  .ft-grid{grid-template-columns:repeat(2,1fr);}
  .head{flex-direction:column;align-items:flex-start;gap:20px;}
  .head .lead{max-width:none;}
  .link-more{margin-left:0;}
  /* in one column the section rule and the first item rule sit 38px apart
     and read as a doubled line, so the item drops its own */
  .why-grid>div:first-child,.ps-grid>.ps-step:first-child{border-top:none;padding-top:0;}
  .faq-list{border-top:none;}
  .phead-in{grid-template-columns:1fr;gap:22px;align-items:start;}
  .statrow{grid-template-columns:repeat(2,1fr);gap:26px 24px;}
  .cta-in{grid-template-columns:1fr;gap:26px;align-items:start;}
  .calc-out{grid-template-columns:1fr;gap:0;}
  .co{padding-bottom:26px;}
  .co:not(:first-child){border-top-color:var(--line);}
  .tl-stage{grid-template-columns:1fr;gap:26px;}
  .tl-n{margin-bottom:16px;}
  .tl-list{columns:1;}
  .jr-grid.three{grid-template-columns:1fr;}
  .pfrate{grid-template-columns:1fr;gap:32px;}
  .jr-lead{grid-template-columns:1fr;gap:22px;}
  .jr-lead .jr-shot{order:-1;}
  .ab-mk{grid-template-columns:1fr;gap:30px;}
  .e404-langs{grid-template-columns:1fr;gap:30px;}
  .cookie-in{gap:14px;}
  .cookie-btns{margin-left:0;width:100%;}
  .cookie .btn{flex:1 1 auto;text-align:center;}
  .spec{grid-template-columns:repeat(2,1fr);gap:24px 20px;}
  .prj-hero,.art-hero{aspect-ratio:4/3;}
  .gal-pair{grid-template-columns:1fr;}
  .gal-pair a{aspect-ratio:auto;}
  .gal-pair img{height:auto;}
  .pn{grid-template-columns:1fr;}
  .pn>*+*{border-left:none;border-top:1px solid var(--line-strong);padding-left:0;text-align:left;}
  /* parked at the bottom these sat under the caption bar and could not be pressed;
     they belong at mid height, where the thumb already is */
  .lb-prev,.lb-next{top:50%;bottom:auto;transform:translateY(-50%);
    width:46px;height:46px;background:rgba(28,25,23,.55);backdrop-filter:blur(2px);}
  .lb-prev{left:8px;}
  .lb-next{right:8px;}
  /* the form first: the visitor pressed a consultation button to get here */
  .ct-grid>div:first-child{order:2;}
  .ct-grid>div:last-child{order:1;}
}

@media (max-width:449px){
  .tm-grid{grid-template-columns:1fr;}
  .frm{grid-template-columns:1fr;}
  .ft-grid{grid-template-columns:1fr;gap:32px;}
  .ft-bot{gap:8px;}
  .hero-btns .btn,.menu .btn{width:100%;text-align:center;}
  .mbar{grid-template-columns:1fr 1.4fr 1fr;}
  .mbar a{font-size:13.5px;padding:15px 4px;}
  .cli-facts span:not(:last-child)::after,.pf-meta span:not(:last-child)::after{content:none;}
  .cli-facts,.pf-meta{gap:2px 14px;}
  .statrow{grid-template-columns:1fr;gap:22px;}
  .cta-btns .btn{width:100%;text-align:center;}
  .cta-facts{gap:14px 0;flex-direction:column;}
  .filters button{flex:1 1 auto;text-align:center;}
  .filter-count{margin-left:0;width:100%;}
  .spec{grid-template-columns:1fr;gap:20px;}
}

@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important;}html{scroll-behavior:auto;}
  .faq-list .ans{opacity:1;transform:none;}
  .menu{transition:none;}}