/* W2 family — one stylesheet for thew2collective.com, w2create.co.uk, w2systems.co.uk and w2taps.com (v2, light) */
:root{
  --ink:#0e1111;
  --text:#2c3130;
  --muted:#6b7170;
  --line:#e7e7e3;
  --soft:#f4f4f1;
  --panel:#eef0ec;
  --bg:#ffffff;
  --focus:#2563eb;
  --wrap:1240px;
  --gut:32px;
  --r:10px;
  --R:28px;
  --shadow:0 1px 2px rgba(14,17,17,.06),0 24px 48px -18px rgba(14,17,17,.22);
  --font:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3,h4{color:var(--ink);margin:0;font-weight:600;text-wrap:balance}
h1{font-size:clamp(2.7rem,6.6vw,5.6rem);line-height:.98;letter-spacing:-.045em}
h2{font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.04;letter-spacing:-.04em}
h3{font-size:1.3rem;line-height:1.25;letter-spacing:-.015em}
ul,ol{margin:0;padding:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:var(--r);z-index:100}
.skip:focus{left:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.muted{color:var(--muted)}
.lead{font-size:1.22rem;line-height:1.55;color:var(--muted);max-width:38em}

/* Header */
.hd{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.hd.is-scrolled{border-bottom-color:var(--line)}
.hd__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;height:76px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);justify-self:start}
.logo img{width:46px;height:auto}
.logo span{font-weight:600;font-size:1.25rem;letter-spacing:-.025em;line-height:1}
.nav{display:flex;align-items:center;gap:30px}
.nav a{text-decoration:none;font-size:.97rem;color:var(--text);font-weight:500}
.nav a:hover{color:var(--ink)}
.nav a[aria-current=page]{color:var(--ink);text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1.5px}
.hd__end{display:flex;align-items:center;gap:16px;justify-self:end}
.lang{font-size:.88rem;font-weight:600;text-decoration:none;color:var(--muted)}
.lang:hover{color:var(--ink)}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:8px 14px;font:600 .92rem var(--font);color:var(--ink);cursor:pointer}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:13px 22px;border-radius:8px;background:var(--ink);color:#fff;font:600 1rem/1.2 var(--font);text-decoration:none;border:1px solid var(--ink);cursor:pointer;transition:background .15s,transform .15s}
.btn:hover{background:#2b302f}
.btn:active{transform:translateY(1px)}
.btn--sm{min-height:42px;padding:10px 18px;font-size:.93rem}
.btn--line{background:#fff;color:var(--ink);border-color:#d6d6d1}
.btn--line:hover{background:var(--soft);border-color:#c7c7c1}
.arrow{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-weight:600;color:var(--ink)}
.arrow::after{content:"→";transition:transform .15s}
.arrow:hover::after{transform:translateX(3px)}

/* Hero */
.hero{padding:80px 0 0}
.hero__top{display:grid;grid-template-columns:1.35fr 1fr;gap:64px;align-items:end}
.hero h1{margin:0;font-size:clamp(2.7rem,5.4vw,4.75rem)}
.hero h1 span{display:block}
.hero .lead{margin:0;max-width:30em;font-size:1.15rem}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero__note{margin-top:16px;font-size:.9rem;color:var(--muted)}
.hero__note a{color:var(--ink);text-underline-offset:3px}

/* Split hero (v4): copy left, product scene right, one screen tall */
.hero__split{display:grid;grid-template-columns:1fr 1.12fr;gap:56px;align-items:center}
.hero__copy h1{font-size:clamp(2.6rem,4.3vw,4.1rem);line-height:1;margin:0}
.hero__copy .lead{margin-top:22px;font-size:1.12rem;max-width:30em}
.hero__copy .hero__acts{margin-top:30px}
.hero__vis .stage{margin:0;padding:28px 28px 0;border-radius:24px}
.hero__vis .stage .stage__phone{width:29%;right:4%;bottom:-40px}
.hero__vis .cap{font-size:.82rem}
.hero__vis .scene{aspect-ratio:5/4}

/* Short closing block */
.cta{display:grid;grid-template-columns:1.3fr auto;gap:40px;align-items:center;background:var(--soft);border-radius:var(--R);padding:56px 64px}
.cta h2{font-size:clamp(1.8rem,3vw,2.6rem)}
.cta p{color:var(--muted);margin:12px 0 0;font-size:1.08rem;max-width:34em}
.cta__acts{display:flex;gap:12px;flex-wrap:wrap}

/* Big cards that send people to the pages */
.bcards{display:grid;gap:24px}
.bcards--2{grid-template-columns:1fr 1fr}
.bcards--4{grid-template-columns:repeat(4,1fr);gap:20px}
.bcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:20px;overflow:hidden;text-decoration:none;color:inherit;background:#fff;transition:border-color .15s}
.bcard:hover{border-color:var(--ink)}
.bcard__img{aspect-ratio:16/10;background:var(--panel);overflow:hidden}
.bcard__img img{width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.bcard:hover .bcard__img img{transform:scale(1.03)}
.bcard__img--phone{display:flex;justify-content:center;align-items:flex-start;padding-top:32px}
.bcard__img--phone .phone{width:34%;flex:none;box-shadow:0 2px 4px rgba(0,0,0,.18),0 24px 40px -20px rgba(14,17,17,.4)}
.bcard__img--phone .phone img{height:auto;object-fit:initial}
.bcard:hover .bcard__img--phone img{transform:none}
.bcard__txt{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.bcard__by{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--muted);margin-bottom:10px;font-weight:500}
.bcard__by img{width:26px;height:auto}
.bcard h3{font-size:1.3rem}
.bcard p{margin:6px 0 0;color:var(--muted)}
.bcard .arrow{margin-top:auto;padding-top:16px}
.lead-block{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:end;margin-bottom:40px}
.lead-block p{color:var(--muted);font-size:1.12rem;margin:0;max-width:32em}
.lead-block .bcard__by{margin-bottom:14px}

/* Stage: layered product shots */
.stage{position:relative;margin:56px 0 0;background:var(--panel);border-radius:var(--R);padding:64px 64px 0;overflow:hidden}
.stage--warm{background:#f1ede6}
.stage--cool{background:#e9eef0}
.stage--dark{background:#121716}
.stage--dark + .cap{color:var(--muted)}
.stage__main{position:relative;z-index:1;max-width:980px;margin:0 auto}
.stage .stage__phone{position:absolute;z-index:3;right:6%;bottom:-48px;width:23%;max-width:268px}
.stage .stage__card{position:absolute;z-index:2;left:4%;bottom:56px;width:36%;max-width:410px;border-radius:16px;box-shadow:var(--shadow)}
.stage__tag{position:absolute;z-index:4;left:20px;top:18px;font-size:.78rem;color:var(--muted);background:rgba(255,255,255,.7);border-radius:999px;padding:4px 10px}
.browser{border-radius:12px 12px 0 0;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.browser--full{border-radius:12px}
.browser__bar{height:36px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#f7f7f5;border-bottom:1px solid #ececea}
.browser__bar i{width:10px;height:10px;border-radius:50%;background:#dcdcd8}
.browser__bar span{margin:0 auto;font-size:12px;color:#7a7f7e;background:#fff;border:1px solid #ececea;border-radius:7px;padding:3px 40px}
.browser img{width:100%}
.phone{position:relative;background:#0f1111;border-radius:15% / 7%;padding:3.2%;box-shadow:0 2px 4px rgba(0,0,0,.2),0 40px 60px -24px rgba(14,17,17,.45)}
.phone img{border-radius:12% / 5.6%;width:100%}
.phone::before{content:"";position:absolute;left:50%;top:4.6%;width:28%;height:3.4%;transform:translateX(-50%);background:#0f1111;border-radius:999px;z-index:1}

/* Caption under example scenes */
.cap{margin:14px 0 0;font-size:.88rem;color:var(--muted)}

/* Services grid ("everything we do") */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 32px}
.svcs--2{grid-template-columns:repeat(2,1fr)}
.svcs--4{grid-template-columns:repeat(4,1fr);gap:40px 24px}
.svcs--4 .svc__img{aspect-ratio:4/3}
.svc{display:block;text-decoration:none;color:inherit}
.svc__img{aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--panel);margin-bottom:18px}
.svc__img img{width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.svc:hover .svc__img img{transform:scale(1.03)}
.svc h3{margin-bottom:6px}
.svc p{margin:0;color:var(--muted)}
.svc:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}

/* Brand family */
.brands{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.brand{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;align-items:start;padding:24px;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:inherit;transition:border-color .15s}
.brand:hover{border-color:var(--ink)}
.brand img{width:44px;height:auto;margin-top:2px}
.brand b{display:block;font-size:1.1rem;color:var(--ink)}
.brand p{margin:4px 0 0;color:var(--muted);font-size:.95rem}
.brand .arrow{grid-column:2;font-size:.9rem;margin-top:8px}

/* Story timeline */
.story{list-style:none;border-top:1px solid var(--line)}
.story li{display:grid;grid-template-columns:220px 1fr;gap:32px;padding:30px 0;border-bottom:1px solid var(--line)}
.story__lbl{font-weight:600;color:var(--ink)}
.story h3{margin-bottom:8px}
.story p{margin:0;color:var(--muted);max-width:40em}

/* Founder note */
.founder{display:grid;grid-template-columns:5fr 7fr;gap:72px;align-items:start}
.founder blockquote{margin:0;font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.45;color:var(--ink);letter-spacing:-.015em}
.founder blockquote p{margin:0 0 .9em}
.founder .sig{margin-top:24px;font-weight:600;color:var(--ink)}
.founder .sig span{display:block;font-weight:400;color:var(--muted)}
.founder .sig a{font-weight:500;color:var(--ink);text-underline-offset:3px}

/* Team */
.people{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 40px}
.person{border-top:1px solid var(--line);padding-top:18px}
.person b{display:block;color:var(--ink);font-size:1.1rem}
.person span{color:var(--muted)}
.person p{margin:10px 0 0}
.person a{color:var(--ink);text-underline-offset:3px}

/* Sector photo with product inset (Taps) */
.scene{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/3;background:var(--panel)}
.scene > img{width:100%;height:100%;object-fit:cover}
.scene .inset{position:absolute;right:20px;bottom:20px;width:30%;height:auto;border-radius:12px;box-shadow:var(--shadow);border:4px solid #fff;aspect-ratio:4/3;object-fit:cover;background:#fff}

/* Dropdown menu */
.dd{position:relative}
.dd__top{text-decoration:none;font-size:.97rem;color:var(--text);font-weight:500}
.dd__top::after{content:"";display:inline-block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:0 0 3px 8px}
.dd__menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:18px;visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;z-index:60}
.dd:hover .dd__menu,.dd:focus-within .dd__menu{visibility:visible;opacity:1}
.dd__panel{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:2px;width:600px}
.nav .dd__panel a{display:block;padding:12px 14px;border-radius:10px;text-decoration:none}
.nav .dd__panel a:hover,.nav .dd__panel a[aria-current=page]{background:var(--soft);text-decoration:none}
.dd__panel b{display:block;color:var(--ink);font-weight:600;font-size:.97rem}
.dd__panel small{display:block;color:var(--muted);font-size:.86rem;line-height:1.4;margin-top:2px;font-weight:400}

/* Facts */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:96px}
.facts div{padding:32px 28px;border-left:1px solid var(--line)}
.facts div:first-child{border-left:0;padding-left:0}
.facts b{display:block;font-size:clamp(2rem,3.4vw,2.9rem);font-weight:600;letter-spacing:-.04em;color:var(--ink);line-height:1}
.facts span{display:block;margin-top:10px;color:var(--muted);font-size:.97rem;line-height:1.45}

/* Sections */
.sec{padding:88px 0}
.sec--tight{padding:60px 0}
.sec--soft{background:var(--soft)}
.head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:40px}
.head p{color:var(--muted);font-size:1.12rem;margin:0;max-width:30em}
.head--c{display:block;text-align:center;max-width:46em;margin:0 auto 40px}
.head--c p{margin:18px auto 0}

/* Feature rows */
.feat{display:grid;grid-template-columns:5fr 7fr;gap:72px;align-items:center;padding:56px 0}
.feat + .feat{border-top:1px solid var(--line)}
.feat--flip{grid-template-columns:7fr 5fr}
.feat--flip .feat__text{order:2}
.feat h3{font-size:clamp(1.7rem,2.6vw,2.3rem);letter-spacing:-.035em;line-height:1.08}
.feat__text p{margin:18px 0 0;color:var(--muted);font-size:1.08rem}
.feat ul{list-style:none;margin:24px 0 28px;display:grid;gap:10px}
.feat li{position:relative;padding-left:28px}
.feat li::before{content:"";position:absolute;left:2px;top:.55em;width:12px;height:7px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg)}
.panel{position:relative;background:var(--panel);border-radius:22px;padding:48px 48px 0;overflow:hidden}
.panel--warm{background:#f1ede6}
.panel--cool{background:#e9eef0}
.panel--dark{background:#121716}
.panel--pad{padding:48px}
.panel .phone{width:42%;margin:0 auto -64px}
.panel__duo{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;align-items:end}
.panel__duo .phone{width:100%;margin:0 0 -56px}
.panel__duo img.card-img{border-radius:14px;box-shadow:var(--shadow);margin-bottom:48px}
.panel .browser + .phone{position:absolute;right:7%;bottom:-40px;width:26%;margin:0}

/* Steps */
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.steps li{border-top:2px solid var(--ink);padding-top:22px}
.steps__lbl{display:block;font-size:.92rem;color:var(--muted);font-weight:500;margin-bottom:10px}
.steps h3{margin-bottom:10px}
.steps p{margin:0;color:var(--muted)}

/* Grids and lists */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:32px 56px}
.grid2 > div{border-top:1px solid var(--line);padding-top:22px}
.sec--soft .grid2 > div{border-top-color:#dcdcd6}
.grid2 h3{margin-bottom:8px}
.grid2 p{margin:0;color:var(--muted)}
.checks{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 40px;border-top:1px solid var(--line)}
.checks--one{grid-template-columns:1fr}
.checks li{padding:17px 0 17px 30px;border-bottom:1px solid var(--line);position:relative}
.checks li::before{content:"";position:absolute;left:3px;top:1.5em;width:12px;height:7px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg)}
.rows{list-style:none;border-top:1px solid var(--line)}
.rows > li{display:grid;grid-template-columns:1fr 1.6fr;gap:32px;padding:30px 0;border-bottom:1px solid var(--line)}
.rows h3{font-size:1.3rem}
.rows p{margin:0;color:var(--muted)}
.rows .arrow{margin-top:14px}
.inline-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.inline-list li{background:var(--soft);border-radius:8px;padding:9px 16px;font-size:.97rem;color:var(--ink)}
.sec--soft .inline-list li{background:#fff}
.note{background:var(--soft);border-radius:16px;padding:20px 24px;margin-top:28px}
.note p{margin:0}
.split{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.split__head{position:sticky;top:116px}
.split__head p{margin-top:18px;color:var(--muted);font-size:1.08rem}

/* Photo split (Madeira) */
.photo-split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.photo-split img{width:100%;aspect-ratio:4/3.4;object-fit:cover;border-radius:var(--R)}
.photo-split p{color:var(--muted);font-size:1.12rem}
.photo-split .sig{margin-top:28px;color:var(--ink);font-weight:600}
.photo-split .sig span{display:block;font-weight:400;color:var(--muted)}

/* Prose */
.prose{max-width:44em}
.prose h2{font-size:1.55rem;letter-spacing:-.02em;margin:48px 0 12px}
.prose h2:first-child{margin-top:0}
.prose ul{padding-left:1.2em;margin:0 0 1em}
.prose li{margin:.35em 0}
.prose a{text-underline-offset:3px}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;font-weight:600;color:var(--ink);font-size:1.12rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;margin-top:-6.5px;background:linear-gradient(var(--ink),var(--ink)) center/13px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 13px no-repeat;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details > div{padding:0 0 26px;max-width:42em;color:var(--muted)}
.faq details > div p:last-child{margin:0}

/* Form */
.card{border:1px solid var(--line);border-radius:22px;background:#fff;padding:36px}
.card h2,.card h3{font-size:1.55rem;letter-spacing:-.025em}
.card > p{margin:8px 0 24px;color:var(--muted)}
.form{display:grid;gap:16px}
.form label,.form legend{display:block;font-weight:500;font-size:.93rem;color:var(--ink);margin-bottom:7px;padding:0}
.form .opt{font-weight:400;color:var(--muted)}
.form input[type=text],.form input[type=tel],.form input[type=email],.form textarea{width:100%;font:400 1rem var(--font);color:var(--ink);background:#fff;border:1px solid #d4d4cf;border-radius:12px;padding:13px 15px;min-height:50px;transition:border-color .15s,box-shadow .15s}
.form textarea{min-height:110px;resize:vertical}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(14,17,17,.07)}
.form fieldset{border:0;margin:0;padding:0;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{margin:0;font-weight:400}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips span{display:inline-block;border:1px solid #d4d4cf;border-radius:8px;padding:9px 15px;font-size:.95rem;cursor:pointer;background:#fff;color:var(--text);transition:all .15s}
.chips input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff}
.chips input:focus-visible + span{outline:2px solid var(--focus);outline-offset:2px}
.form .btn{width:100%;margin-top:6px}
.small{font-size:.85rem;color:var(--muted);line-height:1.5}
.small a{color:var(--muted)}
.hp{position:absolute;left:-5000px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* Closing form block */

/* Page hero (inner pages) */
.phero{padding:80px 0 0}
.phero__grid{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center}
.phero h1{font-size:clamp(2.4rem,5vw,4.4rem)}
.phero .lead{margin-top:24px}
.phero .hero__acts{justify-content:flex-start}
.phero--text{padding:80px 0 8px}
.phero--text h1{max-width:14em}

/* Products (Taps) */
.prods{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.prod{background:var(--soft);border-radius:22px;overflow:hidden}
.prod img{width:100%;aspect-ratio:4/3;object-fit:cover}
.prod div{padding:26px 28px 30px}
.prod h3{margin-bottom:6px}
.prod p{margin:0;color:var(--muted)}
.prod .arrow{margin-top:14px}
.prods--4{grid-template-columns:repeat(4,1fr);gap:20px}
.prods--4 .prod div{padding:18px 20px 22px}
.prods--4 .prod h3{font-size:1.1rem}
.prods--4 .prod p{font-size:.96rem}
.gallery{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr;gap:16px;margin-top:64px}
.gallery img{width:100%;height:100%;object-fit:cover;border-radius:22px}
.gallery img:first-child{grid-row:1/3}
.photo{border-radius:22px;width:100%;aspect-ratio:4/3;object-fit:cover}

/* Thanks / 404 */
.center-page{padding:140px 0 160px;text-align:center}
.center-page h1{max-width:13em;margin:0 auto}
.center-page .lead{margin:24px auto 0}

/* Footer */
.ft{border-top:1px solid var(--line);padding:80px 0 40px;font-size:.95rem}
.ft__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px}
.ft h4{font-size:.95rem;font-weight:600;margin-bottom:16px}
.ft ul{list-style:none;display:grid;gap:10px}
.ft a{text-decoration:none;color:var(--text)}
.ft a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ft__about{max-width:22em;color:var(--muted);margin-top:18px}
.ft__base{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;border-top:1px solid var(--line);margin-top:64px;padding-top:24px;color:var(--muted);font-size:.88rem}
.ft__base a{color:var(--muted)}

/* Mobile bar */
.mbar{display:none}

/* Reveal: transform only, so content is never hidden if a script or animation stalls */
@media (prefers-reduced-motion:no-preference){
  .js .rv{transform:translateY(22px);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
  .js .rv.in{transform:none}
}

@media (max-width:1080px){
  .hd__in{grid-template-columns:auto 1fr auto}
  .nav{gap:22px;justify-self:center}
  .feat,.feat--flip,.split,.phero__grid,.photo-split,.hero__top,.founder,.hero__split,.cta,.lead-block{grid-template-columns:1fr;gap:36px}
  .bcards--4{grid-template-columns:1fr 1fr}
  .svcs,.brands,.svcs--2,.svcs--4{grid-template-columns:1fr 1fr}
  .feat--flip .feat__text{order:0}
  .split__head{position:static}
    .ft__grid{grid-template-columns:1fr 1fr}
  .head{grid-template-columns:1fr;gap:20px}
}
@media (max-width:900px){
  .hd{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff}
  .hd__in{display:flex;gap:16px}
  .hd__end{margin-left:auto}
  .menu-btn{display:block}
  .hd__end .btn{display:none}
  .nav{justify-self:stretch;width:auto;position:fixed;top:76px;left:0;right:0;bottom:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gut) 40px;overflow:auto;transform:translateX(100%);visibility:hidden;transition:transform .25s,visibility .25s}
  .nav a{font-size:1.35rem;padding:17px 0;border-bottom:1px solid var(--line);color:var(--ink)}
  .nav .btn{margin-top:24px;font-size:1.05rem;border:0;color:#fff;padding:15px 22px}
  body.menu-open .nav{transform:none;visibility:visible}
  body.menu-open{overflow:hidden}
  .dd__menu{position:static;transform:none;visibility:inherit;opacity:1;padding:0}
  .dd__top{display:block;font-size:1.35rem;padding:17px 0;border-bottom:1px solid var(--line);color:var(--ink)}
  .dd__top::after{display:none}
  .dd__panel{width:auto;border:0;box-shadow:none;padding:4px 0 8px 14px;grid-template-columns:1fr;border-radius:0}
  .nav .dd__panel a{font-size:1.05rem;padding:10px 0;border-bottom:0;border-radius:0}
  .dd__panel small{display:none}
  .facts{grid-template-columns:1fr 1fr}
  .facts div:nth-child(3){border-left:0;padding-left:0}
  .facts div:nth-child(n+3){border-top:1px solid var(--line)}
  .steps{grid-template-columns:1fr}
}
@media (min-width:901px){ .nav .btn{display:none} }
@media (max-width:720px){
  :root{--gut:18px;--R:20px}
  body{font-size:16.5px}
  .sec{padding:80px 0}
  .sec--tight{padding:56px 0}
  .hero{padding:48px 0 0}
  .hero .lead,.lead{font-size:1.08rem}
  .hero__acts .btn{width:100%}
  .stage{margin-top:44px;padding:36px 14px 0}
  .stage .stage__card{display:none}
  .stage .stage__phone{width:36%;right:4%;bottom:-24px}
  .stage__tag{top:8px;left:10px;font-size:.72rem}
  .browser__bar{height:22px;padding:0 9px;gap:5px}
  .browser__bar i{width:7px;height:7px}
  .browser__bar span{display:none}
  .facts{margin-top:64px}
  .facts div{padding:24px 16px 24px 0}
  .facts div:nth-child(even){padding-left:16px}
  .feat{padding:40px 0;gap:32px}
  .panel{padding:28px 18px 0;border-radius:18px}
  .panel--pad{padding:18px}
  .panel .phone{width:58%;margin-bottom:-40px}
  .panel__duo{grid-template-columns:1fr 1fr;gap:14px}
  .grid2,.checks,.prods,.two,.svcs,.brands,.people,.svcs--2,.bcards--2,.bcards--4{grid-template-columns:1fr}
  .cta{padding:32px 22px}
  .hero__vis .stage{padding:18px 14px 0}
  .hero__copy h1{font-size:2.6rem}
  .svcs--4{grid-template-columns:1fr 1fr;gap:28px 14px}
  .story li{grid-template-columns:1fr;gap:8px;padding:24px 0}
  .hero__top{gap:24px}
  .scene .inset{width:40%;right:12px;bottom:12px;border-width:3px}
  .rows > li{grid-template-columns:1fr;gap:8px;padding:24px 0}
  .card{padding:24px 18px;border-radius:18px}
    .phero{padding:44px 0 0}
  .phero--text{padding:56px 0 8px}
  .photo-split{gap:32px}
  .gallery{grid-template-columns:1fr 1fr;grid-template-rows:auto;margin-top:40px}
  .gallery img:first-child{grid-column:1/3;grid-row:auto;aspect-ratio:4/3}
  .gallery img{aspect-ratio:1}
  .center-page{padding:80px 0 100px}
  .ft{padding:56px 0 110px}
  .ft__grid{grid-template-columns:1fr}
  .mbar{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid var(--line)}
  .mbar .btn{flex:1;min-height:46px;padding:10px 12px;font-size:.95rem}
  .mbar .btn--line{flex:0 0 auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* compact layouts (v5): two columns in one section, four short points in a row, steps inside the hero */
.cols2{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:start}
.h2s{font-size:clamp(1.5rem,2.2vw,1.95rem);letter-spacing:-.03em;line-height:1.1;margin-bottom:22px}
.cols2__intro{color:var(--muted);margin:0 0 18px;max-width:30em}
.grid3{grid-template-columns:repeat(3,1fr);gap:28px 40px}
.grid4{grid-template-columns:repeat(4,1fr);gap:28px 32px}
.grid4 h3,.grid3 h3{font-size:1.12rem}
.grid4 p,.grid3 p{font-size:.98rem}
.phero__steps{margin-top:64px;padding-bottom:80px}
.story--grid{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;border-top:0}
.story--grid li{grid-template-columns:1fr;gap:10px;border-top:1px solid var(--line);border-bottom:0;padding:26px 0 8px}
@media (max-width:900px){
  .cols2{grid-template-columns:1fr;gap:44px}
  .grid4{grid-template-columns:1fr 1fr}
  .grid3{grid-template-columns:1fr 1fr}
  .story--grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .sec{padding:60px 0}
  .sec--tight{padding:44px 0}
  .phero--text{padding:48px 0 0}
  .phero__steps{margin-top:40px;padding-bottom:52px}
  .grid3,.grid4{grid-template-columns:1fr;gap:22px}
}
@media (max-width:900px){ .prods--4{grid-template-columns:1fr 1fr} }
@media (max-width:720px){ .prods--4{grid-template-columns:1fr 1fr;gap:12px} .prods--4 .prod div{padding:14px 14px 16px} }
@media (max-width:720px){ .ft{padding-top:44px} .ft__grid{gap:32px} .ft ul.ft__own{grid-template-columns:1fr 1fr;gap:10px 16px} .ft__base{margin-top:40px} }