*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#0d0c0b;
  --cream:#ede8df;
  --cream-d:#dcd5c8;
  --cream2:#b5ada1;
  --cream3:#948b7f; /* lightened from #635c54 — original was ~3:1 contrast on --bg, fails WCAG AA for body text */
  --cream4:#2e2a26;
  --yellow:#d4a82a;
  --yellow-d:#c19820;
  --yellow-l:#e8c050;
  --glass:rgba(237,232,223,0.042);
  --border:rgba(237,232,223,0.09);
  --bh:rgba(237,232,223,0.20);
  --r:18px;
  --g:8px;
}

html{background:var(--bg);color:var(--cream);font-family:'Plus Jakarta Sans',sans-serif;scroll-behavior:smooth}
body{overflow-x:hidden}

body::after{
  content:'';position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:0.025;pointer-events:none;z-index:9000;mix-blend-mode:overlay
}

/* ── GRID ── */
.bento{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--g);
  padding:var(--g);
  max-width:1440px;
  margin:0 auto;
}

/* ── CARD ── */
.c{
  background:var(--glass);
  border:.5px solid var(--border);
  border-radius:var(--r);
  position:relative;overflow:hidden;
  transition:border-color .4s,background .4s,transform .3s;
}
.c:hover{border-color:var(--bh);background:rgba(237,232,223,0.06)}
.c::before{
  content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(237,232,223,.03),transparent);
  transform:skewX(-12deg);transition:left .8s;pointer-events:none;z-index:1;
}
.c:hover::before{left:130%}
.c>*{position:relative;z-index:2}

/* col spans */
.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}
.c5{grid-column:span 5}.c6{grid-column:span 6}.c7{grid-column:span 7}
.c8{grid-column:span 8}.c9{grid-column:span 9}.c10{grid-column:span 10}
.c12{grid-column:span 12}

/* heights */
.hnav{height:54px;margin-bottom:6px}
.hxs {height:80px}
.hsm {height:120px}
.hmd {height:200px}
.hprob{height:320px}
.hlg {height:280px}
.hxl {height:360px}
.hsvc{height:calc(70vh - var(--g)/2)} /* 70% viewport per services row */
.hh  {height:calc(92vh - 62px)}
.hha {height:calc((92vh - 62px) * .48 - var(--g)/2)}

/* padding */
.p   {padding:24px 28px}
.plg {padding:34px 40px}
.pxl {padding:42px 48px}

/* ── EMPTY ── */
.empty{background:transparent!important;border-color:transparent!important}
.empty:hover{background:transparent!important;border-color:transparent!important}
.empty::before{display:none}

/* ── CREAM (light cards as contrast) ── */
.cream{background:var(--cream)!important;border-color:transparent!important;color:var(--bg)}
.cream:hover{background:var(--cream-d)!important;border-color:transparent!important}
.cream::before{background:linear-gradient(90deg,transparent,rgba(13,12,11,.04),transparent)!important}

/* ── YELLOW (mustard accent cards) ── */
.yellow{background:var(--yellow)!important;border-color:transparent!important;color:var(--bg)}
.yellow:hover{background:var(--yellow-d)!important;border-color:transparent!important}
.yellow::before{background:linear-gradient(90deg,transparent,rgba(13,12,11,.05),transparent)!important}
.yellow .tag{color:#3d3008} /* darkened from #5c4a10 — was ~3.9:1 on yellow bg, fails AA for normal text */
.yellow .svc-title, .yellow .svc-title{color:var(--bg)!important}
.yellow .svc-desc{color:#3d3008!important}
.yellow .svc-out-row{border-color:rgba(13,12,11,.15)!important}
.yellow .svc-outcome{color:var(--bg)!important}
.yellow .svc-arr{color:var(--bg)!important}
.yellow .svc-num{-webkit-text-stroke:1.5px rgba(13,12,11,.3)!important;color:transparent!important}
.yellow.svc-card:hover .svc-num{color:var(--bg)!important;-webkit-text-stroke-color:var(--bg)!important}

/* cream service cards — same treatment as yellow, just the cream palette */
.cream .svc-title{color:var(--bg)!important}
.cream .svc-desc{color:#5e574f!important}
.cream .svc-out-row{border-color:rgba(13,12,11,.1)!important}
.cream .svc-outcome{color:var(--bg)!important}
.cream .svc-arr{color:var(--bg)!important}
.cream .svc-num{-webkit-text-stroke:1.5px var(--bg)!important;color:var(--bg)!important}

/* ── ARROW ICON — unified bold diagonal arrow, same shape as the big
   "Get in touch" artwork, everywhere a ↗ glyph was used before. Built as a
   mask so it always takes the current text colour (dark on cream/yellow
   cards, cream on dark cards) without needing separate light/dark assets. ── */
.arrow-icon{
  display:inline-block;
  width:1em;height:1em;
  background-color:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='40' y1='160' x2='160' y2='40' stroke='%23000' stroke-width='16' stroke-linecap='round'/%3E%3Cpolyline points='70,40 160,40 160,130' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='40' y1='160' x2='160' y2='40' stroke='%23000' stroke-width='16' stroke-linecap='round'/%3E%3Cpolyline points='70,40 160,40 160,130' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  vertical-align:middle;
  flex-shrink:0;
}

/* ── TYPE ── */
.tag{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--cream3);display:block}
.cream .tag{color:#7a716a}
.tx{font-size:13px;font-weight:300;line-height:1.72;color:var(--cream3)}
.cream .tx{color:#5e574f}

/* SECTION HEADER — big naslov */
/* chapter break: top rule + extra breathing room so each section reads as a
   distinct block while scrolling, not a continuation of the previous one */
.section-header{
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:64px 28px 22px;
  margin-top:24px;
  border-top:.5px solid var(--border);
  position:relative;
}
.section-num{
  font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--yellow); /* accent colour = "you are here" cue, consistent with nav active state */
  display:flex;align-items:center;gap:8px;
}
.section-num::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--yellow);flex-shrink:0;
}
.section-title{font-size:clamp(40px,5vw,80px);font-weight:800;letter-spacing:-.04em;line-height:.93;color:var(--cream);}
.section-title strong{font-weight:800;font-style:normal}
.section-title em{font-weight:800;font-style:normal;color:var(--cream2)}

/* masked reveal */
.ln{display:block;overflow:hidden;padding-bottom:.04em}
.li{display:block}
.w2i{font-weight:200;font-style:italic;color:var(--cream2)}
.w8 {font-weight:800;color:var(--cream)}
.w3 {font-weight:300;color:var(--cream)}

/* ── PILL ── */
.pill{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:500;letter-spacing:.05em;padding:5px 12px;border-radius:100px;background:rgba(237,232,223,.07);border:.5px solid var(--border);color:var(--cream2)}
.dot{width:6px;height:6px;border-radius:50%;background:#5bff8c;flex-shrink:0;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}

/* ── NAV ── */
.nlogo{display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cream)}
.nmenu{display:flex;align-items:center;justify-content:center;gap:30px;list-style:none;height:100%}
.nmenu li{display:flex;align-items:center}
.nmenu a{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--cream3);text-decoration:none;transition:color .3s;white-space:nowrap;line-height:1;display:inline-block}
.nmenu a:hover{color:var(--cream)}
.nmenu a.active{color:var(--yellow)} /* scroll-spy: marks which section is currently in view */

/* keyboard accessibility — visible focus ring on all interactive elements
   (none existed before; mouse-only hover states aren't enough for keyboard nav) */
a:focus-visible,
button:focus-visible,
.ncta:focus-visible,
.proj-arch:focus-visible{
  outline:2px solid var(--yellow);
  outline-offset:3px;
  border-radius:8px;
}
.ncta{background:var(--cream)!important;border-color:transparent!important;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ncta:hover{opacity:.85;transform:none!important}
.ncta span{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--bg)}

/* ── MOBILE NAV — hamburger + full-screen overlay. Hidden entirely above
   768px; the mobile media query at the bottom of this file turns it on and
   swaps it in for .ncta / .nmenu. ── */
.mnav-toggle{
  display:none;
  width:44px;height:44px;
  border-radius:50%;
  background:var(--glass);
  border:.5px solid var(--border);
  align-items:center;justify-content:center;
  cursor:pointer;
  position:relative;
  flex-shrink:0;
  padding:0;
  z-index:9800;
}
.mnav-toggle span{
  display:block;
  width:16px;height:1.5px;
  background:var(--cream);
  position:absolute;
  left:14px;
  transition:transform .3s ease, opacity .3s ease, top .3s ease;
}
.mnav-toggle span:nth-child(1){ top:17px; }
.mnav-toggle span:nth-child(2){ top:21.5px; }
.mnav-toggle span:nth-child(3){ top:26px; }
.mnav-toggle.open span:nth-child(1){ top:21.5px; transform:rotate(45deg); }
.mnav-toggle.open span:nth-child(2){ opacity:0; }
.mnav-toggle.open span:nth-child(3){ top:21.5px; transform:rotate(-45deg); }

.mnav-overlay{
  position:fixed; inset:0; z-index:9700;
  background:var(--bg);
  display:flex; flex-direction:column;
  justify-content:center;
  padding:32px;
  opacity:0; pointer-events:none;
  transform:translateY(-14px);
  transition:opacity .35s ease, transform .35s ease;
}
.mnav-overlay.open{ opacity:1; pointer-events:all; transform:translateY(0); }
.mnav-links{ list-style:none; display:flex; flex-direction:column; gap:2px; margin-bottom:36px; }
.mnav-links a{
  font-size:clamp(30px,10vw,42px); font-weight:800; letter-spacing:-.03em;
  color:var(--cream); text-decoration:none; display:block; padding:13px 0;
  border-bottom:.5px solid var(--border);
}
.mnav-links a:active{ color:var(--yellow); }
.mnav-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--cream); color:var(--bg);
  font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:16px 30px; border-radius:100px; text-decoration:none; width:fit-content;
}

/* ── HERO ── */
.htitle{font-size:clamp(52px,6.5vw,108px);line-height:.92;letter-spacing:-.04em}

/* ── BTNS ── */
.btn-p{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--bg);background:var(--cream);padding:13px 24px;border-radius:100px;text-decoration:none;transition:opacity .3s}
.btn-p:hover{opacity:.85}
.btn-o{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cream2);background:transparent;padding:13px 24px;border-radius:100px;border:.5px solid var(--border);text-decoration:none;transition:border-color .3s,color .3s}
.btn-o:hover{border-color:var(--bh);color:var(--cream)}

/* ── HERO RIGHT BIG CARDS ── */
.hero-bigcard{display:flex;flex-direction:column;justify-content:space-between;padding:30px 32px}
.hero-bigcard-icon{font-size:32px;opacity:.55;display:block}

/* ── VERTICAL TYPO MARQUEE inside hero card ── */
.typo-marquee{
  position:absolute;
  top:0;
  right:-20px;
  bottom:0;
  width:55%;
  overflow:hidden;
  z-index:1;
  pointer-events:none;
  mask-image:linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
}

/* full-card variant — marquee fills the whole card */
.typo-marquee-full{
  position:absolute;
  inset:0;
  right:0;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.typo-marquee-full .typo-marquee-track{
  width:100%;
  text-align:center;
}

.typo-marquee-full .typo-marquee-item{
  text-align:center;
  font-size:clamp(70px,8.5vw,140px);
}

/* ── BIG DOWN ARROW ── */
.big-down-arrow{
  width:55%;
  max-width:180px;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:bounceDown 2.2s ease-in-out infinite;
}
.big-down-arrow svg{
  width:100%;
  height:auto;
  display:block;
}

@keyframes bounceDown{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(14px); }
}

@keyframes bigArrowFloat{
  0%, 100%{ transform:translate(0,0) rotate(0deg); }
  50%{ transform:translate(8px,-8px) rotate(3deg); }
}

/* ── BIG WORD ── */
.big-word{
  font-size:clamp(80px,10vw,160px);
  font-weight:800;
  letter-spacing:-.055em;
  line-height:.9;
  text-align:center;
  background:linear-gradient(
    100deg,
    var(--cream) 0%,
    var(--cream) 40%,
    #ffffff 50%,
    var(--cream) 60%,
    var(--cream) 100%
  );
  background-size:200% 100%;
  background-position:100% 0;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:bigWordShimmer 5s ease-in-out infinite, bigWordBreathe 4s ease-in-out infinite;
  display:inline-block;
  will-change:background-position,transform;
}

@keyframes bigWordShimmer{
  0%   { background-position:100% 0; }
  50%  { background-position:0% 0; }
  100% { background-position:-100% 0; }
}

@keyframes bigWordBreathe{
  0%, 100%{ transform:scale(1); letter-spacing:-.055em; }
  50%     { transform:scale(1.015); letter-spacing:-.05em; }
}

.hero-bigcard:hover .big-word{
  animation-duration:2.5s, 2s;
}

.typo-marquee-track{
  display:flex;
  flex-direction:column;
  animation:typoScroll 14s linear infinite;
  will-change:transform;
}

.typo-marquee-track.reverse{
  animation:typoScrollReverse 14s linear infinite;
}

.typo-marquee-item{
  font-size:clamp(64px,7.5vw,120px);
  font-weight:800;
  letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:1.2px var(--cream);
  line-height:.95;
  text-transform:uppercase;
  text-align:right;
  padding:6px 0;
  white-space:nowrap;
}

.cream .typo-marquee-item{
  -webkit-text-stroke:1.2px var(--bg);
  color:transparent;
}

/* every other item is filled — visual rhythm */
.typo-marquee-item.solid{
  color:rgba(237,232,223,0.08);
  -webkit-text-stroke:0;
}

.cream .typo-marquee-item.solid{
  color:rgba(13,12,11,0.08);
  -webkit-text-stroke:0;
}

@keyframes typoScroll{
  0%   { transform:translateY(0); }
  100% { transform:translateY(-50%); }
}

@keyframes typoScrollReverse{
  0%   { transform:translateY(-50%); }
  100% { transform:translateY(0); }
}

.hero-bigcard:hover .typo-marquee-track{
  animation-duration:8s;
}

/* ── GRADIENT MESH VISUALS ── */
.mesh-visual{
  position:absolute;
  top:-20%;right:-15%;
  width:80%;height:80%;
  border-radius:50%;
  filter:blur(40px);
  opacity:.85;
  pointer-events:none;
  z-index:0;
  animation:meshFloat 12s ease-in-out infinite;
}

.mesh-1{
  background:radial-gradient(circle at 30% 30%, #f4a261 0%, transparent 50%),
             radial-gradient(circle at 70% 60%, #e76f51 0%, transparent 55%),
             radial-gradient(circle at 50% 20%, #f5deb3 0%, transparent 45%);
}

.mesh-2{
  background:radial-gradient(circle at 30% 40%, #c8956d 0%, transparent 55%),
             radial-gradient(circle at 70% 30%, #8b6f47 0%, transparent 50%),
             radial-gradient(circle at 50% 70%, #d4a574 0%, transparent 45%);
  opacity:.5;
}

@keyframes meshFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(-8px,12px) scale(1.05)}
  66%{transform:translate(10px,-8px) scale(.97)}
}

/* hero card mesh — second one (bottom-left position for variety) */
.mesh-3{
  position:absolute;bottom:-20%;left:-15%;top:auto;right:auto;
  width:75%;height:75%;
  border-radius:50%;
  filter:blur(45px);
  opacity:.7;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(circle at 60% 40%, #e8b88f 0%, transparent 55%),
             radial-gradient(circle at 30% 70%, #c47e58 0%, transparent 50%);
  animation:meshFloat 14s ease-in-out infinite reverse;
}

.mesh-4{
  background:radial-gradient(circle at 40% 50%, #a87045 0%, transparent 55%),
             radial-gradient(circle at 80% 30%, #5c3d28 0%, transparent 50%);
  opacity:.4;
}

/* big mesh card (problems CTA replacement) */
.mesh-bigcard{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:32px 36px;
}

.mesh-bigcard-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, #d4a574 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 80% 70%, #8b5a3c 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%, #c8956d 0%, transparent 45%),
    linear-gradient(135deg, #2a1f15 0%, #1a1410 100%);
  filter:blur(0.5px);
  pointer-events:none;
}

.mesh-bigcard-bg::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)' opacity='0.6'/%3E%3C/svg%3E");
  opacity:0.15;
  mix-blend-mode:overlay;
}

.mesh-bigcard > *{position:relative;z-index:2}

/* ── SVG ILLUSTRATIONS ── */
.illus{position:absolute;top:0;right:0;width:55%;height:65%;opacity:.9;pointer-events:none;}
.illus-full{position:absolute;inset:0;width:100%;height:100%;opacity:.92;pointer-events:none;}
.illus svg, .illus-full svg{width:100%;height:100%;display:block}

/* code preview */
.code-block{position:absolute;top:20px;right:20px;width:46%;height:38%;background:rgba(13,12,11,.55);border:.5px solid var(--border);border-radius:10px;padding:12px 14px;font-family:ui-monospace,Menlo,monospace;font-size:10px;line-height:1.7;color:var(--cream2);overflow:hidden;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:.85;transition:opacity .4s,transform .4s}
.c:hover .code-block{opacity:1;transform:translateY(-3px)}
.code-block::before{content:'';display:block;height:7px;margin-bottom:9px;background-image:radial-gradient(circle 3px at 4px 4px, #ff5f57 99%, transparent 0%), radial-gradient(circle 3px at 15px 4px, #febc2e 99%, transparent 0%), radial-gradient(circle 3px at 26px 4px, #28c840 99%, transparent 0%);background-repeat:no-repeat}
.code-block .ck{color:#c994e8}
.code-block .cs{color:#e8c994}
.code-block .cf{color:#94c5e8}
.code-block .cc{color:#5a5048;font-style:italic}

.cream .code-block{background:rgba(13,12,11,.92);color:var(--cream2);border-color:transparent}
.cream .illus{opacity:.85}

/* chat illustration */
.chat-illus{position:absolute;top:20px;right:20px;width:50%;height:38%;display:flex;flex-direction:column;gap:6px;justify-content:flex-end;padding:12px;background:rgba(13,12,11,.5);border:.5px solid rgba(13,12,11,.15);border-radius:10px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:.92;transition:opacity .4s,transform .4s}
.c:hover .chat-illus{opacity:1;transform:translateY(-3px)}
.cream .chat-illus{background:rgba(13,12,11,.92)}
.ci-b{font-size:10px;line-height:1.4;padding:5px 9px;border-radius:8px;max-width:78%}
.ci-in{align-self:flex-start;background:rgba(237,232,223,.12);color:var(--cream2);border-bottom-left-radius:3px}
.ci-out{align-self:flex-end;background:var(--cream2);color:var(--bg);border-bottom-right-radius:3px;font-weight:500}
.cream .ci-in{background:rgba(237,232,223,.15);color:var(--cream2)}
.cream .ci-out{background:var(--cream);color:var(--bg)}

/* dashboard illus */
.dash-illus{position:absolute;top:14px;right:14px;width:65%;height:65%;background:rgba(13,12,11,.5);border:.5px solid var(--border);border-radius:10px;padding:14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;gap:10px}
.dash-row{display:flex;gap:8px;align-items:flex-end;height:50px}
.dash-bar{flex:1;background:rgba(237,232,223,.3);border-radius:3px;animation:dashBar 3s ease-in-out infinite}
.dash-bar:nth-child(2){animation-delay:.2s}
.dash-bar:nth-child(3){animation-delay:.4s}
.dash-bar:nth-child(4){animation-delay:.6s}
.dash-bar:nth-child(5){animation-delay:.8s}
.dash-bar:nth-child(6){animation-delay:1s}
@keyframes dashBar{0%,100%{opacity:.7;transform:scaleY(.95)}50%{opacity:1;transform:scaleY(1.05)}}
.dash-meta{display:flex;justify-content:space-between;align-items:center}
.dash-dot{display:flex;gap:5px}
.dash-dot span{width:5px;height:5px;border-radius:50%;background:rgba(237,232,223,.3)}
.dash-dot span:first-child{background:#5bff8c}
.dash-num{font-size:11px;font-weight:600;color:var(--cream);font-family:ui-monospace,Menlo,monospace}

/* booking calendar illus */
.cal-illus{position:absolute;top:18px;right:18px;width:62%;height:64%;background:rgba(13,12,11,.5);border:.5px solid var(--border);border-radius:10px;padding:14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cal-head{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cream3);margin-bottom:10px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-day{aspect-ratio:1;border-radius:4px;background:rgba(237,232,223,.06);font-size:9px;font-weight:500;color:var(--cream3);display:flex;align-items:center;justify-content:center}
.cal-day.booked{background:var(--cream2);color:var(--bg);font-weight:700}
.cal-day.today{background:transparent;border:.5px solid var(--cream);color:var(--cream)}

/* AI graph illus */
.ai-graph{position:absolute;top:22px;right:22px;width:58%;height:60%;background:rgba(13,12,11,.5);border:.5px solid var(--border);border-radius:10px;padding:14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow:hidden}
.ai-graph svg{width:100%;height:75%}

/* connector lines decoration */
.connect-illus{position:absolute;top:0;right:0;width:60%;height:65%;opacity:.6;pointer-events:none}

/* phone mockup */
.phone-illus{position:absolute;bottom:-30px;right:-10px;width:120px;height:230px;background:rgba(13,12,11,.7);border:1px solid var(--border);border-radius:18px;padding:8px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transform:rotate(8deg);transition:transform .5s}
.proj-card:hover .phone-illus{transform:rotate(4deg) translateY(-4px)}
.phone-screen{width:100%;height:100%;background:rgba(237,232,223,.04);border-radius:12px;padding:14px 10px;display:flex;flex-direction:column;gap:6px}
.phone-line{height:6px;border-radius:3px;background:rgba(237,232,223,.15)}
.phone-line.short{width:60%}
.phone-line.med{width:80%}
.phone-line.full{width:100%}
.phone-bigblock{height:60px;background:rgba(237,232,223,.08);border-radius:6px;margin:4px 0}
.hero-bigcard-t{font-size:24px;font-weight:800;letter-spacing:-.025em;color:var(--cream);margin-bottom:10px;line-height:1.05}
.hero-bigcard-s{font-size:13px;font-weight:300;color:var(--cream3);line-height:1.6;max-width:280px}
.hero-bigcard-arr{font-size:22px;color:var(--cream3);align-self:flex-end;transition:transform .3s,color .3s}
.c:hover .hero-bigcard-arr{transform:translate(4px,-4px);color:var(--cream)}

/* ── STAT BIG ── */
.statnum{font-size:clamp(56px,6vw,96px);font-weight:700;letter-spacing:-.045em;line-height:.95;color:var(--cream)}
.statnum sup{font-size:.3em;font-weight:600;color:var(--cream3);vertical-align:super}
.statlbl{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cream3)}
.cream .statnum{color:var(--bg)}
.cream .statlbl{color:#7a716a}

/* ── SERVICE CARD BIG ── */
.svc-card{padding:40px 44px;display:flex;flex-direction:column;justify-content:space-between;cursor:default;position:relative;overflow:hidden}

/* BIG dramatic number */
.svc-num{
  font-size:clamp(80px,9vw,140px);
  font-weight:800;
  letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:1px var(--cream4);
  text-stroke:1px var(--cream4);
  line-height:.85;
  margin-bottom:auto;
  align-self:flex-start;
  background:none;
  border:none;
  padding:0;
  border-radius:0;
  transition:color .5s ease, -webkit-text-stroke-color .5s ease;
  display:block;
}
.svc-card:hover .svc-num{
  color:var(--cream);
  -webkit-text-stroke-color:var(--cream);
}
.cream .svc-num{
  -webkit-text-stroke:1px var(--bg);
  color:var(--bg); /* solid black at all times on the cream service cards, not just on hover */
}

.svc-title{font-size:clamp(28px,3vw,44px);font-weight:700;letter-spacing:-.03em;color:var(--cream);line-height:1.05;margin:36px 0 18px;transition:transform .35s;position:relative;z-index:2}
.svc-card:hover .svc-title{transform:translateX(4px)}
.svc-desc{font-size:15px;font-weight:300;color:var(--cream3);line-height:1.65;margin-bottom:24px;max-width:340px;position:relative;z-index:2}
.svc-out-row{display:flex;align-items:center;justify-content:space-between;padding-top:22px;border-top:.5px solid var(--border);position:relative;z-index:2}
.svc-outcome{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cream2)}
.svc-arr{font-size:22px;color:var(--cream3);transition:transform .3s,color .3s}
.svc-card:hover .svc-arr{color:var(--cream);transform:translate(5px,-5px)}

/* ── PROBLEM CARD ── */
.prob-card{padding:28px 32px;display:flex;flex-direction:column;justify-content:space-between}
.prob-num-big{font-size:clamp(50px,5.5vw,80px);font-weight:700;letter-spacing:-.04em;color:var(--cream4);line-height:.95;transition:color .4s}
.c:hover .prob-num-big{color:var(--cream2)}
.prob-title{font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--cream);line-height:1.15;margin-top:24px;margin-bottom:8px}
.prob-desc{font-size:12px;font-weight:300;color:var(--cream3);line-height:1.66}

/* ── EDITORIAL PROBLEM LIST ── */
.prob-list-item{
  display:grid;
  grid-template-columns:60px 1fr 180px;
  align-items:center;
  gap:24px;
  padding:22px 0;
  border-bottom:.5px solid var(--border);
  position:relative;
  transition:padding .35s ease;
}
.prob-list-item:last-of-type{ border-bottom:none; }

.prob-list-item::before{
  content:'';
  position:absolute;
  left:-40px;
  top:0;
  bottom:0;
  width:2px;
  background:var(--cream);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .4s ease;
}
.prob-list-item:hover{ padding-left:8px; }
.prob-list-item:hover::before{ transform:scaleY(1); }

.prob-list-item-highlight{
  background:rgba(212,168,42,0.08); /* was flat grey rgba(237,232,223,.04) — every row looked identical */
  border:.5px solid rgba(212,168,42,0.35);
  border-radius:12px;
  padding:22px 18px;
  margin:6px -18px;
  border-bottom:none !important;
}
.prob-list-item-highlight::before{ display:none; }
.prob-list-item-highlight .prob-list-fix-value{ color:var(--yellow-l); }

.prob-list-num{
  font-size:clamp(28px,3.2vw,46px);
  font-weight:200;
  letter-spacing:-.03em;
  color:var(--cream4);
  line-height:1;
  transition:color .35s ease;
}
.prob-list-item:hover .prob-list-num,
.prob-list-item-highlight .prob-list-num{
  color:var(--cream);
}

.prob-list-content{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.prob-list-title{
  font-size:clamp(16px,1.5vw,20px);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--cream);
  line-height:1.2;
}
.prob-list-desc{
  font-size:13px;
  font-weight:300;
  color:var(--cream3);
  line-height:1.55;
}

.prob-list-fix{
  display:flex;
  flex-direction:column;
  gap:3px;
  text-align:right;
  padding-left:12px;
  border-left:.5px solid var(--border);
}
.prob-list-fix-label{
  font-size:9px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cream3);
}
.prob-list-fix-value{
  font-size:13px;
  font-weight:700;
  color:var(--cream);
  letter-spacing:-.01em;
}
.prob-list-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:24px;
  padding:18px 24px;
  background:var(--cream);
  border-radius:100px;
  text-decoration:none;
  transition:background .3s ease, transform .3s ease;
}
.prob-list-cta:hover{ background:var(--cream-d); transform:translateY(-2px); }
.prob-list-cta > span:first-child{
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--bg);
}
.prob-list-cta-arr{
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--bg);
  display:grid;
  place-items:center;
  color:var(--cream);
  font-size:14px;
  transition:transform .3s ease;
}
.prob-list-cta:hover .prob-list-cta-arr{ transform:translate(3px,-3px); }

/* ── PROCESS BIG ── */
.proc-card{padding:32px 36px;display:flex;flex-direction:column;justify-content:space-between;position:relative}

/* ── HORIZONTAL TIMELINE (process section) ── */
.timeline{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  padding:48px 0 20px;
}
/* track — always visible, dim */
.timeline-line{
  position:absolute;
  top:62px;
  left:8%;
  right:8%;
  height:1px;
  background:var(--border);
}
/* fill — grows left→right as you scroll through the pinned section;
   width is set by JS (initProcessScroll), not hover, not CSS alone */
.timeline-line-fill{
  position:absolute;
  top:62px;
  left:8%;
  height:1px;
  width:0%;
  background:var(--cream);
  transition:width .1s linear;
  transform-origin:left center;
}
.timeline-step{
  position:relative;
  padding-top:30px;
}
/* no hover state on purpose — only scroll position (.timeline-step-active,
   set by JS) drives which step is highlighted. A separate hover trigger
   here would fight the scroll-driven state and feel inconsistent. */
.timeline-dot{
  position:absolute;
  top:-4px;
  left:0;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--cream4);
  border:2px solid var(--bg);
  box-shadow:0 0 0 1px var(--border);
  transition:background .3s ease, box-shadow .3s ease;
}
.timeline-step-active .timeline-dot{
  background:var(--cream);
  box-shadow:0 0 0 1px var(--cream), 0 0 20px rgba(237,232,223,0.5);
}
.timeline-num{
  font-size:clamp(48px,5vw,72px);
  font-weight:800;
  letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1px var(--cream4);
  line-height:.9;
  margin-bottom:12px;
  transition:color .35s ease, -webkit-text-stroke-color .35s ease;
}
.timeline-step-active .timeline-num{
  color:var(--cream);
  -webkit-text-stroke-color:var(--cream);
}
.timeline-step-active .timeline-title{ color:var(--cream); }
.timeline-title{
  font-size:18px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--cream3);
  margin-bottom:6px;
  transition:color .35s ease;
}
.timeline-week{
  font-size:10px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cream3);
  margin-bottom:10px;
}
/* hidden until its step becomes active — appears in sync with scroll,
   not all at once. Reduced-motion users get it shown statically instead
   (see the prefers-reduced-motion block near the end of this file). */
.timeline-desc{
  font-size:12px;
  font-weight:300;
  line-height:1.65;
  color:var(--cream3);
  max-width:240px;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .4s ease, transform .4s ease;
}
.timeline-step-active .timeline-desc{
  opacity:1;
  transform:translateY(0);
}
.proc-step-label{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--cream3)}
.proc-num-big{font-size:clamp(80px,9vw,140px);font-weight:700;letter-spacing:-.05em;color:var(--cream);line-height:.85;margin-top:auto}
.proc-title-big{font-size:24px;font-weight:800;letter-spacing:-.025em;color:var(--cream);margin-top:8px}
.proc-desc{font-size:13px;font-weight:300;color:var(--cream3);line-height:1.66;margin-top:10px;max-width:260px}
.cream .proc-num-big{color:var(--bg)}
.cream .proc-title-big{color:var(--bg)}
.cream .proc-step-label{color:#7a716a}
.cream .proc-desc{color:#5e574f}

/* ── WHY ROW ── */
.why-row{display:flex;align-items:flex-start;gap:18px;padding:18px 0;border-bottom:.5px solid var(--border)}
.why-row:first-child{padding-top:0}
.why-row:last-child{border-bottom:none}
.cream .why-row{border-color:rgba(13,12,11,.08)}
.why-icon{width:38px;height:38px;border-radius:10px;background:rgba(237,232,223,.06);border:.5px solid var(--border);display:grid;place-items:center;font-size:14px;flex-shrink:0}
.cream .why-icon{background:rgba(13,12,11,.04);border-color:rgba(13,12,11,.1);color:var(--bg)}
.why-title{font-size:15px;font-weight:700;color:var(--cream);margin-bottom:4px}
.why-body{font-size:12px;font-weight:300;color:var(--cream3);line-height:1.6}
.cream .why-title{color:var(--bg)}
.cream .why-body{color:#5e574f}

/* ── PROJECT CARD ── */
.proj-card{padding:24px 26px;display:flex;flex-direction:column;justify-content:space-between}

/* ── ARCH-STYLE PROJECT CARDS ── */
.proj-arch{
  padding:22px 22px;
  display:flex;
  flex-direction:column;
  cursor:pointer;
  transition:border-color .4s,background .4s,transform .4s;
}
.proj-arch:hover{transform:translateY(-3px)}

.proj-arch-tag-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}
.proj-arch-cat{
  font-size:10px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cream3);
  transition:color .3s;
}
.proj-arch:hover .proj-arch-cat{color:var(--cream2)}
.proj-arch-num{
  font-size:10px;
  font-weight:600;
  letter-spacing:.18em;
  color:var(--cream4);
}

.proj-arch-visual{
  flex:1;
  border-radius:14px;
  position:relative;
  overflow:hidden;
  margin-bottom:20px;
  min-height:200px;
}
.proj-arch-visual::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, transparent 50%, rgba(13,12,11,.3));
  pointer-events:none;
  opacity:0;
  transition:opacity .4s;
}
.proj-arch:hover .proj-arch-visual::after{opacity:1}

.proj-mesh{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transition:transform .8s ease;
}
.proj-arch:hover .proj-mesh img{transform:scale(1.04)}

/* placeholder project photos — img sits inside the existing .proj-mesh
   div (kept as a div, not an <img>, so the ::before grain overlay below
   still renders — pseudo-elements don't paint on replaced elements like
   <img> in any browser) */
.proj-mesh-img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .8s ease;
  filter:grayscale(.35) contrast(1.08) brightness(.75) sepia(.12);
}

/* Each project mesh — different warm-tone abstract scenes */
.proj-mesh-1{
  background:
    radial-gradient(ellipse 70% 60% at 30% 25%, #e8a87c 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 75% 75%, #8b4a30 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 50%, #c47e58 0%, transparent 60%),
    linear-gradient(135deg, #2a1810 0%, #1a0f08 100%);
}
.proj-mesh-2{
  background:
    radial-gradient(ellipse 65% 55% at 70% 30%, #d4a574 0%, transparent 55%),
    radial-gradient(ellipse 55% 65% at 25% 70%, #6b4226 0%, transparent 50%),
    radial-gradient(ellipse 45% 40% at 50% 50%, #b8956d 0%, transparent 55%),
    linear-gradient(145deg, #221710 0%, #150d08 100%);
}
.proj-mesh-3{
  background:
    radial-gradient(ellipse 75% 65% at 40% 35%, #c89070 0%, transparent 55%),
    radial-gradient(ellipse 60% 55% at 80% 80%, #7a4a30 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 20% 70%, #d4a574 0%, transparent 50%),
    linear-gradient(125deg, #1f1610 0%, #120c07 100%);
}
.proj-mesh-4{
  background:
    radial-gradient(ellipse 65% 60% at 25% 30%, #e8b88f 0%, transparent 60%),
    radial-gradient(ellipse 70% 55% at 75% 70%, #5c3a24 0%, transparent 50%),
    radial-gradient(ellipse 40% 50% at 50% 40%, #a87045 0%, transparent 55%),
    linear-gradient(155deg, #1d130c 0%, #110a05 100%);
}
.proj-mesh-5{
  background:
    radial-gradient(ellipse 60% 70% at 60% 25%, #d09060 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 30% 80%, #8b5a3c 0%, transparent 50%),
    radial-gradient(ellipse 45% 40% at 80% 60%, #b8835a 0%, transparent 55%),
    linear-gradient(135deg, #261810 0%, #170e08 100%);
}

/* grain overlay on mesh */
.proj-mesh::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n3)'/%3E%3C/svg%3E");
  opacity:0.18;
  mix-blend-mode:overlay;
}

.proj-arch-pill{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(.9);
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--bg);
  background:var(--cream);
  padding:11px 20px;
  border-radius:100px;
  opacity:0;
  transition:opacity .4s ease,transform .4s ease;
  z-index:2;
  white-space:nowrap;
  pointer-events:none;
}
.proj-arch:hover .proj-arch-pill{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

.proj-arch-info{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.proj-arch-title{
  font-size:clamp(18px,1.6vw,24px);
  font-weight:800;
  letter-spacing:-.025em;
  color:var(--cream);
  line-height:1.1;
  transition:transform .35s;
}
.proj-arch:hover .proj-arch-title{transform:translateX(3px)}
.proj-arch-meta{
  font-size:12px;
  font-weight:400;
  color:var(--cream3);
  letter-spacing:.01em;
}
.proj-visual{flex:1;border-radius:12px;position:relative;overflow:hidden;margin-bottom:18px;min-height:120px}
.pv1{background:linear-gradient(145deg,#181510 0%,#231c14 55%,#1b1710 100%)}
.pv2{background:linear-gradient(160deg,#141210 0%,#1d1b13 55%,#121110 100%)}
.pv3{background:linear-gradient(125deg,#191614 0%,#221e19 55%,#151310 100%)}
.proj-visual::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(237,232,223,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(237,232,223,.025) 1px,transparent 1px);background-size:36px 36px;border-radius:12px}
.proj-tag{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream3);position:absolute;bottom:14px;left:16px;z-index:2}
.proj-name{font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--cream);margin-bottom:4px}
.proj-cat{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cream3);margin-bottom:10px}

/* ── QUOTE ── */
.q-card{padding:30px 32px;display:flex;flex-direction:column;justify-content:space-between}
.quote{font-size:17px;font-weight:300;color:var(--cream);line-height:1.55;margin-bottom:20px;letter-spacing:-.005em}
.quote::before{content:'"';font-size:48px;font-weight:200;color:var(--cream4);line-height:0;vertical-align:-22px;margin-right:2px}
.cream .quote{color:var(--bg);}
.cream .quote::before{color:rgba(13,12,11,.22);}
.yellow .quote{color:var(--bg);}
.yellow .quote::before{color:rgba(13,12,11,.25);}
.qa{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cream3)}

/* ── FINAL CTA ── */
.cta-title{font-size:clamp(36px,4.5vw,72px);font-weight:800;letter-spacing:-.035em;line-height:.95;color:var(--bg)}
.cta-title strong{font-weight:800;font-style:normal}
.cta-sub{font-size:14px;font-weight:300;color:#5e574f;line-height:1.68;max-width:440px;margin-top:18px}

/* ── FOOTER ── */
.flogo{font-size:clamp(60px,8vw,128px);font-weight:800;letter-spacing:-.045em;line-height:.92;color:var(--cream)}

/* ── SCROLL REVEAL ── */
.sr{opacity:0;transform:translateY(24px)}

/* ── IMG PH ── */
.imgph{position:absolute;inset:0;border-radius:var(--r);display:flex;align-items:flex-end;padding:24px}
.ip1{background:linear-gradient(145deg,#181510 0%,#251e16 55%,#1c1810 100%)}
.ip2{background:linear-gradient(160deg,#141210 0%,#1d1b13 55%,#121110 100%)}
.ip3{background:linear-gradient(125deg,#191614 0%,#221e19 55%,#151310 100%)}
.imgph::before{content:'';position:absolute;inset:0;border-radius:var(--r);background-image:linear-gradient(rgba(237,232,223,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(237,232,223,.025) 1px,transparent 1px);background-size:38px 38px}
.imglbl{position:relative;z-index:2;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cream3)}

::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--cream4);border-radius:2px}

/* ── INTRO LOADER ── */
.intro{
  position:fixed;
  inset:0;
  background:var(--bg);
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  pointer-events:all;
}

.intro.hidden{
  pointer-events:none;
  opacity:0;
  transition:opacity .4s ease;
}

.intro-logo{
  position:relative;
  z-index:3;
  font-size:clamp(72px,10vw,160px);
  font-weight:800;
  letter-spacing:-.045em;
  color:var(--cream);
  line-height:1;
  display:flex;
  overflow:hidden;
  padding:0 .1em .15em;
}

.intro-logo-char{
  display:inline-block;
  transform:translateY(110%);
  will-change:transform;
}

.intro-progress{
  position:absolute;
  bottom:32px;
  left:32px;
  right:32px;
  z-index:3;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cream3);
  opacity:0;
}

.intro-progress-bar{
  flex:1;
  height:1px;
  background:var(--cream4);
  position:relative;
  overflow:hidden;
}

.intro-progress-fill{
  position:absolute;
  top:0;left:0;bottom:0;
  width:0%;
  background:var(--cream);
}

.intro-counter{
  font-variant-numeric:tabular-nums;
  min-width:44px;
  text-align:right;
}

/* curtains slide apart to reveal page */
.intro-curtain{
  position:absolute;
  left:0;
  width:100%;
  height:50%;
  background:var(--bg);
  z-index:2;
  will-change:transform;
}
.intro-curtain.top   { top:0;    transform:translateY(0); }
.intro-curtain.bot   { bottom:0; transform:translateY(0); }

body.loading{ overflow:hidden; }

/* ════════════════════════════════════════
   MOBILE RESPONSIVE — ≤768px
   ════════════════════════════════════════ */
@media (max-width:768px){

  :root{ --r:14px; --g:6px; }

  /* ── GRID FORCE SINGLE COLUMN ── */
  .bento{
    grid-template-columns:1fr !important;
    padding:6px !important;
    gap:6px !important;
  }

  /* ALL column spans collapse to full width */
  .bento > .c,
  .bento > div{
    grid-column:1 / -1 !important;
  }

  /* ── HEIGHTS RESET — all auto on mobile ── */
  .hnav  { height:50px !important; }
  .hxs   { height:auto !important; min-height:60px !important; }
  .hsm   { height:auto !important; min-height:80px !important; }
  .hmd   { height:auto !important; min-height:140px !important; }
  .hprob { height:auto !important; min-height:180px !important; }
  .hlg   { height:auto !important; min-height:200px !important; }
  .hxl   { height:auto !important; min-height:240px !important; }
  .hsvc  { height:auto !important; min-height:280px !important; }
  .hh    { height:auto !important; min-height:auto !important; }
  .hha, .hhb { height:auto !important; min-height:200px !important; }

  /* Empty/spacer cards hidden on mobile */
  .empty{ display:none !important; }

  /* ── NAV — 3 cards in row using flex on bento? No, override individually ── */
  .bento > .c.c3.hnav.nlogo{
    grid-column:1 / 4 !important;
    font-size:14px;
    letter-spacing:.12em;
    height:50px !important;
  }
  .nmenu{ display:none !important; }
  .bento > .c.c7.hnav{ display:none !important; }
  .bento > .c.c2.hnav.ncta{ display:none !important; }

  /* hamburger takes the ncta button's old slot */
  .mnav-toggle{
    display:flex !important;
    grid-column:4 / -1 !important;
    justify-self:end;
    align-self:center;
  }

  /* Need 6 column grid for nav split */
  .bento{
    grid-template-columns:repeat(6,1fr) !important;
  }
  /* But everything else still spans full */
  .bento > .c:not(.hnav):not(.ncta):not(.nlogo),
  .bento > div:not(#heroRight){
    grid-column:1 / -1 !important;
  }

  /* ── HERO — designed to read as roughly "one screen": text card up top
     with proper breathing room, then the Build. / arrow cards as two
     compact full-width bars stacked underneath (not side-by-side squares). ── */
  .htitle{
    font-size:clamp(42px,11.5vw,62px) !important;
    line-height:.96 !important;
    letter-spacing:-.025em !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }
  .htitle .ln{ overflow:visible !important; padding-bottom:.02em !important; }
  .hsub, #hsub{ font-size:14px !important; margin-top:22px !important; max-width:100% !important; }
  #hbtns{ margin-top:26px !important; gap:10px !important; }
  .btn-p, .btn-o{ padding:12px 20px !important; font-size:10px !important; }
  #ey{
    font-size:9px !important;
    white-space:normal !important;
    display:inline-block !important;
  }
  .c.c8.hh{
    padding:30px 22px !important;
    min-height:62dvh !important;
    justify-content:flex-start !important;
  }
  .c.c8.hh > div:first-child > span{
    white-space:normal !important;
    overflow:visible !important;
  }
  /* eyebrow → title gap, and subtitle → buttons gap — explicit margins
     instead of relying on flex space-between, so the spacing reads the
     same regardless of viewport height */
  .c.c8.hh > div:last-of-type{ margin-top:48px !important; }
  #hsub{ margin-top:26px !important; }
  #hbtns{ margin-top:34px !important; }

  /* Hero right wrapper — stacked full-width, compact bars: Build. on top,
     down-arrow directly below it, so the whole hero fits ~one screen. */
  #heroRight{
    grid-column:1 / -1 !important;
    display:grid !important;
    grid-template-rows:auto auto !important;
    grid-template-columns:1fr !important;
    gap:6px !important;
  }
  #heroRight > .c.hero-bigcard{
    grid-column:auto !important;
    min-height:15dvh !important;
    padding:14px 16px !important;
  }
  .big-word{ font-size:clamp(28px,9vw,40px) !important; }
  .big-down-arrow{ width:auto !important; max-width:44px !important; }

  /* ── SECTION HEADERS ── */
  .section-header{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:14px !important;
    padding:32px 18px 8px !important;
  }
  .section-header > div:last-child{ text-align:left !important; max-width:100% !important; }
  .section-title{ font-size:clamp(44px,13.5vw,62px) !important; }

  /* ── SERVICES ── */
  .svc-card{ padding:22px 20px !important; }
  .svc-num{ font-size:clamp(56px,16vw,80px) !important; }
  .svc-title{
    font-size:clamp(28px,8.5vw,38px) !important;
    margin:20px 0 12px !important;
  }
  .svc-desc{ font-size:13px !important; margin-bottom:16px !important; }
  .svc-out-row{ padding-top:14px !important; }
  .svc-outcome{ font-size:10px !important; }

  /* ── PROBLEMS ── */
  .prob-card{ padding:18px 18px !important; }
  .prob-num-big{ font-size:clamp(46px,13vw,68px) !important; }
  .prob-title{ font-size:16px !important; margin-top:18px !important; }
  .prob-desc{ font-size:11px !important; }

  /* approach card */
  .c.c9.hprob.cream h3{ font-size:clamp(22px,7vw,30px) !important; }

  /* ── WHAT WE SOLVE — intro card + fix list (had no mobile rule at all;
     the list's fixed 180px right column was overflowing narrow screens) ── */
  #solve + .c5, #solve + .c5 + .c7{
    min-height:auto !important;
    padding:26px 22px !important;
  }
  .prob-list-item{
    grid-template-columns:44px 1fr !important;
    grid-template-areas:"num content" "fix fix" !important;
    gap:8px 14px !important;
    padding:28px 0 !important;
  }
  .prob-list-num{
    grid-area:num;
    /* on desktop this only lights up on :hover, which doesn't exist on
       touch — without this override the numbers sit at ~2:1 contrast on
       the dark bg and read as basically invisible on mobile. */
    color:var(--cream3) !important;
    font-size:clamp(26px,8vw,34px) !important;
  }
  .prob-list-content{ grid-area:content; }
  .prob-list-title{ font-size:22px !important; margin-bottom:4px; }
  .prob-list-desc{ font-size:14px !important; }
  .prob-list-fix{
    grid-area:fix;
    flex-direction:row !important;
    justify-content:space-between !important;
    align-items:center !important;
    text-align:left !important;
    border-left:none !important;
    border-top:.5px solid var(--border);
    padding:14px 0 0 !important;
    margin-top:10px;
  }

  /* the old design permanently highlighted problem #3 — now every item
     highlights on its own as it scrolls through the center of the screen
     (see initProblemHighlight in main.js), so no item is hardcoded here. */
  .prob-list-item.prob-active{
    background:rgba(212,168,42,0.08);
    border:.5px solid rgba(212,168,42,0.35);
    border-radius:12px;
    margin:6px 0 !important;
    padding:22px 16px !important;
    transition:background .4s ease, border-color .4s ease;
  }
  .prob-list-item.prob-active .prob-list-num{ color:var(--cream) !important; }
  .prob-list-item.prob-active .prob-list-fix-value{ color:var(--yellow-l); }

  /* ── WORK ── */
  .proj-arch{
    height:auto !important; /* the inline height:640px was fixed regardless of
      content — with flex:1 on the visual that just inflated it into a wall
      of empty gradient below the text. auto lets the card size to content. */
    min-height:auto !important;
    padding:18px 16px !important;
  }
  .proj-arch-visual{ min-height:180px !important; flex:none !important; margin-bottom:26px !important; }
  .proj-arch-num{ display:none !important; } /* redundant next to the category label — just noise on mobile */
  .proj-arch-title{ font-size:clamp(26px,7.5vw,34px) !important; margin-bottom:6px !important; }
  .proj-arch-info{ gap:12px !important; }
  .proj-arch-meta{ font-size:13px !important; }
  .proj-arch-pill{
    opacity:1 !important;
    transform:translate(-50%,-50%) scale(1) !important;
    font-size:10px !important;
    padding:8px 14px !important;
  }

  /* Work CTA — "Full case studies" much bigger and given real room to
     breathe before "View all work"; the black circle-arrow button is
     dropped entirely on mobile, leaving a plain text link. */
  .c.c12.cream[style*="height:220px"]{
    flex-direction:column !important;
    align-items:flex-start !important;
    height:auto !important;
    padding:32px 22px !important;
    gap:38px !important;
  }
  .c.c12.cream[style*="height:220px"] > div:first-child > div:last-child{
    font-size:clamp(40px,12vw,56px) !important;
    white-space:normal !important;
  }
  .c.c12.cream[style*="height:220px"] > a{
    width:100% !important;
  }
  .c.c12.cream[style*="height:220px"] > a > span{ display:none !important; }

  /* ── PROCESS ── */
  .proc-card{ padding:20px 18px !important; min-height:200px !important; }
  .proc-num-big{ font-size:clamp(60px,18vw,100px) !important; }
  .proc-title-big{ font-size:18px !important; }
  .proc-desc{ font-size:12px !important; }

  /* timeline — stack to a single column on small screens (no pin/scrub there either, see main.js) */
  .timeline{ grid-template-columns:1fr !important; gap:36px !important; padding:24px 0 8px !important; }
  .timeline-line, .timeline-line-fill{ display:none !important; }
  .timeline-desc{ max-width:none !important; opacity:1 !important; transform:none !important; } /* mobile has no pin — show descriptions statically instead of waiting on the simpler scroll toggle to feel right at this size */

  #processCard{ padding:24px 20px !important; min-height:auto !important; gap:28px !important; }

  /* ── WHY US ── */
  .c.c7.hxl[class*="cream"],
  .c.c4.hxl,
  .c.c3.hxl{
    padding:24px 20px !important;
  }
  .c.c7.hxl[class*="cream"] h3{ font-size:clamp(26px,8vw,38px) !important; }
  .why-row{ gap:12px; padding:14px 0; }
  .why-icon{ width:32px; height:32px; font-size:13px; }
  .why-title{ font-size:14px; }
  .why-body{ font-size:11px; }
  /* photo card keeps padding 0, gets fixed height */
  .c.c5.hxl{ min-height:360px !important; padding:0 !important; }

  /* ── TESTIMONIALS ── */
  .q-card{ padding:22px 20px !important; min-height:200px !important; }
  .quote{ font-size:14px !important; margin-bottom:16px !important; }

  /* ── FINAL CTA ── */
  .c.c12.hxl.cream{
    padding:32px 22px !important;
    min-height:auto !important;
  }
  .c.c12.hxl.cream > div[style*="display:flex"]{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:20px !important;
  }
  .cta-title{ font-size:clamp(30px,9vw,46px) !important; }
  .cta-sub{ font-size:13px !important; }
  .q3-badge{ display:none !important; } /* "Now booking Q3" — noise next to the section eyebrow on a narrow screen */
  .mail-label{ font-size:16px !important; letter-spacing:.02em !important; }

  /* ── EDGE-TO-EDGE CTA — "Let's build something..." + the mail arrow card
     bleed out to the physical screen edge instead of sitting inset inside
     the bento grid's usual gutter, matching the requested full-bleed
     mobile CTA banner look. ── */
  .cta-bleed{
    margin-left:-6px !important;
    margin-right:-6px !important;
    width:calc(100% + 12px) !important;
    border-radius:0 !important;
    border-left:none !important;
    border-right:none !important;
  }

  /* ── FOOTER ── */
  .c.c8.hxl, .c.c4.hxl{ padding:24px 22px !important; }
  .flogo{ font-size:clamp(48px,15vw,72px) !important; }
  .c.c12.hxs{
    flex-direction:column !important;
    height:auto !important;
    padding:18px 22px !important;
    gap:6px !important;
    align-items:flex-start !important;
  }
  .c.c12.hxs > span{ font-size:10px !important; }

  /* ── INTRO LOADER ── */
  .intro-logo{ font-size:clamp(56px,18vw,90px) !important; padding:0 .08em .12em; }
  .intro-progress{ bottom:24px !important; left:20px !important; right:20px !important; font-size:9px !important; gap:14px !important; }

  /* Disable hover transforms on touch */
  .c:hover,
  .proj-arch:hover{ transform:none !important; }

  /* Glass sheen disabled — was causing render issues */
  .c::before{ display:none !important; }
}

/* ════════════════════════════════════════
   TABLET — 769px to 1024px
   ════════════════════════════════════════ */
@media (min-width:769px) and (max-width:1024px){
  .bento{ padding:10px; gap:8px; }
  .htitle{ font-size:clamp(48px,7vw,72px); }
  .section-title{ font-size:clamp(36px,6vw,56px); }
  .svc-num{ font-size:clamp(64px,8vw,100px); }
  .proc-num-big{ font-size:clamp(64px,8vw,110px); }
  .prob-num-big{ font-size:clamp(42px,5vw,70px); }
}

/* ── VALUE CARD — full-width, stacked one below another (not a 4-col grid).
   Same bento card language as the rest of the site (.c on the dark page bg,
   or .cream for the alternating ones) — reuses the ghost-number motif from
   svc-num/prob-num-big so it reads as part of the same system. ── */
.value-card{ padding:40px 44px; display:flex; align-items:center; gap:40px; }
.value-num{
  font-size:clamp(56px,6vw,84px);
  font-weight:800;
  letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1px var(--cream4);
  line-height:.9;
  flex-shrink:0;
  width:110px;
  transition:color .4s ease,-webkit-text-stroke-color .4s ease;
}
.c:hover .value-num{ color:var(--cream); -webkit-text-stroke-color:var(--cream); }
.value-title{ font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--cream);line-height:1.2;width:220px;flex-shrink:0; }
.value-desc{ font-size:14px;font-weight:300;color:var(--cream3);line-height:1.65;max-width:520px; }

.cream .value-num{ -webkit-text-stroke:1px rgba(13,12,11,.25); color:transparent; }
.c.cream:hover .value-num{ color:var(--bg); -webkit-text-stroke-color:var(--bg); }
.cream .value-title{ color:var(--bg); }
.cream .value-desc{ color:#5e574f; }

@media (max-width:768px){
  .value-card{ flex-direction:column; align-items:flex-start; gap:14px; padding:28px 22px; }
  .value-title{ width:auto; font-size:25px; }
}

/* ════════════════════════════════════════
   REDUCED MOTION — respect OS-level setting
   ════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .big-word,.typo-marquee-track,.dash-bar,.dot,.big-down-arrow{ animation:none !important; }
  /* the scroll-scrubbed process timeline is skipped entirely for reduced
     motion (see initProcessScroll in main.js) — so nothing ever adds
     .timeline-step-active. Show every description statically instead of
     leaving them permanently blank. */
  .timeline-desc{ opacity:1 !important; transform:none !important; }
}

/* ════════════════════════════════════════
   CONTACT MODAL — multi-step "typeform" style overlay (contact.html).
   One question per screen, pill-select for the first step, mailto on send.
   ════════════════════════════════════════ */
.modal-overlay{
  position:fixed;inset:0;z-index:9500;
  background:rgba(13,12,11,.78);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;pointer-events:none;
  transition:opacity .35s ease;
}
.modal-overlay.open{ opacity:1; pointer-events:all; }

.modal-card{
  width:100%;max-width:560px;
  background:var(--cream);color:var(--bg);
  border-radius:24px;
  padding:52px 46px;
  position:relative;
  transform:translateY(16px) scale(.98);
  transition:transform .4s cubic-bezier(.16,1,.3,1);
  max-height:88vh;
  overflow-y:auto;
}
.modal-overlay.open .modal-card{ transform:translateY(0) scale(1); }

.modal-close{
  position:absolute;top:20px;right:20px;
  width:36px;height:36px;border-radius:50%;
  background:transparent;border:.5px solid rgba(13,12,11,.15);
  display:grid;place-items:center;cursor:pointer;
  color:var(--bg);font-size:14px;line-height:1;
  transition:background .3s;
}
.modal-close:hover{ background:rgba(13,12,11,.06); }

.modal-progress{ display:flex; gap:6px; margin-bottom:36px; padding-right:40px; }
.modal-progress span{ flex:1; height:3px; border-radius:2px; background:rgba(13,12,11,.12); transition:background .3s; }
.modal-progress span.done{ background:var(--bg); }

.modal-step{ display:none; }
.modal-step.active{ display:block; animation:modalStepIn .35s ease; }
@keyframes modalStepIn{ from{opacity:0;transform:translateX(8px);} to{opacity:1;transform:translateX(0);} }

.modal-label{ font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#7a716a; display:block; margin-bottom:14px; }
.modal-question{ font-size:clamp(22px,3vw,32px); font-weight:800; letter-spacing:-.02em; color:var(--bg); margin-bottom:28px; line-height:1.15; }

.modal-pills{ display:flex; flex-wrap:wrap; gap:10px; }
.modal-pill{ padding:12px 20px; border-radius:100px; border:1.5px solid rgba(13,12,11,.15); background:transparent; color:var(--bg); font-size:13px; font-weight:600; cursor:pointer; transition:all .25s; font-family:inherit; }
.modal-pill:hover{ border-color:rgba(13,12,11,.4); }
.modal-pill.selected{ background:var(--bg); color:var(--cream); border-color:var(--bg); }

.modal-input,.modal-textarea{
  width:100%; border:none; border-bottom:2px solid rgba(13,12,11,.15);
  background:transparent; font-family:inherit;
  font-size:20px; font-weight:600; color:var(--bg);
  padding:10px 2px; outline:none; transition:border-color .3s;
}
.modal-input:focus,.modal-textarea:focus{ border-color:var(--bg); }
.modal-input::placeholder,.modal-textarea::placeholder{ color:rgba(13,12,11,.32); font-weight:500; }
.modal-textarea{ resize:vertical; min-height:90px; font-size:16px; font-weight:400; line-height:1.5; }
.modal-optional{ font-size:11px; color:#7a716a; margin-top:10px; }

.modal-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:38px; gap:16px; }
.modal-actions-left{ display:flex; align-items:center; gap:18px; }
.modal-cancel,.modal-back{ background:none; border:none; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#7a716a; cursor:pointer; padding:8px 0; font-family:inherit; }
.modal-cancel:hover,.modal-back:hover{ color:var(--bg); }
.modal-next{ display:inline-flex; align-items:center; gap:10px; background:var(--bg); color:var(--cream); border:none; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:14px 26px; border-radius:100px; cursor:pointer; transition:opacity .3s; font-family:inherit; }
.modal-next:hover{ opacity:.85; }
.modal-next:disabled{ opacity:.3; cursor:not-allowed; }
.modal-next .arrow-icon{ width:11px;height:11px; }

.modal-success{ display:none; text-align:center; padding:24px 0 8px; }
.modal-success.active{ display:block; animation:modalStepIn .4s ease; }
.modal-success-icon{ width:56px;height:56px;border-radius:50%;background:var(--bg);display:grid;place-items:center;margin:0 auto 24px; }
.modal-success-icon .arrow-icon{ width:20px;height:20px;color:var(--cream); }
.modal-success h3{ font-size:clamp(24px,3vw,34px); font-weight:800; letter-spacing:-.02em; color:var(--bg); margin-bottom:12px; }
.modal-success p{ font-size:14px; color:#5e574f; line-height:1.6; max-width:380px; margin:0 auto; }

@media (max-width:768px){
  .modal-card{ padding:36px 26px; border-radius:18px; max-height:92vh; }
  .modal-question{ font-size:22px; margin-bottom:22px; }
  .modal-input{ font-size:17px; }
}