:root{
  --bg:#0a0d0f;--panel:#11161a;--panel2:#171d21;--graphite:#20272c;
  --text:#e7e0d5;--muted:#9ca3a7;--gold:#c6a266;--gold2:#967445;
  --line:rgba(231,224,213,.13);--max:1240px
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Montserrat,Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}.wrap{width:min(calc(100% - 48px),var(--max));margin:auto}.site-header{position:fixed;z-index:50;inset:0 0 auto;background:rgba(8,11,13,.83);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.09)}.nav{height:78px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:13px}.wordmark{display:flex;flex-direction:column}.wordmark strong{font:500 23px Manrope;letter-spacing:.18em}.wordmark small{font-size:8px;letter-spacing:.25em;color:#aeb4b8}.mark{width:39px;height:39px;border:1px solid #c7c2ba;border-radius:50%;position:relative;overflow:hidden}.mark:before{content:"";position:absolute;left:4px;right:4px;top:18px;height:1px;background:var(--gold)}.mark i{position:absolute;left:9px;top:20px;width:19px;height:8px;background:linear-gradient(to bottom,rgba(230,215,185,.9),transparent);filter:blur(1.5px)}.mark b{position:absolute;left:12px;top:22px;width:13px;height:10px;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.45) 0 1px,transparent 1px 3px);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%)}nav{display:flex;gap:28px;align-items:center;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#c3c7ca}.nav-cta{border:1px solid var(--gold);padding:11px 17px;color:#eee0c6}.menu{display:none;background:none;color:var(--text);border:1px solid #4d555a;padding:8px 10px;font-size:10px;letter-spacing:.15em}

.hero{height:880px;position:relative;overflow:hidden}.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 50%;filter:saturate(.78) brightness(.62)}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,8,10,.96) 0%,rgba(5,8,10,.76) 42%,rgba(5,8,10,.28) 70%,rgba(5,8,10,.45) 100%),linear-gradient(to top,#0a0d0f 0%,transparent 25%)}.hero-content{position:relative;z-index:2;padding-top:185px}.eyebrow,.kicker{font-size:10px;letter-spacing:.25em;color:var(--gold);font-weight:600}.hero h1,.section h2,.section-head h2,.contact h2,.statement h2{font-family:Manrope,Arial,sans-serif}.hero h1{font-size:clamp(62px,8vw,112px);line-height:.9;letter-spacing:-.055em;font-weight:500;margin:25px 0 28px;max-width:1000px}.hero h1 em{font-style:normal;color:#d6bd8d}.hero-copy{max-width:650px;font-size:17px;line-height:1.7;color:#bac0c3}.actions{display:flex;gap:12px;margin-top:34px}.btn{min-height:50px;display:inline-flex;align-items:center;justify-content:center;padding:0 20px;font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:600}.btn-gold{background:var(--gold);color:#0a0d0f}.btn-outline{border:1px solid rgba(255,255,255,.34);color:#e3e3e1}.brand-line{margin-top:105px;display:flex;align-items:center;gap:23px;font-size:10px;letter-spacing:.28em;color:#d1d4d6}.brand-line i{width:48px;height:1px;background:var(--gold)}

.metrics{background:#090b0d;border-top:1px solid #252b2f;border-bottom:1px solid #252b2f}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr)}.metric-grid>div{padding:34px 25px;border-right:1px solid #252b2f}.metric-grid strong{display:block;font:500 34px Manrope;color:#dfc596}.metric-grid span{display:block;margin-top:5px;font-size:8px;letter-spacing:.11em;text-transform:uppercase;color:#818a90;line-height:1.5}

.section{padding:118px 0}.about{background:#11161a}.split{display:grid;grid-template-columns:1fr 1fr;gap:95px}.split h2,.section-head h2,.contact h2{font-size:clamp(42px,5.2vw,70px);line-height:1.02;letter-spacing:-.048em;font-weight:500;margin:14px 0}.copy{font-size:16px;line-height:1.85;color:#aab1b5}.copy p:first-child{margin-top:0}.services{padding:118px 0;background:#0d1114}.section-head{margin-bottom:50px}.section-head h2{max-width:850px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid var(--line);border-top:1px solid var(--line)}.service-grid article{padding:30px;min-height:330px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#101519}.service-grid article:nth-child(even){background:#12181c}.service-grid span{font-size:9px;color:var(--gold)}.service-grid h3{font:500 25px/1.17 Manrope;margin:47px 0 17px}.service-grid p{font-size:13px;line-height:1.7;color:#979fa4}.service-feature{background:#1d252a!important}.service-feature a{display:inline-block;margin-top:15px;color:#d9bb84;font-size:11px}

.work{padding:118px 0;background:#080b0d}.work-head p:last-child{max-width:720px;color:#8f979c;line-height:1.7}.case{position:relative;min-height:530px;overflow:hidden;border:1px solid #252c30;background:#111}.case img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s ease}.case:hover img{transform:scale(1.025)}.case-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,6,7,.94) 0%,rgba(4,6,7,.44) 48%,rgba(4,6,7,.08) 80%)}.case-copy{position:absolute;left:34px;right:34px;bottom:30px;max-width:670px}.case-copy small{font-size:9px;letter-spacing:.17em;color:#d0ad72}.case-copy h3{font:500 34px Manrope;margin:10px 0 10px}.case-copy p{max-width:650px;color:#b1b7ba;font-size:13px;line-height:1.65}.tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:17px}.tags span{font-size:8px;letter-spacing:.1em;text-transform:uppercase;padding:7px 9px;border:1px solid rgba(255,255,255,.22);color:#c5c9cb}.case-large{min-height:650px;margin-bottom:18px}.case-large img{object-position:center 55%}.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}.case-grid .case{min-height:560px}.case-grid .case:first-child img{object-position:center 55%}.case-grid .case:last-child img{object-position:center 50%}.case-wide{min-height:570px}.case-wide img{object-position:center 53%}

.approach{background:#14191d}.process{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.process>div{min-height:265px;padding:28px 34px 20px 0;border-right:1px solid var(--line)}.process>div:not(:first-child){padding-left:34px}.process span{font-size:9px;color:var(--gold)}.process h3{font:500 34px Manrope;margin:55px 0 12px}.process p{font-size:13px;line-height:1.7;color:#989fa4}.statement{padding:110px 0;background:#242a2e}.statement p{font-size:10px;letter-spacing:.24em;color:#c9aa76}.statement h2{max-width:1080px;font-size:clamp(42px,5.5vw,76px);line-height:1.07;letter-spacing:-.045em;font-weight:500;margin-bottom:0}.contact{padding:112px 0;background:#0b0f12}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px}.contact-grid>div:first-child>p:last-child{max-width:510px;color:#91999e;line-height:1.7}.contact-card{border-top:1px solid #333a3f}.contact-card>a:not(.btn),.contact-card>div{display:flex;justify-content:space-between;gap:24px;padding:19px 0;border-bottom:1px solid #333a3f}.contact-card small{font-size:8px;letter-spacing:.18em;color:#777f84}.contact-card strong{font-size:13px}.full{width:100%;margin-top:20px}

footer{padding:31px 0;background:#060809;color:#80888d}.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;font-size:8px;letter-spacing:.13em}.footer-brand{display:flex;flex-direction:column}.footer-brand strong{font:500 21px Manrope;color:#e5ded4;letter-spacing:.15em}.footer-brand small{font-size:7px}.footer-grid p:nth-child(2){text-align:center;color:#bd995f}.footer-grid p:last-child{text-align:right}

@media(max-width:850px){
  nav{display:none;position:absolute;top:78px;left:0;right:0;background:#0a0d0f;padding:25px;flex-direction:column;align-items:stretch}
  nav.open{display:flex}.menu{display:block}.hero{height:820px}.hero-shade{background:linear-gradient(90deg,rgba(5,8,10,.9),rgba(5,8,10,.55)),linear-gradient(to top,#0a0d0f,transparent 35%)}.hero-content{padding-top:145px}
  .metric-grid{grid-template-columns:1fr 1fr}.split,.contact-grid{grid-template-columns:1fr;gap:42px}.service-grid{grid-template-columns:1fr 1fr}.case-grid{grid-template-columns:1fr}.process{grid-template-columns:1fr}.process>div,.process>div:not(:first-child){padding-left:0;border-right:0;border-bottom:1px solid var(--line)}
}
@media(max-width:560px){
  .wrap{width:min(calc(100% - 28px),var(--max))}.hero{height:780px}.hero h1{font-size:58px}.hero-copy{font-size:15px}.actions{flex-direction:column;align-items:stretch}.brand-line{gap:9px;font-size:7px}.brand-line i{width:20px}.metric-grid,.service-grid{grid-template-columns:1fr}.section,.services,.work,.contact{padding:78px 0}.service-grid article{min-height:auto}.case,.case-large,.case-wide,.case-grid .case{min-height:500px}.case-copy{left:20px;right:20px;bottom:22px}.case-copy h3{font-size:29px}.footer-grid{grid-template-columns:1fr;gap:17px}.footer-grid p:nth-child(2),.footer-grid p:last-child{text-align:left}
}


/* =========================================================
   V5 — PERSISTENT CINEMATIC BACKGROUND
   The hero image now remains fixed behind the entire site.
   ========================================================= */

body{
  position:relative;
  background:#070a0c;
}

.site-background{
  position:fixed;
  z-index:-3;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  background-image:url("assets/IMG_8253.webp");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  filter:saturate(.92) contrast(1.04) brightness(.58);
  transform:translateZ(0);
}

.site-background-shade{
  position:fixed;
  z-index:-2;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,8,10,.76) 0%,rgba(5,8,10,.54) 48%,rgba(5,8,10,.43) 100%),
    linear-gradient(to bottom,rgba(4,6,8,.20),rgba(4,6,8,.48));
}

/* Hero now reveals the persistent image rather than containing its own photo. */
.hero{
  background:transparent;
}
.hero::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(4,7,9,.93) 0%,rgba(4,7,9,.68) 43%,rgba(4,7,9,.20) 72%,rgba(4,7,9,.34) 100%),
    linear-gradient(to top,rgba(7,10,12,.78) 0%,transparent 28%);
}
.hero-content{
  position:relative;
  z-index:2;
}

/* Content surfaces become translucent so the image remains perceptible
   without compromising text readability. */
.metrics{
  background:rgba(7,10,12,.91);
  backdrop-filter:blur(5px);
}
.about{
  background:rgba(15,20,24,.88);
  backdrop-filter:blur(8px);
}
.services{
  background:rgba(9,13,16,.90);
  backdrop-filter:blur(8px);
}
.service-grid article{
  background:rgba(15,20,24,.90);
  backdrop-filter:blur(6px);
}
.service-grid article:nth-child(even){
  background:rgba(18,24,28,.90);
}
.service-feature{
  background:rgba(29,37,42,.93)!important;
}
.work{
  background:rgba(6,9,11,.82);
  backdrop-filter:blur(6px);
}
.approach{
  background:rgba(18,23,27,.89);
  backdrop-filter:blur(8px);
}
.statement{
  background:rgba(32,38,42,.90);
  backdrop-filter:blur(9px);
}
.contact{
  background:rgba(8,12,15,.91);
  backdrop-filter:blur(8px);
}
footer{
  background:rgba(4,6,7,.95);
  backdrop-filter:blur(7px);
}

/* Slight breathing space lets the persistent image show through
   as a cinematic divider between major content areas. */
.about,
.services,
.work,
.approach,
.statement,
.contact{
  border-top:1px solid rgba(231,224,213,.10);
}

/* On smaller screens retain the persistent-background idea while
   darkening it slightly for readability. */
@media(max-width:850px){
  .site-background{
    background-position:center 45%;
    filter:saturate(.88) contrast(1.03) brightness(.48);
  }
  .site-background-shade{
    background:rgba(4,7,9,.48);
  }
  .hero::after{
    background:
      linear-gradient(90deg,rgba(4,7,9,.91),rgba(4,7,9,.55)),
      linear-gradient(to top,rgba(7,10,12,.72),transparent 32%);
  }
}

/* Respect users who prefer reduced visual effects. */
@media(prefers-reduced-motion:reduce){
  .site-background{
    transform:none;
  }
}


/* =========================================================
   V6 — CASE STUDIES / LAUNCH PREP
   ========================================================= */

.case-studies{
  padding:118px 0;
  background:rgba(10,14,17,.88);
  backdrop-filter:blur(8px);
  border-top:1px solid rgba(231,224,213,.10);
}
.case-study-head p:last-child{
  max-width:720px;
  color:#929a9f;
  line-height:1.7;
}
.study{
  display:grid;
  grid-template-columns:290px 1fr;
  border-top:1px solid var(--line);
  padding:42px 0 50px;
  gap:55px;
}
.study:last-child{border-bottom:1px solid var(--line)}
.study-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}
.study-meta>span{
  font:500 13px Manrope;
  color:var(--gold);
  letter-spacing:.12em;
}
.study-meta small{
  font-size:9px;
  line-height:1.5;
  letter-spacing:.16em;
  color:#8f979b;
}
.study-meta strong{
  font:500 23px/1.2 Manrope;
  color:#dfc392;
  margin-top:14px;
}
.study-main h3{
  font:500 clamp(31px,3.2vw,48px)/1.08 Manrope;
  letter-spacing:-.035em;
  margin:0 0 31px;
}
.study-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px 34px;
}
.study-grid>div{
  border-top:1px solid rgba(231,224,213,.13);
  padding-top:16px;
}
.study-grid h4{
  margin:0 0 10px;
  font-size:9px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#c8a66e;
}
.study-grid p{
  margin:0;
  color:#a5adb1;
  font-size:13px;
  line-height:1.75;
}
.inquiry-note{
  display:block!important;
  padding:20px 0!important;
}
.inquiry-note small{
  display:block;
  margin-bottom:10px;
}
.inquiry-note p{
  margin:0;
  color:#a0a7ab;
  font-size:12px;
  line-height:1.65;
}
.site-header nav{
  gap:22px;
}
@media(max-width:950px){
  .site-header nav{gap:14px}
}
@media(max-width:850px){
  .study{grid-template-columns:1fr;gap:24px}
  .study-grid{grid-template-columns:1fr}
}


/* =========================================================
   V7 — LAUNCH / PERFORMANCE / ACCESSIBILITY QA
   ========================================================= */

html{
  scroll-padding-top:90px;
}
section[id]{
  scroll-margin-top:90px;
}
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:4px;
}
.btn,
.nav-cta,
nav a{
  transition:opacity .18s ease,border-color .18s ease,background-color .18s ease,color .18s ease;
}
@media(hover:hover) and (pointer:fine){
  .btn:hover,.nav-cta:hover{opacity:.86}
  nav a:not(.nav-cta):hover{color:#fff}
}
img{
  max-width:100%;
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}


/* =========================================================
   V9 — TRANSLUCENT GLASS / PERSISTENT IMAGE TREATMENT
   Inspired by the approved mockup direction:
   the fixed hero image remains visible through the entire site.
   ========================================================= */

/* Keep the global image visually present throughout the site. */
.site-background{
  filter:saturate(1.02) contrast(1.04) brightness(.62);
}

.site-background-shade{
  background:
    linear-gradient(90deg,rgba(4,7,9,.44) 0%,rgba(4,7,9,.30) 48%,rgba(4,7,9,.26) 100%),
    linear-gradient(to bottom,rgba(4,6,8,.12),rgba(4,6,8,.28));
}

/* Major sections no longer block the image with opaque gray fills. */
.metrics,
.about,
.services,
.work,
.case-studies,
.approach,
.statement,
.contact{
  background:transparent!important;
  backdrop-filter:none!important;
}

/* Add dark transparent glass surfaces inside content areas instead. */
.metrics .metric-grid{
  margin-top:0;
  background:rgba(13,18,22,.48);
  border:1px solid rgba(231,224,213,.16);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.about .split,
.services .service-grid,
.case-studies .study,
.approach .process,
.contact .contact-grid{
  background:rgba(12,17,21,.46);
  border:1px solid rgba(231,224,213,.14);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.about .split{
  padding:44px;
}

.services .service-grid{
  border-left:1px solid rgba(231,224,213,.14);
  border-top:1px solid rgba(231,224,213,.14);
}

.service-grid article,
.service-grid article:nth-child(even),
.service-feature{
  background:rgba(10,15,19,.32)!important;
  backdrop-filter:none!important;
}

.work .section-head,
.case-studies .section-head,
.approach .section-head{
  background:rgba(10,15,19,.36);
  border:1px solid rgba(231,224,213,.12);
  padding:34px 36px;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

.case{
  background:rgba(8,12,15,.34);
  border-color:rgba(231,224,213,.18);
}

.case-overlay{
  background:
    linear-gradient(to top,rgba(4,6,7,.82) 0%,rgba(4,6,7,.34) 50%,rgba(4,6,7,.04) 82%);
}

.case-studies .study{
  padding:40px;
  margin-bottom:18px;
  border-top:1px solid rgba(231,224,213,.14);
}

.case-studies .study:last-child{
  border-bottom:1px solid rgba(231,224,213,.14);
}

.approach .process{
  padding:0 28px;
}

.statement{
  padding-top:80px;
  padding-bottom:80px;
}

.statement .wrap{
  background:rgba(20,26,30,.48);
  border:1px solid rgba(231,224,213,.14);
  padding:46px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.contact .contact-grid{
  padding:46px;
}

.contact-card{
  background:rgba(5,9,11,.28);
  padding:0 20px 22px;
  border:1px solid rgba(231,224,213,.12);
}

/* Give the page breathing room between glass panels so the background
   image can be clearly seen while scrolling. */
.about,
.services,
.work,
.case-studies,
.approach,
.statement,
.contact{
  padding-top:86px;
  padding-bottom:86px;
  border-top:0!important;
}

.metrics{
  padding:18px 0 28px;
}

/* Slightly brighter typography against the visible photograph. */
.copy,
.service-grid p,
.work-head p:last-child,
.study-grid p,
.process p,
.contact-grid>div:first-child>p:last-child{
  color:#b8bec2;
}

/* Hero retains the strongest contrast while still sharing the same image. */
.hero::after{
  background:
    linear-gradient(90deg,rgba(4,7,9,.80) 0%,rgba(4,7,9,.52) 43%,rgba(4,7,9,.12) 72%,rgba(4,7,9,.24) 100%),
    linear-gradient(to top,rgba(7,10,12,.46) 0%,transparent 28%);
}

/* Mobile: slightly more opaque glass for legibility, still translucent. */
@media(max-width:850px){
  .site-background{
    filter:saturate(.98) contrast(1.03) brightness(.54);
  }
  .site-background-shade{
    background:rgba(4,7,9,.30);
  }
  .about .split,
  .services .service-grid,
  .case-studies .study,
  .approach .process,
  .contact .contact-grid,
  .statement .wrap,
  .work .section-head,
  .case-studies .section-head,
  .approach .section-head,
  .metrics .metric-grid{
    background:rgba(10,15,19,.60);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  }
  .about .split,
  .contact .contact-grid,
  .statement .wrap{
    padding:26px;
  }
}