/* ============================================
   Century Oak Builders — design tokens
   ============================================ */
:root{
  --forest:      #1C2B20;
  --forest-2:    #16221A;
  --charcoal:    #211E1A;
  --cream:       #F2ECDD;
  --cream-2:     #E8DFC9;
  --brass:       #B08D57;
  --brass-light: #CBAA79;
  --ember:       #8B4632;
  --bark:        #6B5A45;
  --ink:         #211E1A;

  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --edge: clamp(1.25rem, 4vw, 3rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--edge); }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--forest); color:var(--cream);
  padding:.75rem 1.25rem; z-index:200; border-radius:0 0 6px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; }

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:500;
  margin:0;
  letter-spacing:-.01em;
}
em{ font-style:italic; font-weight:400; color:var(--brass); }

p{ margin:0; }

.eyebrow{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.72rem;
  font-weight:600;
  color:var(--brass-light);
  margin:0 0 1rem;
}
.eyebrow-dark{ color:var(--bark); }

.section-title{
  font-size:clamp(1.9rem, 3.6vw, 2.9rem);
  line-height:1.08;
  color:var(--forest);
  margin-bottom:2.75rem;
  max-width:20ch;
}
.section-title-light{ color:var(--cream); margin-bottom:1.5rem; }

.lg-only{ display:inline; }
@media (max-width:640px){ .lg-only{ display:none; } }

/* ============ buttons ============ */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.9rem 1.6rem;
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  border-radius:2px;
  text-decoration:none;
  border:1px solid transparent;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn-primary{ background:var(--brass); color:var(--forest-2); }
.btn-primary:hover{ background:var(--brass-light); transform:translateY(-2px); }
.btn-ghost{ border-color:rgba(242,236,221,.35); color:var(--cream); }
.btn-ghost:hover{ border-color:var(--brass); color:var(--brass-light); transform:translateY(-2px); }
.btn-block{ width:100%; justify-content:center; }

/* ============================================
   Header
   ============================================ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(28,43,32,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(176,141,87,.35);
}
.header-inner{
  display:flex; align-items:center; gap:1.5rem;
  padding-block:.9rem;
  color:var(--cream);
}
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--cream); margin-right:auto; }
.brand-mark{ flex-shrink:0; }
.brand-word{ font-family:var(--font-display); font-size:1.08rem; letter-spacing:-.01em; }
.brand-word em{ color:var(--brass-light); }

.main-nav{ display:flex; gap:2rem; }
.main-nav a{ text-decoration:none; font-size:.92rem; font-weight:500; color:var(--cream); opacity:.85; position:relative; }
.main-nav a:hover{ opacity:1; color:var(--brass-light); }

.header-phone{ text-decoration:none; font-weight:600; font-size:.92rem; color:var(--brass-light); white-space:nowrap; }

.nav-toggle{ display:none; }

@media (max-width: 860px){
  .main-nav, .header-phone{ display:none; }
  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:38px; height:38px; background:none; border:1px solid rgba(176,141,87,.4); border-radius:3px;
    cursor:pointer;
  }
  .nav-toggle span{ display:block; height:2px; width:18px; background:var(--brass-light); margin-inline:auto; }
}
.mobile-nav{
  display:none; flex-direction:column;
  background:var(--forest-2); border-top:1px solid rgba(176,141,87,.25);
}
.mobile-nav.is-open{ display:flex; }
.mobile-nav a{
  color:var(--cream); text-decoration:none; padding:1rem var(--edge);
  border-bottom:1px solid rgba(176,141,87,.15); font-size:.95rem;
}

/* ============================================
   Hero
   ============================================ */
.hero{
  position:relative;
  background:var(--forest);
  color:var(--cream);
  overflow:hidden;
  padding-block:clamp(4.5rem, 12vw, 8rem) clamp(4rem, 10vw, 6.5rem);
}
.hero-mark{
  position:absolute; top:50%; right:-6%; transform:translateY(-50%);
  width:min(46vw, 560px); opacity:.16; pointer-events:none;
  transform-origin:50% 60%;
  animation:leaf-sway 22s ease-in-out infinite;
}
.hero-mark img{ width:100%; height:auto; }
@keyframes leaf-sway{
  0%,100%{ transform:translateY(-50%) rotate(-2deg); }
  50%{ transform:translateY(-50%) rotate(2deg); }
}

.hero-inner{ position:relative; max-width:640px; }
.hero-inner .eyebrow{ color:var(--brass-light); }
.hero h1{
  font-size:clamp(2.6rem, 6.4vw, 4.6rem);
  line-height:1.02;
  color:var(--cream);
  margin-bottom:1.5rem;
}
.hero-lede{
  font-size:1.08rem; color:rgba(242,236,221,.82); max-width:46ch; margin-bottom:2.25rem;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:1.75rem; }
.hero-note{ font-size:.85rem; color:rgba(242,236,221,.55); letter-spacing:.02em; }

/* ============================================
   Services — plank list
   ============================================ */
.services{ padding-block:clamp(4rem,9vw,6.5rem) 1rem; background:var(--cream); }

.plank-list{ border-top:1px solid var(--cream-2); }
.plank{ border-bottom:1px solid var(--cream-2); transition:background .3s var(--ease); }
.plank:hover, .plank:focus-within{ background:var(--cream-2); }
.plank-inner{
  display:grid; grid-template-columns:5rem 1fr; gap:1.75rem;
  padding-block:1.9rem; align-items:start;
}
.grade-code{
  font-family:var(--font-display); font-weight:600; font-size:1.15rem;
  color:var(--brass); letter-spacing:.04em;
  border:1px solid var(--brass); border-radius:2px;
  height:2.4rem; width:3.6rem; display:flex; align-items:center; justify-content:center;
}
.plank-copy h3{ font-size:1.35rem; color:var(--forest); margin-bottom:.5rem; }
.plank-copy p{ color:var(--bark); max-width:56ch; }

@media (max-width:640px){
  .plank-inner{ grid-template-columns:1fr; gap:.75rem; }
}

/* ============================================
   Capability — larger / multi-phase projects
   ============================================ */
.capability{ background:var(--forest-2); color:var(--cream); padding-block:clamp(4.5rem,10vw,7rem); }
.capability-head{ max-width:640px; margin-bottom:3rem; }
.capability-head .eyebrow{ color:var(--brass-light); }
.capability-lede{ color:rgba(242,236,221,.75); font-size:1.02rem; margin-top:1.25rem; max-width:52ch; }

.capability-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:rgba(176,141,87,.22);
  border:1px solid rgba(176,141,87,.22);
  margin-bottom:2.5rem;
}
.capability-card{ background:var(--forest-2); padding:2rem; }
.capability-num{ font-family:var(--font-display); font-style:italic; color:var(--brass); font-size:1.1rem; }
.capability-card h3{ font-size:1.2rem; color:var(--cream); margin:.5rem 0 .65rem; }
.capability-card p{ color:rgba(242,236,221,.72); font-size:.95rem; max-width:42ch; }

.capability-note{
  font-size:.85rem; color:rgba(242,236,221,.55);
  border-top:1px solid rgba(176,141,87,.2); padding-top:1.5rem; max-width:70ch;
}

@media (max-width:700px){
  .capability-grid{ grid-template-columns:1fr; }
}

/* ============================================
   Portfolio
   ============================================ */
.portfolio{ padding-block:clamp(4rem,9vw,6.5rem); background:var(--cream); }
.portfolio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media (max-width:900px){ .portfolio-grid{ grid-template-columns:1fr; } }

.port-card{
  background:#fff; border:1px solid var(--cream-2); border-radius:3px; padding:1.5rem;
}
.port-sketch{
  border:1px dashed var(--brass); border-radius:2px; margin-bottom:1.25rem; padding:.5rem;
  background:var(--cream);
}
.port-sketch svg{ stroke:var(--forest); stroke-width:2; fill:none; width:100%; height:auto; }
.port-sketch circle{ fill:var(--ember); stroke:none; }
.port-tag{ text-transform:uppercase; letter-spacing:.1em; font-size:.7rem; font-weight:600; color:var(--brass); margin-bottom:.4rem; }
.port-card h3{ font-size:1.15rem; color:var(--forest); margin-bottom:.4rem; }
.port-desc{ color:var(--bark); font-size:.92rem; }

.port-card-note{
  background:var(--forest); border-color:var(--forest); color:var(--cream);
  display:flex; flex-direction:column; justify-content:center;
}
.port-note-eyebrow{ text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; font-weight:600; color:var(--brass-light); margin-bottom:.75rem; }
.port-note-body{ font-size:.92rem; color:rgba(242,236,221,.85); }

/* ============================================
   Process — growth ring steps
   ============================================ */
.process{ padding-block:clamp(4rem,9vw,6.5rem); background:var(--cream-2); }
.ring-steps{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.ring-step{
  display:grid; grid-template-columns:6rem 1fr; gap:2rem;
  padding-block:2.25rem; border-top:1px solid rgba(107,90,69,.2);
  align-items:center;
}
.ring-step:last-child{ border-bottom:1px solid rgba(107,90,69,.2); }
.ring-icon{ width:6rem; height:6rem; }
.ring-icon svg{ width:100%; height:100%; }
.ring-icon circle{ fill:none; stroke:var(--forest); }
.ring-icon .r1{ stroke-width:2; opacity:.35; }
.ring-icon .r2{ stroke-width:2; opacity:.5; }
.ring-icon .r3{ stroke-width:2; opacity:.7; }
.ring-icon .r4{ stroke-width:2; opacity:.9; }
.ring-icon .dot{ fill:var(--ember); stroke:none; }

.ring-num{ font-family:var(--font-display); font-style:italic; color:var(--brass); font-size:1.1rem; }
.ring-step-copy h3{ font-size:1.3rem; color:var(--forest); margin:.35rem 0 .6rem; }
.ring-step-copy p{ color:var(--bark); max-width:54ch; }

@media (max-width:640px){
  .ring-step{ grid-template-columns:3.5rem 1fr; gap:1.1rem; }
  .ring-icon{ width:3.5rem; height:3.5rem; }
}

/* ============================================
   About
   ============================================ */
.about{ background:var(--forest); color:var(--cream); padding-block:clamp(4.5rem,10vw,7rem); }
.about-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:4rem; align-items:start; }
@media (max-width:860px){ .about-grid{ grid-template-columns:1fr; gap:2.5rem; } }

.about-quote{ position:relative; }
.about-quote .eyebrow{ color:var(--brass-light); }
.quote-mark{
  font-family:var(--font-display); font-size:5rem; color:var(--brass); opacity:.4; line-height:1;
  margin:0 0 -1rem;
}
.quote-text{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.35; color:var(--brass-light);
  max-width:18ch;
}
.about-copy p{ color:rgba(242,236,221,.82); margin-bottom:1.1rem; max-width:56ch; }
.about-area{ color:var(--brass-light) !important; font-weight:600; }

/* ============================================
   Contact
   ============================================ */
.contact{ background:var(--cream); padding-block:clamp(4.5rem,10vw,7rem); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:3rem; } }

.contact-lede{ color:var(--bark); max-width:44ch; margin-bottom:2.25rem; font-size:1.02rem; }

.contact-facts{ display:grid; gap:1.1rem; margin:0; }
.contact-facts > div{ display:flex; gap:1.25rem; border-top:1px solid var(--cream-2); padding-top:1.1rem; }
.contact-facts dt{ width:5.5rem; flex-shrink:0; text-transform:uppercase; letter-spacing:.1em; font-size:.7rem; font-weight:600; color:var(--brass); padding-top:.15rem; }
.contact-facts dd{ margin:0; font-weight:500; }
.contact-facts a{ text-decoration:none; }
.contact-facts a:hover{ color:var(--ember); }

.quote-form{
  background:#fff; border:1px solid var(--cream-2); border-radius:4px; padding:2rem;
}
.hp-field{ position:absolute; left:-9999px; }
.form-title{ font-size:1.4rem; color:var(--forest); margin-bottom:.3rem; }
.form-note{ color:var(--bark); font-size:.88rem; margin-bottom:1.5rem; }
.form-row{ margin-bottom:1.15rem; }
.form-row-split{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-row label{ display:block; font-size:.82rem; font-weight:600; color:var(--forest); margin-bottom:.4rem; }
.quote-form input, .quote-form select, .quote-form textarea{
  width:100%; font-family:var(--font-body); font-size:.95rem;
  border:1px solid var(--cream-2); background:var(--cream); border-radius:2px;
  padding:.7rem .8rem; color:var(--ink);
}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus{
  border-color:var(--brass); background:#fff;
}
.quote-form textarea{ resize:vertical; }
@media (max-width:480px){ .form-row-split{ grid-template-columns:1fr; } }

/* ============================================
   Footer
   ============================================ */
.site-footer{ background:var(--forest-2); color:var(--cream); padding-top:3rem; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.5rem; padding-bottom:2.25rem; border-bottom:1px solid rgba(176,141,87,.2); }
.footer-brand{ display:flex; align-items:center; gap:.75rem; }
.footer-word{ font-family:var(--font-display); font-size:1.05rem; margin:0; }
.footer-word em{ color:var(--brass-light); font-style:italic; }
.footer-tag{ margin:.2rem 0 0; font-size:.8rem; color:rgba(242,236,221,.6); }
.footer-contact{ display:flex; gap:1.5rem; }
.footer-contact a{ text-decoration:none; font-size:.9rem; color:var(--brass-light); }
.footer-contact a:hover{ color:var(--cream); }
.footer-legal{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
  padding-block:1.25rem; font-size:.78rem; color:rgba(242,236,221,.5);
}

/* ============================================
   Scroll reveal
   ============================================ */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }