/* ============================================================
   Wynterra.com — design system
   Palette: charcoal #2B2B2E · limestone #F4F2EE · granite green #4F6B5E
   Headlines: Archivo Black · Body: Inter
   ============================================================ */

:root{
  --charcoal:#2B2B2E;
  --charcoal-2:#242427;
  --stone:#F4F2EE;
  --paper:#FBFAF8;
  --green:#4F6B5E;
  --green-dark:#42594F;
  --green-lt:#7FA393;
  --ink:#26262A;
  --muted:#5E5E66;
  --line:#DDD8D0;
  --line-dark:#3A3A3F;
  --radius:12px;
  --maxw:1120px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:18px;line-height:1.6;color:var(--ink);
  background:var(--stone);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3.display{
  font-family:'Archivo Black','Arial Black',sans-serif;
  font-weight:400;line-height:1.12;letter-spacing:-.5px;
}
h1{font-size:clamp(34px,5.2vw,58px)}
h2{font-size:clamp(26px,3.6vw,40px);margin-bottom:16px}
h3{font-size:20px;font-weight:700;margin-bottom:8px}

.eyebrow{
  font-size:14px;font-weight:700;text-transform:uppercase;
  letter-spacing:2.5px;color:var(--green);margin-bottom:14px;
}
.dark .eyebrow{color:var(--green-lt)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{padding:72px 0}
.lead{font-size:clamp(19px,2vw,22px);color:var(--muted);max-width:680px}
.dark .lead{color:#C9C7C2}

/* ---------- textures ---------- */
.dark{
  background-color:var(--charcoal);color:var(--stone);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
.speckle-light{background-color:#FBFBF9}

/* 8B — bold quartz slab behind card grids; text always on white cards */
.quartz-cards{
  background-color:#FBFBF9;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20630%22%20preserveAspectRatio%3D%22none%22%3E%20%3Cdefs%3E%20%3Cfilter%20id%3D%22dispB%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.005%200.02%22%20numOctaves%3D%224%22%20seed%3D%2213%22%20result%3D%22n%22%2F%3E%20%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22n%22%20scale%3D%2220%22%2F%3E%20%3C%2Ffilter%3E%20%3Cfilter%20id%3D%22dispSoftB%22%20x%3D%22-30%25%22%20y%3D%22-30%25%22%20width%3D%22160%25%22%20height%3D%22160%25%22%3E%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.004%200.018%22%20numOctaves%3D%223%22%20seed%3D%2213%22%20result%3D%22n%22%2F%3E%20%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22n%22%20scale%3D%2230%22%2F%3E%20%3CfeGaussianBlur%20stdDeviation%3D%226%22%2F%3E%20%3C%2Ffilter%3E%20%3Cfilter%20id%3D%22dispHazyB%22%20x%3D%22-40%25%22%20y%3D%22-40%25%22%20width%3D%22180%25%22%20height%3D%22180%25%22%3E%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.003%200.016%22%20numOctaves%3D%223%22%20seed%3D%226%22%20result%3D%22n%22%2F%3E%20%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22n%22%20scale%3D%2238%22%2F%3E%20%3CfeGaussianBlur%20stdDeviation%3D%2211%22%2F%3E%20%3C%2Ffilter%3E%20%3Cfilter%20id%3D%22cloudsB%22%20x%3D%220%25%22%20y%3D%220%25%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.0028%200.005%22%20numOctaves%3D%223%22%20seed%3D%2231%22%2F%3E%20%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200.42%200%200%200%200%200.53%200%200%200%200%200.46%200%200%200%200.06%200%22%2F%3E%20%3CfeComposite%20operator%3D%22in%22%20in2%3D%22SourceGraphic%22%2F%3E%20%3C%2Ffilter%3E%20%3ClinearGradient%20id%3D%22vgB1%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%22-54%22%20y1%3D%22450%22%20x2%3D%221270%22%20y2%3D%22120%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%234c7059%22%20stop-opacity%3D%220%22%2F%3E%20%3Cstop%20offset%3D%22.15%22%20stop-color%3D%22%234c7059%22%20stop-opacity%3D%22.6%22%2F%3E%20%3Cstop%20offset%3D%22.42%22%20stop-color%3D%22%23456a52%22%20stop-opacity%3D%22.95%22%2F%3E%20%3Cstop%20offset%3D%22.7%22%20stop-color%3D%22%234c7059%22%20stop-opacity%3D%22.5%22%2F%3E%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234c7059%22%20stop-opacity%3D%220%22%2F%3E%20%3C%2FlinearGradient%3E%20%3ClinearGradient%20id%3D%22vgB2%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%22162%22%20y1%3D%22660%22%20x2%3D%221240%22%20y2%3D%22360%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%234c7059%22%20stop-opacity%3D%220%22%2F%3E%20%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%234c7059%22%20stop-opacity%3D%22.55%22%2F%3E%20%3Cstop%20offset%3D%22.65%22%20stop-color%3D%22%23456a52%22%20stop-opacity%3D%22.8%22%2F%3E%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234c7059%22%20stop-opacity%3D%220%22%2F%3E%20%3C%2FlinearGradient%3E%20%3ClinearGradient%20id%3D%22sheenB%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%22.5%22%2F%3E%20%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220%22%2F%3E%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%235d7d6b%22%20stop-opacity%3D%22.05%22%2F%3E%20%3C%2FlinearGradient%3E%20%3C%2Fdefs%3E%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221200%22%20height%3D%22630%22%20fill%3D%22%23ffffff%22%20filter%3D%22url(%23cloudsB)%22%2F%3E%20%3Cpath%20d%3D%22M%20-54%2C450%20C%20297%2C360%20648%2C288%201270%2C120%22%20fill%3D%22none%22%20stroke%3D%22%236e8a7a%22%20stroke-width%3D%2256%22%20stroke-linecap%3D%22round%22%20filter%3D%22url(%23dispHazyB)%22%20opacity%3D%220.10%22%2F%3E%20%3Cpath%20d%3D%22M%20-54%2C450%20C%20297%2C360%20648%2C288%201270%2C120%22%20fill%3D%22none%22%20stroke%3D%22%235d7d6b%22%20stroke-width%3D%2216%22%20filter%3D%22url(%23dispSoftB)%22%20opacity%3D%220.18%22%2F%3E%20%3Cpath%20d%3D%22M%20-54%2C450%20C%20297%2C360%20648%2C288%201270%2C120%22%20fill%3D%22none%22%20stroke%3D%22url(%23vgB1)%22%20stroke-width%3D%224.5%22%20filter%3D%22url(%23dispB)%22%20opacity%3D%220.70%22%2F%3E%20%3Cpath%20d%3D%22M%20-40%2C504%20C%20324%2C426%20675%2C360%201264%2C198%22%20fill%3D%22none%22%20stroke%3D%22url(%23vgB1)%22%20stroke-width%3D%222%22%20filter%3D%22url(%23dispB)%22%20opacity%3D%220.45%22%2F%3E%20%3Cpath%20d%3D%22M%20162%2C645%20C%20486%2C570%20864%2C510%201247%2C384%22%20fill%3D%22none%22%20stroke%3D%22url(%23vgB2)%22%20stroke-width%3D%222.6%22%20filter%3D%22url(%23dispB)%22%20opacity%3D%220.50%22%2F%3E%20%3Cpath%20d%3D%22M%20405%2C396%20C%20454%2C324%20513%2C282%20594%2C258%22%20fill%3D%22none%22%20stroke%3D%22%235d7d6b%22%20stroke-width%3D%221.5%22%20filter%3D%22url(%23dispB)%22%20opacity%3D%220.32%22%2F%3E%20%3Cpath%20d%3D%22M%20810%2C276%20C%20848%2C348%20853%2C420%20826%2C504%22%20fill%3D%22none%22%20stroke%3D%22%235d7d6b%22%20stroke-width%3D%221.5%22%20filter%3D%22url(%23dispB)%22%20opacity%3D%220.30%22%2F%3E%20%3Cpath%20d%3D%22M%201040%2C198%20C%201085%2C156%201134%2C138%201188%2C138%22%20fill%3D%22none%22%20stroke%3D%22%235d7d6b%22%20stroke-width%3D%221.3%22%20filter%3D%22url(%23dispB)%22%20opacity%3D%220.26%22%2F%3E%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221200%22%20height%3D%22630%22%20fill%3D%22url(%23sheenB)%22%2F%3E%20%3C%2Fsvg%3E");
  background-size:100% 100%;background-repeat:no-repeat;
  border-top:1px solid #E4E1DB;border-bottom:1px solid #E4E1DB;
}
.quartz-cards .card{background:#fff;border-color:#E7E4DE;box-shadow:0 10px 26px rgba(46,58,52,.13)}
.quartz-cards .chip{background:#fff;box-shadow:0 6px 18px rgba(46,58,52,.10)}


/* ---------- header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(43,43,46,.97);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line-dark);
}
.navbar{display:flex;align-items:center;gap:28px;height:68px;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand:hover{text-decoration:none}
.brand .word{
  font-family:'Archivo Black','Arial Black',sans-serif;
  font-size:19px;letter-spacing:2.5px;color:var(--stone);
}
nav.main{display:flex;gap:24px;margin-left:auto;align-items:center}
nav.main a{color:#C9C7C2;font-size:15.5px;font-weight:600}
nav.main a:hover{color:#fff;text-decoration:none}
nav.main a[aria-current="page"]{color:var(--green-lt)}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:24px;height:2.5px;background:var(--stone);margin:5px 0;border-radius:2px}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;padding:14px 26px;border-radius:10px;
  font-weight:700;font-size:16.5px;text-decoration:none;
  transition:transform .08s ease,background .15s ease;
  min-height:48px;text-align:center;border:0;cursor:pointer;font-family:inherit;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-dark)}
.btn-ghost{border:2px solid var(--line);color:var(--ink);background:transparent}
.dark .btn-ghost{border-color:#55555C;color:var(--stone)}
.btn-ghost:hover{border-color:var(--green)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:28px}
.phone-note{font-size:15.5px;color:var(--muted)}
.dark .phone-note{color:#B7B5B0}
.phone-note a{font-weight:700;white-space:nowrap}
.dark .phone-note a{color:var(--green-lt)}

/* ---------- hero ---------- */
.hero{padding:96px 0 88px}
.hero h1{max-width:820px;margin-bottom:20px}
.hero .lead{margin-bottom:6px;max-width:640px}

/* founding ribbon */
.ribbon{
  display:inline-flex;gap:10px;align-items:center;flex-wrap:wrap;
  background:rgba(79,107,94,.18);border:1px solid var(--green);
  color:var(--stone);border-radius:99px;padding:9px 20px;
  font-size:15px;font-weight:600;margin-bottom:26px;line-height:1.5;
}
.ribbon .dot{width:8px;height:8px;border-radius:50%;background:var(--green-lt);flex:0 0 auto}

/* ---------- cards ---------- */
.grid{display:grid;gap:20px}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px;
}
.dark .card{background:var(--charcoal-2);border-color:var(--line-dark)}
.card h3{margin-bottom:8px}
.card p{font-size:16px;color:var(--muted)}
.dark .card p{color:#B7B5B0}
.card .big{
  font-family:'Archivo Black','Arial Black',sans-serif;
  font-size:21px;line-height:1.25;margin-bottom:10px;display:block;
}

/* ---------- alternating vignette rows ---------- */
.vrow{display:flex;gap:48px;align-items:center;padding:44px 0;border-top:1px solid var(--line)}
.vrow:first-of-type{border-top:0}
.vrow.flip{flex-direction:row-reverse}
.vrow .txt{flex:1 1 46%}
.vrow .art{flex:1 1 54%}
.vrow h3{font-family:'Archivo Black','Arial Black',sans-serif;font-weight:400;font-size:clamp(21px,2.4vw,27px);margin-bottom:12px;line-height:1.2}
.vrow p{color:var(--muted);font-size:17px}
.vrow ul{margin:14px 0 0 20px;color:var(--muted);font-size:16.5px}
.vrow li{margin-bottom:6px}
.vignette{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;
}

/* ---------- feature list blocks ---------- */
.featlist{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 28px;margin-top:26px}
.feat{display:flex;gap:12px;align-items:flex-start}
.feat .tick{flex:0 0 auto;margin-top:5px}
.feat b{display:block;font-size:16.5px}
.feat span{font-size:15.5px;color:var(--muted)}

/* ---------- language chips ---------- */
.langchips{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.chip{
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:14px 22px;font-weight:700;font-size:16px;
}
.dark .chip{background:var(--charcoal-2);border-color:var(--line-dark)}
.chip small{display:block;font-weight:600;color:var(--green);font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:2px}
.dark .chip small{color:var(--green-lt)}

/* ---------- pricing strip ---------- */
.pricing{
  background:var(--green);color:#fff;border-radius:16px;
  padding:44px 40px;display:flex;gap:40px;align-items:center;flex-wrap:wrap;
}
.pricing .num{
  font-family:'Archivo Black','Arial Black',sans-serif;
  font-size:clamp(40px,5vw,58px);line-height:1;
}
.pricing .num small{font-size:19px;font-family:'Inter',sans-serif;font-weight:600;display:block;margin-top:6px;opacity:.9}
.pricing .desc{flex:1 1 340px;font-size:17px}
.pricing .desc b{display:block;font-size:19px;margin-bottom:6px}
.pricing .btn{background:#fff;color:var(--green)}
.pricing .btn:hover{background:var(--stone)}
.finephrase{font-size:15px;opacity:.92;margin-top:10px}

/* ---------- FAQ ---------- */
details{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 24px;margin-bottom:12px;
}
summary{font-weight:700;font-size:17.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
summary::after{content:"+";font-size:24px;color:var(--green);font-weight:400}
details[open] summary::after{content:"–"}
details p{margin-top:12px;color:var(--muted);font-size:16.5px}

/* ---------- forms ---------- */
form.demo{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:720px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
label{font-weight:600;font-size:15px}
input,select,textarea{
  font-family:inherit;font-size:16.5px;padding:13px 14px;
  border:1.5px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green);border-color:var(--green)}
textarea{min-height:110px;resize:vertical}
fieldset{border:0;display:flex;gap:18px;flex-wrap:wrap}
fieldset label{display:flex;gap:8px;align-items:center;font-weight:600;font-size:16px;cursor:pointer}
input[type="radio"]{width:19px;height:19px;accent-color:var(--green)}
.hp{position:absolute;left:-9999px;opacity:0}
.form-msg{grid-column:1/-1;font-weight:600;display:none;padding:14px 16px;border-radius:9px}
.form-msg.ok{display:block;background:#E7F0EB;color:var(--green-dark);border:1px solid var(--green)}
.form-msg.err{display:block;background:#F7ECE7;color:#8A4A2B;border:1px solid #C98A50}

/* ---------- footer ---------- */
footer.site{background:var(--charcoal);color:#B7B5B0;padding:56px 0 40px;font-size:15.5px}
footer .cols{display:flex;gap:48px;flex-wrap:wrap;justify-content:space-between;max-width:var(--maxw);margin:0 auto;padding:0 24px}
footer .brandcol{max-width:320px}
footer .word{font-family:'Archivo Black','Arial Black',sans-serif;letter-spacing:2.5px;color:var(--stone);font-size:17px;margin:14px 0 8px}
footer nav{display:flex;flex-direction:column;gap:9px}
footer a{color:#B7B5B0}
footer a:hover{color:#fff}
footer .fine{border-top:1px solid var(--line-dark);margin-top:40px;padding-top:22px;text-align:center;font-size:13.5px;color:#8a8a90}

/* ---------- misc ---------- */
.divider-quote{
  font-family:'Archivo Black','Arial Black',sans-serif;
  font-size:clamp(22px,3vw,32px);line-height:1.3;max-width:820px;
}
.notice{
  border-left:4px solid var(--green);background:var(--paper);
  border-radius:0 var(--radius) var(--radius) 0;padding:20px 24px;
  font-size:16.5px;color:var(--muted);
}
.center{text-align:center}
.mt0{margin-top:0}.mt24{margin-top:24px}.mt40{margin-top:40px}.mb12{margin-bottom:12px}
.small{font-size:15px;color:var(--muted)}
.coming{
  display:inline-block;background:rgba(79,107,94,.12);color:var(--green-dark);
  font-size:12.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  border-radius:99px;padding:3px 12px;margin-bottom:10px;
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .grid.c3,.grid.c4{grid-template-columns:1fr 1fr}
  .vrow,.vrow.flip{flex-direction:column;gap:24px}
  .featlist{grid-template-columns:1fr}
}
@media (max-width:680px){
  section{padding:52px 0}
  .hero{padding:64px 0 56px}
  .ribbon{display:block;border-radius:14px;padding:10px 16px;font-size:14px}
  .ribbon .dot{display:inline-block;margin-right:8px;vertical-align:2px}
  .ribbon a{white-space:nowrap;margin-left:6px}
  .grid.c3,.grid.c2,.grid.c4{grid-template-columns:1fr}
  nav.main{
    display:none;position:absolute;top:68px;left:0;right:0;
    background:var(--charcoal);flex-direction:column;padding:18px 24px 24px;gap:18px;
    border-bottom:1px solid var(--line-dark);
  }
  nav.main.open{display:flex}
  .nav-toggle{display:block}
  form.demo{grid-template-columns:1fr}
  .pricing{padding:32px 24px}
}