/* ==========================================================================
   Web Design Technologies : Phase 1 stylesheet
   Design system inherited from webdesigntechnologies.com/pawan
   Tokens, nav, hero, reveal, browser mockups and marquee are carried over
   unchanged so the agency site and the personal page read as one system.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  --bg:#ffffff; --bg-soft:#f5f7fb; --surface:#ffffff; --surface-2:#f0f3fa;
  --ink:#0a0c14; --ink-soft:#4b5066; --gray:#868ba0; --line:#e4e8f3;
  /* Royal Blue. rgb(65,105,225). 4.84:1 on white, passes AA for small text. */
  --blue:#4169e1; --blue-deep:#142a72; --blue-tint:#e9eefc;
  --blue-soft:#8fa6ee;
  /* Cabinet Grotesk display, Satoshi for reading. Both from Indian Type
     Foundry via Fontshare. --font-m keeps the label role: same face, tracked
     out and uppercased at the point of use. */
  --font-d:'Cabinet Grotesk',Helvetica,Arial,sans-serif;
  --font-b:'Satoshi',Helvetica,Arial,sans-serif;
  --font-m:'Satoshi',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:1200px; --pad:32px; --sec:120px;
}
[data-theme="dark"]{
  --bg:#07080d; --bg-soft:#0d0f18; --surface:#0f111b; --surface-2:#151827;
  --ink:#f2f4fb; --ink-soft:#b7bcd1; --gray:#797f99; --line:#1e2233;
  /* Lightened Royal Blue for dark mode. 6.5:1 on the dark canvas. */
  --blue:#6b8ff0; --blue-deep:#c6d3f7; --blue-tint:#16204a;
  --blue-soft:#8fa6ee;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-b);background:var(--bg);color:var(--ink);line-height:1.6;overflow-x:hidden;
  transition:background .5s var(--ease),color .5s var(--ease);-webkit-font-smoothing:antialiased;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;}
section{padding:var(--sec) 0;position:relative;}
/* Emphasis device: colour and weight. Italic is deliberately not used. */
.italic{color:var(--blue);font-weight:800;}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--blue);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;font-size:13px;font-weight:600;}
.skip-link:focus{left:0;}

/* Reveal only hides when JS is available, so content never gets stranded. */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.js .reveal.in{opacity:1;transform:translateY(0);}

/* --------------------------------------------------------------------------
   3. TYPE
   -------------------------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--font-d);font-weight:600;color:var(--ink);letter-spacing:-.015em;}
.h1{font-size:clamp(34px,5vw,60px);line-height:1.06;font-weight:700;}
.h2{font-size:clamp(28px,3.6vw,44px);line-height:1.1;margin-bottom:16px;font-weight:600;}
.lede{font-size:17px;color:var(--ink-soft);max-width:620px;margin-bottom:48px;}
.eyebrow{font-family:var(--font-m);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--blue);
  font-weight:500;display:flex;align-items:center;gap:10px;margin-bottom:18px;}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--blue);}

/* --------------------------------------------------------------------------
   4. NAV
   -------------------------------------------------------------------------- */
#nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 0;
  transition:background .4s,border-color .4s,backdrop-filter .4s;}
#nav.scrolled{background:color-mix(in srgb, var(--bg) 82%, transparent);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);}
#nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.logo{font-family:var(--font-d);font-size:19px;font-weight:500;line-height:1.15;white-space:nowrap;}
.logo span{color:var(--blue);}
.navlinks{display:flex;gap:32px;font-size:14px;color:var(--ink-soft);}
.navlinks a{transition:color .25s;position:relative;}
.navlinks a:hover{color:var(--blue);}
.navlinks a.active{color:var(--ink);}
.navlinks a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--blue);}
.navright{display:flex;align-items:center;gap:18px;}
.toggle{width:46px;height:26px;border-radius:20px;background:var(--surface-2);border:1px solid var(--line);
  position:relative;cursor:pointer;flex-shrink:0;padding:0;}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:var(--blue);transition:transform .35s var(--ease);}
[data-theme="dark"] .toggle::after{transform:translateX(20px);}
.cta-btn{padding:11px 22px;border-radius:30px;background:var(--ink);color:var(--bg);font-size:13px;
  font-weight:600;letter-spacing:.3px;transition:transform .3s var(--ease),background .3s;white-space:nowrap;}
.cta-btn:hover{transform:translateY(-2px);background:var(--blue);color:#fff;}

/* Mobile menu (addition to the /pawan system, which has no mobile nav) */
.burger{display:none;width:42px;height:36px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface-2);cursor:pointer;position:relative;flex-shrink:0;}
.burger i{position:absolute;left:11px;right:11px;height:1.5px;background:var(--ink);border-radius:2px;
  transition:transform .35s var(--ease),opacity .2s;}
.burger i:nth-child(1){top:12px;} .burger i:nth-child(2){top:17.5px;} .burger i:nth-child(3){top:23px;}
.burger.open i:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.burger.open i:nth-child(2){opacity:0;}
.burger.open i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}
#mobilemenu{position:fixed;inset:0 0 auto 0;top:0;z-index:99;padding:92px var(--pad) 32px;
  background:color-mix(in srgb, var(--bg) 96%, transparent);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);transform:translateY(-102%);transition:transform .45s var(--ease);}
#mobilemenu.open{transform:translateY(0);}
#mobilemenu a{display:block;font-family:var(--font-d);font-size:26px;padding:14px 0;border-bottom:1px solid var(--line);}
#mobilemenu a:last-of-type{border-bottom:0;}
@media(max-width:900px){
  .navlinks{display:none;}
  .burger{display:block;}
  .navright .cta-btn{display:none;}
}

/* --------------------------------------------------------------------------
   5. HERO
   -------------------------------------------------------------------------- */
#hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding-top:80px;}
.hero-shape{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;pointer-events:none;}
.shape1{width:520px;height:520px;background:radial-gradient(circle,var(--blue) 0%,transparent 70%);top:-160px;right:-120px;opacity:.25;}
.shape2{width:380px;height:380px;background:radial-gradient(circle,var(--blue) 0%,transparent 70%);bottom:-140px;left:-100px;opacity:.15;}
.hero-grid{position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,black 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,black 20%,transparent 75%);opacity:.6;}
.hero-inner{position:relative;z-index:2;}
.hero-name{font-family:var(--font-m);font-size:11.5px;letter-spacing:3px;text-transform:uppercase;color:var(--gray);margin-bottom:28px;}
.hero-headline{font-family:var(--font-d);font-weight:800;font-size:clamp(38px,6vw,80px);line-height:1.02;
  letter-spacing:-.03em;max-width:920px;}
.hero-headline em{font-style:normal;color:var(--blue);font-weight:800;}
.hero-sub{font-size:18px;color:var(--ink-soft);max-width:560px;margin-top:28px;}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:36px;}
.btn-primary{padding:15px 30px;border-radius:40px;background:var(--blue);color:#fff;font-size:14px;font-weight:600;
  display:inline-flex;align-items:center;gap:9px;transition:transform .3s var(--ease),box-shadow .3s;}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 34px -14px var(--blue);}
.btn-ghost{padding:15px 30px;border-radius:40px;border:1px solid var(--line);color:var(--ink);font-size:14px;
  font-weight:600;display:inline-flex;align-items:center;gap:9px;transition:border-color .3s,color .3s,transform .3s var(--ease);}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-3px);}
.hero-meta{display:flex;gap:44px;margin-top:64px;flex-wrap:wrap;}
.hero-meta div{font-family:var(--font-m);font-size:11px;letter-spacing:1px;color:var(--gray);text-transform:uppercase;}
.hero-meta strong{display:block;font-family:var(--font-d);font-size:24px;color:var(--ink);font-weight:700;
  margin-bottom:6px;letter-spacing:-.02em;text-transform:none;}
.scroll-cue{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);font-family:var(--font-m);font-size:10.5px;letter-spacing:2px;
  text-transform:uppercase;color:var(--gray);display:flex;flex-direction:column;align-items:center;gap:10px;}
.scroll-cue::after{content:"";width:1px;height:36px;background:linear-gradient(var(--blue),transparent);
  animation:scrolldown 1.8s infinite;}
@keyframes scrolldown{
  0%{opacity:0;transform:scaleY(0);transform-origin:top;}
  40%{opacity:1;transform:scaleY(1);transform-origin:top;}
  60%{transform-origin:bottom;transform:scaleY(1);opacity:1;}
  100%{transform-origin:bottom;transform:scaleY(0);opacity:0;}
}
@media(max-width:600px){.scroll-cue{display:none;}}

/* Interior page hero */
.page-hero{padding:190px 0 90px;position:relative;overflow:hidden;border-bottom:1px solid var(--line);}
.page-hero .hero-grid{opacity:.45;}
.page-hero-inner{position:relative;z-index:2;}
.page-hero h1{font-family:var(--font-d);font-weight:800;font-size:clamp(36px,5.2vw,64px);line-height:1.04;
  letter-spacing:-.03em;max-width:860px;}
.page-hero h1 em{font-style:normal;color:var(--blue);font-weight:800;}
.page-hero p{font-size:17px;color:var(--ink-soft);max-width:600px;margin-top:22px;}

/* --------------------------------------------------------------------------
   6. MARQUEE (JS driven so it keeps moving under Reduce Motion)
   -------------------------------------------------------------------------- */
.marquee-sec{padding:56px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;}
.marquee-label{text-align:center;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gray);margin-bottom:28px;}
.marquee{display:flex;width:max-content;will-change:transform;}
.marquee-group{display:flex;gap:64px;padding-right:64px;align-items:center;}
.marquee span{font-family:var(--font-d);font-size:22px;color:var(--ink-soft);white-space:nowrap;opacity:.6;
  transition:opacity .3s,color .3s;}
.marquee span:hover{opacity:1;color:var(--blue);}

/* --------------------------------------------------------------------------
   7. SERVICES (3x3 grid for the nine services)
   -------------------------------------------------------------------------- */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:20px;overflow:hidden;}
.service-card{background:var(--surface);padding:36px 28px;transition:background .35s;display:block;}
.service-card:hover{background:var(--surface-2);}
.service-num{font-family:var(--font-d);font-size:13px;color:var(--blue);margin-bottom:18px;}
.service-title{font-family:var(--font-d);font-size:19px;margin-bottom:10px;}
.service-desc{font-size:13.5px;color:var(--gray);line-height:1.6;}
@media(max-width:860px){.service-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.service-grid{grid-template-columns:1fr;}}

/* Detailed service rows on the services page */
.svc-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:56px;padding:56px 0;
  border-bottom:1px solid var(--line);align-items:start;}
.svc-row:last-child{border-bottom:0;}
.svc-row-head .num{font-family:var(--font-d);font-size:13px;color:var(--blue);margin-bottom:14px;}
.svc-row-head h3{font-family:var(--font-d);font-size:28px;line-height:1.15;}
.svc-row-body p{color:var(--ink-soft);font-size:15.5px;line-height:1.75;margin-bottom:20px;max-width:560px;}
.svc-list{display:flex;flex-wrap:wrap;gap:8px;}
.svc-list li{list-style:none;font-size:12.5px;color:var(--ink-soft);border:1px solid var(--line);
  background:var(--surface);border-radius:20px;padding:6px 14px;}
@media(max-width:860px){.svc-row{grid-template-columns:1fr;gap:22px;padding:40px 0;}}

/* --------------------------------------------------------------------------
   8. CASE STUDIES : browser mockups
   -------------------------------------------------------------------------- */
.case{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:140px;}
.case:last-child{margin-bottom:0;}
.case.reverse .case-media{order:2;}
.case.reverse .case-copy{order:1;}
.browser{border-radius:16px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 30px 80px -30px rgba(10,15,40,.35);background:var(--surface);will-change:transform;}
.browser-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--surface-2);
  border-bottom:1px solid var(--line);}
.dot{width:9px;height:9px;border-radius:50%;background:var(--line);}
.browser-url{margin-left:10px;font-size:11px;color:var(--gray);background:var(--surface);border:1px solid var(--line);
  border-radius:6px;padding:4px 12px;flex:1;}
.browser-body{aspect-ratio:16/11;position:relative;overflow:hidden;}

/* Per project mockups, recreating each client's real homepage in CSS */
.mock-badlaav{background:#1b2951;padding:26px;display:flex;flex-direction:column;justify-content:center;}
.mock-badlaav .m-eyebrow{color:#8dc640;font-size:9px;letter-spacing:2px;margin-bottom:10px;}
.mock-badlaav .m-head{font-family:var(--font-d);color:#f7f3eb;font-size:22px;line-height:1.2;max-width:70%;}
.mock-badlaav .m-head em{color:#8dc640;font-style:italic;}
.mock-badlaav .m-bars{position:absolute;right:0;top:0;bottom:0;width:32%;display:flex;flex-direction:column;}
.mock-badlaav .m-bars div{flex:1;}

.mock-saathi{background:linear-gradient(160deg,#fff8ea,#ffedcc);padding:26px;position:relative;}
.mock-saathi .m-nav{display:flex;gap:14px;font-size:8px;color:#8a6a3a;margin-bottom:30px;}
.mock-saathi .m-head{font-family:var(--font-d);font-size:20px;color:#3a2a10;max-width:60%;}
.mock-saathi .m-card{position:absolute;background:#fff;border-radius:10px;padding:10px 14px;
  box-shadow:0 10px 30px rgba(200,140,20,.18);font-size:9px;color:#a6731f;font-weight:600;}
.mock-saathi .c1{bottom:22px;left:26px;} .mock-saathi .c2{top:70px;right:24px;}

.mock-ig{background:#0a1330;padding:26px;position:relative;}
.mock-ig .m-nav{display:flex;justify-content:space-between;font-size:8px;color:#a9baf5;margin-bottom:30px;}
.mock-ig .m-head{font-family:var(--font-d);color:#fff;font-size:22px;max-width:75%;}
.mock-ig .m-head span{color:#5b82ff;}
.mock-ig .m-band{position:absolute;bottom:0;left:0;right:0;height:26%;background:#0f1c4a;}

.mock-pagdandi{background:linear-gradient(150deg,#5f4152,#9d7189);padding:26px;position:relative;}
.mock-pagdandi .m-nav{display:flex;gap:12px;font-size:8px;color:#f0dfe8;margin-bottom:32px;}
.mock-pagdandi .m-head{font-family:var(--font-d);color:#fff8fb;font-size:21px;line-height:1.2;max-width:70%;}
.mock-pagdandi .m-head em{font-style:italic;color:#f4c99c;}
.mock-pagdandi .m-strip{position:absolute;bottom:22px;left:26px;right:26px;display:flex;gap:8px;}
.mock-pagdandi .m-strip div{flex:1;height:26px;border-radius:5px;background:rgba(255,255,255,.16);}

.mock-ga{background:#12321f;padding:26px;position:relative;}
.mock-ga .m-nav{display:flex;gap:12px;font-size:8px;color:#cfe8d4;margin-bottom:34px;}
.mock-ga .m-head{font-family:var(--font-d);color:#f2fbf4;font-size:21px;max-width:65%;}
.mock-ga .m-tag{position:absolute;bottom:24px;left:26px;background:#3f7a44;color:#eafcee;font-size:9px;
  padding:6px 14px;border-radius:4px;}

.mock-iconic{background:linear-gradient(165deg,#2b4a5e,#7fa2ad);padding:26px;position:relative;}
.mock-iconic .m-nav{display:flex;gap:12px;font-size:8px;color:#e4f0f4;margin-bottom:30px;}
.mock-iconic .m-head{font-family:var(--font-d);color:#fff;font-size:21px;max-width:66%;}
.mock-iconic .m-ridge{position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(180deg,transparent,rgba(12,30,40,.75));}
.mock-iconic .m-pill{position:absolute;bottom:22px;left:26px;background:#e8a33d;color:#25303a;font-size:9px;
  font-weight:700;padding:6px 13px;border-radius:20px;}

.mock-yoga{background:linear-gradient(160deg,#f3f1e6,#dfe6d5);padding:26px;position:relative;}
.mock-yoga .m-nav{display:flex;gap:12px;font-size:8px;color:#6d7a5c;margin-bottom:30px;}
.mock-yoga .m-head{font-family:var(--font-d);color:#39432c;font-size:20px;max-width:62%;}
.mock-yoga .m-circle{position:absolute;right:-30px;bottom:-40px;width:170px;height:170px;border-radius:50%;
  border:1px solid #a9b795;}
.mock-yoga .m-btn{position:absolute;bottom:24px;left:26px;background:#5c6b46;color:#f3f1e6;font-size:9px;
  padding:7px 15px;border-radius:20px;}

.mock-life{background:#faf7f2;padding:26px;position:relative;}
.mock-life .m-nav{display:flex;gap:12px;font-size:8px;color:#9a8f80;margin-bottom:26px;}
.mock-life .m-head{font-family:var(--font-d);color:#2b241c;font-size:20px;max-width:70%;font-style:italic;}
.mock-life .m-lines{position:absolute;bottom:24px;left:26px;right:26px;display:flex;flex-direction:column;gap:7px;}
.mock-life .m-lines div{height:5px;border-radius:3px;background:#e3dbd0;}
.mock-life .m-lines div:nth-child(2){width:82%;} .mock-life .m-lines div:nth-child(3){width:58%;}

.mock-eo{background:linear-gradient(140deg,#101a3d,#2f5eff);padding:26px;position:relative;}
.mock-eo .m-nav{display:flex;justify-content:space-between;font-size:8px;color:#c6d3ff;margin-bottom:32px;}
.mock-eo .m-head{font-family:var(--font-d);color:#fff;font-size:21px;max-width:70%;}
.mock-eo .m-chip{position:absolute;bottom:24px;left:26px;display:flex;gap:8px;}
.mock-eo .m-chip span{background:#e8a33d;color:#101a3d;font-size:9px;font-weight:700;padding:5px 12px;border-radius:20px;}

.mock-uu{background:#1a1a2e;padding:26px;position:relative;}
.mock-uu .m-nav{display:flex;gap:12px;font-size:8px;color:#9fc9c0;margin-bottom:30px;}
.mock-uu .m-head{font-family:var(--font-d);color:#d4c4a8;font-size:21px;max-width:66%;letter-spacing:.5px;}
.mock-uu .m-arcs{position:absolute;right:22px;bottom:22px;display:flex;align-items:flex-end;gap:5px;}
.mock-uu .m-arcs i{display:block;width:9px;border-radius:5px 5px 0 0;background:#2a7d6e;}
.mock-uu .m-arcs i:nth-child(1){height:16px;} .mock-uu .m-arcs i:nth-child(2){height:26px;}
.mock-uu .m-arcs i:nth-child(3){height:38px;} .mock-uu .m-arcs i:nth-child(4){height:28px;}
.mock-uu .m-arcs i:nth-child(5){height:18px;}

.case-copy .case-tag{display:inline-block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--blue);background:var(--blue-tint);padding:5px 12px;border-radius:20px;margin-bottom:18px;}
.case-copy h3{font-family:var(--font-d);font-size:30px;margin-bottom:14px;}
.case-copy p{color:var(--ink-soft);font-size:15px;margin-bottom:22px;max-width:460px;}
.case-stats{display:flex;gap:32px;margin-bottom:22px;flex-wrap:wrap;}
.case-stats strong{display:block;font-family:var(--font-d);font-size:26px;color:var(--blue);}
.case-stats span{font-size:11px;color:var(--gray);}
.case-link{font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:8px;
  border-bottom:1px solid var(--ink);padding-bottom:2px;transition:gap .3s,color .3s,border-color .3s;}
.case-link:hover{gap:13px;color:var(--blue);border-color:var(--blue);}
@media(max-width:860px){
  .case{grid-template-columns:1fr;gap:32px;margin-bottom:90px;}
  .case.reverse .case-media{order:1;} .case.reverse .case-copy{order:2;}
}

/* --------------------------------------------------------------------------
   9. WORK GRID
   -------------------------------------------------------------------------- */
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.more-grid.two{grid-template-columns:1fr 1fr;}
.more-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);
  transition:transform .4s var(--ease),box-shadow .4s;display:block;}
.more-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px -24px rgba(10,15,40,.3);}
.more-thumb{aspect-ratio:16/9;position:relative;overflow:hidden;}
.thumb-pagdandi{background:linear-gradient(135deg,#7a5a6b,#c9a4b8);}
.thumb-eo{background:linear-gradient(135deg,#e8a33d,#5b82ff);}
.thumb-iconic{background:linear-gradient(135deg,#2b4a5e,#7fa2ad);}
.thumb-yoga{background:linear-gradient(135deg,#5c6b46,#b7c2a3);}
.thumb-life{background:linear-gradient(135deg,#8a7f70,#ded4c6);}
.thumb-uu{background:linear-gradient(135deg,#2a7d6e,#1a1a2e);}
.thumb-ga{background:linear-gradient(135deg,#12321f,#5c9c6a);}
.more-info{padding:20px 22px;}
.more-info h4{font-family:var(--font-d);font-size:17px;margin-bottom:4px;}
.more-info span{font-size:12px;color:var(--gray);}
@media(max-width:900px){.more-grid,.more-grid.two{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.more-grid,.more-grid.two{grid-template-columns:1fr;}}

/* --------------------------------------------------------------------------
   9b. BRAND IDENTITY BLOCKS
   -------------------------------------------------------------------------- */
.brand-block{border:1px solid var(--line);border-radius:20px;padding:40px;margin-bottom:28px;background:var(--surface);}
.brand-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;flex-wrap:wrap;gap:8px;}
.brand-top h3{font-family:var(--font-d);font-size:24px;}
.brand-top span{font-size:12px;color:var(--gray);}
.brand-desc{color:var(--ink-soft);font-size:14.5px;max-width:640px;margin-bottom:26px;}
.swatches{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px;}
.swatch{width:96px;height:60px;border-radius:10px;display:flex;align-items:flex-end;padding:8px;font-size:10px;
  color:#fff;font-weight:600;line-height:1.2;}
.type-pair{display:flex;gap:40px;flex-wrap:wrap;}
.type-pair div strong{display:block;font-family:var(--font-d);font-size:15px;margin-bottom:2px;}
.type-pair div span{font-size:12px;color:var(--gray);}
.coming-soon{border:1.5px dashed var(--line);border-radius:16px;padding:26px;text-align:center;color:var(--gray);font-size:13.5px;}
@media(max-width:600px){
  .brand-block{padding:26px 22px;}
  .swatch{width:calc(33.333% - 7px);height:54px;}
}

/* --------------------------------------------------------------------------
   10. BROCHURES / PRINT
   -------------------------------------------------------------------------- */
.brochure-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.brochure-card{border-radius:14px;overflow:hidden;border:1px solid var(--line);transition:transform .4s var(--ease);}
.brochure-card:hover{transform:translateY(-6px);}
.brochure-swatch{aspect-ratio:4/3;display:flex;align-items:flex-end;padding:16px;color:#fff;
  font-family:var(--font-d);font-size:15px;}
.b1{background:linear-gradient(135deg,#3a6b52,#6b8f63);} .b2{background:linear-gradient(135deg,#4a5a7a,#7a8cae);}
.b3{background:linear-gradient(135deg,#8a6b4a,#b58a5c);} .b4{background:linear-gradient(135deg,#4169e1,#8fa6ee);}
.b5{background:linear-gradient(135deg,#6b7a4a,#9caa6b);} .b6{background:linear-gradient(135deg,#7a5a6b,#a8829a);}
.b7{background:linear-gradient(135deg,#2f5c4a,#7fae8c);} .b8{background:linear-gradient(135deg,#8a5a3a,#c99a6b);}
.b9{background:linear-gradient(135deg,#3f4a6b,#8a95b8);} .b10{background:linear-gradient(135deg,#6b5a3a,#b09a63);}
.brochure-sub{padding:14px 16px;background:var(--surface);font-size:12px;color:var(--gray);}
@media(max-width:860px){.brochure-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.brochure-grid{grid-template-columns:1fr;}}

/* --------------------------------------------------------------------------
   11. SOCIAL
   -------------------------------------------------------------------------- */
.social-group-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--blue);font-weight:600;
  margin:36px 0 16px;}
.social-group-label:first-child{margin-top:0;}
.social-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.social-card{border:1px solid var(--line);border-radius:14px;padding:20px;
  transition:border-color .3s,transform .3s;display:block;}
.social-card:hover{border-color:var(--blue);transform:translateY(-3px);}
.social-handle{font-family:var(--font-d);font-size:15px;margin-bottom:4px;word-break:break-word;}
.social-desc{font-size:12px;color:var(--gray);margin-bottom:10px;}
.status{display:inline-block;font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:3px 9px;border-radius:20px;}
.status-active{background:var(--blue-tint);color:var(--blue);}
.status-archive{background:var(--surface-2);color:var(--gray);}
@media(max-width:860px){.social-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.social-grid{grid-template-columns:1fr;}}

/* --------------------------------------------------------------------------
   12. VALUE PROPS / PROCESS
   -------------------------------------------------------------------------- */
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.value-card{border:1px solid var(--line);border-radius:18px;padding:30px 26px;background:var(--surface);
  transition:border-color .3s,transform .35s var(--ease);}
.value-card:hover{border-color:var(--blue);transform:translateY(-4px);}
.value-card h4{font-family:var(--font-d);font-size:18px;margin-bottom:9px;}
.value-card p{font-size:13.5px;color:var(--gray);line-height:1.65;}
@media(max-width:860px){.value-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.value-grid{grid-template-columns:1fr;}}

.process{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:20px;overflow:hidden;}
.process-step{background:var(--surface);padding:34px 26px;}
.process-step .step-n{font-family:var(--font-d);font-size:34px;color:var(--blue-tint);line-height:1;margin-bottom:14px;}
[data-theme="dark"] .process-step .step-n{color:var(--surface-2);}
.process-step h4{font-family:var(--font-d);font-size:17px;margin-bottom:8px;}
.process-step p{font-size:13px;color:var(--gray);line-height:1.6;}
@media(max-width:860px){.process{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.process{grid-template-columns:1fr;}}

/* --------------------------------------------------------------------------
   13. ABOUT
   -------------------------------------------------------------------------- */
.about-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;}
/* Two equal columns of running prose. Declared as a class rather than an
   inline style, because an inline grid-template-columns beats every media
   query and traps the text in two narrow columns on a phone. */
.about-grid.even{grid-template-columns:1fr 1fr;gap:52px;}
@media(max-width:860px){.about-grid.even{grid-template-columns:1fr;gap:0;}}
.about-text p{color:var(--ink-soft);margin-bottom:18px;font-size:16px;line-height:1.75;}
.about-side{background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:32px;height:fit-content;}
.about-side-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--blue);font-weight:600;
  margin:22px 0 10px;}
.about-side-label:first-child{margin-top:0;}
.about-tag{display:block;font-size:13px;color:var(--ink-soft);padding:5px 0;}
@media(max-width:860px){.about-grid{grid-template-columns:1fr;gap:36px;}}

.pillar{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;}
.pillar-item h4{font-family:var(--font-d);font-size:20px;margin-bottom:10px;}
.pillar-item p{font-size:14.5px;color:var(--ink-soft);line-height:1.7;}
@media(max-width:860px){.pillar{grid-template-columns:1fr;gap:26px;}}

/* --------------------------------------------------------------------------
   14. TESTIMONIALS
   -------------------------------------------------------------------------- */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.testi-grid.two{grid-template-columns:1fr 1fr;}
.testi-card{border:1px solid var(--line);border-radius:20px;padding:32px;background:var(--surface);
  display:flex;flex-direction:column;}
.testi-quote{font-family:var(--font-b);font-weight:500;font-size:16.5px;line-height:1.62;color:var(--ink);
  margin-bottom:26px;flex:1;position:relative;padding-top:26px;}
.testi-quote::before{content:"\201C";position:absolute;top:-6px;left:-2px;font-family:var(--font-d);font-weight:800;
  font-size:46px;line-height:1;color:var(--blue);opacity:.55;}
.testi-who{display:flex;align-items:center;gap:14px;}
.testi-avatar{width:44px;height:44px;border-radius:50%;background:var(--blue-tint);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:15px;flex-shrink:0;}
.testi-name{font-size:14px;font-weight:600;}
.testi-role{font-size:12px;color:var(--gray);}
@media(max-width:960px){.testi-grid,.testi-grid.two{grid-template-columns:1fr;}}

/* --------------------------------------------------------------------------
   15. CONTACT FORM
   -------------------------------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
.field{margin-bottom:20px;}
.field label{display:block;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--gray);
  margin-bottom:8px;font-weight:600;}
.field input,.field select,.field textarea{width:100%;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;font-size:14.5px;color:var(--ink);transition:border-color .3s,background .3s;}
.field textarea{min-height:140px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);background:var(--bg);}
.field input::placeholder,.field textarea::placeholder{color:var(--gray);}
.form-note{font-size:12.5px;color:var(--gray);margin-top:14px;}
/* Honeypot. Moved out of view rather than display:none, since some bots skip
   fields that are explicitly hidden but happily fill ones that are merely
   positioned away. Kept out of the tab order and off screen readers. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.contact-detail{border:1px solid var(--line);border-radius:20px;padding:32px;background:var(--surface-2);}
.contact-detail .cd-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--blue);
  font-weight:600;margin:24px 0 8px;}
.contact-detail .cd-label:first-child{margin-top:0;}
.contact-detail a,.contact-detail p{font-size:15px;color:var(--ink-soft);display:block;padding:3px 0;
  transition:color .25s;}
.contact-detail a:hover{color:var(--blue);}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;gap:40px;}}

/* --------------------------------------------------------------------------
   16. CLOSING CTA + FOOTER
   -------------------------------------------------------------------------- */
.closing{background:var(--ink);color:#f7f8ff;padding:var(--sec) 0 56px;}
[data-theme="dark"] .closing{background:var(--surface-2);}
.closing .eyebrow{color:#8fa6ee;}
.closing .eyebrow::before{background:#8fa6ee;}
.closing-title{font-family:var(--font-d);font-weight:800;font-size:clamp(32px,4.8vw,58px);line-height:1.06;
  letter-spacing:-.03em;margin-bottom:24px;color:#f7f8ff;}
.closing-title em{font-style:normal;color:#8fa6ee;font-weight:800;}
.closing-text{font-size:17px;color:rgba(247,248,255,.7);max-width:520px;margin-bottom:44px;}
.contact-row{display:flex;gap:20px;flex-wrap:wrap;align-items:center;}
.mail-btn{padding:16px 32px;border-radius:40px;background:#4169e1;color:#fff;font-size:15px;font-weight:600;
  display:inline-flex;align-items:center;gap:10px;transition:transform .3s var(--ease);}
.mail-btn:hover{transform:translateY(-3px);}
.ghost-btn{padding:16px 32px;border-radius:40px;border:1px solid rgba(247,248,255,.28);color:#f7f8ff;
  font-size:15px;font-weight:600;display:inline-flex;align-items:center;gap:10px;
  transition:transform .3s var(--ease),border-color .3s;}
.ghost-btn:hover{transform:translateY(-3px);border-color:#8fa6ee;}
.footer-cols{margin-top:100px;padding-top:44px;border-top:1px solid rgba(247,248,255,.12);
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:36px;}
.footer-cols h5{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(247,248,255,.45);
  font-weight:600;margin-bottom:14px;font-family:var(--font-b);}
.footer-cols a,.footer-cols p{display:block;font-size:13.5px;color:rgba(247,248,255,.72);padding:4px 0;
  transition:color .25s;}
.footer-cols a:hover{color:#8fa6ee;}
.footer-brand{font-family:var(--font-d);font-size:20px;color:#f7f8ff;margin-bottom:10px;}
.footer-brand span{color:#8fa6ee;}
.footer-blurb{font-size:13.5px;color:rgba(247,248,255,.6);max-width:280px;line-height:1.7;}
.footer-meta{margin-top:52px;padding-top:24px;border-top:1px solid rgba(247,248,255,.12);
  display:flex;justify-content:space-between;font-size:12px;color:rgba(247,248,255,.5);flex-wrap:wrap;gap:10px;}
@media(max-width:860px){.footer-cols{grid-template-columns:1fr 1fr;gap:30px;}}
/* On a phone a single stacked column ran to nearly three screens. The brand
   and contact blocks stay full width because their lines are long, while the
   two short link lists sit side by side, which roughly halves the height. */
@media(max-width:560px){
  .footer-cols{grid-template-columns:1fr 1fr;gap:30px 18px;margin-top:64px;padding-top:34px;}
  .footer-cols > div:first-child{grid-column:1 / -1;}
  .footer-cols > div:last-child{grid-column:1 / -1;}
  .footer-cols a,.footer-cols p{font-size:13px;padding:3px 0;}
  .footer-cols h5{margin-bottom:10px;}
  .footer-blurb{max-width:none;}
  .footer-meta{margin-top:36px;}
}

/* --------------------------------------------------------------------------
   16b. TYPE SYSTEM LAYER
   Cabinet Grotesk carries display, Satoshi carries reading and the label
   technical layer: small uppercase labels, numerals, and system text. Keeping
   those three jobs separate is what stops the page reading as decorated.
   -------------------------------------------------------------------------- */
/* Labels are Satoshi now rather than a monospace, so they lean on tracking and
   weight to keep reading as system text instead of as body copy. */
.marquee-label,.about-side-label,.social-group-label,.metric-label,.cd-label,
.footer-cols h5,.field label,.status,.case-copy .case-tag,.case-stats span,
.service-num,.svc-row-head .num,.browser-url,
.brand-top span,.more-info span,.brochure-sub,.form-note,.footer-meta,
.piece-sub,.piece-vis::after,.stack-tags span,.step-n,.hero-name,.scroll-cue,
.hero-meta div,.eyebrow{
  font-family:var(--font-m);font-weight:500;
}
.service-num,.svc-row-head .num,.stack-n{letter-spacing:1.5px;font-weight:600;}
.step-n{letter-spacing:2px;font-weight:600;}

/* Non heading elements that should still carry the display face. */
.service-title,.social-handle,.value-card h4,.more-info h4,.brand-top h3,
.svc-row-head h3,.process-step h4,.case-copy h3,.brochure-swatch,.footer-brand,
.pillar-item h4,.logo{font-family:var(--font-d);font-weight:600;letter-spacing:-.015em;}
.logo,.footer-brand{font-weight:700;}

/* Cabinet Grotesk sets narrower than Syne did, so display sizes come back up. */
.case-copy h3{font-size:29px;}
.brand-top h3{font-size:22px;}
.svc-row-head h3{font-size:26px;}
.case-stats strong,.hero-meta strong{font-weight:700;letter-spacing:-.02em;}

/* ==========================================================================
   18. SERVICE STACK
   Cards pin and stack as you scroll, each one sliding over the last. Reads as
   a deck being dealt rather than a grid being scanned.
   ========================================================================== */
.stack{position:relative;}
.stack-card{position:sticky;border-radius:24px;border:1px solid var(--line);background:var(--surface);
  padding:44px 46px;overflow:hidden;transform-origin:50% 0%;
  box-shadow:0 -1px 0 var(--line),0 40px 80px -60px rgba(10,15,40,.5);}
[data-theme="dark"] .stack-card{box-shadow:0 -1px 0 var(--line),0 40px 90px -50px rgba(0,0,0,.8);}
.stack-card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(600px circle at var(--mx,80%) var(--my,0%),var(--blue-tint),transparent 60%);}
.stack-card:hover::before{opacity:1;}
.stack-inner{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:start;position:relative;z-index:2;}
.stack-n{font-family:var(--font-m);font-size:12px;letter-spacing:2px;color:var(--blue);padding-top:9px;
  min-width:38px;}
.stack-card h3{font-family:var(--font-d);font-size:clamp(24px,3vw,34px);margin-bottom:14px;letter-spacing:-.025em;}
.stack-card p{color:var(--ink-soft);font-size:15.5px;line-height:1.75;max-width:660px;margin-bottom:22px;}
.stack-tags{display:flex;flex-wrap:wrap;gap:7px;}
.stack-tags span{font-family:var(--font-m);font-size:10.5px;letter-spacing:.4px;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:20px;padding:6px 13px;background:var(--bg);
  transition:border-color .3s,color .3s;}
.stack-card:hover .stack-tags span{border-color:color-mix(in srgb,var(--blue) 35%,var(--line));}
@media(max-width:760px){
  .stack-card{padding:30px 24px;border-radius:18px;}
  .stack-inner{grid-template-columns:1fr;gap:14px;}
  .stack-n{padding-top:0;}
}

/* ==========================================================================
   19. BENEFIT GRID
   Nine outcomes with line icons. Icons carry meaning here, so they are inline
   SVG on currentColor rather than an icon font or emoji.
   ========================================================================== */
.bene{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.bene-card{border:1px solid var(--line);border-radius:20px;padding:30px 28px;background:var(--surface);
  position:relative;overflow:hidden;transition:transform .45s var(--ease),border-color .4s;}
.bene-card::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .45s;pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),var(--blue-tint),transparent 62%);}
.bene-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--blue) 45%,var(--line));}
.bene-card:hover::before{opacity:1;}
.bene-ico{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--bg);
  display:flex;align-items:center;justify-content:center;color:var(--blue);margin-bottom:20px;
  position:relative;z-index:2;transition:border-color .4s,transform .5s var(--ease);}
.bene-card:hover .bene-ico{transform:translateY(-2px) rotate(-4deg);border-color:var(--blue);}
.bene-ico svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;}
.bene-card h4{font-family:var(--font-d);font-size:17.5px;margin-bottom:9px;position:relative;z-index:2;}
.bene-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.7;position:relative;z-index:2;}
@media(max-width:900px){.bene{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.bene{grid-template-columns:1fr;}}

/* ==========================================================================
   20. PROCESS FLOW
   A rail that fills as the section scrolls, with each step lighting up as it
   is reached. The motion states where you are in the process, which is the
   only reason to animate it at all.
   ========================================================================== */
.flow{position:relative;padding-top:20px;}
.flow-rail{position:absolute;left:0;right:0;top:46px;height:2px;background:var(--line);border-radius:2px;overflow:hidden;}
.flow-rail i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--blue),var(--blue-soft));
  transform:scaleX(0);transform-origin:0 50%;transition:transform .2s linear;}
.flow-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;position:relative;}
.step{padding-top:0;}
.step-node{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);background:var(--bg);
  display:flex;align-items:center;justify-content:center;margin-bottom:26px;position:relative;z-index:3;
  transition:border-color .5s var(--ease),transform .5s var(--ease),background .5s;}
.step-node::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .5s;}
.step.on .step-node{border-color:var(--blue);transform:scale(1.18);}
.step.on .step-node::after{background:var(--blue);}
.step-n{font-family:var(--font-m);font-size:11px;letter-spacing:2px;color:var(--gray);margin-bottom:10px;
  transition:color .5s;}
.step.on .step-n{color:var(--blue);}
.step h4{font-family:var(--font-d);font-size:20px;margin-bottom:9px;letter-spacing:-.02em;}
.step p{font-size:13.5px;color:var(--ink-soft);line-height:1.7;max-width:250px;}
.step{opacity:.45;transition:opacity .6s var(--ease);}
.step.on{opacity:1;}
@media(max-width:860px){
  .flow-rail{left:12px;right:auto;top:0;bottom:0;width:2px;height:auto;}
  .flow-rail i{width:100%;height:100%;transform:scaleY(0);transform-origin:50% 0;}
  .flow-steps{grid-template-columns:1fr;gap:34px;padding-left:46px;}
  .step-node{position:absolute;left:-46px;margin-bottom:0;}
  .step{position:relative;}
  .step p{max-width:none;}
}

/* ==========================================================================
   21. PRINT MASONRY
   Brochures come in landscape, portrait and square. A fixed ratio would crop
   or letterbox every one of them, so the grid flows and each piece keeps its
   own proportions.
   ========================================================================== */
.masonry{columns:3;column-gap:18px;}
.piece{break-inside:avoid;margin-bottom:18px;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  background:var(--surface);transition:transform .45s var(--ease),box-shadow .45s;}
.piece:hover{transform:translateY(-6px);box-shadow:0 26px 56px -28px rgba(10,15,40,.4);}
/* Each cover sizes itself from the file, so landscape, portrait and square
   brochures all keep their real proportions with no cropping. */
.piece-vis{position:relative;display:block;line-height:0;}
.piece-vis img{width:100%;height:auto;display:block;}
.piece-vis::before{content:"";position:absolute;left:0;right:0;bottom:0;height:48%;pointer-events:none;
  background:linear-gradient(to top,rgba(4,6,18,.88),rgba(4,6,18,.35) 45%,transparent);}
.piece-name{position:absolute;left:16px;right:16px;bottom:13px;z-index:2;color:#fff;
  font-family:var(--font-d);font-weight:600;font-size:16px;letter-spacing:-.02em;line-height:1.2;}
.piece-fmt{position:absolute;top:12px;right:12px;z-index:2;font-family:var(--font-m);font-weight:500;
  font-size:9.5px;letter-spacing:1px;color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.32);
  border-radius:20px;padding:3px 9px;background:rgba(4,6,18,.3);backdrop-filter:blur(4px);line-height:1.4;}
.piece-sub{padding:13px 16px;font-family:var(--font-m);font-size:11px;color:var(--gray);}

/* A cover with no way to open it is a picture of work rather than the work.
   The whole card is the link, with an affordance that appears on hover and is
   always visible on touch, where hover never happens. */
a.piece{display:block;color:inherit;}
.piece-open{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-m);font-size:9.5px;letter-spacing:1px;color:#fff;
  background:rgba(4,6,18,.55);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.28);
  border-radius:20px;padding:5px 10px;opacity:0;transform:translateY(-4px);
  transition:opacity .35s var(--ease),transform .35s var(--ease);}
.piece-open svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
a.piece:hover .piece-open{opacity:1;transform:none;}
@media(hover:none){.piece-open{opacity:1;transform:none;}}

/* ==========================================================================
   25b. FOUNDER BLOCK
   A small studio benefits from a named, visible person. It answers the
   question every buyer has and cannot ask directly: who will actually be
   accountable for this. Kept out of the homepage on purpose, where it would
   compete with the agency pitch rather than support it.
   ========================================================================== */
.founder{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;
  border:1px solid var(--line);border-radius:22px;padding:30px 34px;background:var(--surface);
  transition:border-color .4s;}
.founder:hover{border-color:color-mix(in srgb,var(--blue) 40%,var(--line));}
.founder-photo{width:124px;height:155px;border-radius:16px;overflow:hidden;flex-shrink:0;
  background:var(--surface-2);}
.founder-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.founder-label{font-family:var(--font-m);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;
  color:var(--blue);font-weight:500;margin-bottom:10px;}
.founder h3{font-family:var(--font-d);font-size:23px;margin-bottom:10px;letter-spacing:-.02em;}
.founder p{font-size:14.5px;color:var(--ink-soft);line-height:1.7;max-width:560px;margin-bottom:16px;}
.founder-roles{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px;}
.founder-roles span{font-family:var(--font-m);font-size:10.5px;letter-spacing:.4px;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:20px;padding:5px 12px;}
@media(max-width:640px){
  .founder{grid-template-columns:1fr;gap:22px;padding:26px 22px;}
  .founder-photo{width:104px;height:130px;}
}

/* Quiet persistent link in the footer. */
.footer-founder{display:inline-flex;align-items:center;gap:9px;margin-top:16px;
  font-family:var(--font-m);font-size:11.5px;color:rgba(247,248,255,.72);
  border-bottom:1px solid rgba(247,248,255,.22);padding-bottom:3px;transition:color .3s,border-color .3s,gap .3s;}
.footer-founder:hover{color:#8fa6ee;border-color:#8fa6ee;gap:13px;}

/* ==========================================================================
   25c. CONSENT BANNER
   Sits bottom left so it never collides with the floating contact buttons.
   Deliberately small: one line, two buttons. A wall of text gets dismissed
   without being read, which defeats the purpose of asking.
   ========================================================================== */
.consent{position:fixed;left:20px;bottom:20px;z-index:190;max-width:390px;
  background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:18px;padding:22px 24px;
  box-shadow:0 24px 60px -26px rgba(4,8,26,.55);
  transform:translateY(140%);opacity:0;transition:transform .55s var(--ease),opacity .45s;}
.consent.show{transform:none;opacity:1;}
.consent p{font-size:13.5px;line-height:1.65;color:var(--ink-soft);margin-bottom:16px;}
.consent a{color:var(--blue);border-bottom:1px solid color-mix(in srgb,var(--blue) 45%,transparent);}
.consent a:hover{border-bottom-color:var(--blue);}
.consent-row{display:flex;gap:9px;flex-wrap:wrap;}
.consent button{font-family:var(--font-b);font-size:12.5px;font-weight:600;padding:10px 18px;
  border-radius:30px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;
  transition:transform .3s var(--ease),background .3s,border-color .3s,color .3s;}
.consent button:hover{transform:translateY(-2px);}
.consent .accept{background:var(--blue);border-color:var(--blue);color:#fff;}
.consent .decline{color:var(--ink-soft);}
.consent .decline:hover{border-color:var(--ink-soft);color:var(--ink);}
@media(max-width:520px){
  .consent{left:12px;right:12px;bottom:12px;max-width:none;padding:18px 20px;}
}

/* Long form legal and article copy. */
.prose{max-width:720px;}
.prose h2{font-family:var(--font-d);font-size:26px;margin:44px 0 14px;letter-spacing:-.02em;}
.prose h3{font-family:var(--font-d);font-size:19px;margin:30px 0 10px;}
.prose p,.prose li{font-size:16px;line-height:1.8;color:var(--ink-soft);margin-bottom:16px;}
.prose ul,.prose ol{padding-left:22px;margin-bottom:20px;}
.prose li{margin-bottom:8px;}
.prose strong{color:var(--ink);font-weight:600;}
.prose a{color:var(--blue);border-bottom:1px solid color-mix(in srgb,var(--blue) 40%,transparent);}
.prose-updated{font-family:var(--font-m);font-size:11.5px;letter-spacing:1px;text-transform:uppercase;
  color:var(--gray);margin-bottom:34px;}

/* ==========================================================================
   26. IMAGE COMPONENTS
   ========================================================================== */
/* Logo swaps by theme. Two files, one for each background.
   The light variant is only hidden in dark mode when a dark variant is
   actually present, so a single uploaded logo never disappears. */
.logo img{height:30px;width:auto;display:block;}
.logo .on-light{display:block;} .logo .on-dark{display:none;}
[data-theme="dark"] .logo:has(.on-dark) .on-light{display:none;}
[data-theme="dark"] .logo .on-dark{display:block;}
@supports not selector(:has(*)){
  [data-theme="dark"] .logo .on-light{display:none;}
}
.footer-brand img{height:30px;width:auto;display:block;margin-bottom:14px;}

/* Real faces replace the initials once a photo exists. */
.testi-avatar{overflow:hidden;padding:0;}
.testi-avatar img{width:100%;height:100%;object-fit:cover;display:block;}

/* Client logos inside the brand guide blocks. */
.brand-logo{height:46px;width:auto;margin-bottom:20px;object-fit:contain;object-position:left center;}
.brand-logo.on-dark{display:none;}
[data-theme="dark"] .brand-logo.on-light{display:none;}
[data-theme="dark"] .brand-logo.on-dark{display:block;}
@media(max-width:600px){.brand-logo{height:38px;}}
@media(max-width:900px){.masonry{columns:2;}}
@media(max-width:560px){.masonry{columns:1;}}

/* ==========================================================================
   22. SCREENSHOT SLOT
   Each case study shows a real screenshot once supplied. Until then the CSS
   recreation underneath shows through, so nothing ever renders broken.
   ========================================================================== */
.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;z-index:2;}

/* ==========================================================================
   23. AMBIENT + UTILITY
   ========================================================================== */
#cursorglow{position:fixed;width:480px;height:480px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,color-mix(in srgb,var(--blue) 16%,transparent) 0%,transparent 62%);
  filter:blur(46px);transform:translate(-50%,-50%);opacity:0;transition:opacity .6s;will-change:transform;}
#progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--blue),var(--blue-soft));z-index:200;will-change:transform;}

.util{position:fixed;right:20px;bottom:20px;z-index:180;display:flex;flex-direction:column;gap:11px;}
.util a,.util button{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);
  color:var(--ink);transition:transform .35s var(--ease),background .3s,color .3s,border-color .3s,opacity .4s;
  box-shadow:0 12px 30px -14px rgba(10,15,40,.45);}
.util a svg,.util button svg{width:21px;height:21px;}
.util a:hover,.util button:hover{transform:translateY(-3px) scale(1.05);}
.util .wa{background:#25d366;border-color:#25d366;color:#fff;}
.util .wa:hover{background:#1eb955;border-color:#1eb955;}
.util .call{color:var(--blue);border-color:color-mix(in srgb,var(--blue) 40%,var(--line));}
.util .call:hover{background:var(--blue);color:#fff;}
#toTop{opacity:0;pointer-events:none;}
#toTop.show{opacity:1;pointer-events:auto;}
@media(max-width:600px){
  .util{right:14px;bottom:14px;gap:9px;}
  .util a,.util button{width:44px;height:44px;}
}

/* ==========================================================================
   24. PILLARS (rebuilt)
   ========================================================================== */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.pil{border:1px solid var(--line);border-radius:22px;padding:38px 32px 34px;background:var(--surface);
  position:relative;overflow:hidden;transition:transform .5s var(--ease),border-color .45s;}
.pil::after{content:attr(data-n);position:absolute;right:20px;top:8px;font-family:var(--font-d);font-weight:700;
  font-size:96px;line-height:1;color:var(--blue);opacity:.07;letter-spacing:-.05em;transition:opacity .5s,transform .6s var(--ease);}
.pil:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--blue) 45%,var(--line));}
.pil:hover::after{opacity:.14;transform:translateY(-6px);}
.pil h4{font-family:var(--font-d);font-size:21px;margin-bottom:12px;position:relative;z-index:2;letter-spacing:-.02em;}
.pil p{font-size:14.5px;color:var(--ink-soft);line-height:1.75;position:relative;z-index:2;}
@media(max-width:880px){.pillars{grid-template-columns:1fr;}}

/* ==========================================================================
   25. CAPABILITY BAND (about page, replaces the plain two column list)
   ========================================================================== */
.cap{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:22px;overflow:hidden;}
.cap div{background:var(--surface);padding:26px 24px;transition:background .4s;position:relative;}
.cap div:hover{background:var(--surface-2);}
.cap b{display:block;font-family:var(--font-d);font-size:16px;margin-bottom:6px;letter-spacing:-.02em;}
.cap span{font-family:var(--font-m);font-size:10.5px;color:var(--gray);letter-spacing:.4px;}
@media(max-width:860px){.cap{grid-template-columns:1fr 1fr;}}
/* Two columns are kept right down to the smallest screens. A single stacked
   column made this read as an undifferentiated list, so each cell gets a blue
   rule at the top instead, which gives the grid a rhythm to scan. */
@media(max-width:560px){
  .cap{grid-template-columns:1fr 1fr;border-radius:16px;}
  .cap div{padding:18px 14px;}
  .cap div::before{content:"";position:absolute;top:0;left:14px;width:18px;height:2px;background:var(--blue);
    border-radius:0 0 2px 2px;opacity:.85;}
  .cap b{font-size:13.5px;margin-top:8px;margin-bottom:4px;line-height:1.25;}
  .cap span{font-size:9.5px;line-height:1.4;display:block;}
}

/* ==========================================================================
   27. BLOG, FORMS AND SEARCH
   ========================================================================== */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.post-card{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--surface);
  display:flex;flex-direction:column;transition:transform .4s var(--ease),border-color .35s,box-shadow .4s;}
.post-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--blue) 40%,var(--line));
  box-shadow:0 24px 50px -26px rgba(10,15,40,.32);}
.post-thumb{aspect-ratio:16/10;overflow:hidden;}
.post-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.post-body{padding:24px;display:flex;flex-direction:column;flex:1;}
.post-meta{display:flex;gap:12px;font-family:var(--font-m);font-size:10.5px;letter-spacing:1px;
  text-transform:uppercase;color:var(--gray);margin-bottom:12px;}
.post-card h3{font-family:var(--font-d);font-size:19px;line-height:1.25;margin-bottom:10px;letter-spacing:-.02em;}
.post-card p{font-size:14px;color:var(--ink-soft);line-height:1.65;flex:1;margin-bottom:16px;}
.post-more{font-family:var(--font-m);font-size:11.5px;letter-spacing:.5px;color:var(--blue);}
@media(max-width:900px){.post-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.post-grid{grid-template-columns:1fr;}}

.post-hero-img{border-radius:20px;overflow:hidden;border:1px solid var(--line);}
.post-hero-img img{width:100%;height:auto;display:block;}

.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:64px;padding-top:32px;
  border-top:1px solid var(--line);max-width:720px;}
.post-nav a{display:block;}
.post-nav span{display:block;font-family:var(--font-m);font-size:10.5px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--gray);margin-bottom:7px;}
.post-nav b{font-family:var(--font-d);font-size:16px;font-weight:600;letter-spacing:-.02em;
  transition:color .3s;}
.post-nav a:hover b{color:var(--blue);}
@media(max-width:600px){.post-nav{grid-template-columns:1fr;}}

.wdt-pagination{margin-top:56px;display:flex;justify-content:center;}
.wdt-pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.wdt-pagination a,.wdt-pagination span{font-family:var(--font-m);font-size:12.5px;padding:9px 15px;
  border:1px solid var(--line);border-radius:30px;transition:border-color .3s,color .3s;}
.wdt-pagination a:hover{border-color:var(--blue);color:var(--blue);}
.wdt-pagination .current{background:var(--blue);border-color:var(--blue);color:#fff;}

/* Enquiry form feedback and spam trap. */
.form-notice{border-radius:14px;padding:16px 18px;margin-bottom:24px;font-size:14px;line-height:1.6;
  border:1px solid var(--line);}
.form-notice.ok{border-color:color-mix(in srgb,var(--blue) 45%,var(--line));background:var(--blue-tint);color:var(--ink);}
.form-notice.bad{border-color:#d9534f;background:color-mix(in srgb,#d9534f 10%,transparent);color:var(--ink);}
/* Hidden from people, visible to bots. Never display:none, which some bots detect. */
.wdt-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}

.wdt-search{display:flex;gap:9px;}
.wdt-search input{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:30px;
  padding:13px 20px;font-size:14.5px;color:var(--ink);}
.wdt-search input:focus{outline:none;border-color:var(--blue);}
.wdt-search button{font-family:var(--font-b);font-weight:600;font-size:13px;padding:13px 24px;
  border-radius:30px;border:0;background:var(--blue);color:#fff;cursor:pointer;
  transition:transform .3s var(--ease);}
.wdt-search button:hover{transform:translateY(-2px);}

.page-links{margin-top:26px;font-family:var(--font-m);font-size:12.5px;}
.page-links a{border:1px solid var(--line);border-radius:20px;padding:5px 12px;margin-left:6px;}

/* --------------------------------------------------------------------------
   17. RESPONSIVE SECTION RHYTHM
   -------------------------------------------------------------------------- */
@media(max-width:860px){
  :root{--sec:82px;--pad:22px;}
  .page-hero{padding:150px 0 66px;}
}