/* REAL nikolas fonts (captured woff2) — mapped onto the existing family names */
@font-face{font-family:'Optima';src:url('fonts/optima.woff2') format('woff2');font-weight:300 500;font-style:normal;font-display:swap}
@font-face{font-family:'ABC Diatype';src:url('fonts/abc-light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'ABC Diatype';src:url('fonts/abc-book.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'ABC Diatype';src:url('fonts/abc-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* shared styles for service pages — no divider lines, image-forward, editorial */
:root{
  --bg:#dfdfdf; --ink:#0d0d0d; --muted:#6f6f6a;
  --red:#FF3F40; --blue:#7CBAFF; --green:#45AD56; --cream:#ECE7DE; --cardline:#000;
  --nb-yellow:#faec23; --nb-t2:#666; --nb-hair:#c6c6c6;
  --optima:'Optima','Optima nova','OptimaLTStd',Candara,'Segoe UI',sans-serif;
  --abc:'ABC Diatype','Helvetica Neue',Helvetica,'Inter',Arial,sans-serif;
  --maxw:1320px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--optima);font-size:14px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.label{font-family:var(--abc);font-size:9px;font-weight:500;letter-spacing:.75px;line-height:12px;text-transform:uppercase}
/* animations off by default — Kirill: no entrance/reveal motion */
.rv{opacity:1;transform:none;transition:none}
.rv.in{opacity:1;transform:none}

/* image placeholder */
.ph{background:#cfcfc9;border:1px dashed #a6a59c;color:#86857e;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:46px;
  font-family:var(--abc);font-size:9px;font-weight:500;letter-spacing:.75px;text-transform:uppercase;text-align:center}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
/* image cards get the same solid edge as the homepage */
.ph:has(img){border-style:solid;border-color:var(--cardline)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;color:var(--ink);transition:color .3s ease}
.nav.on-dark{color:#fff}
.nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:58px;gap:18px;padding:0 22px}
.nav .links{display:flex;gap:20px}.nav .links.r{justify-content:flex-end}
.nav .links a{opacity:.85}.nav .links a:hover{opacity:.5}
.nav .logo{width:50px;height:50px;justify-self:center;display:block}
.nav .logo iframe{width:100%;height:100%;border:0;background:transparent;pointer-events:none;display:block}

/* hero */
.shero{padding:128px 0 64px}
.shero .lab{color:var(--muted);display:block;margin-bottom:18px}
.shero h1{font-family:var(--optima);font-size:clamp(2.8rem,8.5vw,7rem);font-weight:400;letter-spacing:-.04em;line-height:.92;max-width:16ch}
.shero h1 em{font-style:italic;color:var(--red)}
.shero .lead{font-family:var(--abc);font-weight:500;text-transform:uppercase;letter-spacing:.5px;font-size:clamp(12px,1.15vw,14px);max-width:52ch;margin-top:22px;line-height:1.55;color:#2a2a28}
.cta{display:inline-block;margin-top:28px;font-family:var(--abc);font-size:9px;font-weight:500;letter-spacing:.75px;line-height:12px;text-transform:uppercase;white-space:nowrap;
  color:#000;background:var(--red);border:1px solid #000;border-radius:4px;padding:6px 15px 5px;transition:transform .15s}
.cta:hover{transform:translateY(-2px)}

/* full-bleed image moment */
.moment{position:relative;height:74vh;min-height:440px;margin:30px 0}
.moment .ph{width:100%;height:100%}
.moment .cap{position:absolute;left:28px;bottom:24px;max-width:24ch}
.moment .cap .t{font-family:var(--optima);font-size:clamp(1.2rem,2.4vw,1.8rem);line-height:1.1;color:#000;-webkit-text-stroke:2px #fff;paint-order:stroke fill}

/* big statement / belief */
.statement{padding:90px 0}
.statement h2{font-family:var(--optima);font-size:clamp(2rem,5.2vw,4.2rem);font-weight:400;letter-spacing:-.035em;line-height:1.0;max-width:20ch}
.statement h2 em{font-style:italic;color:var(--red)}
.statement p{font-family:var(--optima);font-size:clamp(1.1rem,1.7vw,1.35rem);max-width:54ch;margin-top:26px;line-height:1.42;color:#2a2a28}

/* what we do — image + line rows */
.dolist{padding:30px 0 80px;display:grid;gap:18px}
.do{display:grid;grid-template-columns:230px 1fr;gap:30px;align-items:center}
.do:nth-child(even){grid-template-columns:1fr 230px}
.do:nth-child(even) .pic{order:2}
.do .pic{aspect-ratio:1/1;border-radius:16px}
.do .pic .ph{width:100%;height:100%;border-radius:16px}
.do p{font-family:var(--optima);font-size:clamp(1.4rem,3vw,2.3rem);font-weight:400;letter-spacing:-.02em;line-height:1.08}
.do p em{font-style:italic;color:var(--red)}

/* proof */
.proof{padding:70px 0}
.proof .big{font-family:var(--optima);font-size:clamp(1.8rem,4.6vw,3.6rem);font-weight:400;letter-spacing:-.03em;line-height:1.0}
.proof .big .n{color:var(--red)}
.proof .cap{color:var(--muted);margin-top:14px;font-family:var(--abc);font-size:.85rem}
.imgrow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.imgrow .pic{aspect-ratio:4/5;border-radius:14px}
.imgrow .pic .ph{width:100%;height:100%;border-radius:14px}

/* work gallery — windows on the same tokens as the home cards (46px + cardline) */
.workgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;margin-top:40px}
.workcard{display:block}
.workcard .win{aspect-ratio:4/3;border:1px solid var(--cardline);border-radius:46px;overflow:hidden;background:#fff}
.workcard .win img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.workcard .nm{font-family:var(--optima);font-size:1.5rem;letter-spacing:-.02em;line-height:1.05;margin-top:16px}
.workcard .tag{font-family:var(--abc);font-size:9px;font-weight:500;letter-spacing:.75px;text-transform:uppercase;color:var(--muted);margin-top:6px;display:block}
.workcard .ds{font-family:var(--optima);font-size:1.02rem;color:#2a2a28;margin-top:10px;line-height:1.32;max-width:40ch}
@media(max-width:820px){.workgrid{grid-template-columns:1fr}}

/* pricing */
.pricing{padding:70px 0}
.pricing .lab{color:var(--muted);display:block;margin-bottom:22px}
.pricing h2{font-family:var(--optima);font-size:clamp(1.8rem,4vw,3rem);font-weight:400;letter-spacing:-.03em}
.pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.pkg{border:1px solid rgba(0,0,0,.16);border-radius:20px;padding:26px}
.pkg .nm{font-family:var(--optima);font-size:1.6rem}
.pkg .pr{font-family:var(--abc);font-size:1rem;margin:6px 0 18px;font-weight:600}
.pkg ul{list-style:none}.pkg li{font-family:var(--abc);font-size:.86rem;padding:8px 0;border-top:1px solid rgba(0,0,0,.10)}
.pkgnote{font-family:var(--abc);font-size:.8rem;color:var(--muted);margin-top:16px}

/* final cta — dark band */
.ctaband{background:var(--ink);color:var(--cream);text-align:center;padding:120px 28px;margin-top:40px}
.ctaband .lab{opacity:.55;display:block;margin-bottom:20px}
.ctaband h2{font-family:var(--optima);font-size:clamp(2.6rem,8vw,6.4rem);font-weight:400;letter-spacing:-.04em;line-height:.92;max-width:18ch;margin:0 auto}
.ctaband h2 em{font-style:italic;color:var(--blue)}
.ctaband a.mail{display:inline-block;margin-top:32px;font-family:var(--abc);font-size:9px;font-weight:500;letter-spacing:.75px;line-height:12px;text-transform:uppercase;white-space:nowrap;color:#000;background:var(--blue);border:1px solid #000;border-radius:4px;padding:6px 15px 5px}

/* footer */
footer{padding:34px 0}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}
footer a:hover{color:var(--muted)}
.backlink{display:inline-flex;gap:6px;border-bottom:1px solid var(--ink);padding-bottom:1px}

/* burger menu (mobile) */
.burger{display:none;justify-self:end;width:34px;height:34px;padding:7px;background:transparent;border:0;cursor:pointer;flex-direction:column;justify-content:space-between;color:inherit}
.burger span{display:block;height:2px;width:100%;background:currentColor;border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.nav.menu-open .burger span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.nav.menu-open .burger span:nth-child(2){opacity:0}
.nav.menu-open .burger span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.mobile-menu{display:none;flex-direction:column;gap:4px;padding:8px 22px 18px;background:var(--bg)}
.mobile-menu a{padding:12px 0;border-bottom:1px solid rgba(0,0,0,.1)}
.nav.menu-open .mobile-menu{display:flex}

@media(max-width:820px){
  .nav{background:var(--bg)}
  .nav .links.l,.nav .links.r{display:none}
  .nav-in{display:flex;justify-content:space-between;align-items:center}
  .burger{display:flex}
  .do,.do:nth-child(even){grid-template-columns:1fr;gap:14px}
  .do:nth-child(even) .pic{order:0}
  .do .pic{max-width:200px}
  .pkgs,.imgrow{grid-template-columns:1fr}
}

/* ===== shared service-page components (nikolas tokens) ===== */
.ax{max-width:1320px;margin:0 auto;padding:0 28px}
.lab{font-family:var(--abc);font-size:9px;font-weight:500;letter-spacing:.75px;line-height:12px;text-transform:uppercase;color:var(--nb-t2)}
.ax-hero{padding:150px 0 70px}
.ax-hero h1{font-family:var(--optima);font-weight:400;font-size:clamp(44px,8.6vw,96px);line-height:.84;letter-spacing:-.06em;max-width:15ch;margin:18px 0 0}
.ax-hero p{font-family:var(--abc);font-weight:500;text-transform:uppercase;letter-spacing:.5px;font-size:clamp(12px,1.15vw,14px);line-height:1.55;max-width:54ch;margin:22px 0 0;color:#1a1a1a}
.btn{display:inline-block;font-family:var(--abc);font-size:9px;font-weight:500;letter-spacing:.75px;line-height:12px;text-transform:uppercase;white-space:nowrap;background:#000;color:#fff;border:1px solid #000;border-radius:4px;padding:6px 15px 5px;margin-top:30px}
.btn.y{background:var(--nb-yellow);color:#000}
.btn.o{background:transparent;color:#000;border:1px solid var(--cardline)}
.sec{padding:64px 0}
.sec h2{font-family:var(--optima);font-weight:400;font-size:clamp(2rem,4.6vw,3.4rem);letter-spacing:-.035em;line-height:1.0;max-width:20ch;margin:12px 0 0}
.sec .sub{font-family:var(--abc);font-weight:500;text-transform:uppercase;letter-spacing:.5px;font-size:clamp(11px,1.05vw,13px);color:#2a2a28;max-width:62ch;margin:16px 0 0;line-height:1.55}
/* content subheadings — match homepage: solid black, block, like "WHAT WE DO" */
.sec>.ax>.lab,.split .scopy .lab{color:var(--ink);display:block}
.sec>.ax>.lab{margin-bottom:8px}
.split .scopy .lab{margin-bottom:12px}
.steps2{margin-top:40px;display:grid;gap:0}
.st{display:grid;grid-template-columns:64px 1fr;gap:24px;padding:18px 0;align-items:start}
.st .no{font-family:var(--abc);font-size:9px;font-weight:500;letter-spacing:.75px;color:var(--nb-t2);padding-top:8px}
.st h3{font-family:var(--optima);font-weight:400;font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:-.02em;line-height:1.05}
.st p{font-family:var(--optima);font-size:1.05rem;color:#2a2a28;line-height:1.4;margin-top:8px;max-width:60ch}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:36px}
.tile{background:#fff;border:1px solid var(--cardline);border-radius:46px;padding:30px 28px}
.tile h3{font-family:var(--optima);font-weight:400;font-size:1.45rem;letter-spacing:-.02em;line-height:1.05}
.tile p{font-family:var(--optima);font-size:1rem;color:#2a2a28;line-height:1.38;margin-top:10px}
.imgbig{aspect-ratio:16/7;margin-top:34px}
.imgrow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.imgrow .ph{aspect-ratio:4/5}
.imgwide{aspect-ratio:21/7;margin-top:8px}
/* bottom CTA: same grey bg as the rest of the site (no coloured block); homepage-style button */
.band,.band.yellow,.band.blue,.band.green{background:var(--bg);color:var(--ink)}
.band{text-align:center;padding:110px 28px;margin-top:30px}
.band h2{font-family:var(--optima);font-weight:400;font-size:clamp(2.4rem,7vw,5.4rem);letter-spacing:-.04em;line-height:.92;max-width:18ch;margin:0 auto}
.band .lab,.band.yellow .lab,.band.blue .lab,.band.green .lab{color:var(--muted);opacity:1;display:block;margin-bottom:18px}
.band .btn,.band.yellow .btn,.band.blue .btn,.band.green .btn{background:var(--green);color:#000;margin-top:26px}
.xref{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px}
.xref a{display:block;border:1px solid var(--cardline);border-radius:46px;padding:26px 28px}
.xref .k{font-family:var(--abc);font-size:9px;font-weight:500;letter-spacing:.75px;text-transform:uppercase;color:var(--nb-t2)}
.xref .v{font-family:var(--optima);font-size:1.5rem;letter-spacing:-.02em;margin-top:8px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:26px 0}
.split:nth-of-type(even) .scopy{order:2}
.split .ph{aspect-ratio:4/3}
.split h3{font-family:var(--optima);font-weight:400;font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.025em;line-height:1.05}
.split p{font-family:var(--optima);font-size:1.05rem;color:#2a2a28;line-height:1.4;margin-top:12px;max-width:46ch}
@media(max-width:760px){.split{grid-template-columns:1fr;gap:18px}.split:nth-of-type(even) .scopy{order:0}
  /* keep the person in frame when the wide shot is cropped on phones */
  .moment .ph img{object-position:78% center}
  .split .ph img{object-position:60% center}
}
.form{max-width:560px;margin-top:34px;display:grid;gap:16px}
.form label{font-family:var(--abc);font-size:9px;font-weight:500;letter-spacing:.75px;text-transform:uppercase;color:var(--nb-t2);display:block;margin-bottom:7px}
.form input,.form textarea{width:100%;font-family:var(--optima);font-size:1rem;color:#000;background:#fff;border:1px solid #bcbcbc;border-radius:14px;padding:13px 16px;box-sizing:border-box}
.form input{border-radius:50px}
.form textarea{min-height:130px;resize:vertical}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px var(--blue)}
.form button{justify-self:start;margin-top:6px}
.calwrap{margin-top:34px;border:1px solid var(--cardline);border-radius:46px;overflow:hidden;background:#fff}
.calwrap>div{width:100%}
.calwrap iframe{display:block;width:100%}
@media(max-width:900px){.grid4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid4,.grid2,.xref{grid-template-columns:1fr}.st{grid-template-columns:1fr;gap:6px}.st .no{padding-top:0}.imgbig{aspect-ratio:4/3}}

/* ---------- proud / trusted-by logo wall ---------- */
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:26px 48px;margin-top:34px}
.logos img{height:30px;width:auto;opacity:.72;filter:grayscale(1)}   /* drop real SVG/PNG logos here */
.logo-wm{font-family:var(--abc);font-weight:700;font-size:clamp(19px,2.3vw,30px);letter-spacing:-.02em;line-height:1;color:#000;opacity:.72}