/* ============ TOKENS ============ */
:root{
  /* Light, Farrell-style palette. Black is retained for headings,
     buttons, the reviews band and the footer. */
  --white: #FFFFFF;
  --paper: #F0F0F1;
  --paper-2: #E4E4E6;
  --ink: #0B0B0B;
  --ink-soft: #3A3A3C;
  --text: #666666;
  --gray: #7D7F82;
  --line: rgba(11,11,11,0.13);
  --line-light: rgba(255,255,255,0.18);
  --display: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --body: 'Open Sans', Arial, sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body);
  background:var(--white);
  color:var(--text);
  line-height:1.75;
  font-size:15px;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.08em;
  line-height:1.12;
  color:var(--ink);
}
h1{font-size:clamp(2.4rem, 5.6vw, 4.2rem); letter-spacing:0.11em;}
h2{font-size:clamp(1.7rem, 3.4vw, 2.7rem); margin-bottom:26px;}
h3{font-size:clamp(1.35rem, 2.2vw, 1.9rem); margin-bottom:18px;}
h4{font-size:0.82rem; letter-spacing:0.19em; margin-bottom:20px;}

p{margin-bottom:18px; max-width:60ch;}
.section-inner{max-width:1240px; margin:0 auto; padding:130px 40px;}
.center{text-align:center;}
.center p{margin-left:auto; margin-right:auto;}

.eyebrow{
  font-family:var(--display);
  font-size:0.76rem; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--gray); font-weight:500; margin-bottom:20px;
}
.lede{font-size:1.02rem; max-width:62ch;}

/* ============ BUTTONS / LINK CTAS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:0.8rem; font-weight:500;
  letter-spacing:0.19em; text-transform:uppercase;
  padding:19px 44px; cursor:pointer; border:1px solid var(--ink);
  background:var(--ink); color:var(--white);
  transition:background .3s ease, color .3s ease;
}
.btn-solid:hover{background:transparent; color:var(--ink);}
.full-width{width:100%;}

.link-cta{
  display:inline-block; font-family:var(--display); font-size:0.78rem;
  letter-spacing:0.22em; text-transform:uppercase; font-weight:500;
  color:var(--ink); padding-bottom:7px; position:relative;
}
.link-cta::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(1); transform-origin:left;
  transition:transform .35s ease;
}
.link-cta:hover::after{transform:scaleX(0.35);}
.link-cta.light{color:var(--white);}

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .4s ease, border-color .4s ease, padding .4s ease;
  border-bottom:1px solid transparent;
  padding:12px 0;
}
.nav.scrolled{background:rgba(255,255,255,0.96); backdrop-filter:blur(12px); border-bottom-color:var(--line); padding:2px 0;}
.nav-inner{
  max-width:1500px; margin:0 auto; padding:18px 48px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:32px;
}
.brand{justify-self:center; position:relative; display:block;}
.brand img{width:300px; transition:width .4s ease, opacity .3s ease;}
.nav.scrolled .brand img{width:220px;}
/* Logo swaps white -> dark when the nav turns opaque on scroll. */
.brand .logo-dark{position:absolute; top:0; left:0; height:auto; opacity:0;}
.nav.scrolled .brand .logo-light{opacity:0;}
.nav.scrolled .brand .logo-dark{opacity:1;}

.nav-side{display:flex; align-items:center; gap:40px;}
.nav-left{justify-self:start; margin-left:64px;} /* clears the absolutely-positioned toggle */
.nav-right{justify-self:end;}
.nav-side a{
  font-family:var(--display); font-size:0.8rem; letter-spacing:0.17em;
  text-transform:uppercase; font-weight:400; color:var(--white);
  text-shadow:0 1px 12px rgba(0,0,0,0.35);
  transition:color .3s ease, text-shadow .3s ease;
}
.nav-side a:hover{color:var(--paper-2);}
.nav.scrolled .nav-side a{color:var(--ink); text-shadow:none;}
.nav.scrolled .nav-side a:hover{color:var(--gray);}

.nav-toggle{
  position:absolute; left:48px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:5px; background:none; border:none;
  cursor:pointer; padding:6px 0; z-index:102;
}
.nav-toggle span{width:30px; height:1.2px; background:var(--white); transition:transform .3s ease, opacity .3s ease, background .3s ease;}
.nav.scrolled .nav-toggle span{background:var(--ink);}
.nav-toggle.open span{background:var(--white);}
.nav-toggle.open span:nth-child(1){transform:translateY(6.2px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-6.2px) rotate(-45deg);}

.nav-panel{
  position:fixed; inset:0; background:rgba(11,11,11,0.97); backdrop-filter:blur(6px);
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:34px;
  z-index:101;
}
.nav-panel.open{display:flex;}
.nav-panel a{
  font-family:var(--display); font-size:1.15rem; letter-spacing:0.24em;
  text-transform:uppercase; font-weight:300; color:var(--white); opacity:.9;
}
.nav-panel a:hover{color:var(--paper-2);}

/* ============ HERO ============ */
.hero{
  position:relative; min-height:100vh; display:flex;
  align-items:center; justify-content:center; overflow:hidden; background:var(--paper);
}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
/* Light scrim only — the hero image is bright, so this just protects text legibility. */
.hero-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(20,28,36,0.30) 0%, rgba(20,28,36,0.16) 52%, rgba(20,28,36,0.05) 100%),
    linear-gradient(180deg, rgba(20,28,36,0.34) 0%, rgba(20,28,36,0.02) 26%, rgba(20,28,36,0.04) 62%, rgba(20,28,36,0.30) 100%);
}
.hero-content{position:relative; z-index:2; text-align:center; padding:0 32px;}
.hero-eyebrow{
  font-family:var(--display); font-size:0.82rem; letter-spacing:0.34em;
  text-transform:uppercase; font-weight:300; color:rgba(255,255,255,0.9);
  margin-bottom:22px;
}
.hero-title{
  font-family:var(--serif); font-weight:300; text-transform:uppercase;
  font-size:clamp(2.9rem, 7.4vw, 6.4rem); letter-spacing:0.11em;
  line-height:1.02; color:var(--white); margin:0;
  text-shadow:0 2px 40px rgba(0,0,0,0.5);
}
.hero-title em{font-style:italic; letter-spacing:0.04em;}

.hero-foot{
  position:absolute; bottom:44px; left:0; right:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:22px;
}
.hero-place{
  margin:0; font-family:var(--display); font-size:0.76rem; letter-spacing:0.3em;
  text-transform:uppercase; color:rgba(255,255,255,0.78);
}
.hero-place span{opacity:.45; margin:0 4px;}
.hero-mono img{width:46px; opacity:.9; transition:opacity .3s ease, transform .3s ease;}
.hero-mono:hover img{opacity:1; transform:translateY(3px);}

/* ============ ABOUT ============ */
.about{background:var(--white);}
.about-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:90px; align-items:center;}
.about-media img{width:100%; height:600px; object-fit:cover;}
.stat-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  margin:44px 0 40px; border-top:1px solid var(--line); padding-top:36px;
}
.stat-row li{display:flex; flex-direction:column; gap:8px;}
.stat-row strong{
  font-family:var(--display); font-size:1.9rem; font-weight:400; color:var(--ink);
  letter-spacing:0.05em;
}
.stat-row span{
  font-family:var(--display); font-size:0.7rem; letter-spacing:0.19em;
  text-transform:uppercase; color:var(--gray);
}

/* ============ SERVICES INTRO ============ */
.services-intro{background:var(--white);}
.services-intro .section-inner{padding-bottom:70px;}

/* ============ FEATURE SECTIONS ============ */
.feature{
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  background:var(--paper); border-top:1px solid var(--line);
}
.feature:nth-of-type(even){background:var(--white);}
.feature-media{overflow:hidden;}
.feature-media img{width:100%; height:100%; min-height:520px; object-fit:cover; display:block; background:var(--paper-2);}

/* Section videos are portrait phone clips. Rather than blowing them up to fill
   the panel, they sit as a contained square so they read as a detail shot. */
.feature-media.has-video{
  display:flex; align-items:center; justify-content:center;
  min-height:520px; padding:48px 32px; background:var(--paper-2);
}
.feature-media.has-video video{
  width:min(100%, 360px); aspect-ratio:1 / 1; height:auto;
  object-fit:cover; display:block; background:var(--paper);
}
.feature-copy{
  display:flex; flex-direction:column; justify-content:center;
  padding:90px clamp(40px, 6vw, 96px);
}
.feature.reverse .feature-media{order:2;}
.feature.reverse .feature-copy{order:1;}
.feature-list{
  display:grid; grid-template-columns:1fr 1fr; gap:12px 28px;
  margin:8px 0 38px; padding-top:28px; border-top:1px solid var(--line);
}
.feature-list li{
  font-family:var(--display); font-size:0.82rem; letter-spacing:0.11em;
  text-transform:uppercase; color:var(--ink-soft); position:relative; padding-left:20px;
}
.feature-list li::before{
  content:''; position:absolute; left:0; top:9px; width:8px; height:1px; background:var(--ink);
}
.feature-copy .link-cta{align-self:flex-start;}
.feature-actions{display:flex; flex-wrap:wrap; align-items:center; gap:14px 34px; margin-top:4px;}
.feature-actions .link-cta{align-self:auto;}
button.link-cta{
  background:none; border:none; padding:0 0 7px; cursor:pointer;
  font-family:var(--display); font-size:0.78rem; letter-spacing:0.22em;
  text-transform:uppercase; font-weight:500; color:var(--ink);
}
.g-count{
  display:inline-block; margin-left:8px; padding:2px 7px; border-radius:2px;
  background:var(--ink); color:var(--white); font-size:0.66rem; letter-spacing:0.06em;
}

/* ============ LIGHTBOX ============ */
.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(11,11,11,0.95);
  display:flex; align-items:center; justify-content:center; padding:64px 78px;
}
.lightbox[hidden]{display:none;}
.lb-stage{margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; gap:16px;}
.lb-stage img{
  max-width:100%; max-height:calc(100vh - 160px); object-fit:contain;
  margin:0 auto; display:block; background:#141414;
}
.lb-stage figcaption{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  font-family:var(--display); font-size:0.76rem; letter-spacing:0.2em;
  text-transform:uppercase; color:rgba(255,255,255,0.82);
}
.lb-counter{color:rgba(255,255,255,0.5); white-space:nowrap;}
.lb-close, .lb-nav{
  position:absolute; background:none; border:none; cursor:pointer; z-index:2;
  color:var(--white); line-height:1; padding:12px;
  transition:opacity .25s ease;
}
.lb-close{top:22px; right:28px; font-size:2.4rem;}
.lb-nav{top:50%; transform:translateY(-50%); font-size:3.4rem;}
.lb-prev{left:16px;}
.lb-next{right:16px;}
.lb-close:hover, .lb-nav:hover{opacity:.6;}
.lb-close:focus-visible, .lb-nav:focus-visible{outline:2px solid var(--white); outline-offset:2px;}

/* ============ AREAS ============ */
.areas{background:var(--paper-2); border-top:1px solid var(--line);}
.area-list{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  margin-top:56px; background:var(--line);
}
.area-list li{
  background:var(--paper-2); padding:26px 16px;
  font-family:var(--display); font-size:0.82rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ink-soft);
  transition:background .3s ease, color .3s ease;
}
.area-list li:hover{background:var(--ink); color:var(--white);}

/* ============ REVIEWS (dark band) ============ */
.reviews{background:var(--ink);}
.reviews h2{color:var(--white);}
.reviews .eyebrow{color:rgba(255,255,255,0.6);}
.reviews .lede{color:rgba(255,255,255,0.68);}
.reviews-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:56px; text-align:left;}
.review-card{border:1px solid var(--line-light); padding:38px 32px;}
.review-card p{margin-bottom:0; font-size:0.95rem; color:rgba(255,255,255,0.8);}
.review-card.is-placeholder{border-style:dashed; opacity:.6;}
.ph-tag{
  font-family:var(--display); font-size:0.68rem; letter-spacing:0.2em;
  text-transform:uppercase; color:rgba(255,255,255,0.55); margin-bottom:14px !important;
}

/* ============ CONSULT ============ */
.consult{background:var(--white); border-top:1px solid var(--line);}
.consult-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:90px; align-items:start;}
.contact-details{display:grid; gap:26px; margin-top:40px;}
.contact-details li{display:flex; flex-direction:column; gap:8px;}
.contact-details strong{
  font-family:var(--display); font-size:0.7rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--gray); font-weight:500;
}
.contact-details a, .contact-details span{color:var(--ink); font-size:1rem; line-height:1.6;}
.contact-details a:hover{color:var(--gray);}

.consult-form{border:1px solid var(--line); padding:clamp(30px, 4vw, 52px); background:var(--paper);}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:34px;}
.field{
  display:flex; flex-direction:column; gap:10px;
  font-family:var(--display); font-size:0.7rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--gray); font-weight:500;
}
.field.full{grid-column:1 / -1;}
.field input, .field select, .field textarea{
  font-family:var(--body); font-size:0.98rem; font-weight:400;
  padding:14px 0; border:none; border-bottom:1px solid rgba(11,11,11,0.22);
  background:transparent; color:var(--ink); letter-spacing:normal; text-transform:none;
}
.field select option{background:var(--white); color:var(--ink);}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-bottom-color:var(--ink);
}
.field textarea{resize:vertical;}
.hp-field{position:absolute; left:-9999px;}
.form-note{
  font-family:var(--display); font-size:0.7rem; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--gray); margin:20px 0 0; text-align:center;
}
.form-success{
  grid-column:1 / -1; border:1px solid var(--ink); padding:70px 40px; text-align:center;
}
.form-success h3{margin-bottom:14px;}
.form-success p{margin:0 auto;}

/* ============ FOOTER ============ */
.site-footer{background:var(--ink);}
.site-footer h4{color:var(--white);}
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:56px;
  padding-top:96px; padding-bottom:70px;
}
.footer-logo{width:210px; margin-bottom:22px;}
.footer-tag{font-size:0.9rem; max-width:34ch; color:rgba(255,255,255,0.55);}
.footer-list li{font-size:0.88rem; margin-bottom:12px; color:rgba(255,255,255,0.72);}
.footer-list a:hover{color:var(--white);}
.footer-bottom{
  border-top:1px solid var(--line-light); padding:28px 40px;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  max-width:1240px; margin:0 auto; flex-wrap:wrap;
}
.footer-bottom p{
  margin:0; font-family:var(--display); font-size:0.7rem;
  letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.5);
}

/* ============ REVEAL ============ */
/* Scoped to .js so content stays visible if the script never runs. */
.js .reveal{opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s ease;}
.js .reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1; transform:none; transition:none;}
  .hero-mono:hover img{transform:none;}
  html{scroll-behavior:auto;}
}

/* ============ RESPONSIVE ============ */
@media (max-width:1180px){
  .nav-side{gap:26px;}
  .nav-side a{font-size:0.74rem; letter-spacing:0.13em;}
  .brand img{width:240px;}
  .nav.scrolled .brand img{width:190px;}
  .nav-inner{padding:16px 40px;}
  .nav-toggle{left:40px;}
  .nav-left{margin-left:56px;}
  .about-grid, .consult-grid{gap:56px;}
}
@media (max-width:900px){
  .about-grid, .consult-grid{grid-template-columns:1fr; gap:48px;}
  .about-media img{height:400px;}
  .feature, .feature.reverse{grid-template-columns:1fr;}
  .feature-media, .feature.reverse .feature-media{order:1;}
  .feature-copy, .feature.reverse .feature-copy{order:2; padding:64px 40px;}
  .feature-media img{min-height:340px;}
  .feature-media.has-video{min-height:0; padding:44px 24px;}
  .feature-media.has-video video{width:min(100%, 300px);}
  .reviews-grid{grid-template-columns:1fr;}
  .area-list{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr; gap:44px;}
  .section-inner{padding:90px 40px;}
}
@media (max-width:720px){
  .nav-side{display:none;}
  .nav-inner{grid-template-columns:1fr; padding:16px 24px;}
  .nav-toggle{left:24px;}
  .brand img{width:200px;}
  .nav.scrolled .brand img{width:168px;}
  .nav-panel a{font-size:1rem; letter-spacing:0.2em;}
  .hero-foot{bottom:32px; gap:16px;}
  .hero-place{font-size:0.64rem; letter-spacing:0.2em;}
  .hero-mono img{width:38px;}
  .stat-row{grid-template-columns:1fr; gap:22px;}
  .feature-list{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column; text-align:center;}
  .section-inner{padding:72px 24px;}
  .hero-content{padding:0 24px;}
  .feature-copy, .feature.reverse .feature-copy{padding:56px 24px;}
  .lightbox{padding:56px 12px;}
  .lb-stage img{max-height:calc(100vh - 190px);}
  .lb-stage figcaption{flex-direction:column; align-items:flex-start; gap:6px; font-size:0.66rem;}
  .lb-nav{font-size:2.4rem; padding:8px;}
  .lb-prev{left:0;} .lb-next{right:0;}
  .lb-close{top:12px; right:12px; font-size:2rem;}
  .feature-actions{gap:12px 22px;}
}