:root{
  --paper:#F4F4F2; --surface:#FFFFFF; --ink:#2A2A29; --ink-2:#5A5A57; --ink-3:#8C8C87; --line:#DADAD5;
  --band:#212120; --band-ink:#F1F1ED; --band-ink-2:#A9A9A3; --band-line:#3A3A38;
  --cap-bg:rgba(26,26,25,.9); --cap-ink:#F4F4F2; --cap-ink-2:#BDBDB7;
  --display:"Montserrat","Avenir Next","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --ease-focus:cubic-bezier(.7,0,.2,1.18);
  --gutter:clamp(16px,4vw,40px);
  --sw-track:#DCDCD7; --sw-knob:#FFFFFF; --sw-icon:#8C8C87;
  color-scheme:only light;
}
:root[data-mode="dark"]{
  color-scheme:only dark;
  --paper:#131312; --surface:#1B1B1A; --ink:#ECECE7; --ink-2:#B3B3AD; --ink-3:#7F7F7A; --line:#2E2E2C;
  --band:#1C1C1B; --band-line:#343432;
  --sw-track:#ECECE7; --sw-knob:#131312; --sw-icon:#ECECE7;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:calc(72px + env(safe-area-inset-top,0px))}
@media (max-width:1000px){section[id]{scroll-margin-top:calc(64px + env(safe-area-inset-top,0px))}}
body{background:var(--paper);color:var(--ink);transition:background-color .3s,color .3s;font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font-family:var(--display);font-weight:500;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px}
h1,h2,h3{font-family:var(--display);font-weight:600;text-wrap:balance;margin:0}
h2{font-size:clamp(28px,3.6vw,46px);line-height:1.08;letter-spacing:-.015em}
h3{font-size:20px;line-height:1.25;letter-spacing:-.005em}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--paper);transition:background-color .3s;border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:24px;height:72px}
.brand{display:block;line-height:0;color:var(--ink)}
.brand svg{height:19px;width:auto}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{text-decoration:none;font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.nav a:hover{color:var(--ink)}
.mode{position:relative;flex:none;width:48px;height:28px;margin-left:6px;padding:0;border:0;border-radius:999px;background:var(--sw-track);cursor:pointer;transition:background-color .3s}
.mode .knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--sw-knob);color:var(--sw-icon);box-shadow:0 1px 3px rgba(0,0,0,.28),0 0 0 .5px rgba(0,0,0,.06);display:grid;place-items:center;transition:transform .32s cubic-bezier(.3,1.35,.5,1),background-color .3s,color .3s}
.mode .knob svg{grid-area:1/1;width:13px;height:13px;transition:opacity .2s,transform .32s}
.mode .moon{opacity:0;transform:rotate(-40deg)}
.mode[aria-checked="true"] .knob{transform:translateX(20px)}
.mode[aria-checked="true"] .sun{opacity:0;transform:rotate(40deg)}
.mode[aria-checked="true"] .moon{opacity:1;transform:none}
.menu-btn{display:none;position:relative;flex:none;width:40px;height:40px;margin-right:-8px;padding:0;background:none;border:0;color:var(--ink);cursor:pointer}
.menu-btn i{position:absolute;left:10px;width:20px;height:2px;background:currentColor;transition:transform .3s cubic-bezier(.3,1.3,.5,1),top .3s}
.menu-btn i:first-child{top:15px}
.menu-btn i:last-child{top:23px}
.top.open .menu-btn i:first-child{top:19px;transform:rotate(45deg)}
.top.open .menu-btn i:last-child{top:19px;transform:rotate(-45deg)}
@media (max-width:1000px){
  .top .wrap{gap:10px;height:64px}
  .brand .hlogo{height:20px}
  .lsw{margin-left:auto}
  .menu-btn{display:block}
  .nav{position:absolute;left:0;right:0;top:100%;margin:0;flex-direction:column;gap:0;padding:4px var(--gutter) 22px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 18px 30px -18px rgba(0,0,0,.25);visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .2s,transform .28s var(--ease-focus),visibility 0s linear .28s}
  .top.open .nav{visibility:visible;opacity:1;transform:none;transition:opacity .2s,transform .28s var(--ease-focus)}
  .nav a{display:block;padding:15px 0;border-bottom:1px solid var(--line);font-size:17px;font-weight:600;letter-spacing:.1em;color:var(--ink)}
  .nav a:last-child{border-bottom:0}
}

/* hero */
.hero{padding-block:clamp(48px,9vw,120px) clamp(48px,7vw,96px)}
.hero-copy{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end}
.hero h1{font-size:clamp(40px,6.4vw,82px);line-height:1;letter-spacing:-.025em}
.hero h1 span{display:block}
.hero-copy p{margin:0 0 24px;color:var(--ink-2);max-width:48ch}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:1.5px solid var(--ink);cursor:pointer}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:transparent;color:var(--ink)}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
@media (max-width:760px){.hero-copy{grid-template-columns:1fr}}

/* header logo animation */
.brand .hlogo{height:23px;width:auto;overflow:visible}
.hlogo .hbr{transition:transform .42s var(--ease-focus)}
.hlogo .hw path{opacity:0;transition:opacity .12s ease}
.hlogo[data-word="0"] .hw[data-w="0"] path,
.hlogo[data-word="1"] .hw[data-w="1"] path,
.hlogo[data-word="2"] .hw[data-w="2"] path{opacity:1;transition:opacity .22s ease calc(340ms + var(--i) * 60ms)}
.hlogo[data-word="1"] .hbr{transform:translateX(var(--s1))}
.hlogo[data-word="2"] .hbr{transform:translateX(var(--s2))}

/* FORMAT animation tile */
.work .media.fmt-media{background:var(--surface);color:var(--ink)}
.fmt-svg{display:block;width:100%;height:100%}
.fmt-svg .c{transition:transform var(--dur,.52s) var(--ease-focus)}
.fmt-svg .lt{transition:opacity .4s ease calc(var(--i) * 70ms)}
.fmt-svg.anim .lt{opacity:0}
.fmt-svg.reset .lt,.fmt-svg.reset .c{transition:none!important}
.fmt-svg.anim.shown .lt{opacity:1}
.fmt-svg text{font-family:var(--mono);fill:var(--ink-3);transition:opacity .16s}
.fmt-svg .fl-r{font-size:66px;letter-spacing:.06em}
.fmt-svg .fl-d{font-size:34px;letter-spacing:.04em}

/* sections */
section.block{padding-block:clamp(56px,8vw,112px);border-top:1px solid var(--line)}
.head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px 40px;margin-bottom:clamp(32px,4vw,52px)}
.head p{margin:0;color:var(--ink-2);max-width:46ch}

/* bracket motif */
.brk{position:relative}
.brk::before,.brk::after{content:"";position:absolute;width:var(--arm,18px);height:var(--arm,18px);border:0 solid currentColor;transition:transform .45s var(--ease-focus),opacity .25s}
.brk::before{left:0;top:0;border-top-width:var(--t,3px);border-left-width:var(--t,3px)}
.brk::after{right:0;bottom:0;border-bottom-width:var(--t,3px);border-right-width:var(--t,3px)}

/* services */
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.svc{display:flex;flex-direction:column;gap:10px}
.svc .shot{height:150px;display:flex;align-items:flex-end;margin-bottom:14px}
.svc .fbox{height:124px;aspect-ratio:var(--ar);display:grid;place-items:center;color:var(--ink);background:var(--surface);margin-left:9px;--arm:16px}
.svc .fbox span{font-family:var(--mono);font-size:13px;color:var(--ink-3)}
.svc .fbox::before{transform:translate(-9px,-9px)}
.svc .fbox::after{transform:translate(9px,9px)}
.svc:hover .fbox::before{transform:translate(-3px,-3px)}
.svc:hover .fbox::after{transform:translate(3px,3px)}
.svc .spec{color:var(--ink-3)}
.svc p{margin:0;color:var(--ink-2);font-size:16px}
@media (max-width:860px){.services{grid-template-columns:1fr;gap:44px}}

/* work */
.grid{display:flex;gap:22px;align-items:flex-start}
.grid .col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:22px}
.work{margin:0;color:var(--ink);--arm:22px;--t:3px;outline:none}
.work{display:block}
.work::before{transform:translate(-20px,-20px);opacity:0}
.work::after{transform:translate(20px,20px);opacity:0}
.work .media{position:relative;overflow:hidden;background:var(--line)}
.work img,.work video{display:block;width:100%;height:100%;object-fit:cover}
.work .kind{position:absolute;top:10px;left:10px;font:500 10.5px/1 var(--mono);letter-spacing:.1em;padding:6px 7px;background:var(--cap-bg);color:var(--cap-ink);text-transform:uppercase}
.work figcaption{position:absolute;left:0;bottom:0;padding:11px 14px 10px;background:var(--cap-bg);color:var(--cap-ink);opacity:0;transform:translateY(8px);transition:opacity .25s,transform .35s var(--ease-focus)}
.work figcaption b{display:block;font:600 12.5px/1.2 var(--display);letter-spacing:.16em;text-transform:uppercase}
.work .inner{position:relative}
@media (hover:hover){
  .work:hover::before,.work:focus-visible::before{transform:translate(-9px,-9px);opacity:1}
  .work:hover::after,.work:focus-visible::after{transform:translate(9px,9px);opacity:1}
  .work:hover figcaption,.work:focus-visible figcaption{opacity:1;transform:none}
}
@media (hover:none){
  .work::before,.work::after{display:none}
  .work figcaption{position:static;opacity:1;transform:none;background:none;color:var(--ink-3);padding:10px 0 0}
}

/* agencies */
.band{background:var(--band);color:var(--band-ink);border-block:1px solid var(--band-line)}
.band .eyebrow{color:var(--band-ink-2)}
.band .head p{color:var(--band-ink-2)}
.points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 56px;margin-bottom:clamp(48px,6vw,80px)}
.point{padding-left:34px;position:relative}
.point::before{content:"";position:absolute;left:0;top:5px;width:16px;height:16px;border-top:3px solid var(--band-ink);border-left:3px solid var(--band-ink)}
.point h3{margin-bottom:6px}
.point p{margin:0;color:var(--band-ink-2);font-size:16px;max-width:44ch}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--band-line)}
.steps li{padding:22px 22px 0 0}
.steps .n{font:500 12px/1 var(--mono);letter-spacing:.1em;color:var(--band-ink-2);display:block;margin-bottom:14px}
.steps b{font:600 18px/1.3 var(--display);display:block;margin-bottom:6px}
.steps p{margin:0;color:var(--band-ink-2);font-size:15px}
@media (max-width:860px){.points{grid-template-columns:1fr}.steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px}}
@media (max-width:460px){.steps{grid-template-columns:1fr}}

/* contact */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(24px,4vw,56px);align-items:start}
.cline{border-top:1.5px solid var(--ink);padding-top:16px}
.cline .mono{color:var(--ink-3);display:block;margin-bottom:8px;text-transform:uppercase}
.cval{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px}
.cval a{font:600 clamp(26px,3.6vw,44px)/1.1 var(--display);letter-spacing:-.015em;text-decoration:none;overflow-wrap:anywhere}
.cval a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.copy{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;background:none;border:1px solid var(--line);color:var(--ink-2);padding:9px 11px;cursor:pointer}
.copy:hover{border-color:var(--ink-3);color:var(--ink)}
.contact-note{color:var(--ink-2);margin:28px 0 0;max-width:52ch}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr}}

/* articles list */
.posts{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.posts li{border-bottom:1px solid var(--line)}
.post-link{display:grid;grid-template-columns:150px minmax(0,1fr) 40px;gap:8px 32px;align-items:baseline;padding:28px 0;text-decoration:none;color:var(--ink)}
.post-link .meta{color:var(--ink-3);display:flex;flex-direction:column;gap:6px}
.post-link .meta .t{color:var(--ink-2);text-transform:uppercase;letter-spacing:.1em}
.post-link h3{font-size:clamp(20px,2.2vw,26px);line-height:1.2;letter-spacing:-.01em;margin-bottom:8px}
.post-link p{margin:0;color:var(--ink-2);font-size:16px;max-width:62ch}
.post-link .arr{justify-self:end;align-self:center;font:500 22px/1 var(--display);transition:transform .3s var(--ease-focus)}
.post-link:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.post-link:hover .arr{transform:translateX(6px)}
.lang-note{display:block;margin-top:10px;font:500 12.5px/1.4 var(--mono);letter-spacing:.04em;color:var(--ink-3)}
.lang-note:empty{display:none}
@media (max-width:760px){.post-link{grid-template-columns:minmax(0,1fr) 28px}.post-link .meta{grid-column:1/-1;flex-direction:row;gap:14px}}

/* article reader */
.reader{padding-block:clamp(32px,6vw,72px) clamp(56px,8vw,112px)}
.post{max-width:720px;margin-inline:auto;padding-inline:var(--gutter);scroll-margin-top:calc(96px + env(safe-area-inset-top,0px))}
.back{display:inline-flex;gap:8px;align-items:center;color:var(--ink-2);text-decoration:none;margin-bottom:clamp(28px,4vw,44px)}
.back:hover{color:var(--ink)}
.post-head{padding-bottom:28px;margin-bottom:36px;border-bottom:1.5px solid var(--ink)}
.post-head .t{color:var(--ink-3);text-transform:uppercase;letter-spacing:.12em;display:block;margin-bottom:14px}
.post h1{font-size:clamp(32px,4.8vw,54px);line-height:1.06;letter-spacing:-.02em;margin-bottom:18px}
.post-head .lede{font-size:clamp(18px,2vw,21px);line-height:1.5;color:var(--ink-2);margin:0 0 18px}
.post-head .meta{color:var(--ink-3)}
.post-body{font-size:18px;line-height:1.72}
.post-body p{margin:0 0 1.1em}
.post-body h2{font-size:clamp(21px,2.4vw,26px);line-height:1.25;letter-spacing:-.01em;margin:2em 0 .6em}
.post-body ul,.post-body ol{margin:0 0 1.2em;padding-left:1.2em}
.post-body li{margin-bottom:.7em;padding-left:.2em}
.post-body li::marker{color:var(--ink-3)}
.post-body strong{font-weight:600;color:var(--ink)}
.post-body blockquote{position:relative;margin:2.2em 0;padding:22px 26px;background:var(--surface);color:var(--ink);--arm:18px;--t:3px}
.post-body blockquote p{margin:0}
.post-cta{margin-top:clamp(40px,6vw,64px);padding:28px;border:1px solid var(--line);display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between}
.post-cta p{margin:0;font:600 19px/1.3 var(--display);max-width:32ch}
.more{margin-top:clamp(40px,6vw,64px)}
.more ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.more a{display:block;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none;font:600 17px/1.35 var(--display)}
.more a:hover{text-decoration:underline;text-underline-offset:4px}

/* whatsapp */
.cval a.wa-link{display:inline-flex;align-items:center;gap:14px;font-size:clamp(22px,2.6vw,30px)}
.cval a.wa-link svg{width:1em;height:1em;flex:none}
/* chat */
.chat-fab{position:fixed;z-index:41;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:center;height:56px;min-width:56px;padding:0 16px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);cursor:pointer;box-shadow:0 6px 22px -6px rgba(0,0,0,.35);transition:padding .35s var(--ease-focus),transform .2s}
.chat-fab .frame{position:relative;display:inline-flex;align-items:center;justify-content:center;height:24px;min-width:24px;padding:0;transition:height .35s var(--ease-focus),padding .35s var(--ease-focus)}
.chat-fab .frame::before,.chat-fab .frame::after{content:"";position:absolute;width:7px;height:7px;border:0 solid currentColor;transition:width .35s var(--ease-focus),height .35s var(--ease-focus)}
.chat-fab .frame::before{left:0;top:0;border-top-width:2.5px;border-left-width:2.5px}
.chat-fab .frame::after{right:0;bottom:0;border-bottom-width:2.5px;border-right-width:2.5px}
.chat-fab .d3{display:inline-flex;gap:1.6px;max-width:16px;overflow:hidden;transition:max-width .3s var(--ease-focus),opacity .2s}
.chat-fab .d3 i{width:3.2px;height:3.2px;border-radius:50%;background:currentColor;flex:none}
.chat-fab .lbl{max-width:0;overflow:hidden;white-space:nowrap;font:600 12.5px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;transition:max-width .4s var(--ease-focus)}
.chat-fab .ico-x{display:none;width:22px;height:22px}
.chat-fab[aria-expanded="true"] .frame{display:none}
.chat-fab[aria-expanded="true"] .ico-x{display:block}
@media (hover:hover){
  .chat-fab[aria-expanded="false"]:hover,.chat-fab[aria-expanded="false"]:focus-visible{padding:0 12px}
  .chat-fab[aria-expanded="false"]:hover .frame,.chat-fab[aria-expanded="false"]:focus-visible .frame{height:34px;padding:0 15px}
  .chat-fab[aria-expanded="false"]:hover .frame::before,.chat-fab[aria-expanded="false"]:hover .frame::after,
  .chat-fab[aria-expanded="false"]:focus-visible .frame::before,.chat-fab[aria-expanded="false"]:focus-visible .frame::after{width:10px;height:10px}
  .chat-fab[aria-expanded="false"]:hover .d3,.chat-fab[aria-expanded="false"]:focus-visible .d3{max-width:0;opacity:0}
  .chat-fab[aria-expanded="false"]:hover .lbl,.chat-fab[aria-expanded="false"]:focus-visible .lbl{max-width:260px}
}
.chat-fab:active{transform:scale(.96)}
.top.open ~ .chat-fab{opacity:0;pointer-events:none}
.chat{position:fixed;z-index:40;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(88px + env(safe-area-inset-bottom,0px));width:min(392px,calc(100vw - 36px));height:min(620px,calc(100dvh - 120px));display:flex;flex-direction:column;background:var(--paper);color:var(--ink);border:1px solid var(--line);box-shadow:0 28px 70px -24px rgba(0,0,0,.4);transform-origin:100% 100%;animation:chatIn .28s var(--ease-focus)}
@keyframes chatIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.chat-head{display:flex;align-items:center;gap:12px;padding:14px 12px 14px 16px;border-bottom:1px solid var(--line);background:var(--surface)}
.chat-head .mark{width:28px;height:28px;flex:none;color:var(--ink)}
.chat-head b{display:block;font:600 15px/1.2 var(--display)}
.chat-head .mono{display:block;color:var(--ink-3);font-size:11.5px;margin-top:3px}
.chat-x{margin-left:auto;width:40px;height:40px;display:grid;place-items:center;background:none;border:0;color:var(--ink-2);cursor:pointer}
.chat-x:hover{color:var(--ink)}
.chat-log{flex:1;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;padding:16px}
.msg{max-width:86%;padding:10px 14px;font-size:15.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.bot{align-self:flex-start;background:var(--surface);border:1px solid var(--line)}
.msg.me{align-self:flex-end;background:var(--ink);color:var(--paper)}
.msg.err{align-self:flex-start;color:var(--ink-2);font-size:14px;background:none;border:1px dashed var(--line)}
.dots{display:inline-flex;gap:5px;padding:4px 0}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:dot 1.2s infinite ease-in-out}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.brief{align-self:stretch;margin:4px 6px 4px;padding:18px 18px 16px;background:var(--surface);--arm:14px;--t:2.5px;color:var(--ink)}
.brief .mono{display:block;color:var(--ink-3);text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px}
.brief pre{margin:0 0 14px;font:14.5px/1.55 var(--body);white-space:pre-wrap;overflow-wrap:anywhere}
.brief .btn{width:100%;gap:10px;min-height:44px}
.brief .btn svg{width:18px;height:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px}
.chips button{font:500 13.5px/1.2 var(--body);padding:9px 12px;background:transparent;color:var(--ink);border:1px solid var(--line);cursor:pointer;text-align:left}
.chips button:hover{border-color:var(--ink-3)}
.chat-form{display:flex;align-items:flex-end;gap:8px;padding:10px 10px 10px 16px;border-top:1px solid var(--line);background:var(--surface)}
.chat-form textarea{flex:1;min-width:0;resize:none;border:0;outline:none;background:transparent;color:var(--ink);font:16px/1.45 var(--body);padding:9px 0;max-height:120px}
.chat-form textarea::placeholder{color:var(--ink-3)}
.chat-form button{flex:none;width:42px;height:42px;display:grid;place-items:center;border:0;background:var(--ink);color:var(--paper);cursor:pointer}
.chat-form button:disabled{opacity:.35;cursor:default}
.chat-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 16px 10px;background:var(--surface);color:var(--ink-3);font-size:11.5px}
.chat-foot a{display:inline-flex;align-items:center;gap:7px;color:var(--ink-2);text-decoration:none;font:500 12px/1 var(--mono);letter-spacing:.03em}
.chat-foot a:hover{color:var(--ink)}
.chat-foot a svg{width:15px;height:15px}
@media (max-width:560px){
  .chat{inset:0;width:auto;height:auto;border:0;box-shadow:none;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);animation-name:chatUp}
  @keyframes chatUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  .chat-fab[aria-expanded="true"]{display:none}
}
body > footer{padding-bottom:calc(28px + 76px)}

footer{border-top:1px solid var(--line);padding-block:28px;color:var(--ink-3)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between}
footer .brand svg{height:14px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}
}


body{margin:0}
/* ===== language switcher: current code, expands into a row of codes ===== */
:root{--chip:#E4E4DF;--lsw-w:32px;--lsw-gap:3px;--lsw-ease:cubic-bezier(.2,.8,.2,1)}
:root[data-mode="dark"]{--chip:#2C2C2A}
.lsw{position:relative;flex:none;width:var(--lsw-w);height:30px;z-index:25}
.lsw-list{position:absolute;right:0;top:0;display:flex;margin:0;padding:0;list-style:none;background:var(--paper);box-shadow:-18px 0 14px -6px var(--paper);transition:background-color .3s,box-shadow .3s}
.lsw-list::before{content:"";position:absolute;inset:-16px -12px -34px -12px}
.lsw-list li{position:relative;flex:none;width:0;margin-left:0;opacity:0;visibility:hidden;overflow:hidden;
  transition:width .4s var(--lsw-ease),margin-left .4s var(--lsw-ease),opacity .22s,visibility 0s linear .4s}
.lsw-list li.on{width:var(--lsw-w);opacity:1;visibility:visible}
.lsw.open .lsw-list li{width:var(--lsw-w);opacity:1;visibility:visible;transition:width .4s var(--lsw-ease),margin-left .4s var(--lsw-ease),opacity .3s .06s,visibility 0s}
.lsw.open .lsw-list li + li{margin-left:var(--lsw-gap)}
.lsw-list a{display:grid;place-items:center;width:var(--lsw-w);height:30px;border:1px solid var(--line);border-radius:7px;text-decoration:none;color:var(--ink-3);
  font:600 10.5px/1 var(--display);letter-spacing:.08em;transition:background-color .18s,color .18s,border-color .18s}
.lsw-list a[aria-current]{color:var(--ink)}
.lsw-list a:hover,.lsw-list a:focus-visible{background:var(--chip);border-color:var(--chip);color:var(--ink)}
.lsw-list a:focus-visible{outline-offset:2px}
@media (min-width:1001px){.nav{transform:translateX(calc(var(--shift,0px) * -1));transition:transform .4s var(--lsw-ease),gap .4s var(--lsw-ease)}}
@media (min-width:1001px) and (max-width:1439px){html.lsw-open .nav{gap:18px}}
@media (max-width:1000px){:root{--lsw-w:29px;--lsw-gap:3px}.lsw-list a{height:30px}}

/* text rolls in after switching language */
@keyframes fmtRoll{from{opacity:0;transform:translateY(.55em);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
html.lang-in .nav a,html.lang-in main h1,html.lang-in .hero-copy p,html.lang-in .mag-lead,html.lang-in .post-head .lede,html.lang-in .secbar,html.lang-in .head{animation:fmtRoll .7s var(--lsw-ease) both}
html.lang-in .nav a:nth-child(2){animation-delay:.04s}
html.lang-in .nav a:nth-child(3){animation-delay:.08s}
html.lang-in .nav a:nth-child(4){animation-delay:.12s}
html.lang-in .nav a:nth-child(5){animation-delay:.16s}
html.lang-in main h1,html.lang-in .mag-lead,html.lang-in .post-head .lede{animation-delay:.1s}
html.lang-in .hero-copy p,html.lang-in .secbar,html.lang-in .head{animation-delay:.18s}
@media (prefers-reduced-motion:reduce){html.lang-in *{animation:none!important}}

/* after an automatic language switch */
.autobar{background:var(--ink);color:var(--paper)}
.top .autobar .wrap{height:auto;min-height:46px;gap:10px 18px;padding-block:8px;flex-wrap:wrap;font-size:14px;line-height:1.35}
.autobar .globe{width:17px;height:17px;flex:none;opacity:.7}
.autobar span{flex:1 1 220px}
.autobar button{flex:none;padding:7px 12px;background:none;color:inherit;border:1px solid currentColor;font:600 11.5px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.autobar .ab-other{border-color:transparent;text-decoration:underline;text-underline-offset:4px}
.autobar .ab-ok{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* ===== breadcrumbs ===== */
.crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;margin-bottom:26px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink)}

/* ===== magazine ===== */
.mag{padding-block:clamp(28px,5vw,56px) clamp(64px,9vw,120px)}
.masthead{border-bottom:1.5px solid var(--ink);margin-bottom:clamp(28px,4vw,48px)}
.mast-row{container-type:inline-size;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px clamp(24px,5vw,72px);padding-bottom:clamp(20px,3vw,32px);border-bottom:1px solid var(--line)}
.mast{font-size:min(120px,calc(100cqi / (var(--len,8) * .7)));line-height:.92;letter-spacing:-.035em;text-transform:uppercase;overflow-wrap:break-word;max-width:100%}
.mag-lead{margin:0;color:var(--ink-2);max-width:46ch;flex:1 1 320px}
.mast-row .mast{flex:0 1 auto}
.secbar{display:flex;gap:6px 22px;overflow-x:auto;scrollbar-width:none;padding:14px 0;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);-webkit-mask:linear-gradient(90deg,transparent 0,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent 100%);mask:linear-gradient(90deg,transparent 0,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent 100%)}
.secbar::-webkit-scrollbar{display:none}
.secbar a{flex:none;position:relative;padding:6px 0;text-decoration:none;font:500 12px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.secbar a:hover{color:var(--ink)}
.secbar a[aria-current]{color:var(--ink);font-weight:600}
.secbar a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor}
.secbar sup{font:500 9.5px/1 var(--mono);letter-spacing:0;margin-left:3px;color:var(--ink-3);vertical-align:super}
@media (min-width:1000px){.secbar{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0;-webkit-mask:none;mask:none}}

.story{margin:0}
.story > a{display:block;text-decoration:none;color:var(--ink)}
.story .cover{margin:0 0 16px;color:var(--ink);--arm:16px;--t:3px}
.story .cover img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--line)}
.story-l .cover{--arm:22px}
.story-l .cover img{aspect-ratio:16/10}
.story .cover::before{transform:translate(-14px,-14px);opacity:0}
.story .cover::after{transform:translate(14px,14px);opacity:0}
@media (hover:hover){
  .story > a:hover .cover::before,.story > a:focus-visible .cover::before{transform:translate(-8px,-8px);opacity:1}
  .story > a:hover .cover::after,.story > a:focus-visible .cover::after{transform:translate(8px,8px);opacity:1}
  .story > a:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
}
.kicker{display:block;margin-bottom:10px;font:500 11.5px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.story h3{margin-bottom:10px}
.story p{margin:0 0 12px;color:var(--ink-2);font-size:16px}
.story .meta{color:var(--ink-3);font-size:11.5px}
.story-l h3{font-size:clamp(28px,3.4vw,44px);line-height:1.06;letter-spacing:-.02em;margin-bottom:14px}
.story-l p{font-size:clamp(17px,1.5vw,19px);max-width:56ch}
.story-s h3{font-size:clamp(19px,1.7vw,22px);line-height:1.22}
.story-xs h3{font-size:18px;line-height:1.25}

.front{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:clamp(28px,4vw,56px)}
.front .side{display:flex;flex-direction:column;gap:28px;padding-left:calc(clamp(28px,4vw,56px) / 2);border-left:1px solid var(--line);margin-left:calc(clamp(28px,4vw,56px) / -2)}
.front .side .story + .story{padding-top:24px;border-top:1px solid var(--line)}
.front .side .cover img{aspect-ratio:16/9}
.sec-block{margin-top:clamp(48px,6vw,80px)}
.sec-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 20px;padding-top:14px;margin-bottom:22px;border-top:1.5px solid var(--ink);font-size:clamp(22px,2.6vw,30px);letter-spacing:-.01em}
.sec-h a{text-decoration:none}
.sec-h a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.sec-h .mono{color:var(--ink-3);font-weight:400}
.sec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:24px clamp(20px,3vw,40px)}
.sec-grid .story-xs{padding-top:16px;border-top:1px solid var(--line)}
.sec-grid.wide{margin-top:clamp(40px,5vw,64px);grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:40px clamp(20px,3vw,40px)}
.empty{color:var(--ink-2)}
@media (max-width:860px){
  .front{grid-template-columns:1fr}
  .front .side{padding-left:0;margin-left:0;border-left:0;padding-top:24px;border-top:1.5px solid var(--ink)}
  .front .side .story{display:block}
}
@media (max-width:560px){
  .front .side .story-s .cover{display:none}
}

/* ===== article page ===== */
.post-cover{margin:0 0 clamp(36px,5vw,52px)}
.post-cover .ph{background:var(--surface);color:var(--ink);padding:clamp(18px,4vw,40px);--arm:20px;--t:3px}
.post-cover img{display:block;width:100%;height:auto;max-height:560px;object-fit:contain}
.post-cover figcaption{margin-top:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em;font-size:11px}

.ad-box{margin-top:clamp(48px,6vw,72px);padding:clamp(24px,4vw,36px);background:var(--surface);position:relative;display:grid;gap:28px}
.ad-box::before{content:"";position:absolute;left:0;top:0;width:18px;height:18px;border-top:3px solid var(--ink);border-left:3px solid var(--ink)}
.ad-box::after{content:"";position:absolute;right:0;bottom:0;width:18px;height:18px;border-bottom:3px solid var(--ink);border-right:3px solid var(--ink)}
.ad-t{margin:0 0 8px;font:600 clamp(20px,2.2vw,24px)/1.2 var(--display);letter-spacing:-.01em;color:var(--ink)}
.ad-copy > p:not(.ad-t){margin:0 0 20px;color:var(--ink-2);max-width:54ch}
.ad-copy .ctas{margin:0}
.wa-btn{gap:9px}
.wa-btn svg{width:18px;height:18px}
.ad-works .eyebrow{margin-bottom:12px}
.rel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rel-grid figure{margin:0}
.rel-grid img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:var(--line)}
.rel-grid figcaption{margin-top:7px;font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;line-height:1.3;overflow-wrap:anywhere;hyphens:auto}

.more{margin-top:clamp(48px,6vw,72px)}
.more ul{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.more li{border-bottom:1px solid var(--line)}
.more a{display:block;padding:18px 0;text-decoration:none;color:var(--ink);font:600 clamp(18px,1.9vw,21px)/1.28 var(--display);letter-spacing:-.005em}
.more a span{display:block;margin-bottom:6px;color:var(--ink-3);font-weight:400;text-transform:uppercase;letter-spacing:.1em;font-size:11px}
.more a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.more a:hover span{text-decoration:none}

/* home: link to the magazine */
.more-row{margin-top:32px;display:flex}

/* footer languages */
.foot-langs{display:flex;flex-wrap:wrap;gap:4px 12px}
.foot-langs a{font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-decoration:none;color:var(--ink-3);padding:4px 0}
.foot-langs a:hover,.foot-langs a[aria-current]{color:var(--ink)}
.foot-langs a[aria-current]{text-decoration:underline;text-underline-offset:4px}

/* phones: two-column portfolio */
@media (max-width:560px){
  .grid,.grid .col{gap:12px}
  .work{--arm:14px}
  .work .kind{top:6px;left:6px;font-size:9px;padding:4px 5px}
  .work figcaption b{font-size:10px;letter-spacing:.1em;line-height:1.3}
}
@media (max-width:560px) and (hover:none){.work figcaption{padding-top:7px}}

/* phones: language code sits next to the menu so the code row has room to open */
@media (max-width:1000px){
  .top .mode{order:1;margin-left:auto}
  .top .lsw{order:2;margin-left:0}
  .top .menu-btn{order:3}
}
@media (max-width:360px){:root{--lsw-w:27px;--lsw-gap:2px}.lsw-list a{font-size:9.5px;letter-spacing:.04em}}

/* ===== services as rows: what exactly can be ordered ===== */
.svc-rows{border-top:1.5px solid var(--ink)}
.svc-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:24px clamp(28px,5vw,80px);padding-block:clamp(28px,4vw,48px);border-bottom:1px solid var(--line)}
.svc-l{display:grid;grid-template-columns:190px minmax(0,1fr);gap:clamp(18px,3vw,32px);align-items:start}
.svc-row .shot{height:108px;display:flex;align-items:center;justify-content:center}
.svc-row .fbox{height:96px;aspect-ratio:var(--ar);display:grid;place-items:center;color:var(--ink);background:var(--surface);--arm:14px}
.svc-row .fbox span{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.svc-row .fbox::before{transform:translate(-8px,-8px)}
.svc-row .fbox::after{transform:translate(8px,8px)}
.svc-row:hover .fbox::before{transform:translate(-3px,-3px)}
.svc-row:hover .fbox::after{transform:translate(3px,3px)}
.svc-txt .spec{display:block;color:var(--ink-3);margin-bottom:10px}
.svc-txt h3{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.01em;margin-bottom:10px}
.svc-txt p{margin:0;color:var(--ink-2);font-size:16px;max-width:42ch}
.svc-list{list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(20px,3vw,40px);align-self:start}
.svc-list li{break-inside:avoid;border-top:1px solid var(--line);padding:10px 0;font-size:15.5px;line-height:1.35}
.svc-list a,.svc-list span{display:flex;justify-content:space-between;gap:10px;color:var(--ink);text-decoration:none}
.svc-list a::after{content:"→";flex:none;color:var(--ink-3);transition:transform .25s var(--ease-focus),color .2s}
.svc-list a:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.svc-list a:hover::after{transform:translateX(4px);color:var(--ink)}
@media (max-width:900px){.svc-row{grid-template-columns:1fr}}
@media (max-width:560px){
  .svc-l{grid-template-columns:110px minmax(0,1fr);gap:18px}
  .svc-row .shot{height:66px;justify-content:flex-start;padding-left:8px}
  .svc-row .fbox{height:54px;--arm:11px}
  .svc-list{columns:1}
}

/* ===== situations: when clients come to us ===== */
.sit{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(30px,4vw,52px) clamp(24px,4vw,56px)}
.sit li{position:relative;padding-top:22px;border-top:1px solid var(--line)}
.sit li::before{content:"";position:absolute;left:0;top:-1px;width:18px;height:18px;border-top:3px solid var(--ink);border-left:3px solid var(--ink)}
.sit b{display:block;margin:4px 0 8px;font:600 clamp(18px,1.7vw,21px)/1.25 var(--display);letter-spacing:-.005em}
.sit p{margin:0;color:var(--ink-2);font-size:16px;max-width:38ch}
@media (max-width:900px){.sit{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.sit{grid-template-columns:1fr;gap:28px}}

/* ===== home: latest articles as cards ===== */
.hposts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.hpost a{display:block;text-decoration:none;color:var(--ink)}
.hpost .cover{margin:0 0 16px;color:var(--ink);--arm:16px;--t:3px}
.hpost .cover img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--line)}
.hpost .cover::before{transform:translate(-14px,-14px);opacity:0}
.hpost .cover::after{transform:translate(14px,14px);opacity:0}
@media (hover:hover){
  .hpost a:hover .cover::before,.hpost a:focus-visible .cover::before{transform:translate(-8px,-8px);opacity:1}
  .hpost a:hover .cover::after,.hpost a:focus-visible .cover::after{transform:translate(8px,8px);opacity:1}
  .hpost a:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
}
.hpost h3{font-size:clamp(19px,1.8vw,22px);line-height:1.22;margin-bottom:10px}
.hpost p{margin:0 0 12px;color:var(--ink-2);font-size:15.5px}
.hpost .meta{color:var(--ink-3);font-size:11.5px}
@media (max-width:760px){
  .hposts{grid-template-columns:1fr;gap:0;border-top:1.5px solid var(--ink)}
  .hpost a{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:start;padding:18px 0;border-bottom:1px solid var(--line)}
  .hpost .cover{margin:0}
  .hpost .cover img{aspect-ratio:1/1}
  .hpost .cover::before,.hpost .cover::after{display:none}
  .hpost .kicker{margin-bottom:6px}
  .hpost h3{font-size:17px;margin-bottom:8px}
  .hpost p{display:none}
}

/* ===== footer: statement + link columns ===== */
footer.site-foot{background:var(--band);color:var(--band-ink);border-top:0;padding-top:clamp(56px,7vw,96px)}
footer.site-foot .wrap{display:block}
.ft-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:44px clamp(32px,6vw,96px);padding-bottom:clamp(40px,5vw,64px);border-bottom:1px solid var(--band-line)}
.ft-t{margin:0 0 22px;font:600 clamp(26px,3vw,40px)/1.12 var(--display);letter-spacing:-.02em;max-width:17ch;color:var(--band-ink)}
.ft-s{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0;color:var(--band-ink-2);text-transform:uppercase;letter-spacing:.12em;font-size:11.5px}
.ft-s i{display:block;width:40px;height:1px;background:currentColor}
.ft-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px}
.ft-h{margin:0 0 16px;font:600 11.5px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--band-ink)}
.ft-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ft-cols a{color:var(--band-ink-2);text-decoration:none;font-size:14.5px;line-height:1.3;overflow-wrap:anywhere}
.ft-cols a:hover{color:var(--band-ink);text-decoration:underline;text-underline-offset:3px}
.ft-bot{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;padding-top:24px;color:var(--band-ink-2)}
.ft-bot .brand{color:var(--band-ink)}
.ft-bot .brand svg{height:14px}
.site-foot .foot-langs a{color:var(--band-ink-2)}
.site-foot .foot-langs a:hover,.site-foot .foot-langs a[aria-current]{color:var(--band-ink)}
.chat-fab{box-shadow:0 6px 22px -6px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.14)}
@media (max-width:980px){.ft-top{grid-template-columns:1fr}}
@media (max-width:620px){.ft-cols{grid-template-columns:1fr 1fr}}
.svc-txt{min-width:0}
.svc-txt h3{overflow-wrap:break-word;hyphens:auto}
@media (max-width:400px){
  .svc-l{grid-template-columns:88px minmax(0,1fr);gap:14px}
  .svc-row .shot{padding-left:6px}
  .svc-row .fbox{height:44px;--arm:9px;--t:2.5px}
  .svc-row .fbox span{font-size:10px}
}

/* ===== circular text + call to action above the footer ===== */
.ring-cta{padding-block:clamp(64px,9vw,120px);border-top:1px solid var(--line);text-align:center}
.ring-cta .wrap{display:flex;flex-direction:column;align-items:center;gap:clamp(28px,4vw,40px)}
.ring{width:clamp(200px,20vw,250px);aspect-ratio:1;color:var(--ink)}
.ring svg{display:block;width:100%;height:100%;overflow:visible}
.ring text{font-family:var(--display);font-weight:600;letter-spacing:.06em;fill:currentColor;white-space:pre}
.ring-rot{transform-box:view-box;transform-origin:100px 100px;will-change:transform}
.ring-btn{min-height:56px;padding:0 34px;letter-spacing:.2em}

/* ===== header: "send a brief" button ===== */
.nav a.nav-cta{display:none}
@media (min-width:1240px){
  .nav a.nav-cta{display:inline-flex;align-items:center;margin-left:4px;padding:9px 14px;background:var(--ink);color:var(--paper);letter-spacing:.12em;transition:background-color .2s,color .2s}
  .nav a.nav-cta:hover{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
}
@media (max-width:1000px){
  .nav a.nav-cta{display:flex;justify-content:center;margin-top:14px;padding:15px 0;background:var(--ink);color:var(--paper);border-bottom:0}
}
.svc-more{display:inline-block;margin-top:14px;font:600 12px/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:3px}
.svc-more:hover{opacity:.7}

/* ===== service landing page ===== */
.lp-hero{padding-block:clamp(28px,5vw,64px) clamp(56px,8vw,104px)}
.lp-hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,88px);align-items:center}
.lp-hero h1{font-size:clamp(34px,4.6vw,60px);line-height:1.04;letter-spacing:-.025em;margin-bottom:22px}
.lp-lead{margin:0 0 28px;color:var(--ink-2);font-size:clamp(17px,1.5vw,19px);max-width:52ch}
.lp-trust{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px}
.lp-trust li{position:relative;padding-left:20px;font:500 12.5px/1.3 var(--mono);letter-spacing:.04em;color:var(--ink-2)}
.lp-trust li::before{content:"";position:absolute;left:0;top:2px;width:10px;height:10px;border-top:2px solid var(--ink);border-left:2px solid var(--ink)}
.lp-fig{margin:0;color:var(--ink);--arm:22px;--t:3px;padding:14px}
.lp-fig img,.lp-fig video{display:block;width:100%;height:auto;background:var(--line)}
.lp-list{columns:3}
.lp-points{grid-template-columns:repeat(3,minmax(0,1fr))}
.btn-light{background:var(--band-ink);color:var(--band);border-color:var(--band-ink)}
.btn-light:hover{background:transparent;color:var(--band-ink)}
.lp-band-cta{margin-top:clamp(36px,5vw,56px)}
.lp-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px clamp(32px,6vw,88px);align-items:start}
.faq{border-top:1.5px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{position:relative;list-style:none;cursor:pointer;padding:20px 44px 20px 0;font:600 clamp(17px,1.6vw,20px)/1.3 var(--display);letter-spacing:-.005em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;margin-top:-8px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);transition:transform .25s var(--ease-focus)}
.faq details[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.faq details p{margin:0 0 22px;color:var(--ink-2);max-width:62ch}
@media (max-width:900px){
  .lp-hero .wrap{grid-template-columns:1fr}
  .lp-fig{max-width:520px}
  .lp-list{columns:2}
  .lp-points{grid-template-columns:1fr}
  .lp-faq{grid-template-columns:1fr}
}
@media (max-width:560px){.lp-list{columns:1}}

/* ===== quick brief form ===== */
.qb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px clamp(24px,4vw,56px);padding:clamp(22px,3.5vw,40px);background:var(--surface);position:relative}
.qb::before,.qb::after{content:"";position:absolute;width:20px;height:20px}
.qb::before{left:0;top:0;border-top:3px solid var(--ink);border-left:3px solid var(--ink)}
.qb::after{right:0;bottom:0;border-bottom:3px solid var(--ink);border-right:3px solid var(--ink)}
.qb-wide{grid-column:1/-1}
.qb-f{margin:0;padding:0;border:0;min-width:0}
.qb legend,.qb-l{display:block;padding:0;margin-bottom:10px;font:600 11.5px/1.2 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.qb-opts{display:flex;flex-wrap:wrap;gap:8px}
.qb-opts label{position:relative;cursor:pointer}
.qb-opts input{position:absolute;opacity:0;width:1px;height:1px}
.qb-opts span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line);background:var(--paper);font-size:15px;line-height:1.2;color:var(--ink);transition:background-color .15s,color .15s,border-color .15s}
.qb-opts label:hover span{border-color:var(--ink)}
.qb-opts input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.qb-opts input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}
.qb-field input,.qb-field textarea{display:block;width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:0;background:var(--paper);color:var(--ink);font:inherit;font-size:16px}
.qb-field input:focus,.qb-field textarea:focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}
.qb-field textarea{resize:vertical;min-height:84px}
.qb-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.qb-actions .btn{gap:10px}
.qb-actions .btn svg{width:18px;height:18px}
.qb-mail{color:var(--ink-2);font-size:15px}
.qb-err{flex-basis:100%;margin:0;color:#B3261E;font-size:14.5px}
:root[data-mode="dark"] .qb-err{color:#F2B8B5}
@media (max-width:640px){.qb{grid-template-columns:1fr}.qb-opts span{min-height:38px;padding:0 12px;font-size:14.5px}}
.lp-copy{min-width:0}
.lp-hero h1{overflow-wrap:break-word;hyphens:auto}
@media (max-width:560px){.lp-hero h1{font-size:clamp(26px,8vw,34px)}}

/* ===== pricing packages with currency switch ===== */
.pk-head-r{display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:46ch}
.pk-head-r p{margin:0;color:var(--ink-2)}
.pk-cur{display:inline-flex;border:1px solid var(--line)}
.pk-cur button{padding:9px 14px;border:0;background:transparent;color:var(--ink-3);font:600 11.5px/1 var(--display);letter-spacing:.12em;cursor:pointer;transition:background-color .15s,color .15s}
.pk-cur button:hover{color:var(--ink)}
.pk-cur button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.pk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);align-items:stretch;padding-top:12px}
.pk{position:relative;display:flex;flex-direction:column;padding:clamp(22px,2.6vw,32px);background:var(--surface);border:1px solid var(--line)}
.pk.pop{border:1.5px solid var(--ink)}
.pk-badge{position:absolute;top:-11px;left:22px;padding:5px 9px;background:var(--ink);color:var(--paper);font-size:10.5px;text-transform:uppercase;letter-spacing:.12em}
.pk h3{font-size:clamp(20px,2vw,24px);margin-bottom:6px}
.pk-d{margin:0 0 18px;color:var(--ink-2);font-size:15.5px}
.pk-price{margin:0 0 22px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.pk-from{font:500 12px/1 var(--mono);color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em}
.pk-price b{font:600 clamp(30px,3.2vw,40px)/1 var(--display);letter-spacing:-.02em;white-space:nowrap}
.pk-grid[data-cur="EUR"] [data-c]:not([data-c="EUR"]),
.pk-grid[data-cur="SEK"] [data-c]:not([data-c="SEK"]),
.pk-grid[data-cur="NOK"] [data-c]:not([data-c="NOK"]){display:none}
.pk ul{list-style:none;margin:0 0 26px;padding:0;display:grid;align-content:start;gap:9px;flex:1}
.pk li{position:relative;padding-left:20px;font-size:15.5px;line-height:1.35}
.pk li::before{content:"";position:absolute;left:0;top:5px;width:9px;height:9px;border-top:2px solid var(--ink);border-left:2px solid var(--ink)}
.pk-note{margin:22px 0 0;color:var(--ink-3);font-size:14px;max-width:80ch}
@media (max-width:900px){.pk-grid{grid-template-columns:1fr;gap:26px}}

/* web page hero: a small drawn browser window */
.lp-web{aspect-ratio:16/11;display:flex;flex-direction:column;padding:14px}
.lp-web .lw-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-bottom:0}
.lp-web .lw-bar i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.lp-web .lw-bar span{margin-left:10px;font:500 11px/1 var(--mono);color:var(--ink-3)}
.lp-web .lw-body{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto 1fr;gap:12px;padding:clamp(16px,2.4vw,28px);background:var(--surface);border:1px solid var(--line)}
.lp-web .lw-body b{grid-column:1/3;height:clamp(12px,1.4vw,18px);background:var(--ink)}
.lp-web .lw-body b:nth-child(2){width:72%}
.lp-web .lw-body b:nth-child(3){grid-column:1/2;width:78%;height:clamp(22px,2.4vw,32px);margin-top:8px}
.lp-web .lw-body em{grid-column:3;grid-row:1/4;background:var(--line)}
.lp-web .lw-body span{min-height:54px;background:var(--paper);border:1px solid var(--line)}

/* ===== "Why FORMAT?" comparison with sliding corner-frame tabs ===== */
.cmp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-bottom:clamp(28px,4vw,44px)}
.cmp-lbl{color:var(--ink-3);text-transform:uppercase;letter-spacing:.12em;font-size:11.5px}
.cmp-tabs{position:relative;display:flex;flex-wrap:wrap;gap:4px;max-width:100%;padding:6px}
.cmp-tabs::-webkit-scrollbar{display:none}
.cmp-tabs button{position:relative;z-index:1;flex:none;padding:12px 18px;border:0;background:none;color:var(--ink-3);font:600 clamp(15px,1.5vw,18px)/1.1 var(--display);letter-spacing:-.005em;cursor:pointer;transition:color .25s}
.cmp-tabs button:hover{color:var(--ink-2)}
.cmp-tabs button[aria-selected="true"]{color:var(--ink)}
.cmp-tabs button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.cmp-ind{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;transition:transform .45s var(--ease-focus),width .45s var(--ease-focus),height .45s var(--ease-focus)}
.cmp-ind::before,.cmp-ind::after{content:"";position:absolute;width:12px;height:12px;border:0 solid var(--ink)}
.cmp-ind::before{left:0;top:0;border-top-width:3px;border-left-width:3px}
.cmp-ind::after{right:0;bottom:0;border-bottom-width:3px;border-right-width:3px}
html:not(.cmp-js) .cmp-ind{display:none}
.cmp-panel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px clamp(28px,5vw,72px);padding-top:clamp(24px,3vw,36px);border-top:1.5px solid var(--ink)}
html:not(.cmp-js) .cmp-panel + .cmp-panel{margin-top:clamp(40px,5vw,64px)}
html.cmp-js .cmp-panel[data-off]{display:none}
.cmp-vs{grid-column:1;margin:0;color:var(--ink-3);text-transform:uppercase;letter-spacing:.12em;font-size:11.5px}
.cmp-vs i{font-style:normal;color:var(--ink)}
.cmp-h{grid-column:1;font-size:clamp(26px,3vw,40px);line-height:1.1;letter-spacing:-.02em;max-width:16ch}
.cmp-pts{grid-column:2;grid-row:1/3;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px clamp(20px,3vw,40px)}
.cmp-pts li{position:relative;padding-left:26px}
.cmp-pts li::before{content:"";position:absolute;left:0;top:4px;width:12px;height:12px;border-top:3px solid var(--ink);border-left:3px solid var(--ink)}
.cmp-pts b{display:block;margin-bottom:6px;font:600 clamp(17px,1.5vw,19px)/1.25 var(--display)}
.cmp-pts p{margin:0;color:var(--ink-2);font-size:15.5px}
.cmp-panel.in .cmp-h,.cmp-panel.in .cmp-pts li{animation:cmpIn .5s var(--ease-focus) both}
.cmp-panel.in .cmp-pts li:nth-child(2){animation-delay:.05s}
.cmp-panel.in .cmp-pts li:nth-child(3){animation-delay:.1s}
.cmp-panel.in .cmp-pts li:nth-child(4){animation-delay:.15s}
@keyframes cmpIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cmp-cta{margin-top:clamp(32px,4vw,48px)}
@media (prefers-reduced-motion:reduce){.cmp-panel.in *{animation:none!important}.cmp-ind{transition:none}}
@media (max-width:900px){
  .cmp-panel{grid-template-columns:1fr}
  .cmp-pts{grid-column:1;grid-row:auto}
}
@media (max-width:560px){
  .cmp-bar{flex-direction:column;align-items:flex-start;gap:6px}
  .cmp-tabs{margin-left:-6px;max-width:calc(100% + 12px);gap:2px}
  .cmp-tabs button{padding:11px 13px}
  .cmp-pts{grid-template-columns:1fr;gap:22px}
}

/* ===== conversion helpers ===== */
.hero-trust{margin-top:22px}
.ind{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:-10px 0 clamp(26px,3.5vw,40px)}
.ind span{margin-right:6px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.12em;font-size:11.5px}
.ind b{padding:6px 11px;border:1px solid var(--line);font:500 13.5px/1.2 var(--body);color:var(--ink-2)}
.qb-noob{flex-basis:100%;margin:0;color:var(--ink-3);font-size:12px}
.qb-done{flex-basis:100%;margin:0;padding:12px 14px;background:var(--paper);border-left:3px solid var(--ink);font-size:15px}

/* chat prompt */
.nudge{position:fixed;z-index:40;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(86px + env(safe-area-inset-bottom,0px));display:flex;align-items:flex-start;gap:4px;max-width:min(300px,calc(100vw - 36px));padding:12px 8px 12px 16px;background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:0 14px 32px -16px rgba(0,0,0,.35);opacity:0;transform:translateY(8px);transition:opacity .25s,transform .35s var(--ease-focus),bottom .3s}
.nudge.on{opacity:1;transform:none}
.nudge::after{content:"";position:absolute;right:22px;bottom:-7px;width:12px;height:12px;background:var(--surface);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.nudge-go{flex:1;padding:0;border:0;background:none;color:inherit;font:500 14.5px/1.4 var(--body);text-align:left;cursor:pointer}
.nudge-go:hover{text-decoration:underline;text-underline-offset:3px}
.nudge-x{flex:none;display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;background:none;color:var(--ink-3);cursor:pointer}

/* phones: bottom action bar */
.mbar{display:none}
@media (max-width:760px){
  .mbar{position:fixed;z-index:39;left:0;right:0;bottom:0;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:1px;padding-bottom:env(safe-area-inset-bottom,0px);background:var(--line);border-top:1px solid var(--line);transform:translateY(105%);transition:transform .35s var(--ease-focus)}
  .mbar.on{transform:none}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;background:var(--paper);color:var(--ink);text-decoration:none;font:600 12px/1 var(--display);letter-spacing:.12em;text-transform:uppercase}
  .mbar a svg{width:18px;height:18px;flex:none}
  .mbar a.mb-wa{background:var(--ink);color:var(--paper)}
  html.mbar-on .chat-fab{bottom:calc(18px + 58px + env(safe-area-inset-bottom,0px))}
  html.mbar-on .nudge{bottom:calc(86px + 58px + env(safe-area-inset-bottom,0px))}
  .chat-fab{transition:padding .35s var(--ease-focus),transform .2s,bottom .35s var(--ease-focus)}
}

/* ---------- 'from' prices on service list items + response time ---------- */
.svc-list .t{display:block;flex:1 1 auto;min-width:0}
.svc-list .fp{flex:none;align-self:baseline;font:500 12px/1.35 var(--mono);font-style:normal;letter-spacing:.02em;color:var(--ink-3);white-space:nowrap}
.svc-list .fp b{font-weight:600;color:var(--ink)}
html[data-cur="EUR"] .fp [data-c]:not([data-c="EUR"]),
html[data-cur="SEK"] .fp [data-c]:not([data-c="SEK"]),
html[data-cur="NOK"] .fp [data-c]:not([data-c="NOK"]){display:none}
.fp-note{margin:16px 0 0;font-size:12px;line-height:1.5;color:var(--ink-3)}
.svc-list li > a:has(> .fp),.svc-list li > span:has(> .fp){align-items:baseline}
.svc-list li > span:has(> .fp)::after{content:"→";flex:none;visibility:hidden}
.svc-list .fp{padding-top:0}