/* ============================================================
Tom Caklos — E-mail Marketing Specialist
Type scale and layout measured from the Figma export at 1600px.
============================================================ */
/* ---------- Fonts ---------- */
@font-face{font-family:Regola;src:url(../fonts/regola-300.woff) format("woff");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Regola;src:url(../fonts/regola-400.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Regola;src:url(../fonts/regola-500.woff) format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Regola;src:url(../fonts/regola-600.woff) format("woff");font-weight:600;font-style:normal;font-display:swap}
/* ---------- Tokens ---------- */
:root{
--orange:#E44A35;
--ink:#151416;
--card:#2A2A2A;
--panel:#F0F0F0;
--white:#fff;
/* Regola Pro is a LICENSED font — see README before going live.
To switch to a free alternative: comment out the line below, uncomment the
next one, and swap the Google Fonts in both HTML files. */
--sans:Regola,"Helvetica Neue",Arial,sans-serif;
/* --sans:Manrope,"Helvetica Neue",Arial,sans-serif; */
--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
/* fluid type — each hits its Figma value at a 1600px viewport */
--fs-xl:clamp(38px,5.625vw,90px); /* 90 big CTA */
--fs-h1:clamp(32px,3.625vw,58px); /* 58 page headings */
--fs-h2:clamp(28px,2.75vw,44px); /* 44 section headings */
--fs-h3:clamp(22px,2.125vw,34px); /* 34 panel headings */
--fs-stat:clamp(34px,3.6875vw,59px); /* 59 stat numbers */
--fs-body:clamp(17px,1.6875vw,27px); /* 27 intro copy */
--fs-bodysm:clamp(15px,1.1875vw,19px);/* 19 case-study copy */
--fs-h4:clamp(20px,1.75vw,28px); /* 28 sub-headings */
--fs-lead:clamp(17px,1.625vw,26px); /* 26 hero standfirst */
--fs-sm:clamp(14px,1.125vw,18px); /* 18 labels, captions */
--fs-mono:clamp(12px,1vw,16px); /* 16 nav, buttons */
--lh-xl:1.228; --lh-h1:1.112; --lh-h2:1.091;
--lh-body:1.222; --lh-lead:1.27; --lh-bodysm:1.474;
--gutter:clamp(20px,6.25vw,100px);
--sec-y:clamp(56px,8.75vw,140px);
--ch-x:12px; --ch-y:20px; /* button chamfer */
--img-ch:clamp(32px,3.9vw,62px); /* image chamfer */
--light-x:0%; /* CTA/footer light-sweep position, set by JS on scroll */
}
/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--white);
font-family:var(--sans);font-weight:500;font-size:var(--fs-body);line-height:var(--lh-body);
-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid currentColor;outline-offset:3px;border-radius:2px}
/* Lenis smooth scroll — required baseline from lenis.dev; disabled automatically
under prefers-reduced-motion by Lenis itself, so no extra media query needed here. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth iframe{pointer-events:none}
.wrap{max-width:1600px;margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:12px 18px}
.skip:focus{left:8px;top:8px}
/* ---------- Type ---------- */
.h1{font-size:var(--fs-h1);font-weight:600;line-height:var(--lh-h1);letter-spacing:-.04em}
.xl{font-size:var(--fs-xl);font-weight:600;line-height:var(--lh-xl);letter-spacing:-.04em}
.h2{font-size:var(--fs-h2);font-weight:600;line-height:var(--lh-h2);letter-spacing:-.02em}
.h1c{font-size:var(--fs-h1);font-weight:600;line-height:var(--lh-h1);letter-spacing:-.04em;text-align:center}
.h2c{font-size:var(--fs-h2);font-weight:600;line-height:var(--lh-h2);letter-spacing:-.02em;text-align:center}
.h3{font-size:var(--fs-h3);font-weight:600;line-height:1.12;letter-spacing:-.02em}
.h4{font-size:var(--fs-h4);font-weight:600;line-height:1.2;letter-spacing:-.02em}
.lead{font-size:var(--fs-lead);font-weight:500;line-height:var(--lh-lead)}
.body{font-size:var(--fs-body);font-weight:500;line-height:var(--lh-body)}
.body + .body{margin-top:1em}
.body-sm{font-size:var(--fs-bodysm);font-weight:500;line-height:var(--lh-bodysm)}
.body-sm + .body-sm{margin-top:1.45em}
.sm{font-size:var(--fs-sm);font-weight:500;line-height:1.35}
.nb{white-space:nowrap}
.br-desk{display:none}
@media (min-width:861px){.br-desk{display:inline}}
.mono{font-family:var(--mono);font-size:var(--fs-mono);font-weight:400;letter-spacing:.02em}
/* ---------- Surfaces ---------- */
.orange{background:var(--orange);color:var(--ink);position:relative}
/* Horizontal scanline texture, ~6.35px period. In the Figma it sits over the flat
orange and over the planet, but UNDER the text and images — so it's a negative
z-index layer and .scan isolates to keep it above its own background. */
.scan{isolation:isolate}
.scan::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
background:repeating-linear-gradient(180deg,transparent 0 4.5px,rgba(0,0,0,.065) 4.5px 6.35px)}
.dark{background:var(--ink);color:var(--white)}
.light{background:var(--white);color:var(--ink)}
/* ---------- Buttons ---------- */
.btn{display:inline-block;font-family:var(--mono);font-size:var(--fs-mono);font-weight:500;
letter-spacing:.02em;text-decoration:none;padding:.875em 3.2em;white-space:nowrap;
clip-path:polygon(var(--ch-x) 0,100% 0,100% calc(100% - var(--ch-y)),calc(100% - var(--ch-x)) 100%,0 100%,0 var(--ch-y));
transition:transform .18s ease,background-color .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn--dark{background:var(--ink);color:var(--white)}
.btn--dark:hover{background:#000}
.btn--orange{background:var(--orange);color:var(--ink)}
.btn--orange:hover{background:#F0563F}
/* ---------- Header ---------- */
.hdr{background:var(--orange);border-bottom:1px solid rgba(21,20,22,.3);position:relative;z-index:6}
.hdr__in{display:flex;align-items:stretch;justify-content:space-between;gap:24px;min-height:85px}
.hdr__brand{display:flex;align-items:center;padding-block:12px}
.hdr__logo{width:clamp(120px,10.3vw,165px);height:auto}
.hdr__nav{display:flex;align-items:center;gap:clamp(20px,3.5vw,56px);margin-left:auto;
border-left:1px solid rgba(21,20,22,.3);padding-left:clamp(20px,3.5vw,56px)}
.hdr__link{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.02em;text-decoration:none;
color:var(--ink);padding-block:5px;border-bottom:1px solid transparent}
.hdr__link:hover{border-bottom-color:var(--ink)}
.hdr__cta{align-self:stretch;display:flex;align-items:center;padding-left:clamp(20px,3.5vw,56px)}
.hdr__cta .btn{padding-block:.875em}
/* Mobile hamburger menu — hidden on desktop, no JS: / does the toggling */
.hdr__burgerWrap{display:none}
.hdr__burger{display:flex;align-items:center;justify-content:center;cursor:pointer;
width:28px;height:28px;position:relative;list-style:none}
.hdr__burger::-webkit-details-marker{display:none}
.hdr__burger span{position:absolute;left:2px;right:2px;height:2px;background:var(--ink);
transition:transform .2s ease,opacity .2s ease}
.hdr__burger span:nth-child(1){top:8px}
.hdr__burger span:nth-child(2){top:13px}
.hdr__burger span:nth-child(3){top:18px}
.hdr__burgerPanel{position:fixed;inset:0;z-index:1;background:var(--orange);
display:flex;align-items:center;padding-inline:var(--gutter)}
.hdr__burgerNav{display:flex;flex-direction:column;gap:clamp(22px,6vw,40px)}
.hdr__burgerLink{font-family:var(--mono);font-size:clamp(22px,7vw,34px);letter-spacing:.02em;
text-decoration:none;color:var(--ink)}
/* When open: icon morphs to an X and lifts to a fixed top-right position, above the overlay */
details.hdr__burgerWrap[open] .hdr__burger{position:fixed;top:27px;right:var(--gutter);z-index:2}
details.hdr__burgerWrap[open] .hdr__burger span:nth-child(1){top:13px;transform:rotate(45deg)}
details.hdr__burgerWrap[open] .hdr__burger span:nth-child(2){opacity:0}
details.hdr__burgerWrap[open] .hdr__burger span:nth-child(3){top:13px;transform:rotate(-45deg)}
@media (max-width:860px){
.hdr__in{min-height:0;padding-block:14px}
.hdr__brand{padding-block:0}
.hdr__nav,.hdr__cta{display:none}
.hdr__burgerWrap{display:block}
}
/* ---------- Home hero ---------- */
.hero{position:relative;overflow:hidden;
padding-block:clamp(40px,5.875vw,94px) clamp(40px,5.375vw,86px)}
/* Hero planet — exported from the Figma ("hero bg.png"), cut to a disc.
Geometry taken from that export: circle at (1208, 430.8) r=332.6 in the 1600px
frame, so left 54.712%, width 41.575%, 13.2px below the top of the hero. */
.hero__globeWrap{position:absolute;inset:0;max-width:1600px;margin-inline:auto;
overflow:hidden;z-index:-2;pointer-events:none}
.hero__globe{position:absolute;left:54.712%;top:min(.825vw,13px);width:41.575%;
aspect-ratio:1;background:url(../img/globe.webp) center/100% 100% no-repeat}
.hero__in{position:relative;
display:grid;grid-template-columns:minmax(0,520fr) minmax(0,752fr);
gap:clamp(28px,8vw,128px);align-items:start}
.hero__photo{width:100%;
clip-path:polygon(0 0,100% 0,100% calc(100% - var(--img-ch)*1.19),calc(100% - var(--img-ch)) 100%,0 100%)}
.hero__sub{margin-top:clamp(16px,1.75vw,28px)}
.hero__btn{margin-top:clamp(20px,3.1vw,50px)}
@media (max-width:860px){
.hero__in{grid-template-columns:1fr}
.hero__globe{left:auto;right:-34%;top:auto;bottom:-9%;width:102%}
.hero__photo{max-width:420px;order:1}
}
/* ---------- Offer strip ---------- */
.strip{background:var(--orange);border-block:1px solid rgba(21,20,22,.3);position:relative;z-index:4}
.strip__link{display:block;
padding-block:12px;text-decoration:none;color:var(--ink);
font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.06em;text-transform:uppercase;text-align:center}
.strip__link:hover{background:rgba(21,20,22,.06)}
.strip__arrow{flex:none;display:inline-block;vertical-align:-2px;margin-left:.5em}
/* ---------- Two-column prose ---------- */
.two{display:grid;grid-template-columns:minmax(0,530fr) minmax(0,730fr);
gap:clamp(24px,8.75vw,140px);align-items:start}
.sec{padding-block:var(--sec-y)}
.sec--tall{padding-top:clamp(64px,10vw,160px)}
.sec--strat{padding-bottom:clamp(48px,5.5vw,88px)}
.sec--flush{padding-bottom:0}
.rule{border:0;border-top:1px solid rgba(255,255,255,.22);margin:0}
.rule--ink{border-top-color:rgba(21,20,22,.2)}
.mt-rule{margin-top:clamp(44px,9.4vw,150px)}
.two--cs{grid-template-columns:minmax(0,440fr) minmax(0,730fr);gap:clamp(24px,14.375vw,230px)}
@media (max-width:860px){.two,.two--cs{grid-template-columns:1fr;gap:26px}}
/* ---------- Big CTA ---------- */
.cta{padding-block:clamp(46px,10.4vw,166px) clamp(46px,8.3vw,133px)}
.cta__in{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(28px,5vw,70px)}
.cta__h{max-width:13.5em;flex:1 1 auto}
.cta__in .btn{flex:none;margin-bottom:.4em}
@media (max-width:860px){
.cta__in{flex-direction:column;align-items:flex-start;gap:30px}
.cta__h{max-width:none}
}
/* ---------- Footer ---------- */
.ftr{border-top:1px solid rgba(255,255,255,.18)}
.ftr__in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
padding-block:clamp(22px,1.75vw,28px)}
.ftr__logo{width:clamp(120px,10.3vw,165px)}
.ftr__nav{display:flex;gap:clamp(20px,3.1vw,50px);flex-wrap:wrap}
.ftr__link{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.02em;text-decoration:none;
padding-block:4px;border-bottom:1px solid transparent}
.ftr__link:hover{border-bottom-color:currentColor}
/* Light sweep — a soft glow hugging the bottom of the combined CTA+footer block,
left at the top of the page to right at the bottom. .cta and .ftr are separate
elements (cta is inside , footer isn't), so to read as ONE continuous glow
instead of two independent ones, both draw from a shared virtual canvas: same
background-size (--glow-h, the combined block height) with each element's own
background-position offset (--glow-offset) into that canvas. Values are written
by the inline script near
. Sits over the section's own dark background
but under its content, same trick as .scan (z-index:-1 + isolation:isolate). */
.cta,.ftr{position:relative;isolation:isolate}
.cta::before,.ftr::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
background-repeat:no-repeat;
background-size:100% var(--glow-h,100%);
background-position:0 var(--glow-offset,0px);
background-image:radial-gradient(1200px 380px at var(--light-x) 100%,rgba(255,255,255,.16),transparent 70%)}
/* ============================================================
Case study page
============================================================ */
.cs-hero{padding-block:clamp(40px,4.4vw,70px) 0;position:relative}
.cs-hero__in{display:grid;grid-template-columns:minmax(0,1000fr) minmax(0,306fr);
gap:clamp(24px,5.875vw,94px);align-items:start}
.eyebrow{font-size:var(--fs-sm);letter-spacing:.1em;text-transform:uppercase;
font-weight:600;margin-bottom:clamp(12px,1.5vw,24px)}
.meta__k{font-size:var(--fs-sm);font-weight:600;margin-bottom:.5em}
.meta__v{font-size:var(--fs-sm);font-weight:500;line-height:1.33}
.cs-hero__meta{display:flex;flex-direction:column;gap:clamp(20px,2.6vw,42px)}
.cs-hero__img{margin-top:clamp(30px,3.9vw,62px);width:100%;position:relative;
clip-path:polygon(0 0,100% 0,100% calc(100% - var(--img-ch)*1.19),calc(100% - var(--img-ch)) 100%,0 100%)}
@media (max-width:860px){
.cs-hero__in{grid-template-columns:1fr;gap:26px}
.cs-hero__img{aspect-ratio:339/429}
.cs-hero__meta{flex-direction:row;gap:clamp(16px,3vw,32px)}
.cs-hero__meta .meta{flex:1 1 0}
}
/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.8vw,44px);
padding-block:clamp(32px,2.625vw,42px) clamp(34px,2.8vw,45px)}
.stat__n{font-size:var(--fs-stat);font-weight:600;line-height:1;letter-spacing:-.01em}
.stat__l{font-size:var(--fs-sm);font-weight:500;margin-top:.55em}
.stat__note{font-size:.8em;font-weight:500;display:block;margin-top:.25em}
@media (max-width:860px){.stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:30px}}
@media (max-width:430px){.stats{grid-template-columns:1fr}}
/* Two sub-columns inside the right column */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,7.6vw,122px)}
@media (max-width:700px){.split{grid-template-columns:1fr;gap:26px}}
/* Before / after */
.ba{background:var(--panel);border-radius:clamp(14px,1.5vw,24px);
padding:clamp(26px,3.4vw,54px);margin-top:clamp(28px,3.4vw,54px)}
.ba__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,4vw,64px)}
.ba__col + .ba__col{border-left:1px solid rgba(21,20,22,.14);padding-left:clamp(26px,4vw,64px)}
.ba__rows{margin-top:clamp(20px,2.6vw,42px);display:grid;gap:clamp(14px,2vw,32px)}
.ba__row{display:flex;align-items:baseline;gap:clamp(10px,1.2vw,20px)}
.ba__n{font-size:clamp(22px,2vw,32px);font-weight:600;line-height:1;letter-spacing:-.01em;
flex:none;min-width:clamp(82px,7.5vw,120px)}
.ba__l{font-size:var(--fs-sm);font-weight:600}
.ba__note{text-align:center;margin-top:clamp(20px,2.4vw,38px);color:#8C8C8C;
font-weight:500;font-size:var(--fs-sm)}
@media (max-width:700px){
.ba__grid{grid-template-columns:1fr;gap:28px}
.ba__col + .ba__col{border-left:0;padding-left:0;border-top:1px solid rgba(21,20,22,.14);padding-top:28px}
.ba__n{min-width:0}
}
/* Strategies: DOM order is reading order; grid areas rebuild the two columns
on desktop, and the cards sit at the bottom of their row so captions align. */
.strat{display:grid;grid-template-columns:minmax(0,572fr) minmax(0,760fr);
column-gap:clamp(20px,4.25vw,68px);
grid-template-areas:"a b" "a d" "c e"}
.s-a{grid-area:a}
.s-b{grid-area:b}
.s-c{grid-area:c;align-self:end;padding-top:clamp(24px,2.2vw,35px)}
.s-d{grid-area:d;padding-top:1.6em}
.s-e{grid-area:e;align-self:end;padding-top:clamp(24px,2.2vw,35px)}
@media (max-width:860px){
.strat{display:block}
.s-b,.s-c,.s-d,.s-e{padding-top:30px}
}
/* Image cards */
.cards{display:grid;grid-template-columns:minmax(0,572fr) minmax(0,760fr);
gap:clamp(20px,4.4vw,70px);margin-top:clamp(28px,3.4vw,54px)}
.card__box{background:var(--card);border-radius:clamp(8px,.75vw,12px);overflow:hidden;
display:flex;align-items:flex-end;justify-content:center;
padding:clamp(28px,3.9vw,62px) clamp(18px,2vw,32px) 0}
.card__box--center{align-items:center;padding-block:clamp(18px,1.75vw,28px)}
.card__box img{border-radius:6px;width:100%}
.card__box--furniture img{max-width:319px}
.card__box--center img{max-width:590px}
.card__cap{margin-top:clamp(12px,1.1vw,18px);font-size:var(--fs-bodysm);font-weight:500;color:#9A9A9A}
@media (max-width:860px){.cards{grid-template-columns:1fr}}
.centered{max-width:36em;margin-inline:auto;text-align:center}
.centered--wide{max-width:1010px;margin-inline:auto;text-align:center}
/* Automation */
.flow-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:clamp(26px,3.3vw,52px)}
.flow{border-radius:clamp(8px,.75vw,12px);min-width:660px}
@media (max-width:860px){
/* Mobile source is a tall, single-column diagram — no horizontal scroll needed */
.flow{min-width:0;width:100%;aspect-ratio:492/1184}
}
.disclaimer{font-style:italic;font-weight:600;font-size:var(--fs-sm);text-align:center;
margin-top:clamp(14px,1.5vw,24px)}
.stack{display:grid;gap:1.45em;font-size:var(--fs-bodysm)}
.stack > .body-sm + .body-sm{margin-top:0}
.big-line{font-size:var(--fs-lead);font-weight:600;line-height:1.3;text-align:center}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}