@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,600&family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   FRATEUR — Warm Precision / The Atelier of Spectacle
   Signature device: the "Specular Sheen" — a faceted conic
   light-sweep + film grain applied to dark bands, echoing the
   mirrorball. Paired with a cut-corner "notch" frame on media.
   ============================================================ */

:root{
  /* ---------- Palette ---------- */
  --ink:            #1B1B1B;
  --ink-soft:       #242424;
  --cream:          #F6F3EC;
  --stone:          #C5C1B9;
  --stone-light:    #DCDAD5;
  --white:          #FFFFFF;
  --accent:         #575ECF;
  --accent-deep:    #3F45B8;
  --text-muted:     #5E5A54;
  --text-muted-2:   rgba(27,27,27,.68);
  --overlay:        rgba(27,27,27,.62);
  --overlay-strong: rgba(27,27,27,.78);
  --hairline:       rgba(27,27,27,.12);
  --hairline-light: rgba(246,243,236,.18);

  /* Back-compat aliases used by legacy markup */
  --bg:             var(--cream);
  --surface:        var(--stone-light);
  --border:         var(--stone);
  --text:           var(--ink);

  /* ---------- 8pt spacing scale ---------- */
  --s-1:  8px;
  --s-2:  16px;
  --s-3:  24px;
  --s-4:  32px;
  --s-5:  40px;
  --s-6:  48px;
  --s-8:  64px;
  --s-10: 80px;
  --s-12: 96px;
  --s-16: 128px;
  --s-20: 160px;

  --section-y:      clamp(64px, 9vw, 120px);
  --section-y-tight:clamp(48px, 6vw, 80px);
  --gutter:         clamp(20px, 4vw, 40px);
  --maxw:           1280px;
  --maxw-text:      68ch;

  /* ---------- Type scale (rem) ---------- */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  clamp(1.75rem, 2.6vw, 2.25rem);
  --fs-3xl:  clamp(2.25rem, 4vw, 3.5rem);
  --fs-hero: clamp(2.75rem, 7.5vw, 6rem);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 2px rgba(27,27,27,.06), 0 2px 8px -4px rgba(27,27,27,.10);
  --shadow-2: 0 2px 4px rgba(27,27,27,.05), 0 12px 32px -12px rgba(27,27,27,.18);
  --shadow-3: 0 4px 8px rgba(27,27,27,.05), 0 28px 64px -24px rgba(27,27,27,.28);
  --shadow-inset-hair: inset 0 0 0 1px var(--hairline);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --dur: .55s;

  /* ---------- Signature: Specular Sheen ---------- */
  --sheen: conic-gradient(from 212deg at 72% 18%,
            rgba(255,255,255,0)   0deg,
            rgba(255,255,255,.11) 38deg,
            rgba(255,255,255,0)   86deg,
            rgba(255,255,255,.05) 168deg,
            rgba(255,255,255,0)   232deg,
            rgba(255,255,255,.09) 318deg,
            rgba(255,255,255,0)   360deg);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");

  /* Cut-corner frame */
  --notch: 44px;
}

/* ============================================================
   RESET / BASE
   ============================================================ */

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--fs-md);
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

body.nav-open{ overflow:hidden; }

img,svg,video{ max-width:100%; display:block; }

img{ height:auto; }

a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4,h5,h6{
  margin:0;
  font-family:var(--font-display);
  font-weight:600;
  font-optical-sizing:auto;
  line-height:1.06;
  letter-spacing:-.025em;
  color:var(--ink);
  text-wrap:balance;
}

p{ margin:0; }

ul,ol{ margin:0; padding:0; list-style:none; }

button{ font:inherit; color:inherit; }

::selection{ background:var(--accent); color:var(--white); }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */

.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{
  position:relative;
  padding-block:var(--section-y);
  background:var(--cream);
}

.section-stone{
  background:var(--stone-light);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}

/* Dark band — the signature sheen + grain live here */
.section-dark{
  position:relative;
  background:var(--ink);
  color:var(--cream);
  isolation:isolate;
  overflow:hidden;
}

.section-dark::before{
  content:"";
  position:absolute;
  inset:-20% -10%;
  background:var(--sheen);
  mix-blend-mode:screen;
  opacity:.9;
  pointer-events:none;
  z-index:0;
}

.section-dark::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--grain);
  background-size:220px 220px;
  opacity:.22;
  mix-blend-mode:overlay;
  pointer-events:none;
  z-index:0;
}

.section-dark > *{ position:relative; z-index:1; }

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4{ color:var(--cream); }

.section-dark p{ color:rgba(246,243,236,.82); }

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:var(--s-1);
  margin:0 0 var(--s-2);
  font-family:var(--font-sans);
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  line-height:1.2;
}

.eyebrow::before{
  content:"";
  width:28px;
  height:1px;
  background:currentColor;
  opacity:.7;
  flex:none;
}

.section-dark .eyebrow{ color:var(--accent); }

.section-title{
  font-size:var(--fs-3xl);
  line-height:1.04;
  letter-spacing:-.03em;
  margin:0;
  max-width:22ch;
}

.lead{
  margin-top:var(--s-3);
  max-width:var(--maxw-text);
  font-size:var(--fs-md);
  line-height:1.7;
  color:var(--text-muted);
}

.section-dark .lead{ color:rgba(246,243,236,.78); }

.section-header{
  max-width:62ch;
  margin-bottom:clamp(40px, 6vw, 72px);
}

.section-intro{
  margin-top:var(--s-3);
  font-size:var(--fs-md);
  line-height:1.7;
  color:var(--text-muted);
  max-width:56ch;
}

.section-dark .section-intro{ color:rgba(246,243,236,.78); }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn{
  --btn-bg:var(--ink);
  --btn-fg:var(--cream);
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:46px;
  padding:14px 22px;
  border:1px solid transparent;
  border-radius:2px;
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-family:var(--font-sans);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1;
  cursor:pointer;
  text-align:center;
  white-space:nowrap;
  transition:background-color .3s var(--ease-out),
             color .3s var(--ease-out),
             border-color .3s var(--ease-out),
             transform .3s var(--ease-out),
             box-shadow .3s var(--ease-out);
}

.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn-primary{
  --btn-bg:var(--accent);
  --btn-fg:var(--white);
  box-shadow:0 10px 24px -12px rgba(87,94,207,.75);
}

.btn-primary:hover{
  --btn-bg:var(--accent-deep);
  box-shadow:0 16px 32px -14px rgba(87,94,207,.85);
}

.btn-secondary{
  --btn-bg:transparent;
  --btn-fg:var(--cream);
  border-color:rgba(246,243,236,.34);
  backdrop-filter:blur(6px);
}

.btn-secondary:hover{
  --btn-bg:rgba(246,243,236,.10);
  border-color:rgba(246,243,236,.72);
}

.section:not(.section-dark) .btn-secondary{
  --btn-fg:var(--ink);
  border-color:rgba(27,27,27,.26);
}

.section:not(.section-dark) .btn-secondary:hover{
  --btn-bg:rgba(27,27,27,.05);
  border-color:rgba(27,27,27,.55);
}

.btn-lg{
  min-height:56px;
  padding:18px 32px;
  font-size:1rem;
  letter-spacing:.03em;
}

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */

.site-header{
  position:sticky;
  top:0;
  z-index:120;
  background:rgba(246,243,236,.92);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--hairline);
  transition:background-color .4s var(--ease-out),
             border-color .4s var(--ease-out),
             box-shadow .4s var(--ease-out);
}

.site-header .container{ height:100%; }

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-3);
  min-height:72px;
}

/* Transparent state — over hero */
.site-header.is-transparent,
.site-header.transparent{
  background:transparent;
  border-bottom-color:rgba(246,243,236,.14);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

.site-header.is-transparent .logo-link,
.site-header.transparent .logo-link,
.site-header.is-transparent .nav-list a,
.site-header.transparent .nav-list a{ color:var(--cream); }

/* Scrolled state — solid cream */
.site-header.is-scrolled,
.site-header.scrolled{
  background:rgba(246,243,236,.94);
  border-bottom-color:var(--hairline);
  box-shadow:0 1px 0 rgba(27,27,27,.04), 0 12px 32px -28px rgba(27,27,27,.5);
}

.site-header.is-scrolled .logo-link,
.site-header.scrolled .logo-link,
.site-header.is-scrolled .nav-list a,
.site-header.scrolled .nav-list a{ color:var(--ink); }

/* Logo */
.logo-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 0;
  font-family:var(--font-display);
  font-size:1.3rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  line-height:1;
  transition:color .35s var(--ease-out), opacity .3s var(--ease-out);
}

.logo-link::before{
  content:"";
  width:10px;
  height:10px;
  flex:none;
  border-radius:50%;
  background:
    conic-gradient(from 210deg,
      #fff 0 12%, #9aa0e8 12% 24%, #4a4faf 24% 36%,
      #fff 36% 48%, #6d74d8 48% 60%, #2f3384 60% 72%,
      #fff 72% 84%, #7f86de 84% 96%, #fff 96% 100%);
  box-shadow:0 0 0 1px rgba(27,27,27,.14);
}

.logo-link:hover{ opacity:.78; }

/* Nav toggle (mobile) */
.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  padding:0;
  border:1px solid var(--hairline);
  border-radius:2px;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .3s var(--ease-out), color .3s var(--ease-out), background-color .3s var(--ease-out);
}

.site-header.is-transparent .nav-toggle,
.site-header.transparent .nav-toggle{
  color:var(--cream);
  border-color:rgba(246,243,236,.30);
}

.nav-toggle:hover{ border-color:currentColor; }

.nav-toggle-icon{
  position:relative;
  display:block;
  width:22px;
  height:14px;
  background:linear-gradient(currentColor,currentColor) center / 100% 2px no-repeat;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background:currentColor;
  transition:transform .35s var(--ease-out), top .35s var(--ease-out), bottom .35s var(--ease-out), opacity .25s var(--ease-out);
}

.nav-toggle-icon::before{ top:0; }
.nav-toggle-icon::after{ bottom:0; }

.site-header.is-open .nav-toggle,
.site-header.nav-open .nav-toggle,
body.nav-open .nav-toggle{ color:var(--cream); border-color:rgba(246,243,236,.3); }

.site-header.is-open .nav-toggle-icon,
.site-header.nav-open .nav-toggle-icon,
body.nav-open .nav-toggle-icon{ background:none; }

.site-header.is-open .nav-toggle-icon::before,
.site-header.nav-open .nav-toggle-icon::before,
body.nav-open .nav-toggle-icon::before{ top:6px; transform:rotate(45deg); }

.site-header.is-open .nav-toggle-icon::after,
.site-header.nav-open .nav-toggle-icon::after,
body.nav-open .nav-toggle-icon::after{ bottom:6px; transform:rotate(-45deg); }

/* Primary nav */
.primary-nav{
  display:flex;
  align-items:center;
  gap:var(--s-4);
  margin-left:auto;
}

.nav-list{
  display:flex;
  align-items:center;
  gap:clamp(14px, 1.8vw, 26px);
}

.nav-list a{
  position:relative;
  display:inline-block;
  padding:6px 2px;
  font-size:.9rem;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--ink);
  transition:color .3s var(--ease-out);
}

.nav-list a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s var(--ease-out);
}

.nav-list a:hover{ color:var(--accent); }
.nav-list a:hover::after{ transform:scaleX(1); }

.site-header.is-transparent .nav-list a:hover,
.site-header.transparent .nav-list a:hover{ color:var(--cream); }

.nav-cta{
  flex:none;
  min-height:42px;
  padding:12px 18px;
  font-size:.875rem;
}

/* ============================================================
   HERO
   ============================================================ */

.hero{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:min(92svh, 900px);
  padding-block:clamp(120px, 16vh, 200px) clamp(48px, 7vw, 88px);
  background:var(--ink);
  color:var(--cream);
  overflow:hidden;
  isolation:isolate;
}

.hero-media{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}

.hero-image{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
  transform:scale(1.06);
  animation:heroDrift 24s var(--ease-in-out) infinite alternate;
  will-change:transform;
}

@keyframes heroDrift{
  from{ transform:scale(1.06) translate3d(0,0,0); }
  to{ transform:scale(1.13) translate3d(-1.4%, -1.6%, 0); }
}

/* Gradient scrim + duotone warmth */
.hero-media::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg, rgba(27,27,27,.86) 0%, rgba(27,27,27,.34) 34%, rgba(27,27,27,.55) 68%, rgba(27,27,27,.93) 100%),
    linear-gradient(90deg, rgba(27,27,27,.72) 0%, rgba(27,27,27,.16) 62%, rgba(27,27,27,.42) 100%);
}

/* Specular sheen over hero image */
.hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:var(--sheen);
  mix-blend-mode:screen;
  opacity:.85;
  pointer-events:none;
}

.hero-content{
  position:relative;
  z-index:3;
  width:100%;
}

.hero .eyebrow{
  color:var(--cream);
  opacity:.9;
}

.hero-title{
  margin:0;
  max-width:16ch;
  font-family:var(--font-display);
  font-size:var(--fs-hero);
  font-weight:600;
  line-height:.95;
  letter-spacing:-.035em;
  color:var(--cream);
  text-wrap:balance;
}

.hero-title em{
  font-style:italic;
  font-weight:400;
  color:var(--cream);
  background:linear-gradient(transparent 62%, rgba(87,94,207,.55) 62%, rgba(87,94,207,.55) 92%, transparent 92%);
}

.hero-subtitle{
  margin-top:var(--s-3);
  max-width:56ch;
  font-size:clamp(1rem, 1.3vw, 1.125rem);
  line-height:1.7;
  color:rgba(246,243,236,.82);
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2);
  margin-top:var(--s-5);
}

/* Hero stats */
.hero-stats{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:var(--s-3);
  margin-top:clamp(40px, 6vw, 72px);
  padding-top:var(--s-4);
  border-top:1px solid var(--hairline-light);
}

.stat{
  position:relative;
  padding-left:var(--s-3);
}

.stat::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  bottom:8px;
  width:1px;
  background:linear-gradient(180deg, var(--accent), rgba(87,94,207,0));
  opacity:.9;
}

.stat:first-child{ padding-left:var(--s-3); }

.stat-number{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(1.75rem, 3.4vw, 2.6rem);
  font-weight:600;
  line-height:1;
  letter-spacing:-.035em;
  color:var(--cream);
  font-variant-numeric:tabular-nums;
}

.stat-label{
  display:block;
  margin-top:10px;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:rgba(246,243,236,.66);
  line-height:1.4;
}

/* ============================================================
   SPLIT LAYOUTS + MEDIA FRAMES
   ============================================================ */

.split{
  display:grid;
  gap:clamp(32px, 5vw, 72px);
  align-items:center;
}

.split-7-5{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
.split-5-7{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }

.split-media{
  position:relative;
  overflow:hidden;
  border-radius:3px;
  background:var(--stone-light);
  aspect-ratio:4 / 3;
  box-shadow:var(--shadow-3);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
}

.split-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(200deg, rgba(27,27,27,0) 42%, rgba(27,27,27,.34) 100%);
  pointer-events:none;
}

.image-cover{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform 1.1s var(--ease-out), filter .8s var(--ease-out);
  will-change:transform;
}

.split-media:hover .image-cover,
.feature-media:hover .image-cover,
.service-card:hover .image-cover{
  transform:scale(1.045);
}

.split-content{ min-width:0; }
.split-content .section-title{ max-width:20ch; }

/* ============================================================
   PROOF BAND (Guinness / signature)
   ============================================================ */

.proof{
  position:relative;
  padding-block:var(--section-y);
  overflow:hidden;
}

.proof .split{ align-items:center; }

.proof .stat-number{
  font-size:clamp(2.5rem, 6vw, 4.5rem);
}

.proof .eyebrow{ color:var(--accent); }

.proof .split-content .section-title{
  font-size:clamp(2rem, 3.6vw, 3.25rem);
}

.proof .split-content p{
  margin-top:var(--s-3);
  max-width:52ch;
  color:rgba(246,243,236,.80);
}

.proof .split-media{
  aspect-ratio:5 / 4;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(246,243,236,.08);
}

/* ============================================================
   SERVICE GRID — asymmetric editorial
   ============================================================ */

.service-grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap:clamp(24px, 3.5vw, 48px) var(--s-3);
  align-items:start;
}

.service-card{
  position:relative;
  grid-column:span 6;
  display:flex;
  flex-direction:column;
  background:transparent;
  border-top:1px solid var(--hairline);
  padding-top:var(--s-3);
}

/* Asymmetric rhythm */
.service-card:nth-child(1){ grid-column:span 7; }
.service-card:nth-child(2){ grid-column:span 5; margin-top:clamp(24px, 5vw, 72px); }
.service-card:nth-child(3){ grid-column:span 5; }
.service-card:nth-child(4){ grid-column:span 7; margin-top:clamp(24px, 5vw, 72px); }

.service-image{
  position:relative;
  width:100%;
  aspect-ratio:16 / 11;
  overflow:hidden;
  border-radius:3px;
  background:var(--stone-light);
  box-shadow:var(--shadow-2);
  transition:box-shadow .5s var(--ease-out), transform .5s var(--ease-out);
}

.service-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(27,27,27,0) 55%, rgba(27,27,27,.22) 100%);
  pointer-events:none;
}

.service-card:hover .service-image{
  transform:translateY(-4px);
  box-shadow:var(--shadow-3);
}

.service-title{
  margin-top:var(--s-3);
  font-family:var(--font-display);
  font-size:clamp(1.25rem, 1.9vw, 1.6rem);
  font-weight:600;
  line-height:1.18;
  letter-spacing:-.02em;
}

.service-card:nth-child(1) .service-title,
.service-card:nth-child(4) .service-title{
  font-size:clamp(1.5rem, 2.6vw, 2.1rem);
}

.service-desc{
  margin-top:12px;
  max-width:46ch;
  font-size:1rem;
  line-height:1.65;
  color:var(--text-muted);
}

/* Arrow link */
.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:var(--s-3);
  align-self:flex-start;
  font-size:.875rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--accent);
  transition:color .3s var(--ease-out);
}

.link-arrow::after{
  content:"";
  width:22px;
  height:1px;
  background:currentColor;
  position:relative;
  transition:width .35s var(--ease-out), transform .35s var(--ease-out);
}

.link-arrow::before{
  content:"";
  position:absolute;
  right:0;
  width:7px;
  height:7px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:rotate(45deg) translateY(0);
  opacity:0;
}

.link-arrow{
  position:relative;
  padding-right:2px;
}

.link-arrow > *{ position:relative; }

.link-arrow:hover{ color:var(--accent-deep); }
.link-arrow:hover::after{ width:36px; }

.section-dark .link-arrow{ color:var(--cream); }
.section-dark .link-arrow:hover{ color:var(--accent); }

/* ============================================================
   CAPABILITY LIST
   ============================================================ */

.capability-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:0 var(--s-5);
  margin-top:var(--s-5);
  border-top:1px solid var(--hairline);
}

.section-dark .capability-list{ border-top-color:var(--hairline-light); }

.capability-list li{
  position:relative;
  padding:18px 0 18px 30px;
  border-bottom:1px solid var(--hairline);
  font-size:1rem;
  font-weight:500;
  letter-spacing:.01em;
  line-height:1.5;
  color:var(--ink);
  transition:color .3s var(--ease-out), padding-left .35s var(--ease-out);
}

.section-dark .capability-list li{
  color:rgba(246,243,236,.88);
  border-bottom-color:var(--hairline-light);
}

.capability-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:26px;
  width:12px;
  height:1px;
  background:var(--accent);
  transition:width .35s var(--ease-out);
}

.capability-list li:hover{ padding-left:36px; }
.capability-list li:hover::before{ width:20px; }

/* ============================================================
   LOGO STRIP
   ============================================================ */

.logo-strip{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-4) clamp(24px, 4vw, 56px);
  margin-top:var(--s-6);
  padding-top:var(--s-5);
  border-top:1px solid var(--hairline);
}

.section-dark .logo-strip{ border-top-color:var(--hairline-light); }

.logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-size:clamp(1rem, 1.5vw, 1.25rem);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:.5;
  filter:grayscale(1);
  transition:opacity .35s var(--ease-out), filter .35s var(--ease-out), transform .35s var(--ease-out);
  white-space:nowrap;
}

.section-dark .logo{ color:var(--cream); opacity:.55; }

.logo:hover{
  opacity:1;
  filter:grayscale(0);
  transform:translateY(-2px);
}

/* ============================================================
   FEATURE ROWS
   ============================================================ */

.feature-row{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(32px, 5vw, 72px);
  align-items:center;
  padding-block:clamp(48px, 6vw, 88px);
  border-top:1px solid var(--hairline);
}

.feature-row:first-of-type{ border-top:0; padding-top:0; }

.feature-row-reverse{
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
}

.feature-row-reverse .feature-media{ order:2; }
.feature-row-reverse .feature-content{ order:1; }

.feature-media{
  position:relative;
  overflow:hidden;
  border-radius:3px;
  background:var(--stone-light);
  aspect-ratio:5 / 4;
  box-shadow:var(--shadow-3);
  clip-path:polygon(0 0, 100% 0, 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
}

.feature-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(27,27,27,0) 58%, rgba(27,27,27,.26) 100%);
  pointer-events:none;
}

.feature-content{ min-width:0; }

.feature-title{
  font-family:var(--font-display);
  font-size:clamp(1.6rem, 3vw, 2.4rem);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.028em;
  max-width:20ch;
}

.feature-content p{
  margin-top:var(--s-3);
  max-width:50ch;
  font-size:1.0625rem;
  line-height:1.7;
  color:var(--text-muted);
}

/* ============================================================
   REASSURANCE BAND
   ============================================================ */

.reassurance{
  position:relative;
  background:var(--stone-light);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  padding-block:clamp(56px, 7vw, 96px);
}

.reassurance-inner{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(24px, 4vw, 64px);
  align-items:baseline;
}

.reassurance-title{
  font-family:var(--font-display);
  font-size:clamp(1.75rem, 3.2vw, 2.6rem);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.03em;
  max-width:18ch;
}

.reassurance-text{
  max-width:56ch;
  font-size:1.0625rem;
  line-height:1.75;
  color:var(--text-muted);
}

.reassurance-text strong{
  color:var(--ink);
  font-weight:600;
}

/* ============================================================
   FINAL CTA
   ============================================================ */

.cta{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:var(--ink);
  color:var(--cream);
  padding-block:clamp(72px, 10vw, 140px);
}

.cta-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}

.cta-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(27,27,27,.90) 0%, rgba(27,27,27,.72) 50%, rgba(27,27,27,.94) 100%);
}

.cta-bg img,
.cta-bg .image-cover{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.55;
  filter:saturate(.75) contrast(1.05);
}

.cta::before{
  content:"";
  position:absolute;
  inset:-25% -15%;
  z-index:1;
  background:var(--sheen);
  mix-blend-mode:screen;
  opacity:.75;
  pointer-events:none;
}

.cta::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background-image:var(--grain);
  background-size:220px 220px;
  opacity:.20;
  mix-blend-mode:overlay;
  pointer-events:none;
}

.cta-content{
  position:relative;
  z-index:2;
  max-width:56ch;
}

.cta-title{
  font-family:var(--font-display);
  font-size:clamp(2.25rem, 5vw, 4rem);
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.035em;
  color:var(--cream);
  max-width:18ch;
  text-wrap:balance;
}

.cta-text{
  margin-top:var(--s-3);
  max-width:48ch;
  font-size:1.125rem;
  line-height:1.7;
  color:rgba(246,243,236,.80);
}

.cta .btn{ margin-top:var(--s-5); }

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer{
  position:relative;
  background:var(--ink);
  color:var(--cream);
  padding-block:clamp(56px, 7vw, 96px) var(--s-5);
  border-top:1px solid rgba(246,243,236,.10);
  isolation:isolate;
  overflow:hidden;
}

.site-footer::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--sheen);
  mix-blend-mode:screen;
  opacity:.45;
  pointer-events:none;
  z-index:0;
}

.site-footer > *{ position:relative; z-index:1; }

.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) repeat(2, minmax(0,1fr)) minmax(0,1.2fr);
  gap:clamp(32px, 4vw, 64px);
  padding-bottom:var(--s-6);
}

.footer-brand{ max-width:36ch; }

.footer-logo{
  display:inline-block;
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cream);
  line-height:1;
}

.footer-desc{
  margin-top:var(--s-3);
  font-size:.95rem;
  line-height:1.75;
  color:rgba(246,243,236,.72);
}

.footer-col{ min-width:0; }

.footer-heading{
  margin:0 0 var(--s-3);
  font-family:var(--font-sans);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
}

.footer-links{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.footer-links li{ line-height:1.4; }

.footer-links a{
  display:inline-block;
  padding:2px 0;
  font-size:.95rem;
  font-weight:400;
  color:#DCDAD5;
  transition:color .3s var(--ease-out), transform .3s var(--ease-out);
}

.footer-links a:hover{
  color:var(--cream);
  transform:translateX(3px);
}

.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-2) var(--s-4);
  padding-top:var(--s-4);
  border-top:1px solid rgba(246,243,236,.16);
  font-size:.85rem;
  line-height:1.6;
  color:#DCDAD5;
}

.footer-bottom a{ color:#DCDAD5; }
.footer-bottom a:hover{ color:var(--cream); text-decoration:underline; text-underline-offset:3px; }

/* ============================================================
   SCROLL REVEAL (progressive enhancement, no JS classes)
   ============================================================ */

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .section-header,
    .split-media,
    .split-content,
    .service-card,
    .feature-media,
    .feature-content,
    .reassurance-inner,
    .cta-content,
    .stat{
      animation:revealUp .9s var(--ease-out) both;
      animation-timeline:view();
      animation-range:entry 5% cover 28%;
    }

    .service-card:nth-child(2),
    .service-card:nth-child(4){ animation-range:entry 8% cover 32%; }
  }
}

@keyframes revealUp{
  from{ opacity:0; transform:translate3d(0, 26px, 0); }
  to{ opacity:1; transform:translate3d(0,0,0); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1080px){
  .split-7-5,
  .split-5-7{ grid-template-columns:minmax(0,1fr); gap:clamp(28px, 5vw, 44px); }

  .split-5-7 .split-media{ order:-1; }

  .feature-row,
  .feature-row-reverse{ grid-template-columns:minmax(0,1fr); }

  .feature-row-reverse .feature-media,
  .feature-row-reverse .feature-content{ order:0; }

  .feature-row-reverse .feature-media{ order:-1; }

  .reassurance-inner{ grid-template-columns:minmax(0,1fr); gap:var(--s-3); }

  .footer-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .footer-brand{ grid-column:1 / -1; }
}

@media (max-width: 900px){
  .service-card,
  .service-card:nth-child(1),
  .service-card:nth-child(2),
  .service-card:nth-child(3),
  .service-card:nth-child(4){
    grid-column:span 6;
    margin-top:0;
  }

  .hero-stats{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s-4) var(--s-3); }
}

@media (max-width: 860px){
  /* Mobile drawer navigation */
  .nav-toggle{ display:inline-flex; }

  .primary-nav{
    position:fixed;
    inset:0;
    z-index:110;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:var(--s-5);
    margin:0;
    padding:var(--s-16) var(--gutter) var(--s-10);
    background:var(--ink);
    color:var(--cream);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .4s var(--ease-out), transform .5s var(--ease-out), visibility .4s;
    overflow-y:auto;
  }

  .primary-nav::before{
    content:"";
    position:absolute;
    inset:0;
    background:var(--sheen);
    mix-blend-mode:screen;
    opacity:.7;
    pointer-events:none;
  }

  .site-header.is-open .primary-nav,
  .site-header.nav-open .primary-nav,
  .primary-nav.is-open,
  body.nav-open .primary-nav{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }

  .nav-list{
    position:relative;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    width:100%;
  }

  .nav-list li{ width:100%; border-bottom:1px solid rgba(246,243,236,.14); }

  .nav-list a{
    display:block;
    width:100%;
    min-height:56px;
    padding:18px 0;
    font-family:var(--font-display);
    font-size:1.5rem;
    font-weight:500;
    letter-spacing:-.01em;
    color:var(--cream);
  }

  .nav-list a::after{ display:none; }
  .nav-list a:hover{ color:var(--accent); }

  .nav-cta{
    position:relative;
    width:100%;
    min-height:56px;
    font-size:1rem;
  }

  .site-header.is-transparent .nav-list a,
  .site-header.transparent .nav-list a{ color:var(--cream); }
}

@media (max-width: 720px){
  :root{
    --notch:26px;
    --fs-md:1rem;
  }

  html{ scroll-padding-top:80px; }

  body{ font-size:1rem; line-height:1.7; }

  .header-inner{ min-height:64px; }

  .hero{
    min-height:88svh;
    padding-block:clamp(96px, 20vh, 160px) var(--s-6);
  }

  .hero-title{ max-width:18ch; }

  .hero-subtitle{ font-size:1rem; }

  .hero-actions{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }

  .hero-actions .btn{ width:100%; min-height:52px; }

  .hero-stats{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:var(--s-4) var(--s-3);
    margin-top:var(--s-6);
  }

  .stat{ padding-left:18px; }
  .stat::before{ top:2px; bottom:6px; }

  .service-card,
  .service-card:nth-child(1),
  .service-card:nth-child(2),
  .service-card:nth-child(3),
  .service-card:nth-child(4){
    grid-column:span 12;
  }

  .split-media{ aspect-ratio:4 / 3; }
  .feature-media{ aspect-ratio:4 / 3; }
  .proof .split-media{ aspect-ratio:4 / 3; }

  .capability-list{ grid-template-columns:minmax(0,1fr); }

  .logo-strip{
    justify-content:flex-start;
    gap:var(--s-3) var(--s-5);
  }

  .logo{ font-size:.95rem; }

  .btn{ min-height:48px; }

  .footer-grid{
    grid-template-columns:minmax(0,1fr);
    gap:var(--s-5);
  }

  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
}

@media (max-width: 420px){
  .hero-stats{ grid-template-columns:minmax(0,1fr); }
  .stat{ padding-left:var(--s-3); }
}

/* ============================================================
   MOTION / PRINT GUARDS
   ============================================================ */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }

  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }

  .hero-image{ transform:scale(1.02); }
}

@media print{
  .site-header,
  .cta,
  .nav-toggle{ display:none !important; }

  body{ background:#fff; color:#000; }
}