/* ============================================================
   COASTAL EMBER — the elevated d3 design language
   Pinecraft Outdoor Kitchens · Sarasota FL
   Palette is d3, law. Typography, spacing, craft: elevated.
   ============================================================ */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 600;font-display:swap;src:url('/ce/fonts/fraunces-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 400;font-display:swap;src:url('/ce/fonts/fraunces-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;src:url('/ce/fonts/archivo-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:italic;font-weight:400;font-display:swap;src:url('/ce/fonts/archivo-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* surfaces — d3 palette, verbatim */
  --ink:#202725; --paper:#f4f0e8; --sand:#ded5c4; --shell:#fbf8f1;
  --ember:#c87840; --ember-ink:#96501f; --gulf:#466d6c;
  /* derived, jobs only */
  --ink-2:rgba(32,39,37,.8); --ink-3:rgba(32,39,37,.45);
  --line:rgba(32,39,37,.14); --on-ink:rgba(244,240,232,.92); --on-ink-2:rgba(244,240,232,.6);
  /* type voices */
  --display:'Fraunces',Georgia,serif;
  --text:'Archivo',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  /* rhythm */
  --edge:max(1.5rem, env(safe-area-inset-left));
  --edge-r:max(1.5rem, env(safe-area-inset-right));
  --measure:66ch; --wrap:1200px;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:6.5rem;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background-color:var(--paper);color:var(--ink);font-family:var(--text);
  font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------- type scale ---------- */
.h-display{font-family:var(--display);font-weight:300;font-size:clamp(2.6rem,6.2vw,4.6rem);
  line-height:1.04;letter-spacing:-.01em}
.h-display em{font-style:italic;font-weight:300;color:var(--ember)}
.h1{font-family:var(--display);font-weight:400;font-size:clamp(2.1rem,4.5vw,3.3rem);line-height:1.08}
.h2{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,3vw,2.25rem);line-height:1.15}
.h3{font-family:var(--text);font-weight:600;font-size:1.125rem}
.kicker{font-family:var(--text);font-weight:600;font-size:.75rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ember-ink)}
.on-ink .kicker{color:var(--ember)}
.lede{font-size:1.2rem;line-height:1.6;color:var(--ink-2);max-width:var(--measure)}
.small{font-size:.9375rem;color:var(--ink-2)}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:40;background-color:var(--ink);color:var(--on-ink)}
.site-head .bar{max-width:var(--wrap);margin:0 auto;padding:0 var(--edge-r) 0 var(--edge);
  display:flex;align-items:center;gap:var(--s4);min-height:72px}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.brand img{height:40px;width:auto}
.brand .word{font-family:var(--display);font-size:1.05rem;letter-spacing:.02em;color:var(--paper)}
.nav{display:flex;gap:var(--s3);margin-left:auto}
.nav a{text-decoration:none;font-weight:600;font-size:.9375rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-ink-2);padding:.5rem 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{color:var(--paper);border-bottom-color:var(--ember)}
.head-call{margin-left:var(--s3);background-color:transparent;border:1px solid var(--ember);color:var(--ember);text-decoration:none;
  font-weight:600;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.8rem 1.4rem;transition:background-color .15s}
.head-call:hover{background-color:var(--ember);color:var(--shell)}
.menu-btn{display:none}

/* ---------- buttons ---------- */
.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:.8125rem;
  letter-spacing:.16em;text-transform:uppercase;padding:1.05rem 1.9rem;transition:all .15s}
.btn-ember{background-color:var(--ember-ink);color:var(--shell)}
.btn-ember:hover{background-color:var(--ember)}
:focus-visible{outline:3px solid var(--ember-ink);outline-offset:2px;border-radius:2px}
.site-head :focus-visible,.site-foot :focus-visible,.menu-overlay :focus-visible,.hero :focus-visible{outline-color:var(--shell)}
.btn-ghost{border:1px solid var(--line);color:var(--ink);background-color:transparent}
.on-ink .btn-ghost,.btn-ghost.on-ink{border-color:rgba(244,240,232,.45);color:var(--paper)}
.btn-ghost:hover{border-color:var(--gulf);color:var(--gulf)}
.on-ink .btn-ghost:hover{color:var(--ember)}
.textlink{font-weight:600;font-size:.9375rem;color:var(--gulf);text-decoration:none}
.textlink::after{content:" \2192";color:var(--ember)}
.textlink:hover{text-decoration:underline}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;color:var(--paper);background-color:var(--ink)}
.hero .art{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero .art img{width:100%;height:100%;object-fit:cover;filter:saturate(1.06) contrast(1.04)}
.hero .art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(12deg,rgba(32,39,37,.66) 22%,rgba(32,39,37,.40) 58%,rgba(32,39,37,.20) 100%)}
.hero .inner{text-shadow:0 2px 28px rgba(32,39,37,.55),0 1px 3px rgba(32,39,37,.4);max-width:var(--wrap);margin:0 auto;padding:clamp(6rem,14vh,10rem) var(--edge-r) clamp(3.5rem,8vh,6rem) var(--edge);
  display:flex;flex-direction:column;gap:var(--s3);min-height:min(78vh,760px);justify-content:flex-end}
.hero .lede{color:rgba(244,240,232,.85);border-left:3px solid var(--ember);padding-left:1.1rem}
.hero .cta-row{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;margin-top:var(--s2)}
.hero .phone{color:var(--on-ink-2);font-size:.95rem;text-decoration:none}
.hero .phone:hover{color:var(--paper)}

/* ---------- editorial interstitial — THE aesthetic risk ---------- */
.interstitial{background-color:var(--paper);padding:var(--s6) var(--edge-r) var(--s6) var(--edge);overflow:hidden}
.interstitial .line{max-width:var(--wrap);margin:0 auto;
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(2.2rem,7vw,5.2rem);line-height:1.06;color:var(--ink);text-wrap:balance}
.interstitial .line strong{font-style:italic;font-weight:300;color:var(--ember)}
.interstitial .rule{max-width:var(--wrap);margin:var(--s4) auto 0;display:flex;align-items:center;gap:1rem}
.interstitial .rule::before{content:"";flex:1;height:1px;background-color:var(--line)}
.interstitial .rule span{font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gulf)}

/* ---------- sections ---------- */
.section{padding:var(--s6) var(--edge-r) var(--s6) var(--edge)}
.section.tint{background-color:var(--shell);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section.dark{background-color:var(--ink);color:var(--on-ink)}
.section .inner{max-width:var(--wrap);margin:0 auto}
.sec-head{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap}
.sec-head .num{font-family:var(--display);font-weight:300;font-size:clamp(3rem,7vw,5rem);
  line-height:1;color:var(--gulf)}
.sec-head .stack{display:flex;flex-direction:column;gap:.5rem}
.sec-head .spacer{flex:1}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);align-items:center}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s3)}
.grid-auto.wide{gap:var(--s4)}

/* ---------- cards ---------- */
.card{background-color:var(--shell);border:1px solid var(--line);display:flex;flex-direction:column;
  --lift:0px;text-decoration:none;transform:translateY(var(--lift));transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.card .ph{aspect-ratio:4/3;overflow:hidden;background:linear-gradient(180deg,var(--shell),var(--sand))}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.card .ph.fit img{object-fit:contain;padding:4%;box-sizing:border-box}
.card .body{padding:var(--s3);display:flex;flex-direction:column;gap:.5rem;flex:1}
.card .name{font-family:var(--display);font-size:1.35rem;font-weight:400;line-height:1.2;color:var(--ink)}
.card .meta{font-size:1rem;color:var(--ink-2);line-height:1.55}
.avail{font-size:1rem;color:var(--ink-2);line-height:1.55;margin:.35rem 0 1.25rem}
.card .foot{margin-top:auto;padding-top:var(--s2);opacity:.78;transition:opacity .24s cubic-bezier(.2,.7,.2,1)}
.card .textlink::after{display:inline-block;transition:transform .24s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){
  .card:hover{--lift:-2px}
  .card:hover .ph img{transform:scale(1.03)}
  .card:hover .foot{opacity:1}
  .card:hover .textlink::after{transform:translateX(3px)}
}
.card:focus-within .ph img{transform:scale(1.03)}
.card:focus-within .foot{opacity:1}
.card:focus-within .textlink::after{transform:translateX(3px)}
.badge{display:inline-block;background-color:var(--gulf);color:var(--shell);font-size:.6875rem;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:.3rem .65rem;width:fit-content}
.badge.sand{background-color:var(--sand);color:var(--ember-ink)}

/* ---------- breadcrumbs ---------- */
.crumbs{padding:var(--s3) var(--edge-r) var(--s3) var(--edge);border-bottom:1px solid var(--line);background-color:var(--paper)}
.crumbs ol{max-width:var(--wrap);margin:0 auto;list-style:none;display:flex;gap:.6rem;flex-wrap:wrap;
  font-size:.9375rem;color:var(--ink-2)}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--ember-ink)}
.crumbs li+li::before{content:"/";margin-right:.6rem;color:var(--ink-3)}

/* ---------- spec table ---------- */
.spec{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.spec th,.spec td{text-align:left;padding:.95rem .5rem;border-bottom:1px solid var(--line);
  font-size:1rem;vertical-align:top}
.spec th{font-weight:600;color:var(--ink-1,#202725);width:44%;font-size:.875rem;letter-spacing:.06em;
  text-transform:uppercase}

/* ---------- contact form ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:var(--s5);align-items:start}
.form-intro{color:var(--ink-2);margin-top:1rem;max-width:52ch}
.contact-form{margin-top:var(--s3);display:grid;gap:var(--s2);max-width:42rem}
.contact-form fieldset{border:0;display:grid;gap:.65rem}
.contact-form legend,.form-row label{font-weight:600;font-size:.9375rem}
.radio-set{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1rem}
.radio-set label{display:flex;align-items:center;gap:.35rem;color:var(--ink-2)}
.radio-set input{accent-color:var(--ember-ink)}
.form-row{display:grid;gap:.35rem}
.form-row label span{font-weight:400;color:var(--ink-2)}
.form-row input,.form-row textarea{width:100%;border:1px solid var(--line);border-radius:0;background-color:var(--paper);color:var(--ink);font:inherit;padding:.75rem}
.form-row textarea{resize:vertical;min-height:9rem}
.form-row input:focus-visible,.form-row textarea:focus-visible{outline:3px solid var(--ember-ink);outline-offset:2px}
.honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.contact-phone{background-color:var(--paper);border:1px solid var(--line);padding:var(--s3);display:grid;gap:var(--s2)}
.contact-phone p{color:var(--ink-2)}
.contact-phone .btn{margin-top:.5rem}

/* ---------- visit / contact block ---------- */
.visit-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--s5);align-items:start}
.fact{display:flex;flex-direction:column;gap:.25rem;padding:var(--s2) 0;border-bottom:1px solid rgba(244,240,232,.16)}
.fact .k{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-ink-2)}
.fact .v{font-size:1.1rem;color:var(--paper)}
.fact .v a{color:var(--paper);text-decoration:none}
.fact .v a:hover{color:var(--ember)}

/* ---------- footer ---------- */
.site-foot{background-color:var(--ink);color:var(--on-ink-2);padding:var(--s5) var(--edge-r) calc(var(--s5) + 64px) var(--edge)}
.site-foot .inner{max-width:var(--wrap);margin:0 auto;display:flex;justify-content:space-between;
  gap:var(--s4);flex-wrap:wrap;font-size:.875rem}
.site-foot a{color:var(--on-ink-2);text-decoration:none}
.site-foot a:hover{color:var(--paper)}
.legal-line{max-width:52ch;line-height:1.7}

/* ---------- mobile action bar ---------- */
.mobile-bar{display:none}

@media (max-width:1024px){
  .nav{display:none}
  .head-call{display:none}
  .menu-btn{display:block;margin-left:auto;background:none;border:1px solid rgba(244,240,232,.35);
    color:var(--paper);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;
    padding:.6rem 1rem;font-weight:600}
}

/* ============================ PHONE ============================ */
@media (max-width:760px){
  .grid-3,.grid-2,.visit-grid,.contact-grid{grid-template-columns:1fr}
  .hero .inner{min-height:72vh;padding-top:5rem}
  .hero .art::after{background:linear-gradient(6deg,rgba(32,39,37,.66) 30%,rgba(32,39,37,.45) 68%,rgba(32,39,37,.23) 100%)!important}
  .sec-head .num{font-size:2.6rem}
  .section{padding:var(--s5) var(--edge-r) var(--s5) var(--edge)}
  .mobile-bar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:50;
    border-top:1px solid rgba(244,240,232,.2)}
  .mobile-bar a{text-align:center;padding:1rem .25rem calc(1rem + env(safe-area-inset-bottom));
    text-decoration:none;font-weight:700;font-size:.72rem;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
  .cta-row .btn{flex:1 1 100%;text-align:center;padding:1rem 1rem}
  .radio-set{grid-template-columns:1fr}
  .mobile-bar .call{background-color:var(--ember);color:var(--shell)}
  .mobile-bar .quote{background-color:var(--ink);color:var(--paper)}
}

.scrim-strong .art::after{background:linear-gradient(8deg,rgba(32,39,37,.9) 22%,rgba(32,39,37,.5) 60%,rgba(32,39,37,.18) 100%)!important}

/* mobile menu overlay — Design Lock addendum 2026-08-29 */
.menu-overlay{position:fixed;inset:0;z-index:90;background-color:var(--ink);display:none;padding:5rem var(--edge-r) 2rem var(--edge)}
.menu-overlay.open{display:block}
.menu-overlay-inner{display:flex;flex-direction:column;gap:.25rem}
.menu-overlay-inner a{color:var(--paper);text-decoration:none;font-family:var(--display);
  font-size:1.9rem;line-height:1.3;padding:.55rem 0;border-bottom:1px solid rgba(244,240,232,.14)}
.menu-overlay-inner a:hover{color:var(--ember)}
.menu-overlay-inner .menu-call{font-family:var(--text);font-size:1rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ember);border-bottom:none;margin-top:1.5rem}
.menu-close{position:absolute;top:1.4rem;right:var(--edge-r);background:none;border:1px solid rgba(244,240,232,.35);
  color:var(--paper);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;padding:.6rem 1rem;font-weight:600}
html.js-menu .menu-overlay-inner a{opacity:0;transform:translateY(8px);transition:opacity .24s cubic-bezier(.2,.7,.2,1),transform .24s cubic-bezier(.2,.7,.2,1)}
html.js-menu .menu-overlay.open .menu-overlay-inner a{opacity:1;transform:none;transition-delay:calc(var(--menu-step,0) * 36ms)}

/* W5 tier 1: only JavaScript-marked, below-the-fold editorial groups begin concealed. */
html.js-motion .motion-reveal{opacity:0;transform:translateY(10px);transition:opacity .36s cubic-bezier(.2,.7,.2,1),transform .36s cubic-bezier(.2,.7,.2,1);transition-delay:var(--motion-delay,0ms)}
html.js-motion .motion-reveal.in{opacity:1;transform:translateY(var(--lift,0px))}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .card,.card .ph img,.card .foot,.card .textlink::after,.menu-overlay-inner a,html.js-motion .motion-reveal{transition:none!important}
  .card,.card:hover{transform:none!important}
  html.js-menu .menu-overlay-inner a,html.js-motion .motion-reveal{opacity:1!important;transform:none!important}
}

/* Skip link (F-40): visually hidden until keyboard-focused; sits above the sticky header (z-index:40). */
.skip-link{position:fixed;top:-4rem;left:var(--edge);z-index:60;background-color:var(--ink);color:var(--paper);
  padding:.7rem 1.1rem;border:1px solid var(--ember);font-weight:600;text-decoration:none;transition:top .15s ease}
.skip-link:focus{top:0}
.skip-link:focus-visible{outline:2px solid var(--paper);outline-offset:2px}

/* Outdoor kitchen planning: readable answers, visible anchors and compact lists. */
#planning,#questions,#scope,#written-questions,#directions,#showroom-kitchen{scroll-margin-top:6rem}
.planning-list{padding-left:1.2rem;margin-top:1rem}
.planning-list li+li{margin-top:.65rem}
.kitchen-answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 3rem}
.kitchen-answers article{border-top:1px solid var(--line);padding-top:1.5rem}
.kitchen-answers p{margin-top:1rem;color:var(--ink-2)}
@media(max-width:760px){.kitchen-answers{grid-template-columns:1fr}}