/*!
Theme Name: Innovate
Theme URI: https://innovatewebdevelopment.com
Author: Eric
Author URI: https://innovatewebdevelopment.com
Description: Custom theme for Innovate Web Development
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: innovate
*/

/* ── RESET & VARIABLES ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#070707;
  --near-black:#0c0c0c;
  --charcoal:#181818;
  --warm-brown:#221c12;
  --gold:#d4ad6a;
  --gold-dim:#6b5535;
  --white:#f2ede6;
  --white-mid:rgba(242,237,230,0.5);
  --white-low:rgba(242,237,230,0.15);
  --white-ghost:rgba(242,237,230,0.07);
  /* Light section background — matches services svc-sec-1; use instead of flat --white for all section/card backgrounds */
  --cream-grad:radial-gradient(ellipse 85% 85% at 50% 50%,#f2ede6 0%,#ede5d8 55%,#ddd0be 80%,#d0c3ae 100%);

  /* ═══════════════════════════════════════════════════════════════════
     SEMANTIC THEME SYSTEM — derived from the About page.
     Components should reference these roles (var(--text), var(--surface)…)
     instead of raw colors. A section's look is then set by ONE wrapper
     class: .theme-light or .theme-dark. Defining these changes nothing
     until components are migrated to use them.
     ═══════════════════════════════════════════════════════════════════ */

  /* Surfaces (backgrounds) — the two About card backgrounds */
  --surface-light:radial-gradient(ellipse 85% 85% at 50% 50%,#f2ede6 0%,#ede5d8 55%,#ddd0be 80%,#d0c3ae 100%);
  --surface-dark:radial-gradient(ellipse 80% 70% at 50% 50%,#1e1508 0%,var(--black) 75%);

  /* Type families (About uses: Playfair headings / Roboto body / Jost labels) */
  --font-heading:'Playfair Display',serif;
  --font-body:'Roboto',sans-serif;
  --font-label:'Jost',sans-serif;

  /* Shared accents */
  --shadow-card:0 -30px 80px rgba(196,162,101,0.12); /* warm upward glow under About cards */

  /* ── DEFAULT ROLES = DARK (matches today's body default; nothing unwrapped breaks) ── */
  --surface:var(--surface-dark);
  --heading:var(--white);          /* About dark headings = cream */
  --text:var(--white);             /* About dark body = white/cream */
  --text-muted:rgba(242,237,230,0.65);
  --accent:var(--gold);            /* About dark accent = gold */
  --eyebrow:var(--gold);           /* .s-label on dark cards */
  --border:rgba(212,173,106,0.2);
}

/* ── CONTEXT CLASSES — wrap a section to flip every role at once ── */
.theme-dark{
  --surface:var(--surface-dark);
  --heading:var(--white);
  --text:var(--white);
  --text-muted:rgba(242,237,230,0.65);
  --accent:var(--gold);
  --eyebrow:var(--gold);
  --border:rgba(212,173,106,0.2);
}
.theme-light{
  --surface:var(--surface-light);
  --heading:var(--black);          /* About light headings = black */
  --text:#1a1510;                  /* About light body = warm ink */
  --text-muted:var(--charcoal);    /* About craft/cta sub-copy = charcoal */
  --accent:var(--gold);            /* light accent = gold (was dim-gold #6b5535) */
  --eyebrow:var(--gold-dim);
  --border:rgba(107,85,53,0.2);
}
html{scroll-behavior:auto}
#smooth-wrapper{overflow:hidden;position:fixed;top:0;left:0;width:100%;height:100%}
#smooth-content{overflow:visible;width:100%}
body{background:var(--black);color:var(--white);font-family:'Jost',sans-serif;font-weight:300;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
p{font-family:'Roboto',sans-serif;font-weight:300;color:var(--white);line-height:1.8}

/* grain overlay */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.28;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E")}

/* ── NAV ── */
#nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:2rem 5rem;display:flex;justify-content:space-between;align-items:center;opacity:0;pointer-events:none;transition:opacity .6s;background:rgba(7,7,7,0.65);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#nav.visible{opacity:1;pointer-events:all}
.nav-logo{display:flex;align-items:center;text-decoration:none}
.nav-logo img{height:28px;width:auto;display:block}
.nav-links{display:flex;gap:3rem;list-style:none}
.nav-links a{font-size:.72rem;font-weight:300;letter-spacing:.25em;text-transform:uppercase;color:var(--white);text-decoration:none;transition:color .3s;position:relative}
.nav-links a:hover{color:var(--gold)}
.nav-links a.active{color:var(--gold)}
.nav-links a.active::after{content:'';display:block;width:4px;height:4px;background:var(--gold);transform:rotate(45deg);margin:5px auto 0}
.nav-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;overflow:visible}
.nav-ring ellipse{fill:none;stroke:var(--gold);stroke-width:1;stroke-linecap:round;transition:stroke-dashoffset .55s cubic-bezier(.4,0,.2,1)}
.nav-links a:hover .nav-ring ellipse{stroke-dashoffset:0!important}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;padding:6px;background:none;border:0;cursor:pointer;z-index:210}
.nav-toggle span{display:block;height:1.5px;width:100%;background:var(--white);transition:transform .3s,opacity .2s}
#nav.nav-open .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
#nav.nav-open .nav-toggle span:nth-child(2){opacity:0}
#nav.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.has-flyout{position:relative}
.flyout{position:absolute;top:100%;right:0;padding:.8rem 1.4rem;list-style:none;display:flex;flex-direction:row;align-items:center;gap:2rem;opacity:0;pointer-events:none;transform:translateX(6px);transition:opacity .25s,transform .25s;background:rgba(7,7,7,0.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.has-flyout:hover .flyout{opacity:1;pointer-events:all;transform:translateX(0)}
.flyout a{font-size:.55rem;font-weight:300;letter-spacing:.25em;text-transform:uppercase;color:rgba(242,237,230,0.55);text-decoration:none;transition:color .25s;white-space:nowrap}
.flyout a:hover,.flyout a.active{color:var(--gold)}

/* ── INTRO ── */
#intro{position:fixed;inset:0;z-index:500;background:var(--black)}
.intro-bg{position:absolute;inset:0;background:url('/images/106.jpg') center center/cover no-repeat}.intro-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(16,13,7,0.55) 0%,rgba(0,0,0,0.82) 70%)}
.intro-particles{position:absolute;inset:0;pointer-events:none;z-index:1}
.intro-slides{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2}
.slide{position:absolute;text-align:center;padding:0 6rem;width:100%;opacity:0;transform:scale(.94)}
.slide-text{font-family:'Playfair Display',serif;font-size:clamp(2.2rem,5vw,4.8rem);font-weight:400;line-height:1.2;color:var(--white);letter-spacing:-.02em;margin:0}
.slide-text em{font-style:italic;color:var(--gold)}
.slide-sub{font-family:'Cormorant Garamond',serif;font-size:clamp(1rem,1.6vw,1.3rem);font-weight:300;font-style:italic;color:var(--white-mid);margin-top:1.2rem;line-height:1.7}
.intro-progress{position:fixed;bottom:2.5rem;left:50%;transform:translateX(-50%);display:flex;gap:.6rem;z-index:100;opacity:0;transition:opacity .5s}
.intro-progress.show{opacity:1}
.progress-dot{width:5px;height:5px;border-radius:50%;background:var(--white-ghost);transition:background .4s,transform .4s}
.progress-dot.active{background:var(--gold);transform:scale(1.3)}
.intro-skip{position:fixed;bottom:2.5rem;right:5rem;z-index:100;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--white-mid);cursor:pointer;transition:color .3s;opacity:0;pointer-events:none;font-weight:400}
.intro-skip.show{opacity:1;pointer-events:all}
.intro-skip:hover{color:var(--gold)}
.scroll-cue{position:fixed;bottom:2.5rem;left:5rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--white-mid);z-index:100;opacity:0;transition:opacity .5s;font-weight:400}
.scroll-cue.show{opacity:1}
.scroll-cue svg{width:24px;height:40px;display:block;animation:scrollBob 2.4s ease-in-out infinite}
.scroll-cue svg rect{stroke:currentColor;stroke-width:1.5;fill:none}
.scroll-cue .scroll-wheel{fill:currentColor;animation:scrollWheel 1.8s cubic-bezier(.4,0,.2,1) infinite}
#sl3 .slide-text{text-shadow:1px 1px 0 rgba(212,173,106,0.25),2px 2px 0 rgba(100,80,40,0.35),3px 3px 0 rgba(60,48,24,0.3),4px 4px 0 rgba(30,24,12,0.2),5px 5px 10px rgba(0,0,0,0.5)}

/* ── HERO ── */
@keyframes heroReveal{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes lineGrow{to{height:100px}}
#hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:0 5rem;position:sticky;top:0;overflow:hidden;border:1px solid rgba(196,162,101,0.12);box-shadow:0 12px 80px rgba(0,0,0,0.8),0 2px 16px rgba(0,0,0,0.5);z-index:1}

/* Main content slides up over the sticky hero */
#main-content{position:relative;z-index:10}

/* Each section reads as a physical card sliding over what's below it */
#main-content > section:not(#hero){
  box-shadow: 0 -6px 20px rgba(0,0,0,0.8), 0 -1px 6px rgba(196,162,101,0.25);
  border-left:  1px solid rgba(196,162,101,0.1);
  border-right: 1px solid rgba(196,162,101,0.1);
}

/* Stacked card scroll — each section sticks as the next slides over it  */
/*   child 1 = #hero                                                      */
/*   child 2 = .philosophy                                                */
/*   child 3 = .services                                                  */
/*   child 4 = .worth                                                     */
/*   child 5 = .work                                                      */
/*   child 6 = .cta-sec                                                   */
#main-content > :nth-child(1){z-index:1}
#main-content > :nth-child(2){z-index:3;width:100%}
#main-content > :nth-child(3){z-index:5;width:100%}
#main-content > :nth-child(4){z-index:7;width:100%}
#main-content > :nth-child(5){z-index:9;width:100%}
#main-content > :nth-child(6){z-index:11;width:100%}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 85% 75% at 60% 45%,#1e1509 0%,#17110a 25%,#100c07 45%,#080705 62%,#070707 72%)}
.hero-vline{position:absolute;left:5rem;top:50%;transform:translateY(-50%);width:1px;height:0;background:var(--gold-dim);opacity:.7;animation:lineGrow 1s ease .3s forwards}
.hero-content{position:relative;z-index:2;padding-left:2.5rem;max-width:960px}
.hero-eyebrow{font-size:.6rem;font-weight:400;letter-spacing:.45em;text-transform:uppercase;color:var(--gold);margin-bottom:2rem;animation:fadeIn 1s ease .5s both}
.hero-title{font-family:'Playfair Display',serif;font-size:clamp(4rem,9vw,8.5rem);font-weight:400;line-height:.98;letter-spacing:-.025em;color:var(--white)}
.hero-title .line{display:block;overflow:hidden}
.hero-title .line span{display:block;animation:heroReveal 1s cubic-bezier(.16,1,.3,1) both}
.hero-title .line:nth-child(1) span{animation-delay:.6s}
.hero-title .line:nth-child(2) span{animation-delay:.8s}
.hero-title em{font-style:italic;color:var(--gold)}
.hero-sub{font-size:clamp(0.9rem,1.4vw,1.1rem);font-style:italic;margin-top:2.2rem;max-width:440px;animation:fadeIn 1s ease 1.2s both}
.hero-cta{margin-top:3rem;animation:fadeIn 1s ease 1.4s both}
.hero-num{position:absolute;right:4rem;bottom:2rem;font-family:'Playfair Display',serif;font-size:13rem;font-weight:700;color:rgba(242,237,230,.02);line-height:1;user-select:none;animation:fadeIn 2s ease 1.5s both}
.hero-num-dot{color:inherit}
.hero-right{position:absolute;left:40%;top:0;right:0;bottom:0;pointer-events:none;z-index:1;-webkit-mask-image:linear-gradient(to right,transparent 0%,black 25%);mask-image:linear-gradient(to right,transparent 0%,black 25%)}
.earth-wordmark{position:absolute;left:34%;top:calc(44% - 75px);z-index:1;pointer-events:none;user-select:none;font-family:'Playfair Display',serif;font-weight:400;font-style:normal;font-size:clamp(2rem,3.2vw,3.8rem);letter-spacing:.1em;color:rgba(242,237,230,.78);text-shadow:0 0 20px rgba(255,245,230,.18),0 0 45px rgba(242,237,230,.08);white-space:nowrap;will-change:transform,opacity;opacity:0}
.earth-word{position:absolute;z-index:1;pointer-events:none;user-select:none;font-family:'Playfair Display',serif;font-weight:400;font-style:normal;font-size:clamp(1rem,1.8vw,2.2rem);letter-spacing:.1em;color:rgba(242,237,230,.62);text-shadow:0 0 16px rgba(255,245,230,.12);white-space:nowrap;opacity:0}
.earth-word-we{left:calc(26% + 75px);top:calc(44% - 50px - 3rem)}
.earth-word-www{left:43%;top:calc(44% - 75px + 3.5rem)}
.hero-particle{position:absolute;border-radius:50%;background:#c4a265;pointer-events:none}
.hero-chrome-word{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;line-height:1;overflow:hidden;padding:.08em .04em;z-index:2}
.chrome-text{font-family:'Playfair Display',serif;font-style:italic;font-size:clamp(3.8rem,7vw,8rem);font-weight:400;letter-spacing:-.02em;background:linear-gradient(160deg,#252525 0%,#606060 14%,#b0b0b0 28%,#e5e5e5 40%,#ffffff 48%,#e2e2e2 54%,#a5a5a5 64%,#555 77%,#787878 88%,#454545 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;display:inline}
.chrome-period{font-family:'Playfair Display',serif;font-style:italic;font-size:clamp(3.8rem,7vw,8rem);font-weight:400;letter-spacing:-.02em;color:var(--gold);text-shadow:0 0 24px rgba(212,173,106,.55),0 0 48px rgba(212,173,106,.2);display:inline}
.chrome-glint{position:absolute;top:-10%;left:-18%;width:13%;height:120%;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.1) 35%,rgba(255,255,255,.48) 50%,rgba(255,255,255,.1) 65%,transparent 100%);transform:skewX(-18deg);mix-blend-mode:screen;pointer-events:none}
/* V2: disable CSS-driven hero animations — GSAP drives them instead */
#hero.hero-v2 .hero-eyebrow,
#hero.hero-v2 .hero-sub,
#hero.hero-v2 .hero-cta{animation:none;opacity:0}
#hero.hero-v2 .hero-vline{animation:none;opacity:0;height:0}

/* ── SHARED ── */
.btn{display:inline-flex;align-items:center;padding:.85rem 2.2rem;border:1px solid var(--gold);color:var(--gold);font-family:'Jost',sans-serif;font-size:.75rem;font-weight:400;letter-spacing:.3em;text-transform:uppercase;text-decoration:none;position:relative;overflow:hidden;transition:color .4s;cursor:pointer}
.btn::before{content:'';position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.btn:hover::before{transform:scaleX(1)}
.btn:hover{color:var(--black)}
.btn span{position:relative;z-index:1}
.divider{display:flex;align-items:center;padding:0;position:absolute;top:0;left:50%;width:100vw;transform:translateX(-50%);z-index:2;background:transparent}
.div-line{flex:1;height:2px;background:rgba(196,162,101,0.3)}
.div-gem{width:10px;height:10px;border:1px solid var(--gold);transform:rotate(45deg);margin:0 2rem;flex-shrink:0;background:rgba(196,162,101,0.12)}
section{padding:9rem 5rem;position:relative;min-height:100vh}
.s-label{font-size:.75rem;font-weight:400;letter-spacing:.45em;text-transform:uppercase;color:var(--gold);margin-bottom:1.8rem;display:flex;align-items:center;gap:1.5rem}
.s-label::before{content:'';width:2rem;height:1px;background:var(--gold);flex-shrink:0}
.from-back{opacity:0;transform:perspective(1200px) scale(.9) translateZ(-60px) rotateX(2deg);transform-origin:center bottom}

/* 3D depth cues — border and shadow reinforce the from-back effect */
.from-back.depth-card{
  border:1px solid rgba(196,162,101,0.12);
  box-shadow:0 8px 60px rgba(0,0,0,0.6), 0 2px 12px rgba(0,0,0,0.4);
  border-radius:2px;
}

/* ── PHILOSOPHY ── */
.philosophy{background:radial-gradient(ellipse 80% 70% at 50% 50%,#1e1508 0%,var(--charcoal) 75%);position:relative;z-index:10}
.phil-bg{position:absolute;inset:0;background-image:url('/iwd/wp-content/uploads/2026/05/cafe2.png');background-size:cover;background-position:center top;opacity:.09;pointer-events:none}
.phil-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 80% at 50% 50%,transparent 30%,var(--charcoal) 100%)}
.phil-tiles{position:absolute;top:0;left:0;width:65%;height:75%;pointer-events:none;z-index:0;background:url('/images/philosophy bg.png') no-repeat top left / 100% auto;mix-blend-mode:lighten}
.phil-inner{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;height:100vh;padding:0 5rem;transform:translateY(-50px);position:relative;z-index:1}
.phil-inner > div:first-child{max-width:480px;margin-left:auto}
.phil-h{font-family:'Playfair Display',serif;font-size:clamp(2.2rem,3.5vw,3.4rem);font-weight:400;line-height:1.2;color:var(--white)}
.phil-h em{font-style:italic;color:var(--gold)}
.phil-body{max-width:560px}
.phil-body p{font-size:1.125rem;margin-bottom:1.5rem}
.phil-body p:last-child{margin-bottom:0}
.phil-body strong{color:var(--gold);font-weight:400}
.phil-body em{color:var(--gold);font-style:italic}

/* ── WORTH ── */
.worth{background:radial-gradient(ellipse 70% 60% at 50% 50%,#1e1508 0%,#1a1308 18%,#15100a 35%,#100c08 50%,#0a0807 62%,var(--black) 72%);position:relative;z-index:10}
.worth::before,.services::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0.08;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.worth-inner{height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 5rem;transform:translateY(-50px)}
.worth-bg{position:absolute;inset:0;background-image:url('http://localhost/iwd/wp-content/uploads/2026/05/2748.jpg');background-size:cover;background-position:center;pointer-events:none}
.worth-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,var(--black) 0%,rgba(7,7,7,0.92) 8%,rgba(7,7,7,0.78) 18%,rgba(7,7,7,0.65) 25%,rgba(7,7,7,0.55) 30%,rgba(7,7,7,0.55) 70%,rgba(7,7,7,0.65) 75%,rgba(7,7,7,0.78) 82%,rgba(7,7,7,0.92) 92%,var(--black) 100%)}
.worth-q{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,3.5vw,3.2rem);font-weight:400;font-style:italic;line-height:1.45;color:var(--white);max-width:860px;position:relative;text-shadow:0 1px 2px rgba(0,0,0,1),0 2px 6px rgba(0,0,0,0.95),0 4px 20px rgba(0,0,0,0.8)}
.worth-q.glitch-active{position:relative}
.glitch-dummy{visibility:hidden}
.glitch-top,.glitch-bottom{position:absolute;top:0;left:0;width:100%;color:var(--white);font-family:'Playfair Display',serif;font-size:inherit;font-weight:400;font-style:italic;line-height:1.45}
.glitch-top{clip-path:inset(0 0 41% 0)}
.glitch-bottom{clip-path:inset(58% 0 0 0)}

/* ── SERVICES ── */
.gsap-pin-spacer{background:var(--black) !important}
.services{background:radial-gradient(ellipse 70% 60% at 50% 50%,#1e1508 0%,#1a1308 18%,#15100a 35%,#100c08 50%,#0a0807 62%,var(--black) 72%);position:relative;z-index:10;text-align:center;padding:9rem 5rem;box-shadow:inset 0 2px 0 rgba(196,162,101,0.3)}
.services::before{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);width:10px;height:10px;border:1px solid var(--gold);background:rgba(196,162,101,0.12);z-index:3}
.services-bg{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' preserveAspectRatio='xMidYMid slice'%3E%3Cline x1='0' y1='800' x2='600' y2='350' stroke='rgba(196,162,101,0.25)' stroke-width='0.8'/%3E%3Cline x1='1200' y1='800' x2='600' y2='350' stroke='rgba(196,162,101,0.25)' stroke-width='0.8'/%3E%3Cline x1='0' y1='550' x2='600' y2='350' stroke='rgba(196,162,101,0.12)' stroke-width='0.6'/%3E%3Cline x1='1200' y1='550' x2='600' y2='350' stroke='rgba(196,162,101,0.12)' stroke-width='0.6'/%3E%3Cline x1='300' y1='800' x2='600' y2='350' stroke='rgba(196,162,101,0.08)' stroke-width='0.5'/%3E%3Cline x1='900' y1='800' x2='600' y2='350' stroke='rgba(196,162,101,0.08)' stroke-width='0.5'/%3E%3Cline x1='100' y1='680' x2='1100' y2='680' stroke='rgba(196,162,101,0.1)' stroke-width='0.5'/%3E%3Cline x1='50' y1='770' x2='1150' y2='770' stroke='rgba(196,162,101,0.07)' stroke-width='0.5'/%3E%3C/svg%3E");background-size:cover;background-position:center;pointer-events:none;z-index:1}
.divider--bottom{top:auto;bottom:0}
.services h2{font-family:'Playfair Display',serif;font-size:clamp(2rem,3.5vw,2.8rem);font-weight:400;line-height:1.15;color:var(--white);margin-bottom:3.5rem}
.services h2 em{font-style:italic;color:var(--gold)}
.services-intro{font-size:1.125rem;max-width:680px;margin:0 auto 4rem;text-shadow:0 1px 8px rgba(0,0,0,0.9),0 0 20px rgba(0,0,0,0.6)}
.services-grid{display:flex;flex-wrap:nowrap;gap:2rem;text-align:left;will-change:transform}
.svc-card{flex:0 0 380px;flex-shrink:0;background:var(--near-black);box-shadow:0 3px 6px rgba(0,0,0,0.05),0 8px 15px rgba(0,0,0,0.1),0 0 0 1px rgba(196,162,101,0.2),0 0 14px rgba(196,162,101,0.07);padding:3.5rem 1.5rem 1.5rem;border-radius:12px;cursor:pointer;position:relative;transition:box-shadow .25s}
.svc-card::before{content:'';position:absolute;inset:0;border-radius:12px;background-color:rgba(242,237,230,.015)}
.svc-icon{z-index:2;position:relative;display:table;padding:18px}
.svc-icon::after{content:'';position:absolute;inset:4.5px;border-radius:50%;background-color:rgba(242,237,230,0.06);border:1px solid rgba(242,237,230,0.1);backdrop-filter:blur(2px);transition:background-color .25s,border-color .25s}
.svc-icon svg{position:relative;z-index:1;display:block;width:24px;height:24px;transform:translateZ(0);color:rgba(242,237,230,0.6);transition:color .25s}
.svc-card h4{z-index:2;position:relative;margin:1rem 0 .4rem;font-family:'Jost',sans-serif;font-weight:500;font-size:1.2rem;letter-spacing:.05em;line-height:1.6;color:var(--gold)}
.svc-card p{z-index:2;position:relative;margin:0;font-size:.85rem}
.svc-shine{border-radius:inherit;position:absolute;inset:0;z-index:1;overflow:hidden;opacity:0;transition:opacity .5s}
.svc-shine::before{content:'';width:150%;padding-bottom:150%;border-radius:50%;position:absolute;left:50%;bottom:55%;filter:blur(35px);opacity:.12;transform:translateX(-50%);background-image:conic-gradient(from 205deg at 50% 50%,rgba(212,173,106,0) 0deg,#d4ad6a 25deg,rgba(212,173,106,0.18) 295deg,rgba(212,173,106,0) 360deg)}
.svc-bg{border-radius:inherit;position:absolute;inset:0;overflow:hidden;-webkit-mask-image:radial-gradient(circle at 60% 5%,black 0%,black 15%,transparent 60%);mask-image:radial-gradient(circle at 60% 5%,black 0%,black 15%,transparent 60%)}
.svc-tiles{opacity:0;transition:opacity .25s}
.svc-tile{position:absolute;background-color:rgba(212,173,106,0.05);animation-duration:8s;animation-iteration-count:infinite;opacity:0}
.svc-tile-4,.svc-tile-6,.svc-tile-10{animation-delay:-2s}
.svc-tile-3,.svc-tile-5,.svc-tile-8{animation-delay:-4s}
.svc-tile-2,.svc-tile-9{animation-delay:-6s}
.svc-tile-1{top:0;left:0;height:10%;width:22.5%}
.svc-tile-2{top:0;left:22.5%;height:10%;width:27.5%}
.svc-tile-3{top:0;left:50%;height:10%;width:27.5%}
.svc-tile-4{top:0;left:77.5%;height:10%;width:22.5%}
.svc-tile-5{top:10%;left:0;height:22.5%;width:22.5%}
.svc-tile-6{top:10%;left:22.5%;height:22.5%;width:27.5%}
.svc-tile-7{top:10%;left:50%;height:22.5%;width:27.5%}
.svc-tile-8{top:10%;left:77.5%;height:22.5%;width:22.5%}
.svc-tile-9{top:32.5%;left:50%;height:22.5%;width:27.5%}
.svc-tile-10{top:32.5%;left:77.5%;height:22.5%;width:22.5%}
@keyframes svc-tile{0%,12.5%,100%{opacity:1}25%,82.5%{opacity:0}}
.svc-line{position:absolute;inset:0;opacity:0;transition:opacity .35s}
.svc-line::before,.svc-line::after{content:'';position:absolute;background-color:rgba(196,162,101,0.2);transition:transform .35s}
.svc-line::before{left:0;right:0;height:1px;transform-origin:0 50%;transform:scaleX(0)}
.svc-line::after{top:0;bottom:0;width:1px;transform-origin:50% 0;transform:scaleY(0)}
.svc-line-1::before{top:10%}.svc-line-1::after{left:22.5%}
.svc-line-1::before,.svc-line-1::after{transition-delay:.3s}
.svc-line-2::before{top:32.5%}.svc-line-2::after{left:50%}
.svc-line-2::before,.svc-line-2::after{transition-delay:.15s}
.svc-line-3::before{top:55%}.svc-line-3::after{right:22.5%}
.svc-card:hover{box-shadow:0 3px 6px rgba(0,0,0,0.04),0 15px 25px rgba(0,0,0,0.3),0 0 0 1px rgba(242,237,230,0.18)}
.svc-card:hover .svc-icon::after{background-color:rgba(212,173,106,0.1);border-color:rgba(212,173,106,0.2)}
.svc-card:hover .svc-icon svg{color:var(--gold)}
.svc-card:hover .svc-shine{opacity:1;transition-duration:.5s;transition-delay:0s}
.svc-card:hover .svc-tiles{opacity:1;transition-delay:.25s}
.svc-card:hover .svc-tile{animation-name:svc-tile}
.svc-card:hover .svc-line{opacity:1;transition-duration:.15s}
.svc-card:hover .svc-line::before{transform:scaleX(1)}
.svc-card:hover .svc-line::after{transform:scaleY(1)}
.svc-card:hover .svc-line-1::before,.svc-card:hover .svc-line-1::after{transition-delay:0s}
.svc-card:hover .svc-line-2::before,.svc-card:hover .svc-line-2::after{transition-delay:.15s}
.svc-card:hover .svc-line-3::before,.svc-card:hover .svc-line-3::after{transition-delay:.3s}

/* ── WORK ── */
.work-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:3.5rem}
.work-link{font-family:'Jost',sans-serif;font-size:.75rem;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);text-decoration:none;display:flex;align-items:center;gap:.5rem;padding-bottom:.2rem;border-bottom:1px solid rgba(196,162,101,0.3);transition:color .3s,border-color .3s}
.work-link:hover{color:var(--white);border-color:var(--white)}
.work-link span{transition:transform .3s}
.work-link:hover span{transform:translateX(4px)}
.work{background:radial-gradient(ellipse 60% 50% at 50% 50%,#3d2a0a 0%,#1a0f03 35%,#080603 65%,#020100 100%);background-size:cover;background-position:center;position:relative;z-index:10;padding-bottom:14rem;overflow:hidden}

/* ── WORK GALLERY GRID ── */
.iwd-grid-container{width:100%;height:calc(100vh - 10rem);display:flex;align-items:center;justify-content:center;overflow:visible;margin-top:4rem}
.iwd-grid{position:relative;width:65vw;height:55vw}
.iwd-grid-layer{position:absolute;top:0;left:0;width:100%;height:100%;will-change:transform;transform-origin:44.951% 54%}
.iwd-grid-block{position:absolute;background-size:cover;background-position:top center;background-color:#1a160e;border:1px solid rgba(196,162,101,0.2);box-shadow:0 20px 80px rgba(0,0,0,0.9),0 8px 30px rgba(0,0,0,0.7)}
.iwd-grid-layer:nth-child(1) .iwd-grid-block{top:5vw;left:20vw;width:20vw;height:10vw}
.iwd-grid-layer:nth-child(2) .iwd-grid-block{top:0;left:calc(32.5vw + 100px);width:11vw;height:11vw}
.iwd-grid-layer:nth-child(3) .iwd-grid-block{top:25vw;left:0;width:15vw;height:15vw}
.iwd-grid-layer:nth-child(4) .iwd-grid-block{top:17.5vw;left:17.5vw;width:30vw;height:30vw}
.iwd-grid-layer:nth-child(5) .iwd-grid-block{top:20vw;left:50vw;width:5vw;height:5vw}
.iwd-grid-layer:nth-child(6) .iwd-grid-block{top:27.5vw;left:50vw;width:20vw;height:20vw}
.iwd-grid-layer:nth-child(7) .iwd-grid-block{top:42.5vw;left:10vw;width:5vw;height:5vw}
.iwd-grid-layer:nth-child(8) .iwd-grid-block{top:42.5vw;left:42.5vw;width:5vw;height:5vw}
.iwd-grid-layer:nth-child(9) .iwd-grid-block{top:40vw;left:50vw;width:10vw;height:10vw}
.iwd-grid-layer:nth-child(10) .iwd-grid-block{top:5vw;left:70vw;width:14vw;height:14vw}
.iwd-grid-layer:nth-child(11) .iwd-grid-block{top:0;left:88vw;width:20vw;height:10vw}
.iwd-grid-layer:nth-child(12) .iwd-grid-block{top:18vw;left:68vw;width:24vw;height:24vw}
.iwd-grid-layer:nth-child(13) .iwd-grid-block{top:15vw;left:96vw;width:8vw;height:8vw}
.iwd-grid-layer:nth-child(14) .iwd-grid-block{top:28vw;left:97vw;width:16vw;height:16vw}
.iwd-grid-layer:nth-child(15) .iwd-grid-block{top:42vw;left:75vw;width:10vw;height:10vw}
.work h2{font-family:'Playfair Display',serif;font-size:clamp(2rem,3.5vw,2.8rem);font-weight:400;line-height:1.15;color:var(--white);margin-bottom:0}
.work h2 em{font-style:italic;color:var(--gold)}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.work-card{aspect-ratio:5/4;position:relative;overflow:hidden;cursor:pointer}
.wc-bg{position:absolute;inset:0;background:linear-gradient(145deg,#141414,#0a0a0a);transition:background .5s}
.work-card:hover .wc-bg{background:linear-gradient(145deg,#1e1a10,#111008)}
.wc-num{position:absolute;top:1.2rem;right:1.5rem;font-family:'Playfair Display',serif;font-size:5.5rem;font-weight:700;color:rgba(242,237,230,.025);line-height:1;transition:color .5s}
.work-card:hover .wc-num{color:rgba(196,162,101,.05)}
.wc-info{position:absolute;bottom:0;left:0;right:0;padding:1.8rem;background:linear-gradient(to top,rgba(7,7,7,.88) 0%,transparent 100%)}
.wc-type{font-size:.56rem;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);font-weight:400;margin-bottom:.35rem;transition:color .3s}
.work-card:hover .wc-type{color:var(--gold)}
.work-btn{margin-top:2.5rem;text-align:center}

/* ── CTA ── */
.cta-sec{background:radial-gradient(ellipse 80% 70% at 50% 50%,#1e1508 0%,var(--charcoal) 75%);text-align:center;padding:12rem 5rem;position:relative;z-index:10;overflow-x:hidden;overflow-y:visible}
.cta-ghost{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Playfair Display',serif;font-size:clamp(7rem,17vw,15rem);font-weight:700;color:rgba(242,237,230,.015);white-space:nowrap;pointer-events:none;letter-spacing:-.04em;user-select:none}
.cta-sec h2{position:relative;font-family:'Playfair Display',serif;font-size:clamp(2.8rem,5.5vw,5.5rem);font-weight:400;line-height:1.1;color:var(--white);margin-bottom:1.8rem}
.cta-sec h2 em{display:block;font-style:italic;color:var(--gold)}
.cta-sub{position:relative;font-family:'Lato',sans-serif;font-size:1.05rem;font-weight:400;color:var(--white);max-width:520px;margin:0 auto 3rem;line-height:1.85}

/* ── SCROLL CUE (animated mouse + label) ── */
@keyframes scrollWheel{0%{opacity:0;transform:translateY(-3px)}25%{opacity:1}55%{opacity:1;transform:translateY(5px)}80%,100%{opacity:0;transform:translateY(7px)}}
@keyframes scrollBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.scroll-hint{position:absolute;left:50%;bottom:2.5rem;transform:translateX(-50%);z-index:5;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--gold);opacity:.6}
.scroll-hint svg{display:block;width:24px;height:40px;animation:scrollBob 2.4s ease-in-out infinite}
.scroll-hint svg rect{stroke:currentColor;stroke-width:1.5;fill:none}
.scroll-hint .scroll-wheel{fill:currentColor;animation:scrollWheel 1.8s cubic-bezier(.4,0,.2,1) infinite}
.scroll-hint span{font-family:var(--font-label);font-weight:400;font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:currentColor}
#colophon{height:70px !important;min-height:0 !important;padding:0 5rem;border-top:1px solid var(--white-ghost);display:flex;justify-content:space-between;align-items:center;position:relative;z-index:10;background:var(--black)}
#colophon::after,#colophon::before{content:none !important;display:none !important;height:0 !important;min-height:0 !important}
.foot-logo{display:flex;align-items:center}
.foot-logo img{height:22px;width:auto;display:block;opacity:.35}
.foot-copy{font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,237,230,.12)}

/* ── MEDIUM SCREENS (laptop) ── */
@media(max-width:1100px){
  section{padding:7rem 3.5rem}
  .phil-inner{gap:3rem;padding:0 3.5rem}
  .work-grid{grid-template-columns:repeat(2,1fr)}
}

/* ── SMALL SCREENS (tablet / mobile) ── */
@media(max-width:768px){
  section{padding:5rem 2rem}
  #hero{padding:0 2rem}
  #nav{padding:1.5rem 2rem}

  /* Hamburger + slide-in mobile menu */
  .nav-toggle{display:flex}
  /* backdrop-filter makes #nav the containing block for the fixed panel, trapping
     it to the small bar (worst on iOS via -webkit-). Drop it on mobile so the panel
     covers the full viewport; use a solid bar background to compensate. */
  #nav{background:rgba(7,7,7,0.92);backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav-links{
    position:fixed;top:0;right:0;bottom:0;left:0;
    flex-direction:column;justify-content:flex-start;align-items:center;gap:1.6rem;
    padding:6.5rem 2rem 2.5rem;margin:0;overflow-y:auto;
    background:rgba(7,7,7,0.97);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    transform:translateX(100%);transition:transform .4s ease;
    pointer-events:none;
  }
  #nav.nav-open .nav-links{transform:translateX(0);pointer-events:auto}
  .nav-links a{font-size:1rem;letter-spacing:.2em}
  /* Hover rings are built once at load using desktop (.72rem) metrics, so they
     don't fit the larger mobile menu text — and touch has no hover. Hide them. */
  .nav-ring{display:none}
  /* Fixed progress-line side navs overlap content on narrow screens and the
     hamburger already covers navigation — remove them on mobile. */
  #section-nav,#svc-sidenav,#card-sidenav{display:none !important}
  /* Parent items: hover/tap reveals the sub-nav; a click on the parent name still
     navigates to its overview page (parent routes are real pages). The caret is a
     pure indicator — no padding, or its border-triangle gets pulled apart. */
  .has-flyout{display:flex;flex-direction:column;align-items:center;gap:.9rem}
  .has-flyout > a{display:inline-flex;align-items:center}
  .nav-links .has-flyout > a .nav-caret{display:inline-block;margin-left:.45em;border-left-width:6px;border-right-width:6px;border-top-width:8px;transition:transform .25s}
  .has-flyout:hover > a .nav-caret,
  .has-flyout:focus-within > a .nav-caret{transform:rotate(180deg)}
  /* Sub-nav hidden until its parent is hovered/focused */
  .nav-links .flyout{
    position:static;opacity:1;pointer-events:auto;transform:none;
    display:none;flex-direction:column;align-items:center;gap:.9rem;
    background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
    padding:.2rem 0 .4rem;margin:0;border-left:0;
  }
  .has-flyout:hover .flyout,
  .has-flyout:focus-within .flyout{display:flex}
  .nav-links .flyout a{font-size:.72rem}

  /* Stack philosophy columns */
  .phil-inner{grid-template-columns:1fr;gap:2.5rem;height:auto;min-height:100vh;padding:6rem 2rem;align-content:center}
  .phil-inner > div:first-child{max-width:none;margin-left:0}
  .phil-body{max-width:none}

  /* Work grid single column */
  .work-grid{grid-template-columns:1fr}

  /* Services: stack cards vertically instead of horizontal-scroll row */
  .services{padding:5rem 2rem;text-align:left}
  #services.services{text-align:left}  /* beat base #services{text-align:center} at line 657 */
  .services .s-label{justify-content:flex-start !important}
  .services-intro{margin-left:0;margin-right:0}
  .services-grid{flex-direction:column;flex-wrap:wrap;gap:1.5rem;will-change:auto}
  .svc-card{flex:1 1 auto;width:100%}

  /* Hide Earth wordmark overlay ("we Innovate the World Wide Web") on mobile */
  .earth-wordmark,.earth-word{display:none !important}

  /* Scale hero type down */
  .hero-title{font-size:clamp(3rem,12vw,5rem)}

  /* Divider padding */
  .divider{padding:0 2rem}

  /* Footer */
  #colophon{flex-direction:column;gap:1rem;text-align:center;padding:2rem}
}


/* ── BACK TO TOP ── */
#back-to-top{position:fixed;bottom:2.5rem;right:2.5rem;z-index:500;width:44px;height:44px;border:1px solid var(--gold-dim);background:rgba(7,7,7,0.85);color:var(--gold);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .4s,transform .4s,background .3s}
#back-to-top.visible{opacity:1;pointer-events:all;transform:translateY(0)}
#back-to-top:hover{background:var(--gold-dim)}
#back-to-top svg{width:18px;height:18px;stroke:currentColor}
#section-nav{position:fixed;right:2.5rem;top:50%;transform:translateY(-50%);z-index:300;display:flex;flex-direction:column;gap:1.4rem;opacity:0;pointer-events:none;transition:opacity .6s;padding:1.6rem 1rem .9rem 1.4rem}
#section-nav.visible{opacity:1;pointer-events:all}
#section-nav .torn-bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}
.snav-item{display:flex;align-items:center;justify-content:flex-end;gap:.8rem;text-decoration:none;cursor:pointer;position:relative;z-index:1}
.snav-label{font-family:'Jost',sans-serif;font-size:.6rem;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,237,230,0.55);opacity:1;transform:translateX(0);transition:color .3s;white-space:nowrap}
.snav-item:hover .snav-label{color:var(--white-mid)}
.snav-item.active .snav-label{color:var(--gold)}
.snav-dot{width:7px;height:7px;border:1px solid rgba(196,162,101,0.4);transform:rotate(45deg);flex-shrink:0;transition:background .3s,border-color .3s}
.snav-item:hover .snav-dot{border-color:var(--gold)}
.snav-item.active .snav-dot{background:var(--gold);border-color:var(--gold)}

/* ── INNER PAGES ── */
.page-nav{background:linear-gradient(to bottom,rgba(7,7,7,0.95) 0%,transparent 100%)}
.page-nav.nav-solid{background:rgba(7,7,7,0.97);box-shadow:0 1px 0 rgba(196,162,101,0.1)}
.page-wrap{min-height:100vh;display:flex;flex-direction:column}

.page-hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 70% at 50% 60%,#1e1508 0%,var(--black) 75%)}
.page-hero-tiles{position:absolute;inset:0;z-index:1;pointer-events:none}
#hero-tiles{width:100%;height:100%;display:block}
.page-hero-content{position:relative;z-index:2}
.page-hero-title{font-family:'Playfair Display',serif;font-size:clamp(3rem,6vw,5.5rem);font-weight:400;line-height:1.1;color:var(--white);letter-spacing:-.02em}
.page-breadcrumb{margin-top:1.2rem;font-family:'Jost',sans-serif;font-size:.8rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--white-mid)}
.page-breadcrumb a{color:var(--gold);text-decoration:none;transition:color .3s}
.page-breadcrumb a:hover{color:var(--white)}
.breadcrumb-sep{margin:0 .6rem;opacity:.4}
.page-hero-divider{position:absolute;bottom:0;left:50%;width:100%;transform:translateX(-50%);display:flex;align-items:center;z-index:2}
.page-hero-divider .div-line{flex:1;height:2px;background:rgba(196,162,101,0.3)}
.page-hero-divider .div-gem{width:10px;height:10px;border:1px solid var(--gold);transform:rotate(45deg);margin:0 2rem;flex-shrink:0;background:rgba(196,162,101,0.12)}
/* Mobile: drop the page-title floor so long single words (Webmastering,
   Optimization, Development) fit the viewport instead of overflowing /
   breaking mid-word. text-wrap:balance tidies multi-line titles. */
@media(max-width:768px){
  .page-hero-title{font-size:clamp(2rem,8vw,3rem);text-wrap:balance}
}

/* Page Content */
.page-content{flex:1;background:var(--cream-grad);position:relative}
.page-content-inner{max-width:860px;margin:0 auto;padding:6rem 3rem;color:var(--charcoal)}
.page-content-inner p{font-family:'Roboto',sans-serif;font-weight:300;color:var(--charcoal);line-height:1.9;font-size:1.05rem;margin-bottom:1.5rem}
.page-content-inner h2{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,3vw,2.8rem);font-weight:400;color:var(--black);margin:3rem 0 1.2rem;line-height:1.2}
.page-content-inner h3{font-family:'Playfair Display',serif;font-size:clamp(1.3rem,2vw,1.8rem);font-weight:400;color:var(--black);margin:2.5rem 0 1rem}
.page-content-inner h2 em,.page-content-inner h3 em{font-style:italic;color:var(--gold-dim)}
.page-content-inner strong{color:var(--black);font-weight:400}
.page-content-inner a{color:var(--gold-dim);text-decoration:none;border-bottom:1px solid rgba(107,85,53,0.3);transition:color .3s,border-color .3s}
.page-content-inner a:hover{color:var(--black);border-color:var(--black)}

/* Page CTA (above footer, all inner pages) */
.page-cta{background:var(--cream-grad);padding:9rem 5rem;text-align:center;position:relative;box-shadow:0 -30px 80px rgba(196,162,101,0.12)}
.page-cta::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:100%;height:2px;background:rgba(196,162,101,0.2)}
.page-cta-inner{max-width:680px;margin:0 auto}
.page-cta-h{font-family:'Playfair Display',serif;font-size:clamp(2.8rem,5vw,4.8rem);font-weight:400;line-height:1.1;color:var(--black);margin:1rem 0 1.8rem}
.page-cta-h em{display:block;font-style:italic;color:var(--gold-dim)}
.page-cta-sub{font-family:'Roboto',sans-serif;font-weight:300;font-size:1.05rem;line-height:1.85;color:var(--charcoal);margin-bottom:3rem}
.page-cta .s-label{color:var(--gold-dim)}
.page-cta .s-label::before{background:var(--gold-dim)}
.page-cta .btn{border-color:var(--gold-dim);color:var(--gold-dim)}
.page-cta .btn::before{background:var(--gold-dim)}
.page-cta .btn:hover{color:var(--white)}

/* Footer on inner pages */
.page-wrap ~ #colophon,
body:not(.home) #colophon{background:radial-gradient(ellipse 80% 70% at 50% 40%,#1e1508 0%,var(--black) 75%);border-top:none;padding:0 5rem}
body:not(.home) #colophon .foot-logo{color:rgba(242,237,230,.5)}
body:not(.home) #colophon .foot-copy{color:rgba(242,237,230,.2)}

.page-hero{position:relative;min-height:45vh;display:flex;align-items:center;justify-content:center;background:var(--black);padding:10rem 5rem 6rem;text-align:center;overflow:hidden}
.about-page-wrap .page-hero{min-height:0;padding:8rem 5rem 5rem}

/* ── ABOUT PAGE ── */

/* About page stacked card scroll — nth-child like homepage to avoid class conflicts */
.about-page-wrap{display:block}
.about-page-wrap > :nth-child(1){position:sticky;top:0;z-index:1;box-shadow:0 12px 80px rgba(0,0,0,0.8),0 2px 16px rgba(0,0,0,0.5)}
.about-page-wrap > :nth-child(2){position:sticky;top:0;z-index:2;box-shadow:0 -30px 80px rgba(196,162,101,0.12);background:var(--cream-grad)}
.about-page-wrap > :nth-child(3){position:sticky;top:0;z-index:3;box-shadow:0 -30px 80px rgba(196,162,101,0.12);background:var(--black)}
.about-page-wrap > :nth-child(4){position:sticky;top:0;z-index:4;box-shadow:0 -30px 80px rgba(196,162,101,0.12);background:var(--cream-grad)}
.about-page-wrap > :nth-child(5){position:sticky;top:0;z-index:5;box-shadow:0 -30px 80px rgba(196,162,101,0.12);background:radial-gradient(ellipse 80% 70% at 50% 50%,#1e1508 0%,var(--black) 75%)}
.about-page-wrap > :nth-child(6){position:sticky;top:0;z-index:6;box-shadow:0 -30px 80px rgba(196,162,101,0.12);background:var(--cream-grad)}
.about-card-1,.about-card-2,.about-card-3,.about-card-4,.about-card-5,.about-card-6{}

/* Story */
.slide-in-left{opacity:0;transform:translateX(-60px)}
.slide-in-right{opacity:0;transform:translateX(60px)}
.about-story{position:sticky;top:0;height:100vh;padding:0}
.story-tiles{position:absolute;top:0;left:0;width:65%;height:75%;pointer-events:none;z-index:0;background:url('/images/philosophy bg.png') no-repeat top left / 100% auto;mix-blend-mode:lighten;-webkit-mask-image:linear-gradient(to bottom,black 40%,transparent 100%);mask-image:linear-gradient(to bottom,black 40%,transparent 100%)}
.story-bg{position:absolute;inset:0;background-image:url('http://localhost/iwd/wp-content/uploads/2026/05/cafe2.png');background-size:cover;background-position:center}
.story-overlay{position:absolute;inset:0;background:rgba(7,7,7,0.45)}
.story-inner{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:6rem 5rem;gap:4rem}
.story-left{display:flex;align-items:center;justify-content:center}
.story-eyebrow{font-family:'Playfair Display',serif;font-size:3rem;font-weight:400;font-style:italic;letter-spacing:.02em;text-transform:none;color:var(--white);margin-bottom:1rem}
.story-right{max-width:520px}
.story-right p{font-family:'Roboto',sans-serif;font-weight:300;font-size:1.15rem;line-height:1.9;color:var(--white);margin-bottom:1.2rem}
.story-right p:last-child{margin-bottom:0}
.story-word{display:inline-block;opacity:0.1}

/* Process */
.about-process{background:var(--cream-grad);padding:7rem 5rem}
.about-process-inner{max-width:1100px;margin:0 auto;text-align:center}
.about-h2{font-family:'Playfair Display',serif;font-size:clamp(2rem,3.5vw,3rem);font-weight:400;line-height:1.2;margin:1rem 0 2rem}
.about-h2--light{color:var(--white)}
.about-h2--light em{color:var(--gold)}
.about-process .about-h2--light{color:var(--black);text-align:center}
.about-process .about-h2--light em{color:var(--gold-dim)}
.about-process-intro{font-family:'Roboto',sans-serif;font-weight:300;font-size:1.05rem;line-height:1.9;color:#1a1510;max-width:680px;margin:0 auto 5rem}
.about-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem;text-align:left}
.about-step{border-top:1px solid rgba(107,85,53,0.2);padding-top:2rem}
.about-step-num{font-family:'Jost',sans-serif;font-size:.65rem;font-weight:300;letter-spacing:.3em;color:var(--gold-dim);display:block;margin-bottom:1rem}
.about-step h3{font-family:'Playfair Display',serif;font-size:1.4rem;font-weight:400;color:var(--black);margin-bottom:1rem}
.about-step p{font-family:'Roboto',sans-serif;font-weight:300;font-size:.95rem;line-height:1.85;color:#1a1510}

/* Craft */
.about-craft{background:var(--cream-grad);padding:0}
.about-craft-viewport{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:7rem 5rem}
.about-craft-inner{max-width:860px;margin:0 auto;text-align:center}
.about-craft-inner .s-label--dark{color:var(--gold-dim);justify-content:center}
.about-craft-inner .s-label--dark::before{background:var(--gold-dim)}
.about-craft-quote{font-family:'Playfair Display',serif;font-size:clamp(1.6rem,3vw,2.4rem);font-weight:400;line-height:1.4;color:var(--black);margin:2rem 0;font-style:normal}
.about-craft-quote em{font-style:italic;color:var(--gold-dim)}
.about-craft-body p{font-family:'Roboto',sans-serif;font-weight:300;font-size:1.05rem;line-height:1.9;color:var(--charcoal);max-width:680px;margin:0 auto}

/* Location */
.about-location{background:radial-gradient(ellipse 80% 70% at 50% 50%,#1e1508 0%,var(--black) 75%);padding:0}
.about-location-viewport{min-height:100vh;display:flex;align-items:center;justify-content:flex-start;padding:9rem 5rem}
.about-location-inner{max-width:580px}
.about-location-inner h2{margin-bottom:2.5rem}
.about-location-inner p{font-family:'Roboto',sans-serif;font-weight:300;font-size:1.05rem;line-height:1.9;color:#fff;margin-bottom:1.4rem}
.about-location-inner .btn{margin-top:3rem}
.location-bg{position:absolute;inset:0 0 -32px 0;background-image:url('/images/gr.png');background-size:cover;background-position:center right;pointer-events:none}

/* ── SERVICES V2: STACKED CARDS ── */
#services{padding:0;min-height:unset;background:transparent;box-shadow:none;text-align:left}
#services::before{display:none}
.svc-stack{position:relative}
.svc-stack-card{position:sticky;top:0;height:100vh;width:100%;display:flex;align-items:center;overflow:hidden}
.svc-stack-card:nth-child(1){z-index:1;background:#0f0d0a}
.svc-stack-card:nth-child(2){z-index:2;background:#0d0b08}
.svc-stack-card:nth-child(3){z-index:3;background:#0c0a07}
.svc-stack-card:nth-child(4){z-index:4;background:#0b0906}
.svc-card-bg{position:absolute;inset:0;background:radial-gradient(ellipse 75% 65% at 72% 50%,#1c1408 0%,transparent 70%);pointer-events:none}
.svc-card-content{position:relative;z-index:2;padding:0 5rem;max-width:680px}
.svc-card-num{display:block;font-family:'Jost',sans-serif;font-size:.55rem;font-weight:300;letter-spacing:.45em;text-transform:uppercase;color:var(--gold);margin-bottom:1.8rem;opacity:0}
.svc-card-title{font-family:'Playfair Display',serif;font-size:clamp(3rem,6vw,6.5rem);font-weight:400;line-height:1.02;letter-spacing:-.025em;color:var(--white);margin:0 0 2.8rem}
.svc-card-title em{font-style:italic;color:var(--gold)}
.svc-card-list{list-style:none;margin:0 0 3rem;padding:0}
.svc-card-list li{font-family:'Jost',sans-serif;font-size:.78rem;font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:var(--white-mid);padding:.7rem 0;border-bottom:1px solid rgba(196,162,101,0.12);opacity:0}
.svc-card-list li:first-child{border-top:1px solid rgba(196,162,101,0.12)}
.svc-stack-card .btn{opacity:0}

/* ── ABOUT PAGE STACKED CARDS (structure) ── */
.about-hero{min-height:0;padding:8rem 5rem 5rem}
.about-stack{display:block;position:relative}
.s-wrap{width:100%;position:relative;clip-path:inset(0)}
.s-card{width:100%;height:100vh;position:sticky;top:0;overflow-x:hidden;overflow-y:auto;will-change:clip-path;scrollbar-width:none;-ms-overflow-style:none}
.s-card::-webkit-scrollbar{display:none}
.about-stack > .s-wrap:not(:first-child) > .s-card{clip-path:polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)}
.about-stack > .s-wrap:nth-child(1){z-index:1}
.about-stack > .s-wrap:nth-child(2){z-index:2}
.about-stack > .s-wrap:nth-child(3){z-index:3}
.about-stack > .s-wrap:nth-child(4){z-index:4}
.about-stack > .s-wrap:nth-child(5){z-index:5}
.card-process{background:radial-gradient(ellipse 85% 85% at 50% 50%,#f2ede6 0%,#ede5d8 55%,#ddd0be 80%,#d0c3ae 100%);display:flex;flex-direction:column;align-items:center;justify-content:center}
.card-story{background:radial-gradient(ellipse 80% 70% at 50% 50%,#1e1508 0%,var(--black) 75%)}
.card-craft{background:var(--cream-grad)}
.card-location{background:radial-gradient(ellipse 80% 70% at 50% 50%,#1e1508 0%,var(--black) 75%)}
.card-cta{background:var(--cream-grad);display:flex;align-items:center;justify-content:center;text-align:center}
.card-process,.card-story,.card-craft,.card-location,.card-cta{box-shadow:0 -30px 80px rgba(196,162,101,0.12)}
.card-process .about-h2{color:var(--black)}
.card-process .about-h2 em{color:var(--gold-dim)}
.about-process-inner{padding:7rem 5rem}
.card-location .about-h2{color:var(--white)}
.card-location .about-h2 em{color:var(--gold)}
.card-location p{color:#fff}
.card-cta .s-label{color:var(--gold-dim);justify-content:center;padding-left:0}
.card-cta .s-label::before{background:var(--gold-dim)}
.card-cta .btn{border-color:var(--gold-dim);color:var(--gold-dim)}
.card-cta .btn::before{background:var(--gold-dim)}
.card-cta .btn:hover{color:var(--black)}
.card-cta .page-cta-h{color:var(--black)}
.card-cta .page-cta-sub{color:var(--charcoal)}

/* ── INNER PAGE PLACEHOLDER ── */
.page-coming-soon{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:9rem 5rem;background:var(--black)}
.page-coming-h{font-family:'Playfair Display',serif;font-size:clamp(2.4rem,4vw,3.8rem);font-weight:400;color:var(--white);margin:1rem 0 1.8rem;line-height:1.15}
.page-coming-sub{font-family:'Roboto',sans-serif;font-weight:300;font-size:1.05rem;line-height:1.85;color:rgba(242,237,230,0.55);max-width:560px;margin-bottom:3rem}
.page-coming-link{color:var(--gold);text-decoration:none;transition:color .3s}
.page-coming-link:hover{color:var(--white)}

/* ── SERVICES V2: CORRECTIONS (override sticky approach) ── */
#services{height:100vh;overflow:hidden}
.svc-stack{position:absolute;inset:0}
.svc-stack-card{position:absolute;inset:0;height:auto;display:flex;align-items:center;overflow:hidden}

/* ── SERVICES V2: CARD WIDTH CONSTRAINT ── */
#services{display:flex;align-items:center;justify-content:center}
.svc-stack{position:relative;width:min(820px,80vw);height:80vh;inset:auto}
.svc-stack-card{border-radius:4px;box-shadow:0 30px 80px rgba(0,0,0,0.6),0 0 0 1px rgba(196,162,101,0.08)}

/* ── SERVICES V2: SECTION BACKGROUND ── */
#services{background:radial-gradient(ellipse 80% 70% at 50% 50%,#1e1508 0%,#0d0b07 45%,#070707 100%)}

/* ── SERVICES V2: REMOVE CARD BG GRADIENT, ADD DROP SHADOW ── */
.svc-card-bg{background:none}
.svc-stack-card{box-shadow:0 20px 60px rgba(0,0,0,0.7),0 4px 12px rgba(0,0,0,0.5)}

/* ── SERVICES V2: REMOVE CARD DROP SHADOW ── */
.svc-stack-card{box-shadow:none}

/* ── SERVICES V2: CARD BORDER + SHADOW ── */
.svc-stack-card{border:1px solid rgba(196,162,101,0.15);box-shadow:0 8px 32px rgba(0,0,0,0.45)}

/* ── SERVICES: RESTORE ORIGINAL ── */
#services{padding:9rem 5rem;min-height:100vh;height:auto;overflow:visible;display:block;background:radial-gradient(ellipse 70% 60% at 50% 50%,#1e1508 0%,var(--black) 70%);text-align:center}
#services::before{content:'';display:block}
.svc-stack{display:none}

/* ── ABOUT: overlapping wrapper structure ── */
/* All wrappers occupy the same space; stack height set by JS */
.about-stack .s-wrap{position:absolute;top:0;left:0;width:100%;height:100%;clip-path:inset(0)}

/* ── SERVICES OVERVIEW PAGE ── */
.svc-overview-stack{display:block;position:relative}
.svc-overview-stack > .s-wrap{position:absolute;top:0;left:0;width:100%;height:100%;clip-path:inset(0)}
.svc-overview-stack > .s-wrap:nth-child(1){z-index:1}
.svc-overview-stack > .s-wrap:nth-child(2){z-index:2}
.svc-overview-stack > .s-wrap:nth-child(3){z-index:3}
.svc-overview-stack > .s-wrap:nth-child(4){z-index:4}
.svc-overview-stack > .s-wrap:nth-child(5){z-index:5}
.svc-overview-stack > .s-wrap:not(:first-child) > .svc-overview-sec{clip-path:polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)}
.svc-overview-sec{height:100vh;display:flex;align-items:center;position:sticky;top:0;overflow:hidden;padding:0 5rem;will-change:clip-path}
.svc-overview-bg{position:absolute;inset:0;pointer-events:none}
.svc-overview-deco{position:absolute;left:-1vw;top:50%;transform:translateY(-50%);font-family:'Playfair Display',serif;font-size:clamp(10rem,22vw,20rem);font-weight:400;line-height:1;color:rgba(196,162,101,0.035);pointer-events:none;user-select:none;letter-spacing:-.05em}
.svc-overview-inner{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center}
.svc-overview-h{font-family:'Playfair Display',serif;font-size:clamp(2rem,3.5vw,3.2rem);font-weight:400;color:var(--white);line-height:1.15;letter-spacing:-.02em;margin:0 0 1.5rem}
.svc-overview-h em{color:var(--gold);font-style:italic}
.svc-overview-desc{font-family:'Roboto',sans-serif;font-size:1rem;line-height:1.85;color:rgba(242,237,230,0.58);margin:0 0 2.5rem;max-width:500px;text-shadow:0 1px 3px rgba(0,0,0,0.45)}
.svc-overview-list{list-style:none;margin:0;padding:0}
.svc-overview-list li{font-family:'Jost',sans-serif;font-size:.75rem;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,237,230,0.5);padding:.9rem 0;border-bottom:1px solid rgba(196,162,101,0.12);display:flex;align-items:center;gap:1rem}
.svc-overview-list li:first-child{border-top:1px solid rgba(196,162,101,0.12)}
.svc-overview-list li::before{content:'';width:18px;height:1px;background:var(--gold);flex-shrink:0;opacity:.55}

.svc-sec-1{background:radial-gradient(ellipse 85% 85% at 50% 50%,#f2ede6 0%,#ede5d8 55%,#ddd0be 80%,#d0c3ae 100%)}
.svc-sec-1 .svc-overview-h{color:var(--black)}
.svc-sec-1 .svc-overview-h em{color:var(--gold-dim)}
.svc-sec-1 .svc-overview-desc{color:#1a1510;text-shadow:0 1px 2px rgba(0,0,0,0.12)}
.svc-sec-1 .svc-overview-list li{color:#1a1510;font-weight:400;border-color:rgba(100,80,50,0.2);text-shadow:0 1px 2px rgba(0,0,0,0.12)}
.svc-sec-1 .svc-overview-list li::before{opacity:.4}
.svc-sec-1 .s-label{color:var(--gold-dim)}
.svc-sec-1 .s-label::before{background:var(--gold-dim)}
.svc-sec-1 .btn{border-color:var(--gold-dim);color:var(--gold-dim)}
.svc-sec-1 .btn::before{background:var(--gold-dim)}
.svc-sec-1 .btn:hover{color:var(--black)}
.svc-sec-1 .svc-overview-deco{color:rgba(100,80,50,0.06)}
.svc-sec-2{background:var(--charcoal)}.svc-sec-2 .svc-overview-bg{background:radial-gradient(ellipse 60% 70% at 72% 50%,#1a1208 0%,transparent 65%)}
.svc-sec-3{background:radial-gradient(ellipse 85% 85% at 50% 50%,#f2ede6 0%,#ede5d8 55%,#ddd0be 80%,#d0c3ae 100%);align-items:flex-start;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
.svc-sec-3::-webkit-scrollbar{display:none}
.svc-sec-3 .svc-overview-inner{padding-top:5rem;padding-bottom:5rem}
.svc-sec-3 .svc-overview-bg{background:none}
.svc-sec-3 .svc-overview-h{color:var(--black)}
.svc-sec-3 .svc-overview-h em{color:var(--gold-dim)}
.svc-sec-3 .svc-overview-desc{color:#1a1510;text-shadow:0 1px 2px rgba(0,0,0,0.12)}
.svc-sec-3 .svc-overview-list li{color:#1a1510;font-weight:400;border-color:rgba(100,80,50,0.2);text-shadow:0 1px 2px rgba(0,0,0,0.12)}
.svc-sec-3 .svc-overview-list li::before{opacity:.4}
.svc-sec-3 .s-label{color:var(--gold-dim)}
.svc-sec-3 .s-label::before{background:var(--gold-dim)}
.svc-sec-3 .btn{border-color:var(--gold-dim);color:var(--gold-dim)}
.svc-sec-3 .btn::before{background:var(--gold-dim)}
.svc-sec-3 .btn:hover{color:var(--black)}
.svc-sec-3 .svc-overview-deco{color:rgba(100,80,50,0.06)}
.svc-sec-4{background:var(--charcoal)}.svc-sec-4 .svc-overview-bg{background:radial-gradient(ellipse 60% 70% at 72% 50%,#100f0d 0%,transparent 65%)}
.svc-sec-5{background:radial-gradient(ellipse 85% 85% at 50% 50%,#f2ede6 0%,#ede5d8 55%,#ddd0be 80%,#d0c3ae 100%)}
.svc-sec-5 .svc-overview-bg{background:none}
.svc-sec-5 .svc-overview-h{color:var(--black)}
.svc-sec-5 .svc-overview-h em{color:var(--gold-dim)}
.svc-sec-5 .svc-overview-desc{color:#1a1510;text-shadow:0 1px 2px rgba(0,0,0,0.12)}
.svc-sec-5 .svc-overview-list li{color:#1a1510;font-weight:400;border-color:rgba(100,80,50,0.2);text-shadow:0 1px 2px rgba(0,0,0,0.12)}
.svc-sec-5 .svc-overview-list li::before{opacity:.4}
.svc-sec-5 .s-label{color:var(--gold-dim)}
.svc-sec-5 .s-label::before{background:var(--gold-dim)}
.svc-sec-5 .btn{border-color:var(--gold-dim);color:var(--gold-dim)}
.svc-sec-5 .btn::before{background:var(--gold-dim)}
.svc-sec-5 .btn:hover{color:var(--black)}
.svc-sec-5 .svc-overview-deco{color:rgba(100,80,50,0.06)}

/* ── SERVICES SIDE NAV ── */
#svc-sidenav{position:fixed;right:2.5rem;top:50%;transform:translateY(-50%);z-index:300;display:flex;flex-direction:column;gap:1.2rem;opacity:0;pointer-events:none;transition:opacity .5s;padding:1.6rem 1rem .9rem 1.4rem}
#svc-sidenav::before,#svc-sidenav::after{display:none}
#svc-sidenav .torn-bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}
#svc-sidenav.visible{opacity:1;pointer-events:all}
.svc-nav-item{display:flex;align-items:center;justify-content:flex-end;gap:.8rem;text-decoration:none;position:relative;z-index:1}
.svc-nav-label{font-family:'Jost',sans-serif;font-size:.75rem;letter-spacing:.25em;text-transform:uppercase;color:rgba(160,120,65,0.9);transition:color .3s}
.svc-nav-dot{width:7px;height:7px;border:1px solid rgba(150,115,60,0.75);transform:rotate(45deg);transition:background .3s,border-color .3s;flex-shrink:0}
#svc-sidenav .torn-bg .torn-fill{fill:rgba(45,28,10,0.92)}
#svc-sidenav .torn-bg .torn-edge{stroke:rgba(120,90,55,0.55)}
#svc-sidenav .torn-bg .torn-border{stroke:rgba(120,90,55,0.5)}
.svc-nav-item.active .svc-nav-label{color:var(--gold)}
.svc-nav-item.active .svc-nav-dot{background:var(--gold);border-color:var(--gold);transform:rotate(45deg) scale(1.4)}
.svc-nav-item:hover .svc-nav-label{color:var(--gold)}
.svc-nav-item:hover .svc-nav-dot{border-color:rgba(196,162,101,0.65)}

/* ── SERVICE DETAIL CARDS (sub-pages via CardStack) ── */
.card-svc-intro{background:radial-gradient(ellipse 70% 70% at 50% 50%,#f2ede6 0%,#e8dfd4 42%,#d1c4b3 70%,#beb09f 100%);display:flex;align-items:center}
.card-svc-intro .svc-d-num{color:var(--gold-dim)}
.card-svc-intro .svc-d-h{color:var(--black)}
.card-svc-intro .svc-d-h em{color:var(--gold-dim)}
.card-svc-intro .svc-d-body{color:rgba(7,7,7,0.65)}
.card-svc-intro .scroll-hint{color:var(--gold-dim)}
.card-svc-dark{background:var(--black);display:flex;align-items:center}
.card-svc-dark .svc-d-bg{position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 25% 50%,#1e1508 0%,transparent 65%);pointer-events:none}
.card-svc-light{background:var(--cream-grad);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6rem 5rem}
.card-svc-mid{background:var(--charcoal);display:flex;align-items:center}
.card-svc-mid .svc-d-bg{position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 72% 50%,#1a1208 0%,transparent 65%);pointer-events:none}
.card-svc-cta-wrap{background:var(--cream-grad);display:flex;align-items:center;justify-content:center;text-align:center}
.svc-d-inner{position:relative;z-index:2;padding:0 5rem;max-width:820px;width:100%}
.svc-d-num{font-family:'Jost',sans-serif;font-size:.75rem;font-weight:300;letter-spacing:.45em;text-transform:uppercase;color:var(--gold);margin-bottom:1.8rem;display:block}
.svc-d-h{font-family:'Playfair Display',serif;font-size:clamp(2.8rem,5.5vw,6rem);font-weight:400;line-height:1.05;letter-spacing:-.025em;color:var(--white);margin:0 0 2.5rem}
.svc-d-h em{font-style:italic;color:var(--gold)}
.svc-d-body{font-family:'Roboto',sans-serif;font-size:1.05rem;line-height:1.9;color:rgba(242,237,230,0.62);max-width:580px}
.svc-d-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem;width:100%;max-width:1100px}
.svc-d-item{padding:2rem;border:1px solid rgba(196,162,101,0.15);border-radius:6px;background:rgba(7,7,7,0.03)}
.svc-d-item-label{font-family:'Jost',sans-serif;font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dim);margin:0 0 .7rem}
.svc-d-item-desc{font-family:'Roboto',sans-serif;font-size:.9rem;line-height:1.75;color:#1a1510;margin:0}
.svc-d-steps{display:flex;flex-direction:column;gap:2.5rem;max-width:680px}
.svc-d-step{display:grid;grid-template-columns:4rem 1fr;gap:1.5rem;align-items:start}
.svc-d-step-num{font-family:'Jost',sans-serif;font-size:.75rem;letter-spacing:.35em;text-transform:uppercase;color:#6b5535;opacity:1;padding-top:.3rem}
.svc-d-step-title{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:400;color:var(--white);margin:0 0 .6rem}
.svc-d-step-desc{font-family:'Roboto',sans-serif;font-size:.95rem;line-height:1.8;color:rgba(242,237,230,0.55);margin:0}
.svc-d-cta-inner{padding:4rem 2rem}
.svc-d-cta-sub{font-family:'Roboto',sans-serif;font-size:1rem;line-height:1.8;color:#1a1510;max-width:480px;margin:0 auto 2.5rem}

/* ── SERVICES/ABOUT scroll cue: inherits the shared .scroll-hint mouse styles above ── */

/* ── PAGE TRANSITION OVERLAY ── */
#page-overlay{position:fixed;inset:0;background:var(--black);z-index:10000;pointer-events:none;opacity:1}
#page-overlay.can-transition{transition:opacity .6s ease}
#page-overlay.fade-out{opacity:0}

/* ── SERVICES: disable pointer events on unrevealed sections ── */
.svc-overview-stack > .s-wrap:not(:first-child){pointer-events:none}
.svc-overview-stack > .s-wrap:not(:first-child) > .svc-overview-sec{pointer-events:none}

/* ── INNER PAGE CONTENT TEXT SHADOWS ── */
/* Dark background content */
.svc-d-body{text-shadow:0 1px 3px rgba(0,0,0,0.45)}
.svc-d-step-desc{text-shadow:0 1px 3px rgba(0,0,0,0.4)}
.story-right p{text-shadow:0 1px 3px rgba(0,0,0,0.4)}
/* Light background content */
.svc-d-item-desc{text-shadow:0 1px 2px rgba(0,0,0,0.1)}
.svc-d-cta-sub{text-shadow:0 1px 2px rgba(0,0,0,0.1)}
.page-cta-sub{text-shadow:0 1px 2px rgba(0,0,0,0.1)}
.about-step p{text-shadow:0 1px 2px rgba(0,0,0,0.1)}
.about-process-intro{text-shadow:0 1px 2px rgba(0,0,0,0.1)}

.card-svc-light .scroll-hint{color:var(--gold-dim)}

/* ── CARD INTRO: suppress text-shadow (light bg, shadow looks harsh) ── */
.card-svc-intro .svc-d-body{color:#1a1510;text-shadow:none}

/* ── DARK CARD: item box overrides (grid items designed for light bg) ── */
.card-svc-dark .svc-d-item{background:rgba(255,255,255,0.06);border-color:rgba(196,162,101,0.3)}
.card-svc-dark .svc-d-item-desc{color:rgba(242,237,230,0.65);text-shadow:0 1px 3px rgba(0,0,0,0.4)}
.card-svc-dark .svc-d-cta-sub{color:rgba(242,237,230,0.65)}

/* ── LIGHT CARD: step text overrides (steps designed for dark bg) ── */
.card-svc-light .svc-d-step-title{color:var(--black)}
.card-svc-light .svc-d-step-desc{color:#1a1510;text-shadow:none}

/* ── EM GOLD COLOR: emphasized text is gold, not brown ── */
.card-svc-intro .svc-d-h em{color:var(--gold)}
.card-process .about-h2 em{color:var(--gold)}
.svc-sec-1 .svc-overview-h em{color:var(--gold)}
.svc-sec-3 .svc-overview-h em{color:var(--gold)}
.svc-sec-5 .svc-overview-h em{color:var(--gold)}

/* ── CARD DETAIL SIDE NAV (service subpages) ── */
#card-sidenav{position:fixed;right:2.5rem;top:50%;transform:translateY(-50%);z-index:300;display:flex;flex-direction:column;gap:1.2rem;opacity:0;pointer-events:none;transition:opacity .5s;padding:1.6rem 1rem .9rem 1.4rem}
#card-sidenav::before,#card-sidenav::after{display:none}
#card-sidenav .torn-bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}
#card-sidenav.visible{opacity:1;pointer-events:all}
.csn-item{display:flex;align-items:center;justify-content:flex-end;gap:.8rem;background:none;border:none;cursor:pointer;padding:0;position:relative;z-index:1}
.csn-label{font-family:'Jost',sans-serif;font-size:.75rem;letter-spacing:.25em;text-transform:uppercase;color:#6b5535;transition:color .3s}
.csn-dot{width:7px;height:7px;border:1px solid rgba(100,80,50,0.5);transform:rotate(45deg);transition:background .3s,border-color .3s,transform .3s;flex-shrink:0}
.csn-item.active .csn-label{color:var(--gold-dim)}
.csn-item.active .csn-dot{background:var(--gold-dim);border-color:var(--gold-dim);transform:rotate(45deg) scale(1.4)}
.csn-item:hover .csn-label{color:rgba(7,7,7,0.85)}
.csn-item:hover .csn-dot{border-color:var(--gold-dim)}
#card-sidenav.on-light .torn-bg .torn-fill{fill:rgba(242,237,230,0.72)}
#card-sidenav.on-light .torn-bg .torn-edge{stroke:rgba(100,80,50,0.35)}
#card-sidenav.on-light .torn-bg .torn-border{stroke:rgba(100,80,50,0.22)}
#card-sidenav.on-light .csn-label{color:rgba(242,237,230,0.55)}
#card-sidenav.on-light .csn-dot{border-color:rgba(242,237,230,0.3);background:transparent}
#card-sidenav.on-light .csn-item.active .csn-label{color:var(--gold)}
#card-sidenav.on-light .csn-item.active .csn-dot{background:var(--gold);border-color:var(--gold)}
#card-sidenav.on-light .csn-item:hover .csn-label{color:rgba(242,237,230,0.85)}
#card-sidenav.on-light .csn-item:hover .csn-dot{border-color:rgba(196,162,101,0.65)}

/* ── CARD OVERFLOW FIX ────────────────────────────────────────────────────────
   flex justify-content/align-items:center in a fixed height:100vh container
   places content symmetrically — so when content > 100vh the top half sits
   above scrollTop=0 and is permanently unreachable (can't scroll negative).
   Fix: switch to flex-start so overflow only goes downward (scrollable).
   Padding replaces the visual centering for short content.
────────────────────────────────────────────────────────────────────────────── */
.card-svc-light { justify-content: flex-start; }
.card-svc-mid   { align-items: flex-start; padding-top: 8rem; padding-bottom: 6rem; }

/* ── WHAT'S INCLUDED TIMELINE (web-design page) ── */
.svc-timeline{position:relative;max-width:860px;margin:0 auto;width:100%}
.svc-tl-line{position:absolute;left:50%;top:16px;bottom:16px;width:1px;background:var(--gold);opacity:0.28;transform:translateX(-50%);pointer-events:none}
.svc-tl-row{display:flex;align-items:center;margin-bottom:2.2rem;position:relative;z-index:1}
.svc-tl-row:last-child{margin-bottom:0}
.svc-tl-side{flex:1}
.svc-tl-side--left{padding-right:3rem;text-align:right}
.svc-tl-side--right{padding-left:3rem;text-align:left}
.svc-tl-node{flex:0 0 50px;display:flex;justify-content:center;align-items:center}
.svc-tl-diamond{width:42px;height:42px;border:1.5px solid var(--gold);transform:rotate(45deg);display:flex;align-items:center;justify-content:center;background:#f2ede6;flex-shrink:0;color:var(--gold-dim);transition:background .3s ease,border-color .3s ease,color .3s ease;cursor:default}
.svc-tl-diamond svg{transform:rotate(-45deg)}
.svc-tl-row:hover .svc-tl-diamond{background:var(--gold-dim);border-color:var(--gold-dim);color:#f2ede6}
.svc-tl-label{font-family:'Jost',sans-serif;font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dim);margin:0 0 .45rem}
.svc-tl-desc{font-family:'Roboto',sans-serif;font-size:.9rem;line-height:1.75;color:rgba(7,7,7,0.85);margin:0;text-shadow:0 1px 2px rgba(0,0,0,0.08)}
.svc-tl-empty{flex:1}

.card-svc-light .scroll-hint{position:sticky;bottom:2.5rem;left:auto;transform:none;align-self:center;margin-top:1rem}

.card-svc-mid .scroll-hint{position:sticky;bottom:2.5rem;left:auto;transform:none;align-self:center;margin-top:1rem}

.svc-tl-row{transition:opacity .3s ease}
.svc-timeline:hover .svc-tl-row{opacity:.35}
.svc-timeline:hover .svc-tl-row:hover{opacity:1}

/* ── How We Work — horizontal 4-col layout (web-design page) ── */
.card-svc-mid .svc-d-inner,.svc-d-cols ~ *,.svc-d-inner:has(.svc-d-cols){max-width:none}
.svc-d-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:0;width:100%}
.svc-d-col{padding:0 2.25rem}
.svc-d-col:first-child{padding-left:0}
.svc-d-col:last-child{padding-right:0}
.svc-d-col+.svc-d-col{border-left:1px solid rgba(196,162,101,0.18)}
.svc-d-col-num{font-family:'Jost',sans-serif;font-size:2.8rem;font-weight:300;color:rgba(196,162,101,0.22);display:block;line-height:1;margin-bottom:1.25rem;letter-spacing:-.02em}
.svc-d-col-rule{height:1px;background:rgba(196,162,101,0.35);margin-bottom:1.5rem}
.svc-d-col-title{font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:400;color:var(--white);line-height:1.45;margin-bottom:.75rem}
.svc-d-col-desc{font-family:'Roboto',sans-serif;font-weight:300;font-size:.875rem;line-height:1.85;color:rgba(242,237,230,0.58)}
.card-svc-light .svc-d-col-title{color:var(--black)}
.card-svc-light .svc-d-col-desc{color:#1a1510}
.card-svc-light .svc-d-col+.svc-d-col{border-left-color:rgba(107,85,53,0.2)}
.card-svc-light .svc-d-col-num{color:rgba(107,85,53,0.25)}
.card-svc-dark.has-timeline{flex-direction:column;align-items:center;justify-content:flex-start;padding:7rem 5rem 5rem}
.has-timeline-inner{width:100%;max-width:860px}
.has-timeline-inner .svc-d-h{font-size:clamp(2rem,3.5vw,3.5rem);margin-bottom:1.5rem;text-align:center}
.has-timeline-inner .s-label{justify-content:center;padding-left:0;margin-bottom:0.5rem}
.has-timeline-inner .svc-timeline{max-height:none;overflow:visible}
.has-timeline-inner .svc-tl-row{margin-bottom:1rem}
.card-svc-dark.has-timeline .scroll-hint{position:fixed;bottom:2.5rem;left:50%;transform:translateX(-50%)}
.card-svc-dark .svc-tl-label{color:var(--gold)}
.card-svc-dark .svc-tl-desc{color:rgba(242,237,230,0.65);text-shadow:0 1px 2px rgba(0,0,0,0.4)}
.card-svc-dark .svc-tl-diamond{background:var(--charcoal);border-color:rgba(196,162,101,0.5)}
.card-svc-dark .svc-tl-row:hover .svc-tl-diamond{background:var(--gold-dim);border-color:var(--gold)}
.card-svc-dark .svc-tl-line{background:rgba(196,162,101,0.2)}
.card-svc-mid .scroll-hint{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%)}
.svc-d-cols{margin-top:60px}
.svc-d-col-num{transition:color .4s ease,filter .4s ease;filter:none}
.svc-d-col:hover .svc-d-col-num{color:rgba(196,162,101,1);filter:drop-shadow(0 0 6px rgba(196,162,101,0.9)) drop-shadow(0 0 18px rgba(196,162,101,0.6)) drop-shadow(0 0 40px rgba(196,162,101,0.3))}

/* ── WEB DESIGN CARD (svc-sec-1) REDESIGN ── */

/* bg is transparent — architecture image handled by .svc-wd-arch */
.svc-sec-1 .svc-overview-bg{background:none}

/* Override two-column grid — vertical stack instead */
.svc-sec-1 .svc-overview-inner{display:flex;flex-direction:column;gap:0;grid-template-columns:unset;align-items:flex-start}

/* Heading row — full width with a baseline rule beneath */
.svc-wd-top{width:100%;padding-bottom:2.5rem;margin-bottom:2.5rem;border-bottom:1px solid rgba(100,80,50,0.2)}
.svc-wd-top .svc-overview-h{font-size:clamp(3rem,5.5vw,5.8rem);margin-bottom:0;line-height:1.05}

/* Bottom row — two columns */
.svc-wd-bottom{display:grid;grid-template-columns:1fr 1fr;gap:6rem;width:100%;align-items:start}

/* Bracket-style list */
.svc-wd-checklist{list-style:none;padding:0;margin:0}
.svc-wd-checklist li{display:flex;align-items:center;gap:0.6rem;padding:0.7rem 0;border-bottom:1px solid rgba(100,80,50,0.15);font-family:'Jost',sans-serif;font-size:0.75rem;font-weight:300;letter-spacing:0.18em;text-transform:uppercase;color:rgba(7,7,7,1);text-shadow:0 1px 2px rgba(0,0,0,0.08)}
.svc-wd-checklist li:first-child{border-top:1px solid rgba(100,80,50,0.15)}
.svc-wd-checklist li::before{content:'[';font-family:'Jost',sans-serif;font-size:0.9rem;font-weight:300;color:var(--gold-dim);opacity:1;width:auto;height:auto;background:none;flex-shrink:0;letter-spacing:0}
.svc-wd-checklist li::after{content:']';margin-left:auto;font-family:'Jost',sans-serif;font-size:0.9rem;font-weight:300;color:var(--gold-dim);opacity:0.35;letter-spacing:0}

/* ── WEB DESIGN CARD: circuit SVG ── */
.wd-circuit-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;display:block}

/* ── HOW WE WORK card: cream bg + dark brown boxes/lines ── */
.card-process{background:linear-gradient(to bottom,transparent 85%,rgba(7,7,3,0.28) 100%),radial-gradient(ellipse 70% 65% at 50% 50%,transparent 40%,rgba(30,18,6,0.45) 100%),radial-gradient(ellipse 85% 85% at 50% 50%,#f2ede6 0%,#ede5d8 55%,#ddd0be 80%,#d0c3ae 100%)}
.card-process .about-process-inner{position:relative;z-index:1}
.card-process .s-label{color:rgba(80,55,25,0.85)}
.card-process .s-label::before{background:rgba(80,55,25,0.85)}
.card-process .about-step{border-top:none;padding:2rem 1.75rem 2.25rem;background:rgba(107,85,53,0.05);border:1px solid rgba(107,85,53,0.25);box-shadow:0 4px 24px rgba(107,85,53,0.10),0 0 30px rgba(196,162,101,0.12),0 0 70px rgba(196,162,101,0.06),inset 0 0 16px rgba(107,85,53,0.03)}
/* connector SVG */
.process-connector{display:block;width:100%;height:50px;flex-shrink:0;margin:2.5rem 0 0.75rem;overflow:visible;filter:drop-shadow(0 0 3px rgba(107,85,53,0.5))}
.process-connector .pc-bus,.process-connector .pc-drop{stroke:rgba(80,55,25,0.55);stroke-width:1;fill:none}
.process-connector .pc-node{fill:rgba(80,55,25,0.5);stroke:none}

/* ── ABOUT STACK: dark base so no cream bleeds through card transitions ── */
.about-stack{background:#070707}

/* ── GLOBAL: standardize all heading em tags to --gold ── */
.about-craft-quote em,
.page-cta-h em,
.page-content-inner h2 em,
.page-content-inner h3 em{color:var(--gold)}

/* ── CARD 1: DECORATIVE "01" + ARCHITECTURE IMAGE ── */

/* Giant watermark "01" — sits behind heading, in front of bg */
.svc-wd-num{
  position:absolute;
  left:-0.04em;
  top:50%;
  transform:translateY(-62%);
  font-family:'Playfair Display',serif;
  font-size:clamp(18rem,32vw,30rem);
  font-weight:400;
  line-height:0.85;
  color:rgba(100,80,50,0.065);
  pointer-events:none;
  user-select:none;
  letter-spacing:-.06em;
  z-index:1;
}

/* Architecture image — right side, bleeds off edge */
.svc-wd-arch{
  position:absolute;
  right:-4%;
  top:0;
  height:100%;
  width:52%;
  pointer-events:none;
  z-index:1;
  overflow:hidden;
}
.svc-wd-arch img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left center;
  opacity:0.42;
}
/* Fade the left edge of the image so it blends into the card */
.svc-wd-arch::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to right,#ede5d8 0%,transparent 28%);
  z-index:2;
}

/* ── CARD 1: THROW ANIMATION ── */
.svc-wd-scatter{
  position:relative;
  min-height:440px;
}
.throw-wrapper{
  position:absolute;
  top:0;left:0;
  will-change:transform,opacity;
}
.throw-card{
  width:220px;
  height:158px;
  background:#18130d;
  border:1px solid rgba(196,162,101,0.18);
  border-radius:3px;
  box-shadow:3px 5px 20px rgba(0,0,0,0.55);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:1.25rem 1.5rem 1.4rem;
  cursor:default;
}
.throw-num{
  font-family:'Playfair Display',serif;
  font-size:1.4rem;
  font-weight:400;
  color:rgba(196,162,101,0.3);
  line-height:1;
  pointer-events:none;
}
.throw-icon{
  display:block;
  color:rgba(212,180,120,0.7);
  pointer-events:none;
}
.throw-icon svg{
  width:20px;
  height:20px;
  display:block;
}
.throw-card:hover .throw-icon{
  color:rgba(212,180,120,1);
}
.throw-label{
  font-family:'Jost',sans-serif;
  font-size:0.6rem;
  font-weight:300;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:rgba(196,162,101,0.9);
  pointer-events:none;
  line-height:1.9;
}

/* ── SERVICES CARD 02: GRAPHIC DESIGN ── */
.svc-sec-2{overflow:hidden}
.svc-gd-content{max-width:100%;position:relative;z-index:2}
.svc-gd-letter{
  position:absolute;
  right:-2%;
  top:50%;
  transform:translateY(-50%);
  font-family:'Playfair Display',serif;
  font-size:clamp(22rem,40vw,58rem);
  line-height:0.85;
  color:rgba(196,162,101,0.06);
  pointer-events:none;
  user-select:none;
  z-index:0;
  letter-spacing:-0.04em;
}
.svc-gd-palette{
  position:absolute;
  right:5.5%;
  bottom:0;
  display:flex;
  flex-direction:row;
  align-items:flex-end;
  gap:10px;
  z-index:2;
  pointer-events:none;
}
.svc-gd-swatch{
  width:50px;
  border-radius:3px 3px 0 0;
  transform:skewX(-7deg);
}
.svc-gd-sw-1{height:115px;background:rgba(230,210,170,0.60)}
.svc-gd-sw-2{height:190px;background:rgba(196,162,101,0.78)}
.svc-gd-sw-3{height:145px;background:rgba(155,122,65,0.72)}
.svc-gd-sw-4{height:175px;background:rgba(75,56,28,0.80)}
.svc-gd-sw-5{height:105px;background:rgba(12,9,4,0.92)}

/* ── SERVICES CARD 02: SKETCH BROWSER ─────────────────────────────────── */

/* Keyframes — all prefixed sgd- to avoid collisions */
@keyframes sgd-sketch {
  0%   { border-color: transparent transparent transparent transparent; }
  25%  { border-color: transparent transparent transparent rgba(212,173,106,0.90); }
  50%  { border-color: rgba(212,173,106,0.90) transparent transparent rgba(212,173,106,0.90); }
  75%  { border-color: rgba(212,173,106,0.90) rgba(212,173,106,0.90) transparent rgba(212,173,106,0.90); }
  100% { border-color: rgba(212,173,106,0.90); }
}
@keyframes sgd-stroke-h {
  from { width: 0; opacity: 0; }
  to   { width: calc(100% + 4px); opacity: 1; }
}
@keyframes sgd-stroke-v {
  from { height: 0; opacity: 0; }
  to   { height: calc(100% + 4px); opacity: 1; }
}
@keyframes sgd-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sgd-tilt {
  from { transform: rotateX(0deg)  rotateY(0deg) rotateZ(0deg); }
  to   { transform: rotateX(50deg) rotateY(0deg) rotateZ(-42deg); }
}
@keyframes sgd-lift {
  from { transform: translateZ(0);    box-shadow: 0 0 40px 0 rgba(0,0,0,0); }
  to   { transform: translateZ(65px); box-shadow: -35px 28px 40px 0 rgba(0,0,0,0.55); }
}

/* Wrapper — right grid column, establishes perspective for 3-D children */
.svc-gd-sketch {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1800px;
  perspective-origin: 50% 50%;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

/* Browser frame — static flat until .is-animating is added by JS */
.sgd-browser {
  position: relative;
  width: 460px;
  height: 300px;
  border: 2px solid transparent;
  border-radius: 8px;
  transform-style: preserve-3d;
}

/* All animations fire once the ScrollTrigger adds .is-animating */
.sgd-browser.is-animating {
  animation: sgd-sketch 0.3s ease 4.2s both, sgd-tilt 8.4s ease 0s both;
}

/* Toolbar bar */
.sgd-toolbar {
  position: absolute;
  top: 10px; left: 10px; right: 10px;
  height: 34px;
  border: 2px solid transparent;
  border-radius: 5px;
  transform-style: preserve-3d;
}
.sgd-browser.is-animating .sgd-toolbar { animation: sgd-sketch 0.3s ease 4.8s both; }

/* Traffic-light dots */
.sgd-dots {
  position: absolute;
  top: 50%; left: 10px;
  transform: translateY(-50%);
  display: flex;
  gap: 6px;
}
.sgd-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid transparent;
}
.sgd-browser.is-animating .sgd-dot:nth-child(1) { animation: sgd-sketch 0.3s ease 5.76s both; }
.sgd-browser.is-animating .sgd-dot:nth-child(2) { animation: sgd-sketch 0.3s ease 5.94s both; }
.sgd-browser.is-animating .sgd-dot:nth-child(3) { animation: sgd-sketch 0.3s ease 6.12s both; }

/* URL bar */
.sgd-url {
  position: absolute;
  top: 50%; left: 42px; right: 12px;
  height: 18px; margin-top: -9px;
  border: 2px solid transparent;
  border-radius: 3px;
}
.sgd-browser.is-animating .sgd-url { animation: sgd-sketch 0.3s ease 5.4s both; }

/* Display area */
.sgd-display {
  position: absolute;
  top: 52px; left: 10px; right: 10px; bottom: 10px;
  border: 2px solid transparent;
  transform-style: preserve-3d;
}
.sgd-browser.is-animating .sgd-display { animation: sgd-sketch 0.3s ease 5.1s both; }

/* Content that lifts off */
.sgd-content {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform-style: preserve-3d;
}
.sgd-browser.is-animating .sgd-content {
  animation: sgd-fade-in 1.8s ease 6.6s both, sgd-lift 1.8s ease 7.2s both;
}
.sgd-content iframe {
  position: absolute;
  border: none;
  inset: 0; width: 100%; height: 100%;
  display: block;
  pointer-events: none;
  transform: translateZ(1px);
  transform-style: preserve-3d;
}
/* Left depth edge */
.sgd-content::before {
  content: '';
  position: absolute;
  top: 0; left: -4px;
  width: 4px; height: 100%;
  background: rgba(0,0,0,0.85);
  transform: rotateY(90deg) translateX(2px) translateZ(2px);
  transform-style: preserve-3d;
}
/* Bottom depth edge */
.sgd-content::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  height: 4px; width: 100%;
  background: rgba(0,0,0,0.85);
  transform: rotateX(90deg) translateY(-2px) translateZ(2px);
  transform-style: preserve-3d;
}

/* Guide lines — live in the browser's 3-D space at Z=0 */
.sgd-guides { position: absolute; inset: 0; }
.sgd-guides > div { position: absolute; background: rgba(196,162,101,0.30); opacity: 0; }

.sg-top    { height: 2px; left: -2px; top: -2px; }
.sg-bottom { height: 2px; left: -2px; bottom: -2px; }
.sg-left   { width: 2px;  left: -2px; top: -2px; }
.sg-center { width: 2px;  left: 50%; margin-left: -1px; top: -2px; }
.sg-right  { width: 2px;  right: -2px; top: -2px; }

.sgd-browser.is-animating .sg-top    { animation: sgd-stroke-h 0.6s ease 0.6s both; }
.sgd-browser.is-animating .sg-bottom { animation: sgd-stroke-h 0.6s ease 1.2s both; }
.sgd-browser.is-animating .sg-left   { animation: sgd-stroke-v 0.6s ease 1.8s both; }
.sgd-browser.is-animating .sg-center { animation: sgd-stroke-v 0.6s ease 2.4s both; }
.sgd-browser.is-animating .sg-right  { animation: sgd-stroke-v 0.6s ease 3.0s both; }

/* Fade caps on horizontal guides */
.sg-top::before, .sg-bottom::before { content:''; position:absolute; top:0; left:-60px; width:60px; height:2px; background:linear-gradient(to right, transparent, rgba(196,162,101,0.30)); }
.sg-top::after,  .sg-bottom::after  { content:''; position:absolute; top:0; right:-60px; width:60px; height:2px; background:linear-gradient(to right, rgba(196,162,101,0.30), transparent); }
/* Fade caps on vertical guides */
.sg-left::before, .sg-center::before, .sg-right::before { content:''; position:absolute; right:0; top:-60px; height:60px; width:2px; background:linear-gradient(to bottom, transparent, rgba(196,162,101,0.30)); }
.sg-left::after,  .sg-center::after,  .sg-right::after  { content:''; position:absolute; right:0; bottom:-60px; height:60px; width:2px; background:linear-gradient(to bottom, rgba(196,162,101,0.30), transparent); }

/* ── ACCESSIBILITY ── */
.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}

/* ── IWD ARROW BUTTON ── */
.iwd-btn{display:inline-block;text-decoration:none;line-height:0;filter:drop-shadow(0 0 3px rgba(225,177,106,0.2));transition:filter .5s ease}
.iwd-btn svg{height:66px;width:auto;display:block}
.iwd-btn:hover{filter:drop-shadow(0 0 6px rgba(225,177,106,0.65)) drop-shadow(0 0 14px rgba(225,177,106,0.3))}
.svc-stack-card .iwd-btn{opacity:0}


/* ── TESTIMONIALS ── */
.testimonials{background:var(--charcoal);padding:7rem 2rem;text-align:center;position:relative;z-index:10}
.testi-list{display:flex;flex-direction:column;align-items:center;gap:5rem;margin-top:3rem}
.testi-item{position:relative;max-width:680px;display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.testi-bubble{position:absolute;top:50%;left:50%;transform:translate(-50%,-54%);width:min(480px,80vw);height:auto;fill:var(--gold);opacity:0.04;pointer-events:none}
.testi-quote{font-family:'Playfair Display',serif;font-size:clamp(1.15rem,2vw,1.5rem);font-style:italic;color:var(--white);line-height:1.7;position:relative;z-index:1;margin:0;padding:0 1rem}
.testi-attr{font-family:'Jost',sans-serif;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dim);position:relative;z-index:1;margin:0}
.testi-attr span{color:var(--gold)}

/* ── TESTIMONIALS v2 — scroll-driven sun arc ── */
.testimonials{position:relative;background:transparent;padding:0;text-align:left;height:100vh;overflow:hidden;z-index:10}
.testi-sky{position:absolute;inset:0;background:#0d0d18;z-index:0;pointer-events:none}
.testi-stars{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.testi-sun-svg{position:absolute;left:0;top:0;width:200px;height:200px;z-index:2;pointer-events:none;color:#ff9e38}
.testi-top{position:absolute;top:0;left:0;right:0;z-index:2;padding-top:2rem;text-align:center}
.testimonials .testi-item{position:absolute;z-index:3;max-width:min(520px,40vw);padding:2.25rem 2rem;background:rgba(7,7,16,0.75);border:1px solid rgba(212,173,106,0.20);border-radius:4px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 12px 40px rgba(0,0,0,0.65);display:flex;flex-direction:column;gap:1rem}
.testi-left{left:5%;top:35%}
.testi-right{right:14%;top:35%;text-align:right;align-items:flex-end}
.testimonials .testi-quote{font-family:'Playfair Display',serif;font-size:clamp(.95rem,1.5vw,1.3rem);font-style:italic;color:var(--white);line-height:1.8;margin:0;padding:0}
.testimonials .testi-attr{font-family:'Jost',sans-serif;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dim);margin:0;padding:0}
.testi-land{position:absolute;bottom:0;left:0;width:100%;height:220px;z-index:2;pointer-events:none;color:#0c0816;background-color:currentColor;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 18%),url('/trees.svg');mask-image:linear-gradient(to bottom,transparent 0%,black 18%),url('/trees.svg');-webkit-mask-size:100% 100%,auto 100%;mask-size:100% 100%,auto 100%;-webkit-mask-repeat:no-repeat,repeat-x;mask-repeat:no-repeat,repeat-x;-webkit-mask-position:top left,bottom left;mask-position:top left,bottom left;-webkit-mask-composite:destination-in;mask-composite:intersect;-webkit-mask-mode:alpha,alpha;mask-mode:alpha,alpha}
@media(max-width:768px){
  .testimonials{height:auto;overflow:visible;padding:4rem 1.25rem;background:var(--charcoal)}
  .testi-sky,.testi-sun-svg,.testi-land,.testi-stars{display:none}
  .testi-top{position:static;padding:0 0 2.5rem;text-align:center}
  .testimonials .testi-item{position:static;max-width:100%;text-align:left;align-items:flex-start;opacity:1!important;transform:none!important;margin-bottom:2rem}
  .testi-left,.testi-right{text-align:left;top:auto;left:auto;right:auto}
}
/* ── SCROLL HINT: increase visibility ── */
.scroll-hint{opacity:.85;z-index:10}
.scroll-hint svg{stroke-width:2.5}

/* ── HOW WE WORK: box hover glow ── */
.card-process .about-step{transition:box-shadow .35s ease,border-color .35s ease}
.card-process .about-step:hover{
  border-color:rgba(196,162,101,0.55);
  box-shadow:0 0 18px rgba(196,162,101,0.35),0 0 50px rgba(196,162,101,0.18),0 0 100px rgba(196,162,101,0.08),inset 0 0 20px rgba(196,162,101,0.06)
}

/* ── GRAPHIC DESIGN SECTION: smooth banding ── */
.svc-sec-2{background:#181818}
.svc-sec-2 .svc-overview-bg{
  background:
    radial-gradient(ellipse 55% 90% at 68% 50%, #1e1508 0%, #161208 30%, #111009 55%, transparent 80%),
    radial-gradient(ellipse 100% 100% at 50% 50%, #1a1a1a 0%, #181818 60%, #141414 100%);
}

/* ── SVC DETAIL STACK: ensure card viewport height is honoured ── */
.svc-detail-stack.about-stack .s-card{height:100vh !important}


/* ── SEO SECTION: bottom layout ── */
.svc-seo-bottom{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.5rem;
  align-items:stretch;
  margin-top:1.5rem;
}
.svc-seo-list-col{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.svc-sec-3 .svc-overview-list{
  margin-top:0;
  margin-bottom:1.2rem;
}
.svc-sec-3 .svc-overview-list li{
  padding:.6rem 0;
}
.svc-sec-3 .svc-overview-desc{
  margin-bottom:1.2rem;
}
.svc-sec-3 .svc-overview-h{
  margin-bottom:1rem;
}
.svc-sec-3 .s-label{
  margin-bottom:1rem;
}

/* ── WORK LINK: spacing below heading ── */
.work-link{margin-top:50px}

/* ── SEO SECTION: pull quote card ── */
.svc-pull-quote{
  margin:0;
  padding:3.2rem 2.5rem;
  background:var(--cream-grad);
  border:1px solid rgba(180,155,110,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.5rem,2.4vw,2.1rem);
  font-style:italic;
  font-weight:400;
  color:#1a1510;
  letter-spacing:.01em;
  line-height:1.5;
  text-align:center;
}

/* ── SVC CARDS: anchor reset ── */
a.svc-card{display:block;color:inherit;text-decoration:none;cursor:pointer}
/* ── CONTACT PAGE ── */
.contact-section{
  background:var(--cream-grad);
  padding:6rem 2rem 7rem;
}
.contact-inner{
  max-width:800px;
  margin:0 auto;
}
.contact-intro{
  text-align:center;
  margin-bottom:3.5rem;
}
.contact-heading{
  font-family:'Playfair Display',serif;
  font-size:clamp(2rem,4vw,3rem);
  color:#1a1510;
  margin:.5rem 0 1rem;
  font-weight:700;
}
.contact-sub{
  font-family:'Roboto',sans-serif;
  font-weight:300;
  font-size:1.05rem;
  color:#1a1510;
  max-width:540px;
  margin:0 auto;
  line-height:1.75;
}
.contact-form{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}
.contact-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
}
.contact-field{
  display:flex;
  flex-direction:column;
  gap:.45rem;
}
.contact-field--full{
  grid-column:1/-1;
}
.contact-honeypot{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.cf-label{
  font-family:'Jost',sans-serif;
  font-size:.72rem;
  font-weight:400;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:#1a1510;
}
.cf-req{
  color:var(--gold);
  letter-spacing:0;
}
.cf-opt{
  letter-spacing:.05em;
  text-transform:none;
  font-size:.7rem;
  color:#5a4e3e;
  opacity:.8;
}
.cf-input{
  background:#fff;
  border:1px solid rgba(180,155,110,0.45);
  color:#1a1510;
  font-family:'Roboto',sans-serif;
  font-weight:300;
  font-size:.95rem;
  padding:.75rem 1rem;
  outline:none;
  transition:border-color .25s ease,box-shadow .25s ease;
  appearance:none;
  -webkit-appearance:none;
  border-radius:0;
}
.cf-input:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(196,162,101,0.18);
}
.cf-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c4a265' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  padding-right:2.5rem;
  cursor:pointer;
}
.cf-textarea{
  resize:vertical;
  min-height:140px;
  line-height:1.65;
}
.contact-actions{
  display:flex;
  align-items:center;
  gap:2rem;
  margin-top:.5rem;
}
.cf-submit{
  font-family:'Jost',sans-serif;
  font-size:.75rem;
  font-weight:400;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:#070707;
  background:var(--gold);
  border:none;
  padding:.9rem 2.4rem;
  cursor:pointer;
  transition:background .25s ease,opacity .25s ease;
}
.cf-submit:hover{
  background:#c49a50;
}
.cf-submit:disabled{
  opacity:.6;
  cursor:not-allowed;
}
.cf-privacy{
  font-family:'Roboto',sans-serif;
  font-weight:300;
  font-size:.8rem;
  color:#5a4e3e;
  margin:0;
}
.cf-feedback{
  padding:1rem 1.25rem;
  font-family:'Roboto',sans-serif;
  font-weight:300;
  font-size:.95rem;
}
.cf-feedback--success{
  background:rgba(196,162,101,0.15);
  border:1px solid rgba(196,162,101,0.5);
  color:#1a1510;
}
.cf-feedback--error{
  background:rgba(180,60,60,0.08);
  border:1px solid rgba(180,60,60,0.35);
  color:#5a1a1a;
}
.cf-feedback-icon{
  color:var(--gold);
  margin-right:.5rem;
}
@media(max-width:640px){
  .contact-row{grid-template-columns:1fr}
  .contact-actions{flex-direction:column;align-items:flex-start;gap:1rem}
}

/* ── CONTACT FORM: field-level errors ── */
.cf-field-error{
  font-family:'Roboto',sans-serif;
  font-weight:300;
  font-size:.8rem;
  color:#a03030;
  min-height:1rem;
}

/* ── CONTACT FORM: success/error visibility (SDK uses hidden attribute) ── */
[data-fs-success],[data-fs-error]{display:none}
[data-fs-success]:not([hidden]),[data-fs-error]:not([hidden]){display:block}

/* ── ECOMMERCE: DOOR INTRO ── */
.ec-door-wrap{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
  background:#1c1309;
  /* depth for the 3D door swing */
  perspective:2000px;
  perspective-origin:50% 50%;
  /* door image is 1023x1167; the full closed pair displays at this size. one
     leaf is half as wide. tweak --door-h to scale the whole entrance. */
  --door-h:min(72vh, 88vw * 1167 / 1023);
  --door-w:calc(var(--door-h) * 1023 / 1167);
}
.ec-door-bg{
  position:absolute;
  inset:0;
  background-image:url('/images/bg.jpg');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  z-index:0;
}
/* the dark interior revealed through the doorway, then zoomed to fill the
   screen. its gradient matches the eCommerce hero so the hand-off is seamless. */
.ec-door-opening{
  position:absolute;
  inset:0;
  margin:auto;                 /* centres in both axes with no transform */
  width:var(--door-w);
  height:var(--door-h);
  z-index:1;
  background:radial-gradient(ellipse 80% 70% at 50% 60%,#1e1508 0%,var(--black) 75%);
  box-shadow:inset 0 0 70px 10px rgba(0,0,0,0.95);
  transform-origin:50% 50%;
  will-change:transform;
}
/* the hero, nested in the door stage as the zoom target: fills the stage and is
   scaled right down at rest so it sits "deep" in the doorway, then GSAP grows it
   to full size as you walk in. */
.ec-door-wrap .page-hero{
  position:absolute;
  inset:0;
  min-height:0;
  padding:6rem 5rem;
  z-index:2;
  transform-origin:50% 50%;
  will-change:transform;
}
/* the two door leaves: halves of one image, meeting exactly at the centre seam */
.ec-door-panel{
  position:absolute;
  top:0;
  bottom:0;
  margin-top:auto;             /* vertical centre with no transform, so GSAP */
  margin-bottom:auto;          /* fully owns the leaf's transform (rotateY) */
  height:var(--door-h);
  width:calc(var(--door-w) / 2);
  background-image:url('/images/doubledoors.png');
  background-repeat:no-repeat;
  background-size:var(--door-w) var(--door-h);
  z-index:3;                   /* above the hero (z2) so closed doors hide it */
  backface-visibility:hidden;  /* leaf vanishes once it swings past edge-on */
  will-change:transform,filter;
}
.ec-door-left{
  right:50%;                    /* inner edge sits on the centre seam */
  background-position:left center;
}
.ec-door-right{
  left:50%;                     /* inner edge sits on the centre seam */
  background-position:right center;
}
.ec-door-heading{
  position:absolute;
  inset:0;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:flex-start;        /* to the LEFT of the doors */
  justify-content:center;        /* vertically centred on the wall */
  padding-left:clamp(2rem,7vw,8rem);
  padding-right:2rem;
  max-width:42vw;                /* keep it clear of the centred doors */
  text-align:left;
  pointer-events:none;
}
.ec-door-sub{
  font-family:'Jost',sans-serif;
  font-size:clamp(.85rem,1.2vw,1rem);
  font-weight:400;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold-dim);
  margin:0 0 .75rem;
}
.ec-door-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(2.2rem,5vw,4.5rem);
  font-weight:400;
  color:var(--charcoal);        /* dark serif reads on the light peach wall */
  line-height:1.1;
  margin:0;
}
.ec-door-title em{
  font-style:italic;
  color:var(--gold-dim);        /* deep gold for contrast on the light wall */
}
.ec-door-cue{
  position:absolute;
  left:50%;
  bottom:5vh;
  transform:translateX(-50%);
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  pointer-events:none;
  font-family:'Jost',sans-serif;
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold-dim);
}
.ec-door-cue svg{
  width:26px;
  height:26px;
  fill:none;
  stroke:var(--gold);
  stroke-width:2;
  animation:ec-door-bob 1.8s ease-in-out infinite;
}
@keyframes ec-door-bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(7px)}
}

/* ── door intro on mobile ──
   At phone width the entrance is nearly full-screen and the left-anchored welcome
   heading lands right on top of the centred doors (unreadable). Shrink the whole
   entrance ~25% and lift the heading into the clear wall above the doors with a soft
   peach scrim so the dark serif stays legible. The heading fades out the instant you
   scroll, so this only governs the at-rest, doors-closed view. */
@media (max-width:768px){
  .ec-door-wrap{ --door-h: min(54vh, 66vw * 1167 / 1023); }
  /* nudge the whole closed-door composition down ~50px. The opening + door leaves are
     margin:auto-centred and GSAP owns their transforms, so bias their `top` instead:
     with bottom:0 + margin:auto, top:100px shifts the centred box down by ~50px. */
  .ec-door-opening,
  .ec-door-panel{ top:100px; }
  .ec-door-heading{
    inset:auto 1.1rem auto 1.1rem;   /* a centred band near the top, not a full overlay */
    top:calc(8vh + 50px);
    max-width:none;
    align-items:center;
    text-align:center;
    padding:1rem 1.25rem 1.1rem;
    background:rgba(247,240,230,0.84);     /* matches the light peach wall */
    border-radius:12px;
    box-shadow:0 6px 22px rgba(0,0,0,0.18);
  }
  .ec-door-title{ font-size:clamp(1.85rem,8vw,2.5rem); }
}


/* ── PORTFOLIO PAGE ── */

/* Intro */
.port-intro{
  max-width:860px;
  margin:0 auto;
  padding:3rem 5rem 2rem;
  text-align:center;
  min-height:0;
}
.port-intro-h{
  font-family:'Playfair Display',serif;
  font-size:clamp(2rem,4vw,3.4rem);
  font-weight:400;
  color:var(--white);
  line-height:1.2;
  margin:.75rem 0 1.5rem;
}
.port-intro-h em{
  font-style:italic;
  color:var(--gold);
}
.port-intro-sub{
  max-width:640px;
  margin:0 auto;
  color:var(--white-mid);
  font-size:1rem;
  line-height:1.8;
}

/* Project block */
.port-project{
  display:flex;
  flex-direction:column;
  border-top:1px solid rgba(242,237,230,0.07);
}
.port-project + .port-project{
  margin-top:6rem;
}
.port-project--alt .port-body{
  direction:rtl;
}
.port-project--alt .port-body > *{
  direction:ltr;
}

/* Study header */
.port-study-header{
  text-align:center;
  padding:3rem 5rem 2.5rem;
  min-height:0;
  border-bottom:1px solid rgba(242,237,230,0.07);
}
.port-study-name{
  font-family:'Playfair Display',serif;
  font-size:clamp(2rem,4vw,3.2rem);
  font-weight:400;
  color:var(--white);
  line-height:1.15;
  margin:.5rem 0 2rem;
}
.port-study-meta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2rem;
  flex-wrap:wrap;
  padding:15px 0 25px;
}
.port-study-meta-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.35rem;
}
.port-study-meta-label{
  font-family:'Jost',sans-serif;
  font-size:.58rem;
  font-weight:400;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  background:rgba(212,173,106,0.08);
  padding:.3rem .7rem;
}
.port-study-meta-value{
  font-family:'Roboto',sans-serif;
  font-size:.88rem;
  font-weight:300;
  color:var(--white);
}
.port-study-meta-sep{
  width:1px;
  height:2.5rem;
  background:rgba(242,237,230,0.12);
  flex-shrink:0;
}

/* Two-column body */
.port-body{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:start;
}

/* Images panel */
.port-images{
  position:relative;
  background:var(--charcoal);
  overflow:hidden;
}
.port-img-primary{
  position:relative;
  z-index:1;
}
.port-img-primary img{
  width:100%;
  height:auto;
  display:block;
  transition:transform .6s ease;
}
.port-project:hover .port-img-primary img{
  transform:scale(1.03);
}
.port-img-secondary{
  position:absolute;
  bottom:2rem;
  right:2rem;
  z-index:2;
  width:42%;
  border:2px solid rgba(212,173,106,0.25);
  box-shadow:0 8px 32px rgba(0,0,0,0.6);
  overflow:hidden;
}
.port-project--alt .port-img-secondary{
  right:auto;
  left:2rem;
}
.port-img-secondary img{
  width:100%;
  display:block;
}

/* Content panel */
.port-content{
  padding:4rem 5rem;
  background:var(--black);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2.5rem;
}

/* Brief */
.port-project-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.8rem,3vw,2.8rem);
  font-weight:400;
  color:var(--white);
  line-height:1.15;
  margin:.5rem 0 .4rem;
}
.port-url{
  font-family:'Jost',sans-serif;
  font-size:.7rem;
  font-weight:300;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1rem;
}
.port-outcome{
  font-size:.95rem;
  line-height:1.75;
  color:var(--white-mid);
  margin:0;
}
.port-meta{
  margin-top:1.5rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.port-meta-row{
  display:flex;
  gap:1rem;
  align-items:baseline;
}
.port-meta-row dt{
  font-family:'Jost',sans-serif;
  font-size:.6rem;
  font-weight:400;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--gold-dim);
  min-width:72px;
  flex-shrink:0;
}
.port-meta-row dd{
  font-family:'Roboto',sans-serif;
  font-size:.85rem;
  font-weight:300;
  color:var(--white-mid);
}

/* Divider inside card */
.port-divider{
  display:flex;
  align-items:center;
  gap:1rem;
}
.port-divider .div-line{
  flex:1;
  height:1px;
  background:rgba(242,237,230,0.1);
}
.port-divider .div-gem{
  width:6px;
  height:6px;
  background:var(--gold-dim);
  transform:rotate(45deg);
  flex-shrink:0;
}

/* Deeper Dive */
.port-dive{
  display:flex;
  flex-direction:column;
  gap:2rem;
}
.port-dive-label{
  font-family:'Jost',sans-serif;
  font-size:.62rem;
  font-weight:400;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 .75rem;
}
.port-dive-body{
  font-size:.92rem;
  line-height:1.85;
  color:var(--white-mid);
  margin:0 0 .75rem;
}
.port-dive-body:last-child{
  margin-bottom:0;
}

/* CTA */
.port-cta{
  text-align:center;
  padding:7rem 5rem;
  border-top:1px solid rgba(242,237,230,0.07);
  min-height:0;
}
.port-cta-h{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.8rem,3.5vw,3rem);
  font-weight:400;
  color:var(--white);
  margin:.75rem 0 1.25rem;
}
.port-cta-sub{
  max-width:520px;
  margin:0 auto 2.5rem;
  color:var(--white-mid);
  font-size:.95rem;
  line-height:1.8;
}

/* Responsive */
@media(max-width:1024px){
  .port-content{padding:3.5rem 3rem}
}
@media(max-width:768px){
  .port-body{
    grid-template-columns:1fr;
    direction:ltr;
  }
  .port-study-header{padding:2rem 1.5rem 1.5rem}
  .port-img-secondary{width:36%;bottom:1rem;right:1rem}
  .port-project--alt .port-img-secondary{right:auto;left:1rem}
  .port-content{padding:2.5rem 1.5rem}
  .port-intro{padding:5rem 1.5rem 3rem}
  .port-cta{padding:5rem 1.5rem}
  .port-index{padding:0 1.5rem 3rem}
  .port-index-item{grid-template-columns:2.5rem 1px 1fr auto;gap:1rem}
  .port-index-industry{display:none}
}

/* Portfolio body text override — full white */
.port-outcome,
.port-meta-row dd,
.port-dive-body{
  color:var(--white);
}

.port-intro .s-label{
  justify-content:center;
  padding-left:0;
}

.port-index .s-label{
  justify-content:center;
  padding-left:0;
}
.port-index{
  max-width:860px;
  margin:0 auto;
  padding:75px 5rem 50px;
  display:flex;
  flex-direction:column;
  gap:0;
}
.port-index-item{
  display:grid;
  grid-template-columns:3rem 1px 1fr auto auto;
  align-items:center;
  gap:1.5rem;
  padding:1.6rem 0;
  text-decoration:none;
  border-bottom:1px solid rgba(242,237,230,0.08);
  transition:background .25s;
  position:relative;
}
.port-index-item:first-child{
  border-top:1px solid rgba(242,237,230,0.08);
}
.port-index-item::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(212,173,106,0.04) 0%, transparent 60%);
  opacity:0;
  transition:opacity .3s;
  pointer-events:none;
}
.port-index-item:hover::before{
  opacity:1;
}
.port-index-num{
  font-family:'Playfair Display',serif;
  font-size:1.6rem;
  font-weight:400;
  font-style:italic;
  color:var(--gold-dim);
  line-height:1;
  transition:color .3s;
}
.port-index-item:hover .port-index-num{
  color:var(--gold);
}
.port-index-divider{
  width:1px;
  height:2.5rem;
  background:rgba(242,237,230,0.12);
  display:block;
  flex-shrink:0;
}
.port-index-name{
  font-family:'Playfair Display',serif;
  font-size:1.35rem;
  font-weight:400;
  color:var(--white);
  transition:color .3s;
}
.port-index-item:hover .port-index-name{
  color:var(--gold);
}
.port-index-industry{
  font-family:'Jost',sans-serif;
  font-size:.6rem;
  font-weight:300;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--white-mid);
  transition:color .3s;
}
.port-index-item:hover .port-index-industry{
  color:var(--gold-dim);
}
.port-index-arrow{
  width:20px;
  height:20px;
  color:var(--gold-dim);
  transition:color .3s, transform .3s;
  flex-shrink:0;
}
.port-index-item:hover .port-index-arrow{
  color:var(--gold);
  transform:translateX(4px);
}
@media(max-width:768px){
  .port-index{padding:0 1.5rem 3rem}
  .port-index-item{grid-template-columns:2.5rem 1px 1fr auto;gap:1rem}
  .port-index-industry{display:none}
}

/* ── Consulting page ── */
.consult-overview-inner .consult-free strong{
  color:var(--gold);
}
.consult-cta-row{
  margin-top:2rem;
}
.consult-cta-inner{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.consult-secondary-link{
  margin-top:1.4rem;
}
.consult-secondary-link a{
  font-family:'Jost',sans-serif;
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--white-mid);
  text-decoration:none;
  border-bottom:1px solid var(--gold-dim);
  padding-bottom:2px;
  transition:color .25s, border-color .25s;
}
.consult-secondary-link a:hover{
  color:var(--gold);
  border-color:var(--gold);
}

/* ── CARD DETAIL SIDE NAV — progress-line redesign (append-only override) ──────
   Replaces the torn-paper backdrop with a shadow-based, background-agnostic
   line + diamond progress indicator. Source-ordered after the originals so
   these win without editing the earlier rules in place. */
#card-sidenav{
  right:28px;
  top:50%;
  transform:translateY(-50%);
  z-index:100;
  display:flex;
  flex-direction:column;
  gap:48px;
  padding:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease;
}
#card-sidenav::before,#card-sidenav::after{display:none}
#card-sidenav.visible{opacity:1;pointer-events:auto}

/* SVG line + diamonds layer (injected by JS), sits behind the labels */
#card-sidenav .csn-svg{}

/* Each nav item: label left (right-aligned), diamond anchor on the right edge */
#card-sidenav .csn-item{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  position:relative;
  z-index:1;
}
#card-sidenav .csn-label{
  font-family:'Jost',sans-serif;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-align:right;
  color:#222;
  /* padding kept on every label so toggling .active causes no layout shift
     (which would misalign the once-measured SVG diamonds) */
  padding:4px 9px;
  border-radius:3px;
  transition:opacity 0.25s ease, color 0.25s ease, background 0.25s ease;
  white-space:nowrap;
}
/* .on-dark is toggled by JS when the nav sits over a dark section */
#card-sidenav.on-dark .csn-label{color:#f2ede6}
#card-sidenav .csn-item.active .csn-label{
  color:var(--gold);
  font-weight:500;
  background:rgba(58,38,20,0.6);
}
/* Diamond placeholder — actual diamond is drawn in the SVG layer */
#card-sidenav .csn-diamond{
  width:11px;
  height:11px;
  flex-shrink:0;
  display:block;
}

/* ── HOMEPAGE SECTION NAV — same progress-line redesign (append-only) ──────────
   Mirrors #card-sidenav. Source-ordered after the originals so these win
   without editing the earlier #section-nav / .snav-* rules in place. */
#section-nav{
  right:28px;
  top:50%;
  transform:translateY(-50%);
  z-index:100;
  display:flex;
  flex-direction:column;
  gap:48px;
  padding:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease;
}
#section-nav.visible{opacity:1;pointer-events:auto}
#section-nav .snav-svg{}
#section-nav .snav-item{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  text-decoration:none;
  cursor:pointer;
  position:relative;
  z-index:1;
}
#section-nav .snav-label{
  font-family:'Jost',sans-serif;
  font-size:11px;
  font-weight:300;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-align:right;
  color:#222;
  /* padding on every label so toggling .active causes no layout shift */
  padding:4px 9px;
  border-radius:3px;
  transition:opacity 0.25s ease, color 0.25s ease, background 0.25s ease;
  white-space:nowrap;
}
/* .on-dark is toggled by JS when the nav sits over a dark section */
#section-nav.on-dark .snav-label{color:#f2ede6}
#section-nav .snav-item.active .snav-label{
  color:var(--gold);
  font-weight:500;
  background:rgba(58,38,20,0.6);
}
/* Diamond placeholder — actual diamond is drawn in the SVG layer */
#section-nav .snav-dot{
  width:11px;
  height:11px;
  border:none;
  background:none;
  transform:none;
  flex-shrink:0;
  display:block;
}

/* ── SERVICES OVERVIEW SIDE NAV — progress-line redesign (append-only) ─────────
   Brings #svc-sidenav in line with #card-sidenav / #section-nav: the torn-paper
   backdrop + outlined dots are dropped in favour of the background-agnostic
   line + diamond progress indicator. Source-ordered after the originals so
   these win without editing the earlier rules in place. */
#svc-sidenav{
  right:28px;
  top:50%;
  transform:translateY(-50%);
  z-index:100;
  display:flex;
  flex-direction:column;
  gap:48px;
  padding:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease;
}
#svc-sidenav::before,#svc-sidenav::after{display:none}
#svc-sidenav .torn-bg{display:none}
#svc-sidenav.visible{opacity:1;pointer-events:auto}
#svc-sidenav .svc-nav-svg{}
.svc-nav-item{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  text-decoration:none;
  cursor:pointer;
  position:relative;
  z-index:1;
}
.svc-nav-label{
  font-family:'Jost',sans-serif;
  font-size:11px;
  font-weight:300;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-align:right;
  color:#222;
  /* padding on every label so toggling .active causes no layout shift
     (which would misalign the once-measured SVG diamonds) */
  padding:4px 9px;
  border-radius:3px;
  /* No color/background transition here: this page runs several simultaneous
     canvas + GSAP + SVG animations, and a starved color transition was getting
     stuck on its #222 start value instead of settling on the active gold.
     Swap instantly — the steady state matches #card-sidenav / #section-nav. */
  transition:opacity 0.25s ease;
  white-space:nowrap;
}
/* .on-dark is toggled by JS when the nav sits over a dark section */
#svc-sidenav.on-dark .svc-nav-label{color:#f2ede6}
#svc-sidenav .svc-nav-item.active .svc-nav-label{
  color:var(--gold);
  font-weight:500;
  background:rgba(58,38,20,0.6);
}
#svc-sidenav .svc-nav-item:hover .svc-nav-label{color:var(--gold)}
/* Diamond placeholder — actual diamond is drawn in the SVG layer */
.svc-nav-dot{
  width:11px;
  height:11px;
  border:none;
  background:none;
  transform:none;
  flex-shrink:0;
  display:block;
}
.svc-nav-item.active .svc-nav-dot,
.svc-nav-item:hover .svc-nav-dot{background:none;border:none;transform:none}

/* ── Hero subheading ── */
.hero-subhead{font-family:'Jost',sans-serif;font-size:.68rem;font-weight:300;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin:1.2rem 0 1rem;}


/* ── Consulting subheadings ── */
.consult-subh{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:400;font-style:italic;color:var(--gold);margin:2rem 0 .8rem;letter-spacing:.02em;}

/* ── Consulting track labels ── */
.consult-track-label{font-family:'Jost',sans-serif;font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.35rem;}


/* ============================================================================
   CONSULTING V2 — consulting.astro (typography-only design)
   Native scroll, no CardStack/JS. All rules scoped under .consult-v2 so they
   can't touch anything else. Appended only — no existing rules modified.
   ============================================================================ */
/* Cream body (site's --cream-grad, same as blog articles / resource pages) after
   the dark page-hero. The soft gold top-shadow is the site's standard dark→cream
   seam treatment. Ink #1a1410 text, warm #6b5535 accents — headings kept calm
   (no loud gold) since cream carries the contrast on its own. */
.consult-v2{position:relative;z-index:1;background:var(--cream-grad);color:#1a1410;box-shadow:0 -30px 80px rgba(196,162,101,0.12);}
.consult-v2 .cv2-sec{padding:clamp(4rem,10vh,8rem) clamp(1.5rem,5vw,3rem);}

/* shared small warm all-caps label */
.consult-v2 .cv2-label{display:block;font-family:'Jost',sans-serif;font-size:.72rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:#6b5535;}

/* Statement hero — the page's real heading, static, directly under the title bar. */
.consult-v2 .cv2-hero{position:relative;min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.consult-v2 .cv2-hero .cv2-label{margin-bottom:clamp(2rem,5vh,3.5rem);}
.consult-v2 .cv2-statement{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(2.25rem,6vw,5.25rem);line-height:1.04;letter-spacing:normal;text-transform:none;margin:0 auto;max-width:18ch;}
.consult-v2 .cv2-stmt-faint{display:block;color:#333;}
.consult-v2 .cv2-stmt-strong{display:block;font-style:italic;color:var(--gold);}
.consult-v2 .cv2-lede{font-family:'Roboto',sans-serif;font-weight:300;font-size:1.05rem;line-height:1.8;color:#1a1410;max-width:540px;margin:clamp(2rem,5vh,3.5rem) auto 0;}
.consult-v2 .cv2-reveal{position:relative;}

/* ── Section 2 — The Promises ── */
.consult-v2 .cv2-promise-wrap{max-width:780px;margin:0 auto;}
.consult-v2 .cv2-promise{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;font-size:clamp(1.8rem,4vw,3rem);line-height:1.15;color:#6b5535;margin:0;}
.consult-v2 .cv2-reality{font-family:'Jost',sans-serif;font-weight:400;font-size:.95rem;letter-spacing:.02em;line-height:1.7;color:#1a1410;margin:.6rem 0 0;max-width:62ch;}
.consult-v2 .cv2-rule{border:0;height:1px;background:rgba(107,85,53,0.25);margin:clamp(2rem,5vh,3.2rem) 0;}

/* ── Thin divider between 2 and 3 ── */
.consult-v2 .cv2-divider{width:60px;height:1px;background:#6b5535;margin:5rem auto;}

/* ── Section 3 — What We Actually Do ──
   Subtle raised "paper" panel (translucent white over the cream) with faint warm
   hairlines, so the page still reads as distinct rooms without any dark/brown. */
.consult-v2 .cv2-do{background:rgba(255,255,255,0.34);border-top:1px solid rgba(107,85,53,0.16);border-bottom:1px solid rgba(107,85,53,0.16);}
.consult-v2 .cv2-do-inner{max-width:780px;margin:0 auto;}
.consult-v2 .cv2-do .cv2-label{margin-bottom:1.2rem;}
.consult-v2 .cv2-h2{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(2rem,5vw,4rem);line-height:1.08;color:#1a1410;margin:0 0 1.5rem;}
.consult-v2 .cv2-body{font-family:'Roboto',sans-serif;font-weight:300;font-size:1.1rem;line-height:1.8;color:#1a1410;margin:0;max-width:64ch;}
.consult-v2 .cv2-tracks{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);margin-top:clamp(2.5rem,6vh,4rem);}
.consult-v2 .cv2-track{border-left:2px solid rgba(107,85,53,0.5);padding-left:1.5rem;}
.consult-v2 .cv2-track-label{display:block;font-family:'Jost',sans-serif;font-size:.7rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:#6b5535;margin-bottom:.8rem;}
.consult-v2 .cv2-track-h{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;font-size:1.6rem;line-height:1.2;color:#1a1410;margin:0 0 .8rem;}
.consult-v2 .cv2-track-body{font-family:'Roboto',sans-serif;font-weight:300;font-size:.95rem;line-height:1.75;color:#1a1410;margin:0;}
@media(max-width:640px){.consult-v2 .cv2-tracks{grid-template-columns:1fr;}}

/* ── Section 4 — The Call ── */
.consult-v2 .cv2-call{position:relative;text-align:center;}
.consult-v2 .cv2-call-lines{margin:0;}
.consult-v2 .cv2-call-strong,.consult-v2 .cv2-call-italic{display:block;font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(2.5rem,6vw,5rem);line-height:1.08;}
.consult-v2 .cv2-call-strong{color:#1a1410;}
.consult-v2 .cv2-call-italic{font-style:italic;color:#6b5535;}
.consult-v2 .cv2-call-body{font-family:'Roboto',sans-serif;font-weight:300;font-size:1.05rem;line-height:1.8;color:#1a1410;max-width:500px;margin:clamp(1.5rem,4vh,2.5rem) auto 0;}
.consult-v2 .cv2-cta{margin-top:clamp(2rem,5vh,3rem);display:flex;justify-content:center;}
.consult-v2 .cv2-secondary{margin:1.4rem 0 0;}
.consult-v2 .cv2-secondary a{font-family:'Jost',sans-serif;font-size:.8rem;letter-spacing:.04em;color:#6b5535;text-decoration:none;}
.consult-v2 .cv2-secondary a:hover{text-decoration:underline;}


/* ── Blog Article ── */
.blog-article{padding:clamp(4rem,10vh,7rem) 0 clamp(5rem,12vh,9rem);}
.blog-article-inner{max-width:740px;margin:0 auto;padding:0 clamp(1.5rem,5vw,3rem);}
.blog-article-header{margin-bottom:clamp(2.5rem,6vh,4rem);padding-bottom:2rem;border-bottom:1px solid var(--gold-dim);}
.blog-article-title{font-family:'Playfair Display',serif;font-weight:400;font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.2;color:var(--white);margin:.75rem 0 1.25rem;}
.blog-article-meta{font-family:'Jost',sans-serif;font-size:.75rem;font-weight:300;letter-spacing:.1em;text-transform:uppercase;color:rgba(242,237,230,0.45);}
.blog-meta-sep{margin:0 .6em;color:var(--gold-dim);}
.blog-article-body p{font-family:'Roboto',sans-serif;font-weight:300;font-size:1.05rem;line-height:1.85;color:rgba(242,237,230,0.78);margin:0 0 1.6rem;}
.blog-article-body p.blog-lead{font-size:1.15rem;line-height:1.9;color:rgba(242,237,230,0.9);margin-bottom:2rem;}
.blog-article-body h2{font-family:'Playfair Display',serif;font-weight:400;font-size:clamp(1.3rem,3vw,1.75rem);line-height:1.25;color:var(--gold);margin:3rem 0 1.25rem;}
.blog-article-body strong{font-weight:400;color:var(--white);}
.blog-article-cta{margin-top:3.5rem;padding-top:2.5rem;border-top:1px solid var(--gold-dim);text-align:center;}
.blog-cta-text{font-family:'Jost',sans-serif;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,237,230,0.5);margin:0 0 1.25rem;}

/* ── Blog Article: cream body update ── */
.blog-article{background:radial-gradient(ellipse 85% 85% at 50% 50%,#f2ede6 0%,#ede5d8 55%,#ddd0be 80%,#d0c3ae 100%);}
.blog-article-header{border-bottom:1px solid rgba(107,85,53,0.25);}
.blog-article-header .s-label{color:#6b5535;}
.blog-article-header .s-label::before{background:#6b5535;}
.blog-article-title{color:#1a1410;}
.blog-article-meta{color:#6b5535;}
.blog-article-body p{color:#1a1410;}
.blog-article-body p.blog-lead{color:#1a1410;}
.blog-article-body h2{color:#6b5535;}
.blog-article-body strong{color:#1a1410;}
.blog-cta-text{color:#6b5535;}


/* ── NAV CARET (About / Services flyout indicator) ── */
.nav-caret{display:inline-block;margin-left:.35em;font-size:.55em;vertical-align:.1em;color:rgba(212,173,106,0.6);transition:transform .25s,color .25s}
.has-flyout:hover .nav-caret{color:var(--gold);transform:rotate(180deg)}

/* ── Consulting Promises v2 — intro line, alternating margin layout, blur
   reveal. Append-only: overrides the original .cv2-rule margin by redeclaring
   the same selector here (later in the cascade wins) rather than editing it
   in place. .cv2-pair-init / .is-in are added by JS only — the section stays
   fully visible and legible with JS off or GSAP unavailable. ── */
.consult-v2 .cv2-rule{margin:clamp(2.75rem,6.5vh,4.2rem) 0;}
.consult-v2 .cv2-promises-intro{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;font-size:clamp(1.3rem,3vw,1.7rem);color:#6b5535;text-align:center;margin:0 0 clamp(2.75rem,6.5vh,4.2rem);}
.consult-v2 .cv2-pair-r{text-align:right;}
.consult-v2 .cv2-pair-l{text-align:left;}
.consult-v2 .cv2-pair-r .cv2-promise{margin:0 0 0 auto;max-width:85%;}
.consult-v2 .cv2-pair-l .cv2-promise{margin:0;max-width:85%;}
.consult-v2 .cv2-pair-r .cv2-reality{margin:.6rem 0 0 auto;max-width:60%;}
.consult-v2 .cv2-pair-l .cv2-reality{margin:.6rem 0 0;max-width:60%;}
.consult-v2 .cv2-pair.cv2-pair-init{opacity:0;transition:opacity .7s ease;}
.consult-v2 .cv2-pair.is-in{opacity:1;}
.consult-v2 .cv2-pair-init .cv2-blur{filter:blur(6px);transition:filter .95s ease .15s;}
.consult-v2 .cv2-pair.is-in .cv2-blur{filter:blur(0px);}
@media(max-width:640px){
  .consult-v2 .cv2-pair-r,.consult-v2 .cv2-pair-l{text-align:left;}
  .consult-v2 .cv2-pair-r .cv2-promise,.consult-v2 .cv2-pair-l .cv2-promise{margin:0;max-width:100%;}
  .consult-v2 .cv2-pair-r .cv2-reality,.consult-v2 .cv2-pair-l .cv2-reality{margin:.6rem 0 0;max-width:100%;}
}

/* ── Consulting Promises v2 — bigger intro question with a small accent rule;
   answer (reality) text set in Lato instead of Jost ── */
.consult-v2 .cv2-promises-intro{font-size:clamp(2rem,5vw,3.25rem);line-height:1.15;max-width:16ch;margin:0 auto clamp(3rem,7vh,4.5rem);}
.consult-v2 .cv2-promises-intro::after{content:'';display:block;width:50px;height:1px;background:#6b5535;margin:1.2rem auto 0;}
.consult-v2 .cv2-reality{font-family:'Lato',sans-serif;letter-spacing:normal;}

/* ── Consulting Promises v2 — quote-mark watermark, left side, vertically
   centered on the section. Hidden once the viewport narrows past the point
   where there's no side gutter left for it to sit in without crossing text. ── */
.consult-v2 .cv2-promises{background-image:url('/images/quotes.png');background-repeat:no-repeat;background-position:left center;background-size:clamp(220px,26vw,380px) auto;}
@media(max-width:1000px){
  .consult-v2 .cv2-promises{background-image:none;}
}

/* Consulting — combined statement heading */
.cv2-statement {
  color: #1a1410;
}
.cv2-callout {
  color: #d4ad6a;
  font-style: italic;
}

/* Consulting — wider content + smaller statement heading */
.consult-v2 .cv2-statement { font-size: clamp(1.75rem, 4vw, 3.5rem); max-width: 28ch; }
.consult-v2 .cv2-promise-wrap { max-width: 1040px; }
.consult-v2 .cv2-do-inner { max-width: 1040px; }
.consult-v2 .cv2-lede { max-width: 720px; }

/* Nav caret — CSS triangle, font-independent */
.nav-caret{display:inline-block;margin-left:.4em;vertical-align:middle;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid rgba(212,173,106,0.6);transition:transform .25s,border-top-color .25s;}
.has-flyout:hover .nav-caret{border-top-color:var(--gold);transform:rotate(180deg);}

/* Skip intro — filled box */
.intro-skip{background:rgba(26,20,16,0.7);border:1px solid rgba(212,173,106,0.3);padding:.55rem 1.1rem;}

/* Body text opacity fixes — full white on dark backgrounds */
.svc-overview-desc{color:var(--white);}
.svc-overview-list li{color:var(--white);}
.svc-d-step-desc{color:var(--white);}
.card-svc-dark .svc-d-item-desc{color:var(--white);}
.card-svc-dark .svc-d-cta-sub{color:var(--white);}

/* Our Work + Audit Infographic — dark background matching homepage "What We Do" section */
.port-intro,.port-index,.port-project,.port-cta{background:radial-gradient(ellipse 70% 60% at 50% 50%,#1e1508 0%,#1a1308 18%,#15100a 35%,#100c08 50%,#0a0807 62%,var(--black) 72%);}
.audit-info{background:radial-gradient(ellipse 70% 60% at 50% 50%,#1e1508 0%,#1a1308 18%,#15100a 35%,#100c08 50%,#0a0807 62%,var(--black) 72%);}

/* Cream sections — warm upward glow matching About page cards */
.consult-v2{box-shadow:0 -30px 80px rgba(196,162,101,0.12);}
.res-body{box-shadow:0 -30px 80px rgba(196,162,101,0.12);}
.page-content{box-shadow:0 -30px 80px rgba(196,162,101,0.12);}


/* ── Consulting: isometric buildings ── */
.cv2-buildings {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 55%;
  max-width: 600px;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.cv2-hero .cv2-reveal {
  position: relative;
  z-index: 1;
}

/* ── Consulting: buildings opacity boost ── */
.cv2-buildings { opacity: 0.25; }

/* ── Consulting: city image (overrides earlier cv2-buildings rules) ── */
.cv2-buildings {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 55%;
  max-width: 680px;
  height: auto;
  pointer-events: none;
  z-index: 0;
  opacity: 0.28;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 55%, transparent 88%);
  mask-image: linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 55%, transparent 88%);
}

/* ── Consulting: h2 spacing + or divider ── */
.cv2-h2 { margin-bottom: 4rem; }
.cv2-tracks-or {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(4rem, 8vw, 7rem);
  font-weight: 300;
  font-style: italic;
  color: var(--gold);
  text-align: center;
  line-height: 1;
  padding: 1rem 0;
  opacity: 0.7;
  flex-shrink: 0;
}

/* ── Consulting: tracks 3-col grid with or in center ── */
.consult-v2 .cv2-tracks {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

/* ── Consulting: track full box treatment ── */
.consult-v2 .cv2-track {
  border-left: none;
  padding-left: 0;
  border: 1px solid rgba(107,85,53,0.3);
  padding: 2.5rem;
  background: rgba(107,85,53,0.04);
  box-shadow: 0 4px 24px rgba(107,85,53,0.08), inset 0 0 20px rgba(107,85,53,0.02);
}
/* mobile: the 3-col "track | or | track" grid runs off-screen — stack it to one column
   (this rule sits after the 1fr auto 1fr rule above so it wins within the breakpoint). */
@media(max-width:768px){
  .consult-v2 .cv2-tracks { grid-template-columns: 1fr; }
  .consult-v2 .cv2-tracks-or { padding: 0.25rem 0; font-size: clamp(2.5rem, 11vw, 4rem); }
}

/* ── Consulting: cv2-body full width ── */
.consult-v2 .cv2-body { max-width: none; }

/* ── Consulting: hero section matches cv2-do background ── */
.consult-v2 .cv2-hero {
  background: rgba(255,255,255,0.34);
  border-bottom: 1px solid rgba(107,85,53,0.16);
}

/* ── Consulting: space before first quote ── */
.consult-v2 .cv2-promises-intro { margin-bottom: 200px; }

/* ── Consulting: promises intro one line ── */
.consult-v2 .cv2-promises-intro { max-width: none; white-space: nowrap; }

/* ── Consulting: promises intro box treatment ── */
.consult-v2 .cv2-promises-intro {
  font-style: normal;
  display: inline-block;
  border: 1px solid rgba(107,85,53,0.35);
  padding: 0.6em 2.5em;
  letter-spacing: 0.04em;
}
/* mobile: the nowrap pill is ~541px wide and runs off a phone screen — let it wrap,
   cap its width to the viewport, and trim the padding/size so it sits centred. */
@media(max-width:768px){
  .consult-v2 .cv2-promises-intro {
    white-space: normal;
    max-width: calc(100vw - 3rem);
    padding: 0.7em 1.4em;
    font-size: clamp(1.5rem, 6vw, 2.4rem);
  }
}

/* ── Consulting: infographic CTA box ── */
.cv2-infographic-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 3rem auto 0;
  padding: 2rem 3rem;
  max-width: 700px;
  border: 1px solid rgba(107,85,53,0.35);
  text-decoration: none;
  text-align: center;
  transition: background 0.2s, border-color 0.2s;
}
.cv2-infographic-box:hover {
  background: rgba(107,85,53,0.06);
  border-color: rgba(107,85,53,0.6);
}
.cv2-infographic-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-style: italic;
  color: #6b5535;
  line-height: 1.3;
}

/* eCommerce "What's Included" tiles are plain boxes — see .svc-d-item base. */

/* ── Section: side nav gold accent border ── */
#section-nav{
  border-left: 5px solid rgba(212, 173, 106, 0.25);
  padding-left: 14px;
}

/* ── Section: flyout submenu gold accent border ── */
.flyout {
  border-left: 5px solid rgba(212, 173, 106, 0.25);
}


/* ── Section: Credits page ── */
.credits-section {
  background: var(--cream-grad);
  padding: 80px 0 120px;
}
.credits-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 40px;
}
.credits-intro {
  margin-bottom: 60px;
}
.credits-lead {
  font-family: 'Lato', sans-serif;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #1a1410;
  margin-top: 16px;
}
.credits-link {
  color: #d4ad6a;
  text-decoration: none;
  border-bottom: 1px solid rgba(212,173,106,0.4);
}
.credits-link:hover {
  border-bottom-color: #d4ad6a;
}
.credits-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.credits-item {
  padding: 36px 0;
  border-top: 1px solid rgba(107,85,53,0.2);
}
.credits-item:last-child {
  border-bottom: 1px solid rgba(107,85,53,0.2);
}
.credits-category {
  font-family: 'Jost', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b5535;
  margin-bottom: 8px;
}
.credits-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-style: italic;
  color: #1a1410;
  margin-bottom: 0;
}
.credits-note {
  font-family: 'Lato', sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #1a1410;
  margin-top: 10px;
}

/* ── Section: Footer credits link ── */
.foot-credits {
  margin-top: 8px;
}
.foot-credits a {
  font-family: 'Jost', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(242,237,230,0.45);
  text-decoration: none;
  transition: color 0.2s;
}
.foot-credits a:hover {
  color: #d4ad6a;
}

/* ── Fix: credits text weight ── */
.credits-lead,
.credits-note {
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════════════
   MIGRATED → SEMANTIC THEME TOKENS  (pilot: services/web-design.astro)
   Every rule is scoped under .theme-light / .theme-dark, so ONLY cards that
   carry a theme class are affected. Unmigrated pages keep their old rules.
   Placed last in the file → wins specificity ties on source order.
   CLEANUP DONE (2026-06-22): the old scattered .svc-d-*--dark color rules
   and the .svc-d-body:not(...) / .svc-d-col-desc / .card-svc-dark .svc-tl-desc
   white-overrides have been deleted now that all service pages are themed.
   ═══════════════════════════════════════════════════════════════════════ */

/* Surfaces — the two About card backgrounds, via --surface */
.card-svc-intro.theme-light,
.card-svc-light.theme-light,
.card-svc-cta-wrap.theme-light{background:var(--surface);}
.card-svc-dark.theme-dark,
.card-svc-mid.theme-dark{background:var(--surface);}

/* Headings */
.theme-light .svc-d-h,
.theme-dark  .svc-d-h{color:var(--heading);}
.theme-light .svc-d-h em,
.theme-dark  .svc-d-h em{color:var(--accent);}
.theme-light .svc-d-col-title{color:var(--heading);}

/* Body copy */
.theme-light .svc-d-body,
.theme-dark  .svc-d-body{color:var(--text);text-shadow:none;}
.theme-light .svc-d-col-desc{color:var(--text);}
.theme-light .svc-d-cta-sub,
.theme-dark  .svc-d-cta-sub{color:var(--text-muted);}
.theme-dark  .svc-tl-desc{color:var(--text-muted);}

/* Eyebrows / labels / accents */
.theme-light .svc-d-num,
.theme-dark  .svc-d-num,
.theme-light .s-label,
.theme-dark  .s-label{color:var(--eyebrow);}
.theme-light .s-label::before,
.theme-dark  .s-label::before{background:var(--eyebrow);}
.theme-dark  .svc-tl-label{color:var(--accent);}
.theme-light .svc-d-col-rule{background:var(--border);}

/* ── About page — the canonical color language, now consuming its own tokens ──
   card-process / card-craft / card-cta = theme-light · card-story / card-location = theme-dark.
   Only role COLORS are tokenised; backgrounds, text-shadows, the card-process
   special label tint + vignette bg are left bespoke so About stays pixel-identical
   (the one intended change: light-card em is unified to gold via --accent). */

/* Headings */
.theme-light .about-h2,
.theme-light .about-step h3,
.theme-light .about-craft-quote,
.theme-light .page-cta-h,
.theme-dark  .about-h2{color:var(--heading);}
.theme-light .about-h2 em,
.theme-light .about-craft-quote em,
.theme-light .page-cta-h em,
.theme-dark  .about-h2 em{color:var(--accent);}

/* Body copy */
.theme-light .about-process-intro,
.theme-light .about-step p,
.theme-dark  .story-right p,
.theme-dark  .about-location-inner p,
.theme-dark  .card-location p{color:var(--text);}
.theme-light .about-craft-body p,
.theme-light .page-cta-sub{color:var(--text-muted);}

/* Eyebrows / step numbers (s-label already handled above via --eyebrow) */
.theme-light .about-step-num{color:var(--eyebrow);}
/* card-process keeps its deliberately deeper label tint (overrides .theme-light .s-label) */
.card-process.theme-light .s-label{color:rgba(80,55,25,0.85);}
.card-process.theme-light .s-label::before{background:rgba(80,55,25,0.85);}

/* ── Work page (work.astro) — uniformly DARK, so port-intro / port-project / port-cta
   carry theme-dark. Every mapping below resolves to the SAME value it had before
   (white→--white, gold→--gold), so the page is pixel-identical. LEFT BESPOKE on purpose:
   the port-index nav (its own gold-dim→gold hover logic) and dividers/div-gem.
   Muted subs unified to --text-muted (0.65) per user decision — slightly brighter than
   the old --white-mid (0.5); this is the intended site-wide muted value now. */

/* Headings + accent em */
.theme-dark .port-intro-h,
.theme-dark .port-study-name,
.theme-dark .port-cta-h{color:var(--heading);}
.theme-dark .port-intro-h em{color:var(--accent);}

/* Muted subs → canonical --text-muted (was --white-mid 0.5) */
.theme-dark .port-intro-sub,
.theme-dark .port-cta-sub{color:var(--text-muted);}

/* Full-white body copy + meta values */
.theme-dark .port-outcome,
.theme-dark .port-dive-body,
.theme-dark .port-study-meta-value{color:var(--text);}

/* Gold eyebrows / labels (s-label already handled above via --eyebrow) */
.theme-dark .port-url,
.theme-dark .port-dive-label,
.theme-dark .port-study-meta-label{color:var(--eyebrow);}

/* ── ABOUT PAGE — MOBILE ──
   Placed at end of file so it beats the base .about-* rules (lines ~533-573)
   on source-order ties (same trap as #services). */
@media(max-width:768px){
  /* Card 1 (How We Work): card-process is a flex column with justify-content:center.
     On mobile the stacked steps exceed 100vh, and centring an overflowing scroll
     container pushes the top out of reach (CardStack scroll-jacks scrollTop, which
     starts at 0 — the centred content sat above 0). Top-align it and pad the inner
     below the fixed nav. */
  .card-process{justify-content:flex-start}

  /* tighten oversized desktop padding inside each card */
  .about-process-inner{padding:6.5rem 1.5rem 4rem}
  .about-craft-viewport{padding:5rem 1.5rem;min-height:0}
  .about-location-viewport{padding:5rem 1.5rem;min-height:0}

  /* How We Work: stack the three step boxes; the horizontal 3-column
     connector bus is meaningless once stacked, so drop it */
  .about-steps{grid-template-columns:1fr;gap:1.5rem}
  .process-connector{display:none}

  /* Our Story: stack the eyebrow above the body copy */
  .story-inner{grid-template-columns:1fr;gap:1.5rem;padding:5rem 1.5rem}
  .story-left{justify-content:flex-start}
  .story-right{max-width:none}
  /* Our Story: reveal is disabled on mobile (see about.astro) — show full white */
  .story-word{opacity:1 !important}
  .theme-dark .story-right p{color:var(--white)}

  /* Character & Craft: left-align (label has an inline justify-content:center) */
  .about-craft-inner{text-align:left}
  .about-craft-inner .s-label--dark{justify-content:flex-start !important}
  .about-craft-body p{margin-left:0;margin-right:0;max-width:none}

  /* Grand Rapids: the location image (absolute .location-bg) was painting over
     the text. Lift the content above it and give it a semi-transparent panel. */
  .about-location-viewport{position:relative;z-index:1}
  .about-location-inner{max-width:none;background:rgba(8,6,4,0.6);padding:1.75rem 1.5rem;border-radius:4px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
}

/* ── SERVICES OVERVIEW (pinned 100vh stack) — mobile ──────────────────────────
   Each section is a sticky height:100vh card with a 2-col grid centred in it. On a
   phone the columns squash (§3 ran off-screen) and centred tall content gets clipped
   top and bottom. Fix: widen (5rem→1.25rem side padding), stack to one column, start
   content from the top with a ~75px downshift to clear the fixed nav, and allow the
   section to scroll internally so nothing is cut off at the bottom.
────────────────────────────────────────────────────────────────────────────── */
@media(max-width:768px){
  /* overflow-y:auto only — base overflow:hidden keeps overflow-x clipped so a wide
     decorative column can't trigger page-wide horizontal scroll */
  .svc-overview-sec{padding:0 1.25rem;align-items:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch}

  .svc-overview-inner{grid-template-columns:1fr;gap:2rem;max-width:none;align-items:start;padding-top:6.5rem;padding-bottom:4rem}
  .svc-sec-3 .svc-overview-inner{padding-top:6.5rem;padding-bottom:4rem}

  .svc-overview-h{font-size:clamp(2rem,7.5vw,2.8rem);margin-bottom:1rem}
  .svc-overview-desc{font-size:0.95rem;line-height:1.7;margin-bottom:1.5rem;max-width:none}

  /* §1 Web Design — inner is a flex column; keep the downshift, stack the bottom row */
  .svc-sec-1 .svc-overview-inner{padding-top:6.5rem;padding-bottom:4rem}
  .svc-wd-top{padding-bottom:1.5rem;margin-bottom:1.5rem}
  .svc-wd-top .svc-overview-h{font-size:clamp(2.2rem,9vw,3.2rem)}
  .svc-wd-bottom{grid-template-columns:1fr;gap:2rem}

  /* §2 Graphic Design — the browser mock is a fixed 460px; scale it to fit */
  .sgd-browser{zoom:0.7}

  /* §3 SEO — stack the feature list and the pull-quote, rein in the rocket column */
  .svc-seo-bottom{grid-template-columns:1fr;gap:1.25rem}
  .svc-seo-rockets{max-width:100%;min-width:0}

  /* Decorative visual columns must never force horizontal overflow */
  .svc-gd-sketch,.svc-wm-anim,.svc-ecomm-anim{max-width:100%;min-width:0}
}

/* ── SERVICE DETAIL PAGES (CardStack 100vh cards) — mobile ────────────────────
   web-design.astro §1–3. Cards are sticky height:100vh with overflow-y:auto, and
   CardStack scroll-jacks any over-height card via card.scrollTop, so tall stacked
   content is reachable (same mechanism as About). Job here is purely to stack the
   2-/4-column layouts and reduce the 5rem side padding so copy spans the width.
────────────────────────────────────────────────────────────────────────────── */
@media(max-width:768px){
  .svc-d-inner{padding:0 1.5rem}
  .card-svc-light{padding-left:1.5rem;padding-right:1.5rem}
  .card-svc-dark.has-timeline{padding-left:1.25rem;padding-right:1.25rem}

  /* §1 Overview — top-align the card so copy starts below the nav, not centred.
     (The split/graphic/sketch are Astro-scoped — their mobile rules live in
     web-design.astro's <style> so they match scoped specificity.) */
  .card-svc-intro{align-items:flex-start;flex-direction:column}
  /* §1 scroll cue: base .scroll-hint is position:absolute, which scrolls UP with
     the jacked content and drifts to the middle. Make it sticky to the card's
     scrollport bottom (like card-svc-light/mid already are). */
  .card-svc-intro .scroll-hint{position:sticky;top:auto;bottom:1.5rem;left:auto;transform:none;align-self:center;margin-top:auto}

  /* §2 What's Included — collapse the centred alternating timeline into a single
     left-anchored column (diamond first, then text, on every row) */
  .svc-timeline{padding-left:0}
  .svc-tl-line{left:25px}
  .svc-tl-row{align-items:flex-start;margin-bottom:1.5rem}
  .svc-tl-empty{display:none}
  .svc-tl-node{order:-1;flex:0 0 50px}
  .svc-tl-side{flex:1;text-align:left !important;padding:0 0 0 1rem !important}

  /* §3 How We Work — 4-col grid → single column */
  .svc-d-cols{grid-template-columns:1fr;gap:2.5rem;margin-top:2.5rem}
  .svc-d-col{padding-left:0;padding-right:0}
  .svc-d-col+.svc-d-col{border-left:0}

  /* §3 How We Work (step list, e.g. SEO) — number sits ABOVE its content
     instead of in a 4rem left column, so the copy spans the full width */
  .svc-d-step{grid-template-columns:1fr;gap:.45rem}
  .svc-d-step-num{padding-top:0}
}

/* ── CARDSTACK static-mobile fallback ─────────────────────────────────────────
   For stacks opted in via <CardStack staticMobile> (About). On ≤768px the JS
   skips all pin/clip/scroll-jack setup; here we un-pin the cards so they flow as
   normal full-height scrolling sections. Use position:relative (NOT static) on
   .s-card so its absolutely-positioned backgrounds stay scoped to the card.
────────────────────────────────────────────────────────────────────────────── */
@media(max-width:768px){
  .static-mobile{height:auto !important}
  .static-mobile .s-wrap{position:relative !important;top:auto !important;left:auto !important;height:auto !important;clip-path:none !important}
  .static-mobile .s-card{position:relative !important;top:auto !important;height:auto !important;min-height:100vh;overflow:visible !important;clip-path:none !important}
}