/* =========================================================
   FinSolutions
   Plain CSS, no framework. Fonts and tokens at the top,
   everything below reads in page order.
   ========================================================= */

/* ---------- fonts, served from this site ----------
   Self-hosted on purpose: loading them from Google hands every visitor's IP
   to a third party, which a site that says "no tracking" cannot do. latin-ext
   carries č ć đ š ž, so English pages usually never download it. */
@font-face{font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/instrument-serif-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/instrument-serif-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap; src:url(../fonts/instrument-serif-italic-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap; src:url(../fonts/instrument-serif-italic-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url(../fonts/inter-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url(../fonts/inter-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500; font-display:swap; src:url(../fonts/jetbrains-mono-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500; font-display:swap; src:url(../fonts/jetbrains-mono-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}

/* ---------- tokens ---------- */
:root{
  --paper:#F6F3EC;
  --paper-2:#EEE9DF;
  --card:#FFFDF8;
  --ink:#16140F;
  --ink-2:#5D574C;
  --ink-3:#8B8477;
  --line:rgba(22,20,15,.13);
  --line-2:rgba(22,20,15,.07);
  --accent:#C8452B;
  --accent-ink:#FFFFFF;
  --shadow:0 1px 2px rgba(22,20,15,.05), 0 8px 24px -12px rgba(22,20,15,.18);
  --shadow-lg:0 2px 4px rgba(22,20,15,.06), 0 24px 60px -24px rgba(22,20,15,.30);

  --serif:'Instrument Serif','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --wrap:1180px;
  --pad:clamp(1.15rem,4vw,2.5rem);
  --r:14px;
  --r-lg:20px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

[data-theme="dark"]{
  --paper:#111110;
  --paper-2:#191817;
  --card:#1C1B19;
  --ink:#F3EFE7;
  --ink-2:#A39C90;
  --ink-3:#7C756A;
  --line:rgba(243,239,231,.14);
  --line-2:rgba(243,239,231,.07);
  --accent:#EC6444;
  --accent-ink:#17120F;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.4), 0 24px 60px -24px rgba(0,0,0,.75);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:86px}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background-color .35s var(--ease), color .35s var(--ease);
}
img,svg,canvas{display:block; max-width:100%}
h1,h2,h3,h4{margin:0; font-weight:400; line-height:1.06; letter-spacing:-.018em}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
a{color:inherit; text-decoration:none}
button,input,textarea,select{font:inherit; color:inherit}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px}

.skip{
  position:fixed; left:1rem; top:-100px; z-index:200; background:var(--ink); color:var(--paper);
  padding:.65rem 1.1rem; border-radius:8px; font-weight:600; font-size:.9rem; transition:top .2s;
}
.skip:focus{top:1rem}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}
.wrap--narrow{max-width:820px}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--mono); font-size:.735rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:1.15rem;
}
.eyebrow::before{content:""; display:inline-block; width:22px; height:1px; background:var(--accent); vertical-align:middle; margin-right:.7rem}

h1,h2{font-family:var(--serif)}
.section h2{font-size:clamp(2rem,4.6vw,3.35rem)}
.sechead{max-width:720px; margin-bottom:clamp(2.5rem,5vw,4rem)}
.sechead--center{margin-inline:auto; text-align:center}
.sechead--center .eyebrow::before{display:none}
.sechead__sub{margin-top:1.35rem; color:var(--ink-2); font-size:1.045rem; max-width:62ch}
.sechead--center .sechead__sub{margin-inline:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.72rem 1.3rem; border-radius:999px; border:1px solid transparent;
  font-size:.945rem; font-weight:550; letter-spacing:-.005em; cursor:pointer;
  transition:transform .18s var(--ease), background-color .18s, color .18s, border-color .18s, box-shadow .18s;
  will-change:transform;
}
.btn--solid{background:var(--ink); color:var(--paper)}
.btn--solid:hover{background:var(--accent); color:var(--accent-ink); transform:translateY(-2px); box-shadow:0 10px 24px -12px var(--accent)}
.btn--ghost{border-color:var(--line); color:var(--ink); background:transparent}
.btn--ghost:hover{border-color:var(--ink); transform:translateY(-2px)}
.btn--lg{padding:.92rem 1.7rem; font-size:1.015rem}
.btn--full{width:100%}
.btn:active{transform:translateY(0)}

.link{
  display:inline-flex; align-items:center; gap:.45rem; font-weight:550; font-size:.93rem;
  color:var(--accent); border-bottom:1px solid transparent; padding-bottom:1px; width:fit-content;
}
.link:hover{border-color:currentColor}
.link span{transition:transform .2s var(--ease); display:inline-block}
.link:hover span{transform:translateX(4px)}

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background-color .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom-color:var(--line);
}
.nav__inner{display:flex; align-items:center; gap:1.5rem; height:72px}
.brand{display:flex; align-items:center; gap:.55rem; font-weight:700; letter-spacing:-.04em; font-size:1.3rem; margin-right:auto}
.brand__mark{width:26px; height:26px; color:var(--accent)}
.brand__thin{font-weight:400; letter-spacing:-.03em}
.brand__dot{color:var(--accent)}
.brand--foot{font-size:1.6rem; margin:0 0 .9rem}

.nav__links{display:flex; gap:1.75rem; font-size:.905rem; color:var(--ink-2)}
.nav__links a{position:relative; padding:.3rem 0; transition:color .2s}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0; background:var(--accent); transition:width .25s var(--ease);
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after,.nav__links a.is-active::after{width:100%}
.nav__links a.is-active,.nav__links a[aria-current]{color:var(--ink)}
.nav__links a[aria-current]::after{width:100%}

.nav__right{display:flex; align-items:center; gap:.6rem}
.iconbtn{
  width:38px; height:38px; display:grid; place-items:center; border-radius:999px;
  border:1px solid var(--line); background:transparent; cursor:pointer; transition:border-color .2s, transform .2s;
}
.iconbtn:hover{border-color:var(--ink); transform:rotate(-12deg)}
.iconbtn svg{width:18px; height:18px}
.icon-moon{display:none}
[data-theme="dark"] .icon-sun{display:none}
[data-theme="dark"] .icon-moon{display:block}
/* language switch: two links to the same page in the other language, shaped
   as a segmented control because there are exactly two and a select would
   hide that */
.langsw{
  display:flex; align-items:center; gap:2px; padding:2px;
  border:1px solid var(--line); border-radius:999px;
}
.langsw__b{
  border-radius:999px;
  font-family:var(--mono); font-size:.685rem; letter-spacing:.06em;
  padding:.36rem .62rem; line-height:1; color:var(--ink-3);
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.langsw__b:hover{color:var(--ink)}
.langsw__b[aria-current]{background:var(--ink); color:var(--paper)}

.nav__burger{display:none}
.nav__burger:hover{transform:none}

.nav__sheet{display:none}
@media (max-width:900px){
  .nav__links{display:none}
  .nav__burger{display:grid}
  .nav__cta{display:none}
  .nav__sheet{
    display:grid; gap:.2rem; padding:.6rem var(--pad) 1.4rem;
    background:var(--paper); border-bottom:1px solid var(--line);
  }
  .nav__sheet[hidden]{display:none}
  .nav__sheet a{padding:.75rem 0; border-bottom:1px solid var(--line-2); font-size:1.05rem}
  .nav__sheet a:last-child{color:var(--accent); font-weight:600; border:0}
  .nav__sheet a[aria-current]:not(:last-child){color:var(--accent)}
}

/* ---------- call bar: phones only, never more than a thumb away ---------- */
.callbar{display:none}
@media (max-width:900px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .callbar{
    position:fixed; inset:auto 0 0 0; z-index:90; display:grid; grid-template-columns:1fr 1fr; gap:.5rem;
    padding:.55rem var(--pad) calc(.55rem + env(safe-area-inset-bottom));
    background:color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px);
    border-top:1px solid var(--line);
  }
  .callbar__b{
    display:flex; align-items:center; justify-content:center; gap:.5rem; height:46px;
    border-radius:999px; font-weight:600; font-size:.97rem; background:var(--ink); color:var(--paper);
  }
  .callbar__b--alt{background:var(--accent); color:var(--accent-ink)}
  .callbar__b svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round}
}

/* ---------- hero ---------- */
.hero{position:relative; padding:clamp(8rem,17vh,11.5rem) 0 clamp(4.5rem,9vw,7rem); overflow:hidden}
.hero__canvas{
  position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.8;
  /* two masks intersected: fade top and bottom, and keep the wind out of
     the way of the headline on the left */
  -webkit-mask-image:
    linear-gradient(180deg,transparent,#000 20%,#000 62%,transparent 97%),
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 20%,#000 55%);
  mask-image:
    linear-gradient(180deg,transparent,#000 20%,#000 62%,transparent 97%),
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 20%,#000 55%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
/* the wind sits behind body text in light mode, so it stays quieter there */
[data-theme="light"] .hero__canvas{opacity:.5}
.hero__inner{position:relative; z-index:1}
/* the hero animates in with CSS alone: no observer to wait for, so it is
   never blank, not even in a background tab or with JS switched off */
.hero__inner > *{animation:rise .8s var(--ease) both}
.hero__inner > :nth-child(2){animation-delay:.07s}
.hero__inner > :nth-child(3){animation-delay:.14s}
.hero__inner > :nth-child(4){animation-delay:.21s}
.hero__inner > :nth-child(5){animation-delay:.28s}
@keyframes rise{from{opacity:0; transform:translateY(22px)}}
.hero__title{
  font-size:clamp(2.9rem,8.4vw,6.1rem); line-height:.97; letter-spacing:-.03em; max-width:16ch;
  text-wrap:balance;   /* the two languages break in different places, so no <br> */
}
.hero__title em{font-style:italic; color:var(--accent)}
.hero__lede{margin-top:1.8rem; max-width:56ch; font-size:clamp(1.03rem,1.7vw,1.2rem); color:var(--ink-2)}
.hero__cta{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.4rem}

.hero__facts{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:clamp(3.5rem,7vw,5.5rem);
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.hero__facts li{background:var(--paper); padding:1.6rem 1.5rem; display:grid; gap:.55rem; align-content:start}
.hero__facts strong{font-family:var(--serif); font-size:2.6rem; font-weight:400; line-height:1; color:var(--accent)}
.hero__facts span{font-size:.885rem; line-height:1.52; color:var(--ink-2)}
@media (max-width:760px){ .hero__facts{grid-template-columns:1fr} }

.hero__scroll{position:absolute; left:50%; bottom:1.6rem; width:1px; height:44px; background:var(--line); overflow:hidden}
.hero__scroll span{position:absolute; inset:0; background:var(--accent); animation:drip 2.4s var(--ease) infinite}
@keyframes drip{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- sections ---------- */
.section{padding:clamp(4.5rem,10vw,8rem) 0; position:relative}
.section--tint{background:var(--paper-2)}
/* a deeper band that breaks up the page (services, contact); it follows the
   theme like everything else, just a step darker than the tint */
.section--band{--paper:#E8E1D3; --card:#F4EFE6; background:var(--paper)}
[data-theme="dark"] .section--band{--paper:#0B0B0A; --card:#1B1A18}

/* ---------- compare slider ---------- */
.compare{
  position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow-lg); aspect-ratio:16/9.4; background:var(--card);
  margin-bottom:clamp(3rem,6vw,5rem); touch-action:pan-y;
}
@media (max-width:640px){ .compare{aspect-ratio:1/1} }
.compare__pane{position:absolute; inset:0}
.compare__pane--new{clip-path:inset(0 0 0 var(--pos,52%))}
.compare__range{
  position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; z-index:6; cursor:ew-resize;
  -webkit-appearance:none; appearance:none; background:transparent;
}
.compare__range::-webkit-slider-thumb{-webkit-appearance:none; width:44px; height:100%; cursor:ew-resize}
.compare__range::-moz-range-thumb{width:44px; height:200px; border:0; background:transparent; cursor:ew-resize}
.compare__handle{
  position:absolute; top:0; bottom:0; left:var(--pos,52%); width:2px; background:var(--accent); z-index:5;
  transform:translateX(-1px); pointer-events:none;
}
.compare__handle span{
  position:absolute; top:50%; left:50%; translate:-50% -50%; width:44px; height:44px; border-radius:999px;
  background:var(--accent); box-shadow:0 6px 20px rgba(0,0,0,.28);
}
.compare__handle span::before,.compare__handle span::after{
  content:""; position:absolute; top:50%; width:0; height:0; border:6px solid transparent; translate:0 -50%;
}
.compare__handle span::before{left:7px; border-right-color:#fff}
.compare__handle span::after{right:7px; border-left-color:#fff}
.compare__range:focus-visible + .compare__handle span{outline:3px solid var(--ink); outline-offset:3px}
.compare__tag{
  position:absolute; bottom:.85rem; z-index:5; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; padding:.34rem .6rem; border-radius:6px; background:rgba(18,17,16,.82); color:#F3EFE7;
  backdrop-filter:blur(6px); pointer-events:none;
}
.compare__tag--l{left:.85rem}
.compare__tag--r{right:.85rem}

/* ---------- browser mock frames ---------- */
.mock{
  min-width:0; display:flex; flex-direction:column; background:var(--card); overflow:hidden;
  container-type:inline-size;
}
.mock__bar{
  flex:0 0 auto; display:flex; align-items:center; gap:5px; padding:9px 12px;
  background:color-mix(in srgb, var(--ink) 6%, var(--card)); border-bottom:1px solid var(--line-2);
}
.mock__bar i{width:8px; height:8px; border-radius:999px; background:var(--line); flex:0 0 auto}
.mock__url{
  margin-left:10px; flex:1; min-width:0; font-family:var(--mono); font-size:10.5px; color:var(--ink-3);
  background:var(--paper); border-radius:5px; padding:3px 9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mock__body{flex:1; overflow:hidden; position:relative}
/* only the full-bleed frames stretch; a card mock takes its height from its
   own aspect ratio, or the stretched grid row drives the width instead */
.compare__pane .mock,.cs-shot .mock{height:100%}
.mock--sm{width:100%; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); aspect-ratio:16/11}

/* -- the bad old site -- */
.oldsite{background:#fff; color:#000; font-family:'Times New Roman',Times,serif; padding:0; display:flex; flex-direction:column}
.oldsite__banner{
  background:linear-gradient(180deg,#3a63b8,#16307a); color:#ffe27a; text-align:center; font-weight:700;
  padding:clamp(6px,1.6cqi,14px); font-size:clamp(11px,2.5cqi,19px); letter-spacing:.02em;
  text-shadow:1px 1px 0 #000; border-bottom:3px ridge #8fa8dd;
}
.oldsite__cols{flex:1; display:grid; grid-template-columns:22% 1fr; gap:0; min-height:0}
.oldsite__menu{background:#dfe6f5; border-right:2px groove #9fb0d6; padding:clamp(6px,1.4cqi,12px); font-size:clamp(9px,1.9cqi,14px)}
.oldsite__menu b{display:block; margin-bottom:.5em; color:#16307a}
.oldsite__menu a{display:block; color:#0000cc; text-decoration:underline; padding:2px 0; line-height:1.5}
.oldsite__main{padding:clamp(7px,1.8cqi,16px); font-size:clamp(9px,1.85cqi,14px); line-height:1.35; color:#111}
.oldsite__main p{margin-bottom:.7em; text-align:justify}
.oldsite__gal{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(3px,.9cqi,7px); margin:.8em 0}
.oldsite__gal img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border:2px inset #999}
.oldsite__small{color:#666; font-size:clamp(7px,1.5cqi,11px); font-style:italic}
.oldsite__foot{
  background:#16307a; color:#cfe0ff; text-align:center; padding:clamp(4px,1.1cqi,9px);
  font-size:clamp(8px,1.6cqi,12px); font-family:Verdana,sans-serif;
}

/* -- the replacement: dusk on the Drava, slab headline, chalkboard menu --
   Its own brand too, so the "after" is not the portfolio's house style
   again. Sized like the portfolio mocks: cqi on the root, em inside. The
   content starts 14cqi in, because the slider rests at 12% and the old
   site covers that strip. */
@font-face{font-family:'Zilla Slab'; font-weight:700; font-display:swap; src:url(../fonts/mock-zilla-700.woff2) format('woff2')}
/* subset to the chalkboard's own words, which is all it ever writes */
@font-face{font-family:'Caveat'; font-weight:600; font-display:swap; src:url(../fonts/mock-caveat-600.woff2) format('woff2')}
.drava{
  font-size:1.5cqi; position:relative; display:flex; flex-direction:column;
  background:#1B2440; color:#FFF4E4; font-family:var(--sans);
}
.drava__photo{position:absolute; inset:0}
.drava__photo img{width:100%; height:100%; object-fit:cover; object-position:60% 50%}
/* darkest behind the headline, so the lights on the right stay bright */
.drava__photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(16,11,20,.9) 18%, rgba(16,11,20,.55) 55%, rgba(16,11,20,.2)),
             linear-gradient(0deg, rgba(16,11,20,.6), transparent 35%);
}
.drava > :not(.drava__photo){position:relative}
.drava__nav{display:flex; align-items:center; gap:2em; padding:1.3em 2.4em 1.3em 14cqi; font-size:.95em; color:rgba(255,244,228,.8)}
.drava__logo{
  display:flex; align-items:center; gap:.35em; margin-right:auto;
  font-family:'Zilla Slab',var(--serif); font-weight:700; font-size:1.9em; letter-spacing:.02em; color:#FFF4E4;
}
.drava__logo svg{width:.9em; height:auto; fill:none; stroke:#F2A65A; stroke-width:2.4; stroke-linecap:round}
.drava__nav em{font-style:normal; font-weight:700; background:#F2A65A; color:#1B1420; padding:.6em 1.3em; border-radius:.4em}
.drava__main{flex:1; min-height:0; display:grid; grid-template-columns:1fr 19em; gap:3em; align-items:center; padding:1em 2.6em 1.5em 14cqi}
.drava__copy{min-width:0}
.drava__kick{font-family:var(--mono); font-size:.78em; letter-spacing:.22em; text-transform:uppercase; color:#F2A65A}
.drava__copy h3{
  font-family:'Zilla Slab',var(--serif); font-weight:700; font-size:4.6em; line-height:.95; letter-spacing:-.01em;
  margin:.3em 0 .35em; text-shadow:0 .1em .6em rgba(10,8,20,.45);
}
.drava__copy h3 em{font-style:normal; color:#F2A65A}
.drava__sub{max-width:30em; font-size:1em; line-height:1.5; color:rgba(255,244,228,.85)}
/* the reservation row is the whole point of the redesign, so it looks like a
   working control rather than a decorative button */
.drava__book{
  display:flex; align-items:stretch; width:fit-content; max-width:100%; margin-top:1.6em; overflow:hidden;
  background:#FFF4E4; color:#1B1420; border-radius:.7em; box-shadow:0 1em 2.4em -1em rgba(0,0,0,.6);
}
.drava__book label{display:grid; gap:.15em; padding:.75em 1.3em; border-right:1px solid rgba(27,20,32,.12)}
.drava__book s{text-decoration:none; font-family:var(--mono); font-size:.62em; letter-spacing:.12em; text-transform:uppercase; color:#8A7A6C}
.drava__book b{font-size:1em; font-weight:700; white-space:nowrap}
.drava__book em{font-style:normal; display:flex; align-items:center; padding:0 1.5em; background:#C8552B; color:#FFF4E4; font-weight:700; white-space:nowrap}
.drava__phone{margin-top:1em; font-size:.85em; color:rgba(255,244,228,.72)}
.drava__phone s{text-decoration:none; color:#FFF4E4; border-bottom:1px solid rgba(255,244,228,.4)}
/* the chalkboard: slate in a wooden frame, written by hand */
.drava__board{
  rotate:2deg; padding:1.3em 1.6em 1.5em; border-radius:.4em; border:.55em solid #7A5230;
  background:radial-gradient(120% 90% at 30% 20%, #3A4244, #22292B);
  box-shadow:0 1.4em 2.8em -1em rgba(0,0,0,.7), inset 0 0 2em rgba(0,0,0,.45);
  font-family:'Caveat',cursive; color:#F3EFE6;
}
.drava__board p{font-size:2.3em; line-height:1; text-align:center; color:#FFD9A0; margin-bottom:.3em}
.drava__board li{display:flex; align-items:baseline; gap:.5em; font-size:1.55em; line-height:1.55; border-bottom:1px dashed rgba(243,239,230,.16)}
.drava__board i{margin-left:auto; font-style:normal; color:#FFD9A0; white-space:nowrap}
.drava__strip{
  display:flex; justify-content:center; gap:2.4em; padding:.9em 2.4em .9em 14cqi;
  background:rgba(12,10,22,.55); backdrop-filter:blur(6px); font-size:.85em; color:rgba(255,244,228,.75);
}
.drava__strip span:nth-child(2){color:#FFD9A0}
@container (max-width:520px){
  .drava{font-size:3.2cqi}
  .drava__nav{padding:1em 1.2em 1em 16cqi}
  .drava__nav span{display:none}
  .drava__main{grid-template-columns:1fr; align-items:start; padding:.6em 1.2em 1.2em 16cqi}
  .drava__board,.drava__sub{display:none}
  .drava__copy h3{font-size:2.9em}
  .drava__book label:nth-child(2){display:none}
  .drava__strip{justify-content:flex-start; padding-left:16cqi}
  .drava__strip span:nth-child(n+2){display:none}
}

[data-theme="dark"] .mock{background:#FFFDF8}
[data-theme="dark"] .mock__bar{background:#EDE9E0; border-bottom-color:rgba(0,0,0,.08)}
[data-theme="dark"] .mock__bar i{background:rgba(0,0,0,.14)}
[data-theme="dark"] .mock__url{background:#FFFDF8; color:#8B8477}
[data-theme="dark"] .mock--sm{border-color:rgba(0,0,0,.2)}

/* ---------- problem cards ---------- */
.pgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,2.6rem)}
@media (max-width:860px){ .pgrid{grid-template-columns:1fr} }
.pcard{min-width:0}
.pcard{border-top:2px solid var(--ink); padding-top:1.25rem}
.pcard__n{font-family:var(--mono); font-size:.72rem; color:var(--accent); letter-spacing:.1em}
.pcard h3{font-size:1.28rem; margin:.6rem 0 .75rem; letter-spacing:-.01em; font-weight:600; font-family:var(--sans); line-height:1.25}
.pcard p{color:var(--ink-2); font-size:.965rem}

/* ---------- work ---------- */
.work{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(2rem,4vw,3.5rem); align-items:start}
@media (max-width:840px){ .work{grid-template-columns:1fr} }
.workcard{min-width:0}
.workcard .mock--sm{transition:transform .4s var(--ease), box-shadow .4s var(--ease)}
.workcard:hover .mock--sm{transform:translateY(-6px); box-shadow:var(--shadow-lg)}
/* on a phone a 16:11 frame is a letterbox; the mocks switch to their
   stacked layout there and need the height */
@media (max-width:560px){ .workcard > .mock--sm{aspect-ratio:4/4.4} }
/* the bakery has the write-up, so it gets the full row and the room to sell it */
.workcard--feature{grid-column:1/-1; display:grid; grid-template-columns:1.55fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center}
@media (max-width:840px){ .workcard--feature{grid-template-columns:1fr; gap:0} }
.workcard__meta{padding-top:1.35rem}
.workcard__meta h3{font-family:var(--serif); font-size:1.75rem; margin-bottom:.5rem}
.workcard__meta p{color:var(--ink-2); font-size:.965rem; max-width:48ch}
.tags{display:flex; flex-wrap:wrap; gap:.4rem; margin:1rem 0 .95rem}
.tags li{
  font-family:var(--mono); font-size:.685rem; letter-spacing:.04em; padding:.28rem .6rem;
  border:1px solid var(--line); border-radius:999px; color:var(--ink-3);
}

/* ------------------------------------------------------------------
   The portfolio mocks.

   Three businesses, three brands. Each has its own typeface, palette,
   grid and drawn device, and even its own frame (the bakery also on a
   phone, the law firm in dark browser chrome), because a prospect
   comparing them is really asking "will mine just be this one again".

   Each mock sets font-size in cqi on its root and sizes everything else
   in em, so the whole layout scales with its frame the way a picture
   would. The card, the phone and the case-study hero are the same
   markup; a container query swaps in the phone layout below 420px.

   The three mock typefaces are subset to Latin plus č ć đ š ž and a few
   symbols, which is why they cost about 84 KB together. New text with
   characters outside that set falls back to the stack after them.
   ------------------------------------------------------------------ */
@font-face{font-family:'Fraunces'; font-weight:700; font-display:swap; src:url(../fonts/mock-fraunces-700.woff2) format('woff2')}
@font-face{font-family:'Fraunces'; font-style:italic; font-weight:500; font-display:swap; src:url(../fonts/mock-fraunces-italic-500.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond'; font-weight:500; font-display:swap; src:url(../fonts/mock-cormorant-500.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond'; font-style:italic; font-weight:500; font-display:swap; src:url(../fonts/mock-cormorant-italic-500.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans'; font-weight:500 800; font-display:swap; src:url(../fonts/mock-jakarta.woff2) format('woff2')}

/* featured card: the same bakery on a desktop and on a phone */
.workcard__stage{position:relative; padding:0 11% 7% 0}
.mock--phone{
  position:absolute; right:0; bottom:0; width:25%; aspect-ratio:9/19;
  border:clamp(4px,.5vw,7px) solid #16140F; border-radius:clamp(16px,2.2vw,28px);
  box-shadow:var(--shadow-lg); transition:transform .4s var(--ease);
}
.mock--phone::before{
  content:''; position:absolute; z-index:2; top:2.5%; left:50%; translate:-50% 0;
  width:30%; height:2.2%; border-radius:99px; background:#16140F;
}
.workcard:hover .mock--phone{transform:translateY(-10px) rotate(1.5deg)}
/* the phone covers the desktop's right edge, so its artwork moves out from under it */
@container (min-width:421px){
  .workcard__stage .zrno__stamp{right:auto; left:0; width:30%}
}
.mock--phone .zrno{padding-top:9cqi}
@media (max-width:840px){ .workcard__stage{padding-right:14%} .mock--phone{width:32%} }

/* dark browser chrome for the dark site, in either page theme */
.mock.mock--dark,[data-theme="dark"] .mock.mock--dark{background:#0E1719}
.mock--dark .mock__bar,[data-theme="dark"] .mock--dark .mock__bar{background:#1B2628; border-bottom-color:rgba(255,255,255,.06)}
.mock--dark .mock__bar i,[data-theme="dark"] .mock--dark .mock__bar i{background:rgba(255,255,255,.16)}
.mock--dark .mock__url,[data-theme="dark"] .mock--dark .mock__url{background:#0E1719; color:#7E8B88}

/* -- 1. bakery: warm poster, flour grain, rotating stamp, oven tickets -- */
.zrno{
  font-size:1.6cqi; display:flex; flex-direction:column;
  background:#FBF3E6; color:#2A1A12; font-family:var(--sans);
}
.zrno__nav{display:flex; align-items:center; gap:2em; padding:1.25em 2.2em; font-size:.95em; color:#7A5C48}
.zrno__logo{
  display:flex; align-items:center; gap:.3em; margin-right:auto;
  font-family:'Fraunces',var(--serif); font-weight:700; font-size:1.75em; letter-spacing:-.01em; color:#C8452B;
}
.zrno__logo svg{width:.62em; height:auto; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.zrno__navcta{font-style:normal; font-weight:600; background:#2A1A12; color:#FBF3E6; padding:.55em 1.2em; border-radius:99em}
.zrno__hero{
  flex:1; min-height:0; position:relative; overflow:hidden; margin:0 1.2em;
  display:grid; grid-template-columns:1.2fr 1fr; border-radius:1.4em; color:#FFF1DC;
  background:radial-gradient(80% 90% at 90% 10%, #E0673F, transparent 60%), #B83A22;
}
/* flour-dust grain, from an SVG noise filter rather than an image */
.zrno__hero::before{
  content:''; position:absolute; inset:0; opacity:.22; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.zrno__copy{position:relative; z-index:1; min-width:0; display:flex; flex-direction:column; justify-content:center; padding:2.2em 0 2.2em 2.4em}
.zrno__kick{font-family:var(--mono); font-size:.78em; letter-spacing:.2em; text-transform:uppercase; opacity:.8}
.zrno__copy h3{font-family:'Fraunces',var(--serif); font-weight:700; font-size:4.9em; line-height:.9; letter-spacing:-.025em; margin:.3em 0 .45em}
.zrno__copy h3 em{font-style:italic; font-weight:500; color:#FFD58A}
.zrno__order{display:flex; align-items:center; gap:1.1em}
/* the biggest thing on the page, because ordering is the whole business */
.zrno__btn{
  font-style:normal; display:inline-flex; align-items:center; gap:.5em; white-space:nowrap;
  background:#FFF1DC; color:#2A1A12; font-weight:700; font-size:1.15em; padding:.8em 1.35em; border-radius:99em;
  box-shadow:0 .6em 1.6em -.5em rgba(40,10,0,.55);
}
.zrno__btn svg{width:1.15em; height:1.15em; fill:none; stroke:#1F8F4E; stroke-width:2; stroke-linejoin:round}
.zrno__order s{text-decoration:none; font-size:.82em; line-height:1.45; opacity:.9}
.zrno__order s b{display:block; font-family:var(--mono); font-weight:500; letter-spacing:.04em}
.zrno__art{position:relative; min-width:0}
/* the photo bleeds in from the right, feathered into the terracotta so the
   headline side stays a clean field of colour */
.zrno__photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:70% 40%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 38%); mask-image:linear-gradient(90deg,transparent,#000 38%);
}
.zrno__stamp{position:absolute; top:6%; right:6%; width:36%; height:auto; animation:spin 24s linear infinite}
.zrno__stamp circle{fill:#2A1A12}
.zrno__stamp text{font-family:var(--mono); font-size:10.5px; letter-spacing:2.6px; fill:#FFF1DC; text-transform:uppercase}
.zrno__stamp .w{fill:none; stroke:#FFD58A; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
@keyframes spin{to{rotate:360deg}}
.zrno__oven{display:grid; grid-template-columns:repeat(3,1fr); gap:.8em; padding:1em 1.2em}
.zrno__oven li{
  display:flex; align-items:center; gap:.8em; min-width:0; padding:.75em .95em;
  background:#FFFDF8; border-radius:.8em; border-left:.25em solid #C8452B; box-shadow:0 .1em .3em rgba(42,26,18,.08);
}
.zrno__oven b{font-family:'Fraunces',var(--serif); font-weight:700; font-size:1.55em; color:#C8452B; font-variant-numeric:tabular-nums}
.zrno__oven span{min-width:0; font-size:.82em; line-height:1.3; color:#6B5343}
.zrno__ribbon{
  display:flex; gap:2.2em; padding:.8em 2.2em; overflow:hidden; white-space:nowrap;
  background:#2A1A12; color:rgba(246,231,210,.65); font-family:var(--mono); font-size:.8em;
}
.zrno__ribbon i{font-style:normal}
.zrno__ribbon b{color:#F6E7D2; font-weight:500}
@container (max-width:420px){
  .zrno{font-size:3.3cqi}
  .zrno__nav{padding:1em 1.3em}
  .zrno__nav span{display:none}
  .zrno__hero{flex:1 0 auto; grid-template-columns:1fr; margin:0 .9em}
  .zrno__copy{padding:1.6em 1.4em 1.8em}
  .zrno__copy h3{font-size:3.3em}
  .zrno__order{flex-direction:column; align-items:flex-start; gap:.7em}
  .zrno__art{position:absolute; inset:0; pointer-events:none}
  .zrno__photo{opacity:.3; mix-blend-mode:luminosity; -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent); mask-image:linear-gradient(180deg,#000 30%,transparent)}
  .zrno__stamp{top:-1.2em; right:-1.4em; width:9.5em}
  .zrno__oven{grid-template-columns:1fr; gap:.55em; padding:.9em}
  .zrno__ribbon{padding:.8em 1.3em}
}

/* -- 2. law: dark, gold hairlines, classical serif, side index ------ */
.law{
  font-size:1.6cqi; display:grid; grid-template-columns:14em 1fr;
  background:#0E1719; color:#E9E4D8; font-family:var(--sans);
}
.law__side{
  display:flex; flex-direction:column; gap:1.6em; padding:2.2em 1.7em;
  background:#0B1315; border-right:1px solid rgba(201,169,110,.2);
}
.law__mark{display:flex; align-items:center; gap:.8em}
.law__mono{
  width:2.4em; height:2.4em; flex:0 0 auto; display:grid; place-items:center; border-radius:50%;
  border:1px solid #C9A96E; font-family:'Cormorant Garamond',var(--serif); font-style:italic; font-size:1.25em; color:#C9A96E;
}
.law__mark b{font-weight:600; font-size:.66em; line-height:1.6; letter-spacing:.28em}
.law__nav li{
  display:flex; align-items:baseline; gap:.9em; padding:.62em 0;
  border-bottom:1px solid rgba(233,228,216,.07); font-size:.9em; color:#A9B1AE;
}
.law__nav li:first-child{color:#E9E4D8}
.law__nav i{min-width:1.8em; font-style:normal; font-family:'Cormorant Garamond',var(--serif); font-size:1.05em; color:#C9A96E}
.law__hours{margin-top:auto; font-size:.78em; line-height:1.6; color:#7E8B88}
.law__hours b{display:block; font-weight:600; letter-spacing:.04em; color:#C9A96E}
.law__main{position:relative; overflow:hidden; min-width:0; display:flex; flex-direction:column; justify-content:center; padding:2.4em 3em}
.law__main > *{position:relative}
.law__main .law__photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55;
  -webkit-mask-image:linear-gradient(90deg,transparent 15%,#000 85%); mask-image:linear-gradient(90deg,transparent 15%,#000 85%);
}
.law__kick{font-size:.7em; letter-spacing:.3em; text-transform:uppercase; color:#C9A96E}
.law__main h3{font-family:'Cormorant Garamond',var(--serif); font-weight:500; font-size:4.3em; line-height:1.02; letter-spacing:-.01em; margin:.35em 0 .4em}
.law__main h3 em{font-style:italic; color:#C9A96E}
.law__lede{
  width:fit-content; max-width:28em; padding-top:1.1em; border-top:1px solid rgba(201,169,110,.35);
  font-size:.95em; line-height:1.55; color:#A9B1AE;
}
.law__cta{display:flex; align-items:center; gap:1.4em; margin-top:1.6em}
.law__cta em{font-style:normal; font-size:.9em; letter-spacing:.06em; padding:.8em 1.4em; border:1px solid #C9A96E; color:#C9A96E}
.law__cta s{text-decoration:none; font-size:.9em}
.law__facts{display:flex; margin-top:2.2em}
.law__facts li{padding:0 1.8em; border-left:1px solid rgba(201,169,110,.3)}
.law__facts li:first-child{padding-left:0; border:0}
.law__facts b{display:block; font-family:'Cormorant Garamond',var(--serif); font-weight:500; font-size:2.1em; line-height:1.1}
.law__facts span{font-size:.72em; letter-spacing:.04em; color:#7E8B88}
@container (max-width:420px){
  .law{font-size:3.3cqi; grid-template-columns:1fr; grid-template-rows:auto 1fr}
  .law__side{flex-direction:row; align-items:center; padding:1.1em 1.4em; border-right:0; border-bottom:1px solid rgba(201,169,110,.2)}
  .law__nav,.law__hours,.law__facts{display:none}
  .law__main{justify-content:flex-start; padding:1.8em 1.4em}
  .law__main h3{font-size:2.6em}
  .law__main .law__photo{opacity:.3; -webkit-mask-image:none; mask-image:none}
}

/* -- 3. physio: bright app, bold rounded sans, floating booking card - */
.fizio{
  font-size:1.6cqi; display:flex; flex-direction:column; font-family:'Plus Jakarta Sans',var(--sans); color:#0D1B3E;
  background:
    radial-gradient(55% 65% at 88% 8%, #D9E3FF, transparent 62%),
    radial-gradient(45% 55% at 0% 100%, #FFE2D8, transparent 60%),
    #F6F8FF;
}
.fizio__nav{display:flex; align-items:center; gap:1.9em; padding:1.3em 2.2em; font-size:.92em; font-weight:500; color:#52607F}
.fizio__logo{display:flex; align-items:center; gap:.3em; margin-right:auto; font-weight:800; font-size:1.6em; letter-spacing:-.04em; color:#0D1B3E}
/* the logo is a pebble, because kamen */
.fizio__logo i{width:.62em; height:.48em; border-radius:52% 48% 44% 56% / 62% 58% 42% 38%; background:#2F5BFF; rotate:-12deg}
.fizio__navcta{font-style:normal; font-weight:700; color:#fff; background:#2F5BFF; padding:.6em 1.25em; border-radius:99em; box-shadow:0 .4em 1em -.3em rgba(47,91,255,.6)}
.fizio__hero{flex:1; min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:2em; align-items:center; padding:.8em 2.2em 2em}
.fizio__copy{min-width:0}
.fizio__rating{
  display:flex; align-items:center; gap:.45em; width:fit-content; padding:.45em .9em; border-radius:99em;
  background:#fff; font-size:.8em; font-weight:700; box-shadow:0 .3em 1em -.4em rgba(13,27,62,.25);
}
.fizio__rating b{color:#F59E0B}
.fizio__copy h3{font-weight:800; font-size:3.9em; line-height:.98; letter-spacing:-.045em; margin:.35em 0 .3em}
.fizio__copy h3 span{background:linear-gradient(transparent 60%, #C8D5FF 60% 92%, transparent 92%)}
.fizio__lede{max-width:24em; font-size:.98em; line-height:1.5; color:#52607F}
.fizio__chips{display:flex; flex-wrap:wrap; gap:.5em; margin-top:1.2em}
.fizio__chips li{font-size:.8em; font-weight:700; padding:.45em .95em; border-radius:99em; background:rgba(47,91,255,.1); color:#2F5BFF}
.fizio__visual{position:relative; min-width:0; align-self:stretch}
.fizio__photo{
  display:block; width:88%; height:100%; margin-left:auto; object-fit:cover; object-position:35% 30%;
  border-radius:1.4em; box-shadow:0 1.6em 3.2em -1.4em rgba(13,27,62,.35);
}
.fizio__visual .fizio__card{position:absolute; left:0; bottom:8%; width:72%; font-size:.78em}
.fizio__card{
  position:relative; min-width:0; padding:1.9em 1.4em 1.4em; border-radius:1.4em; background:#fff;
  box-shadow:0 1.6em 3.2em -1.4em rgba(13,27,62,.35), 0 .2em .5em rgba(13,27,62,.05);
}
.fizio__badge{
  position:absolute; top:-1.4em; left:-1.4em; display:flex; align-items:center; gap:.55em;
  padding:.6em .95em; border-radius:99em; background:#0D1B3E; color:#fff; font-size:.72em; font-weight:700;
  box-shadow:0 .6em 1.4em -.5em rgba(13,27,62,.6);
}
.fizio__badge i{position:relative; width:.7em; height:.7em; border-radius:50%; background:#FF6B4A}
.fizio__badge i::after{content:''; position:absolute; inset:0; border-radius:50%; background:#FF6B4A; animation:ping 2s var(--ease) infinite}
@keyframes ping{to{transform:scale(2.6); opacity:0}}
.fizio__lab{font-size:.72em; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#8A96B3}
.fizio__week{display:grid; grid-template-columns:repeat(5,1fr); gap:.45em; margin-top:.8em}
.fizio__week i{font-style:normal; display:grid; justify-items:center; gap:.15em; padding:.6em 0; border-radius:.8em; background:#F1F4FF}
.fizio__week b{font-size:.62em; font-weight:700; letter-spacing:.06em; color:#8A96B3}
.fizio__week s{text-decoration:none; font-size:1.1em; font-weight:800}
.fizio__week .is-sel{background:#2F5BFF}
.fizio__week .is-sel b{color:rgba(255,255,255,.75)}
.fizio__week .is-sel s{color:#fff}
.fizio__week .is-off s{color:#C3CAE0}
.fizio__slots{display:grid; grid-template-columns:repeat(4,1fr); gap:.45em; margin-top:.8em}
.fizio__slots em{font-style:normal; text-align:center; font-size:.85em; font-weight:700; padding:.6em 0; border-radius:.7em; border:1px solid #E1E6F5}
.fizio__slots .is-taken{color:#C3CAE0; text-decoration:line-through}
.fizio__slots .is-sel{background:#0D1B3E; border-color:#0D1B3E; color:#fff}
.fizio__pick{display:flex; align-items:center; gap:.8em; margin-top:1em; padding-top:1em; border-top:1px solid #EEF1FA}
.fizio__pick span{display:grid; gap:.1em; min-width:0}
.fizio__pick b{font-size:.92em; font-weight:800}
.fizio__pick s{text-decoration:none; font-size:.74em; color:#8A96B3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fizio__pick em{flex:0 0 auto; margin-left:auto; font-style:normal; font-size:.88em; font-weight:700; color:#fff; background:#2F5BFF; padding:.65em 1.2em; border-radius:99em}
@container (max-width:420px){
  .fizio{font-size:3.3cqi}
  .fizio__nav{padding:1em 1.3em}
  .fizio__nav > span{display:none}
  .fizio__hero{flex:1 0 auto; grid-template-columns:1fr; align-items:start; gap:1.6em; padding:.4em 1.3em 1.4em}
  .fizio__copy h3{font-size:2.7em}
  .fizio__lede,.fizio__chips{display:none}
  .fizio__badge{left:auto; right:-.4em}
  /* phone: the photo becomes a short banner and the card sits under it */
  .fizio__photo{width:100%; height:auto; aspect-ratio:16/8}
  .fizio__visual .fizio__card{position:relative; bottom:auto; width:auto; margin-top:-2em; font-size:1em}
  .fizio__visual .fizio__lab,.fizio__visual .fizio__week,.fizio__visual .fizio__slots{display:none}
  .fizio__visual .fizio__pick{margin-top:0; padding-top:0; border:0}
}

/* ---------- services ---------- */
.svc{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
@media (max-width:920px){ .svc{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .svc{grid-template-columns:1fr} }
.svc__item{min-width:0; background:var(--paper); padding:clamp(1.6rem,3vw,2.3rem); transition:background-color .3s}
.svc__item:hover{background:var(--card)}
.svc__item h3{font-size:1.16rem; font-family:var(--sans); font-weight:600; letter-spacing:-.01em; margin-bottom:.7rem; line-height:1.3}
.svc__item p{color:var(--ink-2); font-size:.945rem}

/* ---------- process ---------- */
.steps{display:grid; gap:0; border-top:1px solid var(--line)}
.step{display:grid; grid-template-columns:auto 1fr; gap:clamp(1.2rem,3vw,2.5rem); padding:clamp(1.6rem,3.4vw,2.6rem) 0; border-bottom:1px solid var(--line)}
.step__n{
  font-family:var(--serif); font-size:clamp(2.2rem,4.5vw,3.4rem); line-height:.9; color:var(--accent);
  min-width:1.6ch;
}
.step h3{font-family:var(--sans); font-weight:600; font-size:1.25rem; letter-spacing:-.012em; line-height:1.3}
.step p{margin-top:.6rem; color:var(--ink-2); max-width:62ch; font-size:.975rem}
.step__t{display:inline-block; margin-top:.9rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); border:1px solid var(--line); padding:.25rem .55rem; border-radius:5px}

/* ---------- pricing ---------- */
.price{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.6rem); align-items:start}
@media (max-width:940px){ .price{grid-template-columns:1fr; max-width:520px; margin-inline:auto} }
.pricecard{
  min-width:0; position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.6rem,2.8vw,2.1rem); display:flex; flex-direction:column; gap:1rem;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pricecard:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.pricecard--hot{border-color:var(--ink); box-shadow:var(--shadow); padding-top:2.4rem}
.pricecard__flag{
  position:absolute; top:-1px; left:50%; translate:-50% 0; background:var(--ink); color:var(--paper);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.09em; text-transform:uppercase;
  padding:.4rem .85rem; border-radius:0 0 9px 9px; white-space:nowrap;
}
.pricecard h3{font-family:var(--serif); font-size:1.85rem}
.pricecard__for{color:var(--ink-2); font-size:.9rem; min-height:3.1em}
.pricecard__n{font-family:var(--serif); font-size:3rem; line-height:1; letter-spacing:-.02em}
.pricecard__n span{font-size:1.5rem; color:var(--ink-3)}
.pricecard ul{display:grid; gap:.6rem; margin-top:.2rem; flex:1}
.pricecard li{position:relative; padding-left:1.5rem; font-size:.93rem; color:var(--ink-2); line-height:1.5}
.pricecard li::before{
  content:""; position:absolute; left:0; top:.52em; width:9px; height:5px; border-left:1.8px solid var(--accent);
  border-bottom:1.8px solid var(--accent); rotate:-45deg;
}
.price__note{
  margin-top:2.2rem; text-align:center; color:var(--ink-2); font-size:.95rem; max-width:64ch; margin-inline:auto;
}
.price__note strong{color:var(--ink); font-weight:600}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; text-align:left;
  background:none; border:0; padding:1.4rem 0; cursor:pointer; font-size:1.085rem; font-weight:550;
  letter-spacing:-.011em; line-height:1.35; transition:color .2s;
}
.faq__q:hover{color:var(--accent)}
.faq__q i{position:relative; flex:0 0 auto; width:18px; height:18px}
.faq__q i::before,.faq__q i::after{
  content:""; position:absolute; top:50%; left:0; width:100%; height:1.8px; background:currentColor;
  translate:0 -50%; transition:rotate .3s var(--ease), opacity .3s;
}
.faq__q i::after{rotate:90deg}
.faq__q[aria-expanded="true"] i::after{rotate:0deg; opacity:0}
/* answers are open by default and only fold away once JS can unfold them */
.faq__a{display:grid; grid-template-rows:1fr; transition:grid-template-rows .35s var(--ease)}
.faq__a p{overflow:hidden; color:var(--ink-2); font-size:.98rem; max-width:70ch; padding-bottom:1.5rem}
.js .faq__item:not(.is-open) .faq__a{grid-template-rows:0fr}
.js .faq__item:not(.is-open) .faq__a p{padding-bottom:0}

/* ---------- contact ---------- */
.contact{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5rem); align-items:start}
@media (max-width:900px){ .contact{grid-template-columns:1fr} }
.contact__copy h2{font-size:clamp(2rem,4vw,3rem); max-width:16ch}
.contact__copy > p{margin-top:1.3rem; color:var(--ink-2); max-width:44ch}
.contact__list{margin-top:2.4rem; display:grid; gap:1.35rem}
.contact__list li{display:grid; gap:.2rem; border-top:1px solid var(--line); padding-top:1rem}
.contact__list span{font-family:var(--mono); font-size:.69rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.contact__list a{font-size:1.2rem; width:fit-content; border-bottom:1px solid var(--line); transition:border-color .2s}
.contact__list a:hover{border-color:var(--accent); color:var(--accent)}
.contact__list p{color:var(--ink-2); font-size:.95rem}

.form{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.2rem); display:grid; gap:1.1rem;
}
.field{display:grid; gap:.45rem; border:0; padding:0; margin:0; min-width:0}
.field label,.field legend{font-size:.855rem; font-weight:550; color:var(--ink-2); padding:0}
.field input,.field textarea{
  width:100%; background:transparent; border:1px solid var(--line); border-radius:10px; padding:.72rem .9rem;
  font-size:.97rem; transition:border-color .2s, background-color .2s; resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3); opacity:.75}
.field input:focus,.field textarea:focus{outline:0; border-color:var(--accent)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--accent)}
.err{font-size:.8rem; color:var(--accent); min-height:0}
.err:empty{display:none}
.chips{display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.15rem}
.chip{cursor:pointer}
.chip input{position:absolute; opacity:0; width:0; height:0}
.chip span{
  display:inline-block; padding:.45rem .85rem; border:1px solid var(--line); border-radius:999px;
  font-size:.865rem; color:var(--ink-2); transition:all .2s;
}
.chip:hover span{border-color:var(--ink-2)}
.chip input:checked + span{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:550}
.chip input:focus-visible + span{outline:2.5px solid var(--accent); outline-offset:3px}
.form__send{display:grid; grid-template-columns:1fr 1fr; gap:.6rem}
@media (max-width:480px){ .form__send{grid-template-columns:1fr} }
.form__note{font-size:.82rem; color:var(--ink-3); line-height:1.5}
.form__ok{font-size:.92rem; color:var(--accent); border-left:2px solid var(--accent); padding-left:.9rem}
.form__ok a{text-decoration:underline}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line); padding:clamp(3rem,6vw,4.5rem) 0 2.5rem; background:var(--paper)}
.foot__inner{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; align-items:start}
@media (max-width:760px){ .foot__inner{grid-template-columns:1fr; gap:2rem} }
.foot__line{color:var(--ink-2); font-size:.93rem}
.foot__nav{display:grid; gap:.55rem; font-size:.93rem; color:var(--ink-2)}
.foot__nav a:hover{color:var(--accent)}
.foot__fine{font-family:var(--mono); font-size:.72rem; line-height:1.9; color:var(--ink-3)}

/* ---------- reveal on scroll ----------
   Scoped to .js: without the script nothing would ever reveal it again. */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .75s var(--ease), transform .75s var(--ease)}
.js .reveal.is-in{opacity:1; transform:none}
/* arriving from the other language: what is on screen is already revealed */
.swap .reveal{transition:none !important}

/* ---------- language switch ----------
   Both languages are separate pages; the browser crossfades between them
   (cross-document view transitions; browsers without them just navigate). */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s; animation-timing-function:var(--ease)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .js .reveal{opacity:1; transform:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}

/* ---------- case study page ---------- */
.cs-hero{padding:clamp(7.5rem,15vh,10rem) 0 clamp(2.5rem,5vw,4rem)}
.cs-hero h1{font-size:clamp(2.4rem,6.2vw,4.4rem); max-width:18ch; line-height:1}
.cs-hero__lede{margin-top:1.5rem; color:var(--ink-2); font-size:1.1rem; max-width:58ch}
.cs-meta{display:flex; flex-wrap:wrap; gap:2.5rem; margin-top:2.5rem; padding-top:1.8rem; border-top:1px solid var(--line)}
.cs-meta div{display:grid; gap:.25rem}
.cs-meta dt{font-family:var(--mono); font-size:.69rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.cs-meta dd{margin:0; font-size:1.02rem}
.cs-shot{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-lg); aspect-ratio:16/10}
/* 16:10 at phone width is too short for the order button to clear the ribbon */
@media (max-width:640px){ .cs-shot{aspect-ratio:4/3} }
.prose{max-width:66ch}
.prose h2{font-size:clamp(1.7rem,3.4vw,2.5rem); margin:3.2rem 0 1rem}
.prose h2:first-child{margin-top:0}
.prose p{margin-bottom:1.15rem; color:var(--ink-2)}
.prose p strong{color:var(--ink); font-weight:600}
.prose ul{display:grid; gap:.6rem; margin:0 0 1.4rem}
.prose li{padding-left:1.4rem; position:relative; color:var(--ink-2)}
.prose li::before{content:""; position:absolute; left:.1rem; top:.7em; width:6px; height:6px; border-radius:999px; background:var(--accent)}
.pull{
  font-family:var(--serif); font-size:clamp(1.5rem,3.2vw,2.15rem); line-height:1.22; color:var(--ink);
  border-left:2px solid var(--accent); padding-left:1.5rem; margin:2.4rem 0;
}
.cs-nums{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin:2.4rem 0}
@media (max-width:640px){ .cs-nums{grid-template-columns:1fr} }
.cs-nums div{background:var(--paper); padding:1.3rem}
.cs-nums b{display:block; font-family:var(--serif); font-size:2.1rem; font-weight:400; color:var(--accent); line-height:1}
.cs-nums span{font-size:.85rem; color:var(--ink-2); display:block; margin-top:.35rem}
.backlink{display:inline-flex; gap:.5rem; align-items:center; font-size:.9rem; color:var(--ink-2); margin-bottom:2rem}
.backlink:hover{color:var(--accent)}


/* ---------- client work: screenshots in the same frames as the concepts ---------- */
.mock__shot{display:block; width:100%; height:100%; min-height:0; flex:1; object-fit:cover; object-position:top}
.workcard__meta .workcard__kind{
  display:inline-block; margin-bottom:.7rem; padding:.28rem .7rem; border-radius:999px;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  background:var(--accent); color:var(--accent-ink);
}

/* ---------- multi-page: inner page heads, the call to action band ---------- */
/* first section on a page without a hero clears the fixed header */
.section--first{padding-top:clamp(7.5rem,15vh,10rem)}
.cs-hero + .section{padding-top:clamp(1rem,3vw,2rem)}
.cs-hero + .section--band,.cs-hero + .section--tint{padding-top:clamp(3rem,7vw,5.5rem)}
.contact__copy h1{font-size:clamp(2.2rem,4.6vw,3.4rem); max-width:16ch}
.work__more{margin-top:clamp(2rem,4vw,3rem); text-align:center}
.workcard__links{display:flex; flex-wrap:wrap; gap:.6rem 1.6rem}
.cs-cta{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.8rem; margin-top:2.5rem}
.ctaband__in{display:grid; grid-template-columns:1.3fr 1fr; gap:2rem; align-items:center}
.ctaband h2{font-size:clamp(1.8rem,3.6vw,2.7rem)}
.ctaband p{margin-top:.8rem; color:var(--ink-2); max-width:48ch}
.ctaband__cta{display:flex; flex-wrap:wrap; gap:.75rem; justify-content:flex-end}
@media (max-width:860px){ .ctaband__in{grid-template-columns:1fr} .ctaband__cta{justify-content:flex-start} }