:root{
  --bg:#F2EEE6;
  --bg-2:#E9E3D8;
  --ink:#1C1B17;
  --ink-2:#2E2C27;
  --muted:#5F5A52;
  --soft:#ADA699;
  --line:rgba(28,27,23,.85);
  --line-soft:rgba(28,27,23,.14);
  --dark:#1C1B17;
  --dark-2:#26251F;
  --on-dark:#F2EEE6;
  --on-dark-muted:rgba(242,238,230,.55);
  --line-dark:rgba(242,238,230,.28);
  --green:#3F6E49;
  --green-deep:#264D33;
  --serif:'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --sans:'Manrope', 'Helvetica Neue', Arial, sans-serif;
  /* Atollon Motion tokens: one signature curve (quart), arriving vs changing state */
  --ease:cubic-bezier(0.165,0.84,0.44,1);
  --ease-in-out:cubic-bezier(0.76,0,0.24,1);
  --dur-micro:.3s;
  --dur-hover:.6s;
  --dur-reveal:1.2s;
  --dur-transition:1.8s;
  --maxw:1440px;
  --pad:clamp(20px,4vw,64px);
  --h1:clamp(33px,3.975vw,66px);
}
*{box-sizing:border-box;}
/* Lenis smooth scroll */
html.lenis, html.lenis body{height:auto;}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip;}
.lenis.lenis-smooth iframe{pointer-events:none;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.75; font-weight:400;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; color:inherit;}
p{margin:0 0 1em; color:var(--muted);}
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; margin:0; line-height:1.06; letter-spacing:-.035em; color:inherit;}
em{font-style:normal;}
h1 em,h2 em,h3 em,.serif em,.footer-tagline em,.success-msg em{font-style:normal; font-weight:300; color:var(--green-deep);}
.on-dark h1 em,.on-dark h2 em,.cta-image h2 em,.footer-tagline em{color:inherit; opacity:.55;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);}
.caps{}
.label{
  font-family:var(--sans); font-size:13px; letter-spacing:.01em; 
  font-weight:500; color:var(--ink);
}
.brand-dot{display:inline-block; width:.14em; height:.14em; border-radius:50%; background:var(--green); margin-left:.04em; vertical-align:baseline;}

/* ---------- Links & buttons ---------- */
.link-line{
  font-family:var(--sans); font-weight:600; font-size:17px; color:var(--ink);
  display:inline-block; position:relative; padding-bottom:2px; line-height:1.2;
}
.link-line::after{content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform-origin:right; transition:transform var(--dur-hover) var(--ease);}
.link-line:hover::after{transform:scaleX(0);}
.link-line:hover{color:var(--green);}
.on-dark .link-line{color:var(--on-dark);}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  font-family:var(--sans); font-size:13px; letter-spacing:.01em; font-weight:600;
  padding:18px 34px; border:1px solid var(--green); border-radius:100px; background:var(--green); color:#fff;
  position:relative; overflow:hidden; isolation:isolate; transition:color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease); --fill:var(--green-deep);
  white-space:nowrap;
}
.btn::before{content:''; position:absolute; inset:0; background:var(--green-deep); transform:translateY(101%); transition:transform var(--dur-hover) var(--ease); z-index:-1; border-radius:inherit;}
/* JS rollover (directional fill + label swap) replaces the CSS fill once motion is running */
.motion-ready .btn::before{display:none;}
.btn-label-mask{position:relative; display:inline-flex; clip-path:inset(0 -12px -0.086em -12px);}
/* The label swap is the hover motion here; the arrow nudge on top of it reads as a double move */
.motion-ready .btn:hover .arrow{transform:none;}
.btn-label{display:inline-flex; align-items:center; gap:14px;}
.btn:hover{color:#fff; border-color:var(--green-deep);}
.btn:hover::before{transform:translateY(0);}
.btn-light{border-color:var(--on-dark); background:transparent; color:var(--on-dark); --fill:var(--on-dark);}
.btn-light::before{background:var(--on-dark);}
.btn-light:hover{color:var(--ink); border-color:var(--on-dark);}
.arrow{width:38px; height:12px; flex-shrink:0; transition:transform var(--dur-hover) var(--ease);}
.btn:hover .arrow, a:hover > .arrow{transform:translateX(6px);}

/* ---------- Header ---------- */
header.site-header{position:fixed; top:0; left:0; right:0; z-index:1000; transition:background var(--dur-hover) var(--ease-in-out), transform var(--dur-hover) var(--ease-in-out);}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding-top:26px; padding-bottom:26px; transition:padding var(--dur-hover) var(--ease-in-out);}
header.scrolled{background:rgba(242,238,230,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);}
header.scrolled .header-inner{padding-top:14px; padding-bottom:14px;}
header.hide{transform:translateY(-100%);}
.logo-img{height:22px; width:auto;}
.header-nav{display:flex; align-items:center; gap:clamp(20px,2.6vw,38px);}
.header-link{font-size:13px; letter-spacing:.01em; font-weight:500; position:relative; color:var(--muted); transition:color var(--dur-hover) var(--ease);}
.header-link::after{content:''; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right center; transition:transform var(--dur-hover) var(--ease);}
.header-link:hover{color:var(--green);}
.header-link:hover::after{transform:scaleX(1.01); transform-origin:left center;}
.header-link.active{color:var(--green);}
.header-link.active::after{transform:scaleX(1.01); transform-origin:left center;}

.logo-light{display:none;}
body.on-hero header:not(.scrolled) .logo-dark{display:none;}
body.on-hero header:not(.scrolled) .logo-light{display:block;}
body.on-hero header:not(.scrolled) .header-link{color:rgba(255,255,255,.75);}
body.on-hero header:not(.scrolled) .header-link:hover,
body.on-hero header:not(.scrolled) .header-link.active{color:#fff;}

/* ---------- Pages ---------- */
.page{display:none;}
.page.active{display:block;}

/* Motion (assets/js/motion.js). Content renders without JS; JS sets the hidden
   state, so only intro elements are pre-hidden, and only once motion is confirmed. */
.line-mask{display:block; padding-bottom:.06em;}
.line-mask > span{display:block;}
.motion-ready [data-motion-hidden]{opacity:0;}
/* SplitText masks: clip the incoming glyphs but let descenders hang below the line */
.split-char-mask,.split-word-mask,.split-line-mask{overflow:visible !important; clip-path:inset(0 0 -0.086em 0);}
.split-line-mask{display:block;}
.curtain{position:fixed; inset:0; z-index:1400; background:var(--green-deep); transform:translateY(100%); pointer-events:none; visibility:hidden;}
/* Covers the first paint so the load can open with the same green swipe as page changes */
.motion-ready .curtain.is-loading{transform:none; visibility:visible;}

/* Image treatment */
.img-frame{position:relative; overflow:hidden; background:var(--bg-2);}
.img-frame img{width:100%; height:100%; object-fit:cover; filter:saturate(.72) contrast(.96) brightness(1.02);}
.img-frame::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(242,238,230,.04), rgba(120,100,80,.08)); pointer-events:none;}
.img-caption{font-size:12.5px; letter-spacing:.01em;  color:var(--muted); margin-top:14px; display:flex; flex-direction:column; gap:2px; max-width:270px;}

section{position:relative;}
.pad-xl{padding:clamp(90px,12vw,190px) 0;}
.pad-xl.flush-bottom{padding-bottom:0;}
.pad-xl.flush-top{padding-top:0;}
.pad-l{padding:clamp(70px,9vw,140px) 0;}
.on-dark{background:var(--dark); color:var(--on-dark);}
.on-dark.on-green{background:var(--green-deep);}
.on-green .mixed-title, .on-green .mixed-title em{color:#fff; opacity:1;}
.on-dark p{color:var(--on-dark-muted);}
.on-dark .label{color:var(--on-dark);}

/* ---------- Home hero ---------- */
.hero{padding-top:150px; min-height:100vh; display:flex; align-items:center; position:sticky; top:0; overflow:hidden; color:#fff; background:var(--dark);}
/* The banner stays pinned and the rest of the page scrolls up over it. :where() keeps the
   default background at zero specificity so .on-dark, .on-green etc. still win. */
.hero ~ *{position:relative; z-index:1;}
:where(.hero ~ *){background:var(--bg);}
.hero-bg{position:absolute; inset:0;}
.hero-bg::after{background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0) 30%), linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,.2) 70%);}
.hero-content{position:relative; z-index:1; width:100%; padding-bottom:60px;}
.hero-content > div{max-width:760px;}
.hero h1{font-size:var(--h1); line-height:1.02;}
.hero h1 em{display:inline; color:rgba(255,255,255,.65);}
.hero-sub{display:grid; grid-template-columns:auto 1fr; gap:28px; margin-top:48px; align-items:start; max-width:560px;}
.hero-sub .label{padding-top:5px; white-space:nowrap;}
.hero-sub p{font-size:16px; margin:0; color:var(--muted);}
.hero-lede{font-size:clamp(17px,1.35vw,21px); line-height:1.6; max-width:540px; margin:40px 0 0; color:rgba(255,255,255,.85);}

/* Statement */
.statement{font-family:var(--serif); font-weight:300; font-size:clamp(26px,3vw,46px); line-height:1.25; letter-spacing:-.025em; color:var(--muted); max-width:1040px; margin:0 auto;}
.statement strong{font-weight:500; color:var(--ink);}
.two-col-text{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,90px); max-width:1040px; margin:clamp(50px,6vw,90px) auto 0;}
.two-col-text p{font-size:15.5px;}

/* Marquee strip */
.marquee{border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; display:flex; align-items:stretch;}
.marquee-label{flex-shrink:0; padding:0 40px 0 var(--pad); background:var(--bg); position:relative; z-index:2; display:flex; align-items:center; border-right:1px solid var(--line-soft);}
.marquee-viewport{overflow:hidden; flex:1; padding:15px 0;}
.marquee-track{display:flex; gap:30px; flex-shrink:0; white-space:nowrap; padding-left:30px;}
.marquee-track span{font-family:var(--serif); font-size:clamp(13px,1.3vw,20px);  font-weight:300; display:flex; align-items:center; gap:30px;}
.marquee-track span::after{content:''; width:5px; height:5px; border-radius:50%; background:var(--green); display:inline-block;}

/* Section titles (mixed) */
.mixed-title{font-size:var(--h1); line-height:1.02;}
.mixed-title em{display:block;}
.mixed-title.indent .caps-part{display:block;}
.title-row{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:clamp(50px,7vw,100px);}
.title-row p{max-width:460px; margin:0 0 10px; font-size:15.5px;}

/* Service rows */
.service-list{border-top:1px solid var(--line-dark);}
.service-row{display:grid; grid-template-columns:1.1fr 1fr; gap:30px; align-items:start; padding:34px 0; border-bottom:1px solid var(--line-dark);}
.service-row h3{font-size:clamp(15px,1.55vw,24px);}
.service-row p{margin:0; font-size:15px; max-width:480px;}
.light-list{border-top:1px solid var(--line);}
.light-list .service-row{border-bottom:1px solid var(--line-soft);}
.light-list .service-row p{color:var(--muted);}

/* What sets us apart: compact bordered row, heading and tagline only */
.apart-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.apart-item{padding:28px clamp(20px,2.4vw,36px) 32px; border-right:1px solid var(--line-soft);}
.apart-item:last-child{border-right:none;}
.apart-item h3{font-size:clamp(20px,1.8vw,28px); margin-bottom:12px;}
.apart-item p{font-size:15px; margin:0;}
.centered-head{margin:0 0 clamp(50px,6vw,90px); max-width:900px;}
.centered-head h2{font-size:var(--h1); line-height:1.02;}
.centered-head p{margin:26px 0 0; max-width:620px; font-size:15.5px;}

/* CTA with image */
.cta-image{background:#2b2a27; position:relative; min-height:88vh; display:flex; align-items:center; overflow:hidden; color:#fff;}
.cta-image > img{position:absolute; left:0; top:-10%; width:100%; height:120%; object-fit:cover; filter:saturate(.65) brightness(.72);}
.cta-image .container{position:relative; z-index:2; width:100%;}
.cta-image h2{font-size:var(--h1); line-height:1.02; margin-bottom:50px;}
.cta-image h2 em{display:block;}
.cta-image p{color:rgba(255,255,255,.75); max-width:440px;}
.cta-plain{text-align:left;}

/* CTA box (end of home) */
.cta-box{background:var(--bg-2); padding:clamp(40px,6vw,90px); display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(30px,5vw,90px); align-items:end;}
.cta-box h2{font-size:var(--h1); line-height:1.02;}
.cta-box p{font-size:15.5px; max-width:420px; margin:0 0 30px;}
.cta-plain h2{font-size:clamp(50px,8vw,130px);  line-height:.92; margin:0 0 50px; max-width:1200px;}

/* ---------- Inner page hero ---------- */
.page-hero{padding-top:clamp(160px,18vw,230px); padding-bottom:clamp(50px,6vw,90px);}
.page-hero .label{display:flex; align-items:center; gap:14px; margin-bottom:34px;}
.page-hero .label::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--green);}
.page-hero h1{font-size:var(--h1); line-height:1.02; max-width:1250px;}
.page-hero-foot{display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:clamp(40px,5vw,70px);}
.page-hero-foot p{font-size:17px; max-width:520px; margin:0;}

/* ---------- Who we are ---------- */
.story-grid{display:grid; grid-template-columns:auto 1fr; gap:clamp(34px,5vw,80px); align-items:start;}
.story-photo{aspect-ratio:4/5; max-width:270px;}
.story-photo img{object-position:center 20%;}
.story-text h2{font-size:var(--h1); margin:22px 0 40px; line-height:1.02;}
.story-text p{font-size:15.5px; max-width:580px;}
.pullquote{font-family:var(--serif); font-weight:300; font-size:clamp(19.5px,1.8vw,27px) !important; line-height:1.25; color:var(--on-dark) !important; margin:38px 0 !important; padding-left:28px; border-left:1px solid var(--green);}

/* ---------- FAQ ---------- */
.faq-grid{display:grid; grid-template-columns:1fr 1.6fr; gap:clamp(40px,6vw,100px); align-items:start;}
.faq-grid h2{font-size:var(--h1); line-height:1.02; position:sticky; top:120px;}
.faq-list{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line-soft);}
.faq-q{width:100%; background:none; border:none; text-align:left; padding:30px 0; display:flex; justify-content:space-between; align-items:center; gap:24px; font-family:var(--serif); font-size:clamp(15px,1.55vw,24px); font-weight:400; letter-spacing:-.035em; line-height:1.2;}
.faq-q:hover span:first-child{color:var(--green);}
.plus{width:18px; height:18px; position:relative; flex-shrink:0;}
.plus::before,.plus::after{content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--ink); transition:transform var(--dur-micro) var(--ease-in-out);}
.plus::after{transform:rotate(90deg);}
.faq-item.open .plus::after{transform:rotate(0);}
.faq-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur-hover) var(--ease-in-out);}
.faq-item.open .faq-a{grid-template-rows:1fr;}
.faq-a-inner{overflow:hidden; color:var(--muted); font-size:15.5px; max-width:640px;}
.faq-a-inner > div{padding:0 0 32px;}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(40px,7vw,120px); align-items:start;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:40px;}
.form-group{margin-bottom:38px; position:relative;}
.form-group label{display:block; font-size:12.5px; letter-spacing:.01em;  font-weight:500; margin-bottom:6px;}
.form-group input,.form-group textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--line-soft); padding:12px 0;
  font-family:var(--serif); font-size:13px; font-weight:300; color:var(--ink); border-radius:0; outline:none; transition:border-color var(--dur-micro) var(--ease);
}
.form-group textarea{resize:vertical; min-height:130px; line-height:1.3;}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--muted); opacity:1;}
.form-group input:focus,.form-group textarea:focus{border-bottom-color:var(--ink);}
.form-group.error input,.form-group.error textarea{border-bottom-color:#A23B2A;}
.choice-group{border:none; padding:0; margin-inline:0; min-width:0;}
.choice-group legend{padding:0; font-size:12.5px; letter-spacing:.01em; font-weight:500; margin-bottom:14px;}
.choices{display:flex; gap:34px; flex-wrap:wrap;}
.form-group .choice{display:inline-flex; align-items:center; gap:12px; cursor:pointer; font-size:15px; font-weight:400; margin:0;}
.form-group .choice input{appearance:none; -webkit-appearance:none; margin:0; padding:0; width:18px; height:18px; flex-shrink:0; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; cursor:pointer; transition:border-color var(--dur-micro) var(--ease);}
.choice input::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--green); transform:scale(0); transition:transform var(--dur-micro) var(--ease);}
.form-group .choice input:checked{border-color:var(--green);}
.choice input:checked::before{transform:scale(1);}
.choice input:focus-visible{outline:2px solid var(--green); outline-offset:3px;}
.form-group.choice-group.error .choice input{border-color:#A23B2A;}
.form-error{font-size:14px; margin-top:24px; max-width:460px; color:#A23B2A;}
.form-error a{text-decoration:underline;}
.btn:disabled{opacity:.6; cursor:progress;}
/* Honeypot: off-screen rather than display:none, which some bots skip */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.form-note{font-size:13px; margin-top:24px; max-width:460px;}
.success-msg{display:none; font-family:var(--serif); font-size:30px; font-weight:300; line-height:1.2; padding:30px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:40px;}
.success-msg em{color:var(--green);}
.success-msg.show{display:block;}
.contact-row{border-top:1px solid var(--line); padding:22px 0; display:grid; grid-template-columns:120px 1fr; gap:20px; align-items:baseline;}
.contact-row:last-child{border-bottom:1px solid var(--line);}
.contact-row a,.contact-row span.v{font-family:var(--serif); font-size:26px; font-weight:300; line-height:1.2;}
.contact-row a:hover{color:var(--green);}

/* ---------- Footer ---------- */
footer{background:var(--dark); color:var(--on-dark); padding:clamp(70px,8vw,110px) 0 30px;}
.footer-top{display:grid; grid-template-columns:1.4fr auto; gap:40px; align-items:start; padding-bottom:clamp(50px,6vw,80px);}
.footer-mark{margin-bottom:26px;}
.footer-mark img{height:26px; width:auto; display:block; opacity:.96;}
.footer-tagline{font-family:var(--serif); font-weight:300; font-size:clamp(17px,1.7vw,27px); line-height:1.2; max-width:460px; color:#fff;}
.footer-tagline em{opacity:1;}
.footer-col .label{color:var(--on-dark-muted); display:block; margin-bottom:22px;}
.footer-col a,.footer-col p{display:block; color:var(--on-dark); font-size:15px; margin:0 0 10px; transition:color var(--dur-hover) var(--ease);}
.footer-col a:hover{color:var(--soft);}
.footer-bottom{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; border-top:1px solid var(--line-dark); padding-top:28px; font-size:12.5px; letter-spacing:.01em;  color:var(--on-dark-muted);}
.to-top{background:none; border:none; padding:0; font-size:12.5px; letter-spacing:.01em;  color:var(--on-dark-muted);}
.to-top:hover{color:var(--on-dark);}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .hero{min-height:80vh;}
  .faq-grid, .story-grid, .contact-grid{grid-template-columns:1fr;}
  .faq-grid h2{position:static;}
  .cta-box{grid-template-columns:1fr;}
}
@media (max-width:720px){
  body{font-size:15px;}
  :root{--h1:7.2vw;}
  .cta-plain h2{font-size:9.6vw;}
  .hero-content > *{min-width:0;}
  .hero-bg::after{background:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.35));}
  .header-nav{gap:18px;}
  .header-link{font-size:12.5px;}
  .hero{padding-top:120px;}
  .hero-sub{grid-template-columns:1fr; gap:12px;}
  .two-col-text{grid-template-columns:1fr; gap:10px;}
  .title-row, .page-hero-foot{grid-template-columns:1fr;}
  .apart-item{border-right:none;}
  .apart-item + .apart-item{border-top:1px solid var(--line-soft);}
  .service-row{grid-template-columns:1fr; gap:12px; padding:28px 0;}
  .form-row{grid-template-columns:1fr; gap:0;}
  .form-group input,.form-group textarea{font-size:16px;}
  .contact-row{grid-template-columns:1fr; gap:4px;}
  .footer-top{grid-template-columns:1fr; gap:34px;}
  .marquee{flex-direction:column;}
  .marquee-label{padding:20px var(--pad) 0; border-right:none;}
  .marquee-viewport{padding:7px 0 12px;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important;}
  .motion-ready [data-motion-hidden]{opacity:1;}
}