
:root{
  --cream:#f1ecdf;
  --cream-strong:#ebe4d6;
  --ink:#101012;
  --ink-soft:#25262d;
  --dark:#090b11;
  --dark-soft:#141722;
  --line:rgba(16,16,18,.12);
  --line-dark:rgba(255,255,255,.12);
  --coral:#ff6b57;
  --coral-deep:#ff5a45;
  --blue:#4d6fff;
  --blue-soft:#6f87ff;
  --gold:#cba960;
  --white:#ffffff;
  --radius:28px;
  --radius-sm:18px;
  --shadow:0 16px 60px rgba(12,14,20,.09);
  --shadow-strong:0 16px 50px rgba(0,0,0,.22);
  --container: min(1240px, calc(100vw - 48px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:"Manrope", Arial, sans-serif; color:var(--ink); background:var(--cream); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
a{text-decoration:none; color:inherit}
img{display:block; max-width:100%}
button,input,select,textarea{font:inherit}
button{border:0; background:none; cursor:pointer}
textarea{resize:vertical; min-height:160px}
main{overflow:hidden}
.container{width:var(--container); margin:0 auto}
.eyebrow{display:inline-block; font-size:11px; line-height:1; letter-spacing:.24em; text-transform:uppercase; font-weight:800; color:var(--ink); margin-bottom:20px}
.eyebrow.dark{color:var(--dark)}
h1,h2,h3{margin:0; font-family:"Instrument Serif", Georgia, serif; font-weight:400; line-height:.95; letter-spacing:-.03em}
h1{font-size:clamp(3.5rem,7vw,7.4rem)}
h2{font-size:clamp(2.4rem,5vw,4.8rem)}
h3{font-size:clamp(1.6rem,2.6vw,2.2rem)}
p{margin:0; font-size:1.08rem; line-height:1.72; color:#2a2c33}
strong{font-weight:800; color:var(--ink)}
.section-space{padding:110px 0}
.reveal{opacity:0; transform:translateY(24px); transition:opacity .75s ease, transform .75s ease; will-change:opacity, transform}
.reveal.visible{opacity:1; transform:none}
.reveal.delay-1{transition-delay:.1s}
.reveal.delay-2{transition-delay:.18s}

/* Header */
.site-header{position:fixed; top:0; left:0; right:0; z-index:80; padding:14px 0; pointer-events:none}
.site-header *{pointer-events:auto}
.header-shell{position:relative; width:var(--container); margin:0 auto; min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:10px 14px 10px 18px; border:1px solid rgba(255,255,255,.14); background:rgba(8,9,14,.84); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-radius:22px; box-shadow:0 18px 55px rgba(0,0,0,.20); transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.site-header.is-scrolled .header-shell{background:rgba(8,9,14,.96); border-color:rgba(255,255,255,.20); box-shadow:0 16px 45px rgba(0,0,0,.28)}
.brand-link{display:flex; align-items:center; flex:0 0 auto}
.logo-main{display:block; width:218px; height:auto}
.logo-footer{display:block; width:228px; height:auto}
.main-nav{display:flex; align-items:center; justify-content:center; gap:26px; margin-left:auto; color:rgba(255,255,255,.76); font-size:14px; font-weight:700}
.main-nav a{position:relative; display:block; padding:12px 0; white-space:nowrap; transition:color .16s ease}
.main-nav a::after{content:""; position:absolute; left:0; right:0; bottom:4px; height:2px; border-radius:999px; background:var(--coral); transform:scaleX(0); transform-origin:left; transition:transform .16s ease}
.main-nav a:hover,.main-nav a.active{color:#fff}
.main-nav a:hover::after,.main-nav a.active::after{transform:scaleX(1)}
.header-actions{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.menu-toggle{display:none; width:46px; height:46px; border-radius:15px; background:rgba(255,255,255,.07); align-items:center; justify-content:center; flex-direction:column; gap:6px; border:1px solid rgba(255,255,255,.08)}
.menu-toggle span{display:block; width:19px; height:2px; border-radius:999px; background:#fff; transition:transform .16s ease,opacity .16s ease}
.site-header.menu-open .menu-toggle span:first-child{transform:translateY(4px) rotate(45deg)}
.site-header.menu-open .menu-toggle span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:56px; padding:0 28px; border-radius:18px; font-weight:800; font-size:15px; letter-spacing:-.01em; transition:transform .16s ease, background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease; will-change:transform; white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-coral{background:var(--coral); color:#fff; box-shadow:0 12px 28px rgba(255,107,87,.24)}
.btn-coral:hover{background:var(--coral-deep)}
.btn-outline{border:1px solid rgba(255,255,255,.44); color:#fff}
.btn-outline:hover{background:rgba(255,255,255,.08)}
.btn-outline-dark{border:1px solid rgba(16,16,18,.18); color:var(--ink)}
.btn-outline-dark:hover{background:#fff}
.btn-dark{background:var(--ink); color:#fff}
.btn-dark:hover{background:#1b1d24}
.btn-small{min-height:48px; padding:0 22px; border-radius:16px}
.btn-full,.btn-full-mobile{width:100%}
.text-link{padding:0; font-size:15px; font-weight:800; color:var(--coral)}
.text-link:hover{color:var(--coral-deep)}

/* Home Hero */
.home-hero{position:relative; min-height:860px; padding:170px 0 100px; background:#04050a; color:#fff}
.hero-media-wrap{position:absolute; inset:0; overflow:hidden}
.hero-media-img{width:100%; height:100%; object-fit:cover; opacity:.95}
.home-hero::after{content:""; position:absolute; inset:auto 0 0; height:250px; background:linear-gradient(180deg, rgba(4,5,10,0) 0%, rgba(4,5,10,.55) 55%, rgba(4,5,10,.74) 100%)}
.hero-layout{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(320px, .7fr); gap:50px; align-items:end}
.hero-copy-block h1{margin-bottom:26px; color:#fff}
.hero-copy-block h1 em{font-style:italic; color:var(--coral)}
.hero-copy-block p{max-width:640px; color:rgba(255,255,255,.82); font-size:1.18rem}
.hero-actions-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
.hero-cue-list{align-self:end; display:grid; gap:0; border-left:1px solid rgba(255,255,255,.18); padding-left:22px}
.cue-item{display:grid; grid-template-columns:42px 1fr; align-items:center; gap:14px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.92)}
.cue-item span{font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:800; color:var(--coral)}
.cue-item b{font-weight:700}
.signal-band{background:var(--coral); padding:26px 0}
.signal-band-inner{display:grid; grid-template-columns:220px 1fr; align-items:start; gap:24px}
.signal-band p{font-family:"Instrument Serif", Georgia, serif; color:var(--ink); font-size:clamp(2.1rem,4.4vw,3.9rem); line-height:1.02}

/* Overview */
.overview-grid{display:grid; grid-template-columns:minmax(280px, .75fr) minmax(0, 1.1fr); gap:70px; align-items:start}
.overview-right{display:grid; gap:22px}
.overview-visual{margin-top:18px; border-radius:26px; overflow:hidden; box-shadow:var(--shadow)}
.featured-services-grid{display:grid; grid-template-columns:minmax(280px, .85fr) minmax(0, 1.15fr); gap:34px; align-items:start}
.services-side{position:sticky; top:110px; display:grid; gap:20px}
.services-spot-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px}
.service-spot{background:rgba(255,255,255,.55); border:1px solid var(--line); border-radius:26px; padding:26px; box-shadow:var(--shadow); display:grid; gap:18px}
.service-spot-top{display:flex; justify-content:space-between; gap:18px; font-size:12px; text-transform:uppercase; letter-spacing:.18em; font-weight:800; color:#7f7a70}
.service-spot h3{font-size:2rem}
.service-spot p{font-size:1rem}
.process-preview-grid{display:grid; grid-template-columns:minmax(0, 1fr) minmax(350px,.8fr); gap:50px; align-items:center}
.process-image img{border-radius:28px; box-shadow:var(--shadow)}
.phase-tabs{display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 22px}
.phase-tabs button{padding:14px 18px; border-radius:999px; border:1px solid var(--line); background:#fff; font-weight:800; color:#6a675d; transition:background .16s ease, color .16s ease, border-color .16s ease}
.phase-tabs button.active{background:var(--ink); color:#fff; border-color:var(--ink)}
.phase-panels{position:relative; min-height:160px}
.phase-panel{display:none}
.phase-panel.active{display:block}
.phase-panel h3{margin-bottom:12px}
.quote-section-grid{display:grid; grid-template-columns:minmax(0, 1fr) minmax(280px,.6fr); gap:22px}
.quote-card{background:var(--ink); color:#fff; border-radius:30px; padding:40px; display:grid; gap:18px; box-shadow:var(--shadow)}
.quote-card p{color:#fff; font-family:"Instrument Serif", Georgia, serif; font-size:clamp(2rem,3.8vw,3.4rem); line-height:.98}
.quote-mark{font-family:"Instrument Serif", Georgia, serif; font-size:88px; line-height:.7; color:var(--coral)}
.quote-label{font-size:12px; text-transform:uppercase; letter-spacing:.18em; color:rgba(255,255,255,.66); font-weight:800}
.quote-stack{display:grid; gap:18px}
.quote-stack article{background:#fff; border:1px solid var(--line); border-radius:26px; padding:28px; box-shadow:var(--shadow)}
.quote-stack article p{font-size:1.28rem; line-height:1.45; color:var(--ink)}
.cta-shell{background:#fff; border:1px solid var(--line); border-radius:34px; padding:42px; display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:28px; align-items:center; box-shadow:var(--shadow)}
.cta-shell.dark-shell{background:var(--ink); border-color:var(--line-dark)}
.cta-shell.dark-shell h2,.cta-shell.dark-shell p,.cta-shell.dark-shell .eyebrow{color:#fff}
.cta-actions{display:flex; flex-wrap:wrap; gap:14px}

/* Page Hero */
.page-hero{padding:165px 0 64px}
.page-hero-compact{padding-bottom:24px}
.page-hero-grid{display:grid; grid-template-columns:minmax(0, 1fr) minmax(280px, .55fr); gap:42px; align-items:end}
.page-hero-note{padding-bottom:12px}
.page-hero-note p{font-size:1.15rem}
.about-intro-grid h1,.services-intro-grid h1,.contact-intro-grid h1,.approach-grid-intro h1,.reviews-hero h1{max-width:900px}
.two-col-grid{display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.05fr); gap:46px; align-items:center}
.two-col-grid img{border-radius:28px; box-shadow:var(--shadow)}
.fact-table{margin-top:28px; display:grid; gap:0; border-top:1px solid var(--line)}
.fact-table div{display:flex; justify-content:space-between; gap:24px; padding:18px 0; border-bottom:1px solid var(--line)}
.fact-table span{font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:#8a8479}
.fact-table b{font-weight:800}
.principles-grid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.1fr); gap:40px}
.principles-list{display:grid; gap:18px}
.principles-list article{background:#fff; border:1px solid var(--line); border-radius:26px; padding:28px; box-shadow:var(--shadow)}
.principles-list article h3{margin-bottom:10px}
.split-visuals-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0, .72fr); gap:16px; align-items:end}
.visual-frame{border-radius:28px; overflow:hidden; box-shadow:var(--shadow); background:#fff}
.visual-frame.dark{background:var(--ink)}
.scope-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
.scope-column{background:#fff; border:1px solid var(--line); border-radius:28px; padding:34px; box-shadow:var(--shadow)}
.scope-column h3{margin:0 0 14px}

/* Services */
.services-page-grid{display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr); gap:34px; align-items:start}
.services-sticky{position:sticky; top:110px; display:grid; gap:20px}
.sticky-note{background:#fff; border:1px solid var(--line); border-radius:22px; padding:22px; color:#57554e; box-shadow:var(--shadow)}
.services-stack{display:grid; gap:16px}
.service-panel{background:#fff; border:1px solid var(--line); border-radius:30px; padding:28px 30px; box-shadow:var(--shadow)}
.service-panel:nth-child(2n){background:linear-gradient(180deg, #fff 0%, #fffaf5 100%)}
.service-panel-meta{display:flex; justify-content:space-between; gap:18px; font-size:12px; text-transform:uppercase; letter-spacing:.18em; font-weight:800; color:#7f7a70; margin-bottom:18px}
.service-panel-body{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:26px; align-items:center}
.service-panel h2{font-size:2.35rem; margin-bottom:10px}
.service-panel p{max-width:720px}
.service-panel-action{display:flex; align-items:center}

/* Approach */
.approach-hero{padding-top:92px}
.approach-hero-top{height:min(46vh,460px); overflow:hidden}
.approach-hero-top img{width:100%; height:100%; object-fit:cover; display:block}
.approach-detail-grid{display:grid; grid-template-columns:220px minmax(0,1fr); gap:48px}
.phase-index{position:sticky; top:110px; align-self:start; display:grid; gap:0}
.phase-index a{padding:14px 0; border-bottom:1px solid var(--line); font-size:14px; font-weight:800; letter-spacing:.08em}
.phase-detail-stack{display:grid; gap:78px}
.phase-detail img{margin-top:28px; border-radius:26px; box-shadow:var(--shadow)}
.phase-detail p{max-width:920px}

/* Reviews */
.reviews-main-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(300px,.7fr); gap:30px; align-items:center}
.reviews-visual img{border-radius:28px; box-shadow:var(--shadow)}
.reviews-feature{background:#fff; border:1px solid var(--line); border-radius:30px; padding:36px; box-shadow:var(--shadow)}
.reviews-feature blockquote{margin:12px 0 18px; font-family:"Instrument Serif", Georgia, serif; font-size:clamp(2.2rem,4.4vw,4.2rem); line-height:.98; color:var(--ink)}
.review-meta{font-size:14px; color:#736f64}
.review-strip-layout{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.review-strip{background:#fff; border:1px solid var(--line); border-radius:26px; padding:28px; box-shadow:var(--shadow)}
.review-strip p{font-size:1.2rem; line-height:1.55}

/* Contact */
.contact-page-grid{display:grid; grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr); gap:28px; align-items:start}
.contact-card{background:var(--ink); color:#fff; border-radius:30px; padding:34px; box-shadow:var(--shadow)}
.contact-card .eyebrow,.contact-card h2,.contact-card p,.contact-card span,.contact-card b{color:#fff}
.contact-lines{display:grid; gap:18px; margin:26px 0}
.contact-lines div{display:grid; gap:6px; padding:0 0 18px; border-bottom:1px solid rgba(255,255,255,.12)}
.contact-lines span{font-size:12px; text-transform:uppercase; letter-spacing:.18em; font-weight:800; color:rgba(255,255,255,.68)}
.contact-note{color:rgba(255,255,255,.8)}
.contact-form-page{background:#fff; border:1px solid var(--line); border-radius:30px; padding:30px; box-shadow:var(--shadow)}

/* Forms + Modal */
.modal{position:fixed; inset:0; display:none; z-index:100}
.modal.open{display:block}
.modal-overlay{position:absolute; inset:0; background:rgba(7,8,12,.72); backdrop-filter:blur(8px)}
.modal-panel{position:relative; z-index:1; width:min(1080px, calc(100vw - 28px)); max-height:min(900px, calc(100vh - 28px)); margin:14px auto; border-radius:30px; overflow:auto; background:#fff; box-shadow:0 28px 90px rgba(0,0,0,.28); display:grid; grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr)}
.modal-side{background:linear-gradient(180deg, #0b0d13 0%, #121521 100%); color:#fff; padding:30px; position:relative; display:grid; align-content:start; gap:20px}
.modal-side .eyebrow,.modal-side h2,.modal-side p{color:#fff}
.modal-close{position:absolute; top:18px; right:18px; width:42px; height:42px; border-radius:14px; background:rgba(255,255,255,.08); color:#fff; font-size:28px; line-height:1}
.modal-selected{padding:18px 18px 20px; border-radius:20px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); font-weight:700; color:rgba(255,255,255,.92)}
.modal-points{list-style:none; padding:0; margin:0; display:grid; gap:10px; color:rgba(255,255,255,.78)}
.modal-points li::before{content:"•"; color:var(--coral); margin-right:10px}
.modal-form-wrap{padding:30px}
.form-row{display:grid; gap:16px; margin-bottom:16px}
.form-row.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.field{display:grid; gap:8px}
.field span{font-size:13px; font-weight:800; color:#4d4b45}
.field input,.field select,.field textarea{width:100%; min-height:56px; padding:0 16px; border-radius:18px; border:1px solid rgba(16,16,18,.12); background:#fbfaf8; color:var(--ink); outline:none; transition:border-color .16s ease, box-shadow .16s ease}
.field textarea{padding:16px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(77,111,255,.48); box-shadow:0 0 0 4px rgba(77,111,255,.10)}
.field.full{margin-bottom:16px}
.form-footer{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.form-status{font-size:14px; font-weight:700; min-height:24px; color:#2f6950}
.form-status.error{color:#a6322e}
.form-note{font-size:13px; color:#6e6a62; margin-top:16px}
.honeypot{position:absolute; left:-9999px; opacity:0; pointer-events:none}

/* Footer */
.site-footer{background:var(--dark); color:#fff; padding:72px 0 30px}
.footer-grid{display:grid; grid-template-columns:minmax(0,1.2fr) repeat(2, minmax(180px,.5fr)); gap:42px; align-items:start}
.footer-brand p{color:rgba(255,255,255,.76); max-width:520px; margin-top:18px}
.footer-col{display:grid; gap:10px}
.footer-title{font-size:12px; text-transform:uppercase; letter-spacing:.18em; font-weight:800; color:rgba(255,255,255,.58); margin-bottom:8px}
.footer-col a{color:rgba(255,255,255,.88); transition:color .16s ease}
.footer-col a:hover{color:var(--coral)}
.footer-bottom{margin-top:34px; padding-top:18px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; color:rgba(255,255,255,.6); font-size:14px}

/* Legal */
.legal-wrap{max-width:980px; display:grid; gap:22px}
.legal-wrap h2{font-size:clamp(2.2rem,4vw,3.6rem); margin-top:4px}
.legal-wrap h3{font-size:1.5rem; margin-top:10px}
.legal-wrap ul{margin:0; padding-left:20px; display:grid; gap:10px}
.legal-wrap li{line-height:1.7; color:#2a2c33}

/* Responsive */
@media (max-width: 1120px){
  .hero-layout,.overview-grid,.featured-services-grid,.process-preview-grid,.quote-section-grid,.page-hero-grid,.two-col-grid,.principles-grid,.contact-page-grid,.reviews-main-grid,.services-page-grid,.approach-detail-grid,.footer-grid{grid-template-columns:1fr}
  .services-side,.services-sticky,.phase-index{position:static}
  .hero-cue-list{max-width:520px}
  .services-spot-grid,.review-strip-layout,.scope-grid{grid-template-columns:1fr 1fr}
  .service-panel-body,.cta-shell{grid-template-columns:1fr}
  .service-panel-action{justify-content:flex-start}
}
@media (max-width: 920px){
  .signal-band-inner{grid-template-columns:1fr}
  .split-visuals-grid,.services-spot-grid,.review-strip-layout,.scope-grid,.form-row.two{grid-template-columns:1fr}
  .home-hero{padding-top:150px; min-height:780px}
  .page-hero{padding-top:150px}
  .approach-hero{padding-top:88px}
  .modal-panel{grid-template-columns:1fr}
}
@media (max-width: 680px){
  :root{--container:min(100vw - 28px, 1240px)}
  .site-header{padding-top:10px}
  .header-shell{border-radius:20px; padding:10px 14px}
  .logo-main{width:180px}
  h1{font-size:clamp(3rem,14vw,4.8rem)}
  h2{font-size:clamp(2.1rem,11vw,3.4rem)}
  .section-space{padding:84px 0}
  .hero-actions-row,.cta-actions,.form-footer{flex-direction:column; align-items:stretch}
  .cta-shell,.contact-card,.contact-form-page,.reviews-feature,.service-panel,.quote-card,.scope-column,.principles-list article,.quote-stack article,.service-spot{padding:24px}
  .hero-cue-list{padding-left:16px}
  .phase-tabs button{width:100%}
  .footer-bottom{flex-direction:column}
}

@media (max-width: 980px){
  .header-project-btn{display:none}
  .menu-toggle{display:flex}
  .main-nav{position:absolute; top:calc(100% + 10px); left:0; right:0; margin:0; padding:10px; display:none; flex-direction:column; align-items:stretch; gap:0; border:1px solid rgba(255,255,255,.12); border-radius:20px; background:rgba(8,9,14,.98); box-shadow:0 18px 50px rgba(0,0,0,.28)}
  .site-header.menu-open .main-nav{display:flex}
  .main-nav a{padding:14px 14px; border-bottom:1px solid rgba(255,255,255,.08); font-size:15px}
  .main-nav a:last-child{border-bottom:0}
  .main-nav a::after{display:none}
}
@media (max-width: 560px){
  .site-header{padding-top:10px}
  .header-shell{min-height:64px; padding:8px 10px 8px 14px; border-radius:18px}
  .logo-main{width:174px}
  .menu-toggle{width:44px; height:44px}
}
