/* West Cindy Street, LLC — deep teal, fog and amber; one sans family, weight-driven hierarchy */
:root{
  --ink:#0E2A2F; --teal:#174349; --teal-2:#1F5A5E; --teal-3:#2C7478;
  --fog:#EDF1F0; --mist:#D3DFDC; --white:#fff;
  --amber:#E3A72F; --amber-d:#C48E1C; --muted:#52676A; --line:rgba(14,42,47,.14);
  --sans:"Avenir Next","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --wrap:min(1320px,calc(100% - 3rem)); --h:76px;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--h) + 8px)}
body{font:400 1.0625rem/1.65 var(--sans);color:var(--ink);background:var(--fog);-webkit-font-smoothing:antialiased}
svg{display:block;max-width:100%}
a{color:inherit}
ul,ol{padding:0;list-style:none}
address{font-style:normal}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.wrap{width:var(--wrap);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:8px;z-index:100}
.skip:focus{left:8px}

h1,h2,h3{font-weight:700;line-height:1.1;letter-spacing:-.025em}
h1{font-size:clamp(2.5rem,5.4vw,4.75rem);letter-spacing:-.035em}
h2{font-size:clamp(1.9rem,3.4vw,3rem)}
h3{font-size:1.25rem;letter-spacing:-.01em}
p{max-width:68ch}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:600 1rem/1 var(--sans);padding:1.05rem 1.7rem;border-radius:999px;border:2px solid transparent;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn-amber{background:var(--amber);color:var(--ink)}
.btn-amber:hover{background:var(--amber-d)}
.btn-ghost{border-color:rgba(237,241,240,.4);color:var(--fog)}
.btn-ghost:hover{border-color:var(--fog);background:rgba(237,241,240,.08)}
.btn-sm{padding:.8rem 1.3rem;font-size:.95rem}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:var(--fog);border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
.site-header.scrolled{border-color:var(--line);box-shadow:0 6px 20px -14px rgba(14,42,47,.5)}
.bar{display:flex;align-items:center;justify-content:space-between;min-height:var(--h)}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none}
.mark{width:40px;height:40px;flex:none}
.brand span{display:flex;flex-direction:column;line-height:1.2}
.brand strong{font-size:1.05rem;letter-spacing:-.01em}
.brand small{font-size:.85rem;color:var(--muted)}
nav{display:flex;align-items:center;gap:2rem}
nav ul{display:flex;gap:1.9rem}
nav ul a{text-decoration:none;font-weight:500;padding:.4rem 0;background:linear-gradient(var(--amber),var(--amber)) 0 100%/0 3px no-repeat;transition:background-size .25s}
nav ul a:hover{background-size:100% 3px}
.nav-toggle{display:none;width:46px;height:46px;border:0;border-radius:12px;background:var(--ink);cursor:pointer;padding:0}
.nav-toggle span{display:block;width:20px;height:2px;margin:5px auto;background:#fff;transition:transform .25s,opacity .25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,5rem);align-items:center;background:var(--ink);color:var(--fog);border-radius:28px;padding:clamp(2rem,5vw,4.5rem);margin-block:1rem 0;min-height:min(720px,86vh)}
.hero .lead{margin-top:1.6rem;font-size:1.2rem;color:#c3d2cf}
.cta-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem}
.hero-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem}
.hero-facts li{border-top:3px solid var(--amber);padding-top:.9rem}
.hero-facts strong{display:block;font-size:1.02rem;overflow-wrap:anywhere}
.hero-facts span{font-size:.92rem;color:#9fb5b2}
.hero-art{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:560/620;box-shadow:0 30px 60px -30px #000}
.hero-art svg{width:100%;height:100%}
.map-card{position:absolute;left:1.2rem;right:1.2rem;bottom:1.2rem;background:var(--fog);color:var(--ink);border-radius:14px;padding:1rem 1.2rem;line-height:1.5;font-size:.98rem}
.map-card strong{display:block;font-size:1.02rem}
[data-in]{animation:rise .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}

/* About */
.about{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,5vw,5rem);padding-block:clamp(4.5rem,9vw,8rem);align-items:start}
.facts{position:sticky;top:calc(var(--h) + 1.5rem);background:var(--white);border-radius:22px;overflow:hidden;border:1px solid var(--line)}
.facts svg{width:100%;height:190px}
.facts dl{padding:.5rem 1.6rem 1rem}
.facts dl div{padding:1rem 0;border-bottom:1px solid var(--line)}
.facts dl div:last-child{border:0}
dt{font-size:.9rem;font-weight:600;color:var(--muted)}
dd{font-weight:600;font-size:1.05rem}
.about-text h2{margin-bottom:1.6rem;max-width:18ch}
.about-text>p{margin-bottom:1.2rem;color:#2d4549}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:2.6rem}
.principles li{border-left:4px solid var(--amber);padding-left:1.1rem}
.principles h3{margin-bottom:.4rem}
.principles p{font-size:.98rem;color:var(--muted)}

/* Services: bento */
.services{background:var(--white);padding-block:clamp(4.5rem,9vw,8rem)}
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:2rem 4rem;align-items:end;margin-bottom:3rem}
.section-head p{color:var(--muted);font-size:1.1rem}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:1.2rem}
.tile{grid-column:span 2;background:var(--fog);border-radius:20px;padding:2rem;display:flex;flex-direction:column;gap:.9rem;transition:transform .25s,box-shadow .25s,background .25s}
.tile:hover{transform:translateY(-4px);box-shadow:0 22px 40px -28px rgba(14,42,47,.55);background:var(--mist)}
.tile p{color:#2d4549;font-size:1rem}
.tile-feature{grid-column:span 4;background:var(--teal);color:var(--fog);border-radius:20px 20px 120px 20px}
.tile-feature:hover{background:var(--teal-2)}
.tile-feature h3{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.tile-feature p{color:#c3d2cf;font-size:1.08rem}
.tile-wide{grid-column:span 6;display:grid;grid-template-columns:1fr 1fr;gap:2rem;background:var(--amber)}
.tile-wide:hover{background:#ebb64d}
.tile-wide h3{font-size:1.6rem;margin-bottom:.8rem}
.tile-wide p{color:var(--ink)}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;padding-top:.6rem}
.tags li{font-size:.85rem;font-weight:600;padding:.3rem .7rem;border-radius:6px;background:rgba(14,42,47,.08)}
.tile-feature .tags li{background:rgba(237,241,240,.14)}
.tile-wide .tags li{background:rgba(14,42,47,.12)}
.tile-wide .tags{margin-top:1rem}

.process{margin-top:4rem;display:grid;grid-template-columns:1fr 2.4fr;gap:2rem 4rem;align-items:start}
.process h3{font-size:1.6rem}
.process ol{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;counter-reset:s}
.process li{counter-increment:s;position:relative;padding-top:3.4rem}
.process li::before{content:counter(s);position:absolute;top:0;left:0;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--ink);color:var(--amber);font-weight:700;display:grid;place-items:center}
.process li::after{content:"";position:absolute;top:1.25rem;left:3.1rem;right:-1rem;height:2px;background:var(--line)}
.process li:last-child::after{display:none}
.process strong{display:block;font-size:1.1rem;margin-bottom:.3rem}
.process span{color:var(--muted);font-size:.98rem}

/* Why */
.why{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,5vw,5rem);padding-block:clamp(4.5rem,9vw,8rem);align-items:start}
.why-lead{position:sticky;top:calc(var(--h) + 1.5rem)}
.why-lead>p{margin:1.3rem 0 2rem;color:var(--muted)}
.why-card{background:var(--teal);color:var(--fog);border-radius:22px;padding:1.8rem;display:grid;gap:1.4rem;justify-items:start}
.why-list li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:1.5rem;padding:1.8rem 0;border-bottom:1px solid var(--line);transition:padding-left .25s}
.why-list li:first-child{padding-top:0}
.why-list li:hover{padding-left:.8rem}
.why-list p{color:#2d4549;font-size:1rem}

/* Contact */
.contact{background:var(--mist);padding-block:clamp(4.5rem,9vw,8rem)}
.contact-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.contact-info>p{margin:1.2rem 0 2rem;color:#2d4549}
.contact-info dl{background:var(--white);border-radius:20px;padding:.6rem 1.6rem}
.contact-info dl div{padding:1.1rem 0;border-bottom:1px solid var(--line)}
.contact-info dl div:last-child{border:0}
.contact-info a,.facts a,.site-footer a{text-underline-offset:3px}
.map-link{display:inline-block;margin-top:1.3rem;font-weight:600}
form{background:var(--white);border-radius:24px;padding:clamp(1.5rem,3vw,2.6rem);display:grid;gap:1.3rem}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.field{display:grid;gap:.45rem;align-content:start}
label{font-weight:600;font-size:.95rem}
input[type=text],input[type=email],select,textarea{width:100%;font:inherit;color:var(--ink);background:var(--fog);border:2px solid transparent;border-radius:10px;padding:.85rem 1rem;transition:border-color .2s,background .2s}
textarea{resize:vertical;min-height:130px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--teal-3);background:#fff}
.field.invalid input,.field.invalid textarea{border-color:#b3261e}
.error{color:#b3261e;font-size:.88rem;min-height:0}
.check label{display:flex;gap:.7rem;align-items:flex-start;font-weight:400}
.check input{width:20px;height:20px;margin-top:.15rem;accent-color:var(--teal-2);flex:none}
form .btn{justify-self:start}
.status{font-weight:600;color:var(--teal-2)}

/* Footer */
.site-footer{background:var(--ink);color:#c3d2cf;padding-top:4rem}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1.3fr;gap:3rem}
.foot-name{display:block;color:#fff;font-size:1.3rem;margin-bottom:.8rem}
.site-footer h3{color:#fff;font-size:1rem;margin-bottom:.8rem}
.site-footer li{margin-bottom:.4rem}
.foot-base{margin-top:3rem;padding-block:1.6rem;border-top:1px solid rgba(237,241,240,.16);font-size:.92rem}

/* Scroll reveal (only the list of benefits) */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease,padding-left .25s}
.js .reveal.in{opacity:1;transform:none}

/* Responsive */
@media (max-width:1020px){
  .hero,.about,.why,.contact-grid,.section-head,.process{grid-template-columns:1fr}
  .hero{min-height:0}
  .hero-art{max-width:560px;aspect-ratio:4/3}
  .facts,.why-lead{position:static}
  .tile,.tile-feature{grid-column:span 3}
  .tile-feature{border-radius:20px 20px 80px 20px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid>div{grid-column:1/-1}
}
@media (max-width:820px){
  .nav-toggle{display:block}
  nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:1.2rem;background:var(--fog);padding:1.2rem 1.5rem 1.6rem;border-bottom:1px solid var(--line);display:none}
  nav.open{display:flex}
  nav ul{flex-direction:column;gap:.4rem}
  nav ul a{display:block;padding:.7rem 0;font-size:1.1rem}
  .btn-sm{justify-content:center}
}
@media (max-width:640px){
  :root{--h:68px}
  body{font-size:1rem}
  .hero{border-radius:20px;margin-inline:auto}
  .hero-facts,.principles,.process ol,.row{grid-template-columns:1fr}
  .hero-facts{gap:1.1rem}
  .tile,.tile-feature,.tile-wide{grid-column:1/-1}
  .tile-wide{grid-template-columns:1fr}
  .process li::after{display:none}
  .why-list li{grid-template-columns:1fr;gap:.5rem}
  .cta-row .btn{width:100%}
  .foot-grid{grid-template-columns:1fr}
  .brand small{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}