/* ============================================================================
   Coastal Bloom Landscaping LLC
   Skin: coastal-horticulture  (new vertical: landscaping / tree service)

   PALETTE IS SAMPLED, NOT CHOSEN. Every value below was measured off his own
   logo mark (Images/gbp/gbp-profile-06) with a saturation-masked pixel sample:
     green  #173E1C  mean of 4,315 saturated green px   (white-on = 12.05:1)
     gold   #B48E36  mean of 1,007 saturated gold px    (white-on =  3.06:1)
     cream  #FEF9F0  86.4% of the mark
   Gold at 3.06:1 is NOT legal for text, so it is split: --gold decorates,
   --gold-ink (darkened to 4.68:1 on cream) is the only gold allowed to carry
   a word. design_rules.md "split the brand colour in two".

   GEOMETRY VOCABULARY (documented so the shape-consistency lock holds):
     arch   999px 999px 6px 6px   feature imagery only, echoes the logo's sun arch
     6px                          cards, inputs, photo tiles
     pill                         interactive only (buttons, chips)
   Light-only on a locked brand palette: Kinplex client trade sites do not ship
   a dark mode (CLAUDE.md overrides the skill's §6.C mandate).
   ========================================================================= */

:root{
  --brand:#173E1C;
  --brand-deep:#0B2A11;
  --brand-mid:#265A2C;
  --brand-wash:#F1F5EE;
  --gold:#B48E36;
  --gold-ink:#8A6D14;
  --gold-wash:#FBF4E4;
  --cream:#FEF9F0;
  --paper:#FFFFFF;
  --ink:#16201A;
  --ink-soft:#4A5850;
  --line:#E2DDD0;

  --arch:999px 999px 6px 6px;
  --r:6px;
  --pill:999px;

  --wrap:1320px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
a{color:var(--brand); text-underline-offset:3px}

h1,h2,h3,.display{
  font-family:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  font-weight:600; letter-spacing:-.01em; line-height:1.08;
  color:var(--brand-deep); margin:0 0 .5em;
}
h1{font-size:clamp(2.15rem,3.5vw,3.05rem)}
h2{font-size:clamp(2rem,4.2vw,3.1rem)}
h3{font-size:clamp(1.3rem,2vw,1.6rem); line-height:1.2}
p{margin:0 0 1.1em; max-width:66ch}

.wrap{width:min(100% - 2.5rem,var(--wrap)); margin-inline:auto}
.section{padding:clamp(4rem,8vw,7rem) 0}

/* eyebrow: rationed. Only 2 on this page (skill caps at ceil(sections/3)). */
.eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-ink); margin:0 0 1rem;
}

/* ---------- buttons: pill, the only pill geometry on the page ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.95rem 1.75rem; border-radius:var(--pill); border:2px solid transparent;
  font-family:inherit; font-size:1rem; font-weight:700; white-space:nowrap;
  text-decoration:none; cursor:pointer;
  transition:transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease);
}
.btn-primary{background:var(--brand); color:#fff}          /* 12.05:1 */
.btn-primary:hover{background:var(--brand-mid)}
.btn-ghost{background:transparent; color:var(--brand-deep); border-color:var(--brand)}
.btn-ghost:hover{background:var(--brand-wash)}
.btn-onDark{background:var(--gold); color:#231A05}          /* 9.4:1 dark ink on gold */
.btn-onDark:hover{background:#C9A343}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--gold-ink); outline-offset:3px}

/* ---------- two-tier nav (Kinplex MECHANIC) ---------- */
.utility{background:var(--brand-deep); color:#DCE6DC; font-size:.85rem}
.utility .wrap{display:flex; gap:1.5rem; align-items:center; justify-content:space-between;
  min-height:42px; flex-wrap:wrap}
.utility a{color:#fff; text-decoration:none; font-weight:600}
.utility a:hover{text-decoration:underline}
.utility .areas{color:#B8C9B8}
/* on a phone the service-area list wraps to two lines and pushes the hero ~185px
   down before the logo is even reached. The footer and the areas band both carry
   the same list, so drop it here rather than spend the viewport. */
@media (max-width:760px){
  .utility .areas{display:none}
  .utility .wrap{justify-content:center; min-height:38px}
}

.mast{position:sticky; top:0; z-index:50; background:var(--cream);
  border-bottom:1px solid var(--line)}
.mast .wrap{display:flex; align-items:center; gap:1.5rem; min-height:72px}
.brandmark{display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto}
.brandmark img{width:44px; height:44px; object-fit:contain; border-radius:var(--r)}
.bm-text{display:block; line-height:1}
.brandmark b{font-family:"Cormorant Garamond",Georgia,serif; font-size:1.45rem;
  font-weight:700; color:var(--brand-deep); line-height:1; display:block}
.bm-text span{font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-ink); font-weight:700}
.phone-cta{padding:.7rem 1.2rem; font-size:.95rem}
.nav{display:flex; gap:1.6rem; align-items:center}
.nav a:not(.btn){color:var(--ink); text-decoration:none; font-weight:600; font-size:.95rem;
  white-space:nowrap}
.nav a:not(.btn):hover{color:var(--brand)}
@media (max-width:900px){ .nav{display:none} }

/* ---------- hero: asymmetric split, arch imagery ---------- */
.hero{padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(3rem,6vw,5rem); position:relative}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:center}
.hero h1{margin-bottom:.35em}
.hero .lede{font-size:clamp(1.05rem,1.5vw,1.2rem); color:var(--ink-soft); max-width:42ch}
.hero-cta{display:flex; gap:.9rem; flex-wrap:wrap; margin-top:1.9rem}
.hero-art{position:relative}
.hero-art img{border-radius:var(--arch); width:100%; aspect-ratio:3/4; object-fit:cover}
/* the arch stroke repeats the logo's sun arc. Decorative only, gold is legal here. */
.hero-art::before{
  content:""; position:absolute; inset:-16px;
  border:1.5px solid var(--gold); border-radius:var(--arch);
  opacity:.55; pointer-events:none;
}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr; gap:2.5rem}
  .hero-art{order:-1}
  .hero-art img{aspect-ratio:4/3}
}

/* ---------- service-area strip ---------- */
.areas-strip{background:var(--brand-deep); color:#EAF1EA; padding:1.4rem 0}
.areas-strip .wrap{display:flex; align-items:center; gap:1rem 2rem; flex-wrap:wrap;
  justify-content:center; text-align:center}
.areas-strip .label{font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); font-weight:700}
.areas-strip ul{display:flex; gap:.6rem; flex-wrap:wrap; list-style:none; margin:0; padding:0;
  justify-content:center}
.areas-strip li{font-family:"Cormorant Garamond",Georgia,serif; font-size:1.35rem;
  color:#fff; font-weight:600}
.areas-strip li:not(:last-child)::after{content:"/"; color:var(--gold); margin-left:.7rem;
  font-family:"Manrope",sans-serif; font-size:.9rem; vertical-align:2px}

/* ---------- services: asymmetric 2+3+2+2, never 3 equal cards ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:1.1rem}
.svc{background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:1.6rem 1.5rem; grid-column:span 2;
  transition:border-color .2s var(--ease), transform .2s var(--ease)}
.svc:hover{border-color:var(--brand); transform:translateY(-2px)}
.svc.wide{grid-column:span 3}
.svc h3{margin-bottom:.35em}
.svc h3 a{color:var(--brand-deep); text-decoration:none}
.svc:hover h3 a{color:var(--brand)}
.svc h3 a::after{content:""; position:absolute; inset:0}   /* whole card is the hit area */
.svc{position:relative}
.svc p{font-size:.95rem; color:var(--ink-soft); margin:0}
.svc .tag{display:inline-block; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:var(--gold-ink); margin-bottom:.7rem}
@media (max-width:900px){
  .svc-grid{grid-template-columns:1fr}
  .svc,.svc.wide{grid-column:span 1}
}

/* ---------- split feature (his own words, type-led proof) ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center}
.split img{border-radius:var(--r); aspect-ratio:4/3; object-fit:cover; width:100%}
@media (max-width:860px){ .split{grid-template-columns:1fr} }

/* ---------- promise band ---------- */
.promise{background:var(--brand-wash); border-block:1px solid var(--line)}
.promise-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:2.5rem}
.promise-grid > div{border-top:2px solid var(--gold); padding-top:1.1rem}
.promise-grid h3{font-size:1.25rem; margin-bottom:.3em}
.promise-grid p{font-size:.94rem; color:var(--ink-soft); margin:0}

/* ---------- work band: his real photos ---------- */
.work{display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem}
.work img{border-radius:var(--r); aspect-ratio:4/3; object-fit:cover; width:100%}
.work figure{margin:0}
.work figcaption{font-size:.82rem; color:var(--ink-soft); margin-top:.55rem}
@media (max-width:640px){ .work{grid-template-columns:1fr} }

/* ---------- estimate block: never a naked form (MECHANIC) ---------- */
.estimate{background:var(--brand-deep); color:#E8F0E8}
.estimate h2{color:#fff}
.estimate-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4rem)}
.estimate p{color:#C3D3C3}
.estimate .direct{margin-top:1.8rem; border-top:1px solid rgba(255,255,255,.2); padding-top:1.4rem}
.estimate .direct a{color:#fff; font-weight:700; text-decoration:none;
  font-family:"Cormorant Garamond",Georgia,serif; font-size:1.9rem; display:block}
.estimate .direct a:hover{color:var(--gold)}
.estimate .direct small{color:#A9BCA9; display:block; margin-top:.3rem}

.form{background:var(--paper); border-radius:var(--r); padding:clamp(1.5rem,3vw,2.2rem)}
.field{margin-bottom:1.05rem}
.field label{display:block; font-size:.85rem; font-weight:700; color:var(--ink);
  margin-bottom:.35rem}
.field input,.field select,.field textarea{
  width:100%; padding:.8rem .9rem; border:1.5px solid #C9C2B2; border-radius:var(--r);
  font-family:inherit; font-size:1rem; color:var(--ink); background:#fff;
}
.field input::placeholder,.field textarea::placeholder{color:#6B7770}  /* 4.6:1 on white */
.field input:focus,.field select:focus,.field textarea:focus{
  outline:3px solid var(--gold-ink); outline-offset:1px; border-color:var(--brand);
}
.form .fine{font-size:.8rem; color:var(--ink-soft); margin:.9rem 0 0}
/* GHL embed: explicit floor so a resizer that never attaches degrades to whitespace, not a
   clipped form. Never height:auto on an iframe (cross-origin resolves to 150px). */
.form .ghlform{display:block; width:100%; min-height:980px; border:0; border-radius:var(--r); background:#fff}
@media (max-width:860px){ .estimate-grid{grid-template-columns:1fr} }

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--line); padding:1.15rem 0}
.faq summary{font-family:"Cormorant Garamond",Georgia,serif; font-size:1.4rem;
  font-weight:600; color:var(--brand-deep); cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--gold-ink); font-family:"Manrope",sans-serif;
  font-size:1.5rem; font-weight:400; line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq summary:focus-visible{outline:3px solid var(--gold-ink); outline-offset:4px}
.faq p{margin:.8rem 0 0; color:var(--ink-soft)}

/* ---------- footer ---------- */
.foot{background:var(--brand-deep); color:#BFD0BF; padding:3.5rem 0 1.5rem; font-size:.93rem}
.foot h4{color:#fff; font-family:"Cormorant Garamond",Georgia,serif; font-size:1.3rem;
  margin:0 0 .7rem; font-weight:600}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem}
.foot a{color:#DCE6DC; text-decoration:none}
.foot a:hover{color:var(--gold); text-decoration:underline}
.foot ul{list-style:none; margin:0; padding:0}
.foot li{margin-bottom:.4rem}
.foot .legal{border-top:1px solid rgba(255,255,255,.15); margin-top:2.5rem; padding-top:1.3rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; color:#94A894;
  font-size:.85rem}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr; gap:2rem} }

/* ---------- sticky conversion rail (Kinplex MECHANIC) ---------- */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:60; display:none;
  background:var(--brand); border-top:2px solid var(--gold);
  padding:.6rem .9rem; gap:.6rem;
}
.callbar .btn{flex:1; padding:.85rem 1rem; font-size:.98rem}
@media (max-width:900px){
  .callbar{display:flex}
  body{padding-bottom:78px}
}

/* ---------- motion: MOTION_INTENSITY 3 = hover/active only ----------------
   A scroll-driven `animation-timeline:view()` reveal was here and it left the
   services grid, promise band and work section at opacity:0 whenever they never
   entered the scrollport. Removed outright: at MOTION 3 the dial says static,
   and content that might not render is never worth a fade-in. `.reveal` is kept
   as an inert hook so the markup does not need rewriting.                      */
.reveal{opacity:1; transform:none}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}


/* ==========================================================================
   SERVICE PAGE COMPONENTS  (added with the 9 money pages, 2026-09-02)
   Same geometry vocabulary as the homepage: 6px cards, pill on interactive
   only, arch reserved for hero imagery.
   ========================================================================== */

/* services dropdown: link + :focus-within, no JS. Keyboard reaches it by
   tabbing into the menu links. */
.has-menu{position:relative}
.has-menu > a{color:var(--ink); text-decoration:none; font-weight:600; font-size:.95rem}
.has-menu > a:hover{color:var(--brand)}
.has-menu .menu{
  position:absolute; top:calc(100% + .6rem); left:-1rem; min-width:270px; z-index:70;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 18px 40px rgba(11,42,17,.14);
  list-style:none; margin:0; padding:.5rem;
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.has-menu:hover .menu, .has-menu:focus-within .menu{opacity:1; visibility:visible; transform:none}
.has-menu .menu a{display:block; padding:.55rem .8rem; border-radius:4px;
  font-size:.93rem; font-weight:600; color:var(--ink); text-decoration:none}
.has-menu .menu a:hover, .has-menu .menu a:focus-visible{background:var(--brand-wash); color:var(--brand)}

/* breadcrumb */
.crumbs{padding:1rem 0 0; font-size:.86rem; color:var(--ink-soft);
  display:flex; gap:.5rem; align-items:center}
.crumbs a{color:var(--brand); text-decoration:none; font-weight:600}
.crumbs a:hover{text-decoration:underline}
.crumbs span{color:var(--ink-soft)}

/* long-form body copy */
.prose > *{max-width:70ch}      /* cap the CHILDREN, not the .wrap: .wrap carries
                                    margin-inline:auto, so capping it centred the block
                                    ~300px right of every other section's left edge. */
.prose h2{margin-bottom:.6em}
.prose p{font-size:1.05rem}

/* checklist: hairline rows, not a bulleted dump, and never border-t AND border-b */
.ticks{list-style:none; margin:0 0 1.6rem; padding:0}
.ticks li{position:relative; padding:.72rem 0 .72rem 1.9rem; border-bottom:1px solid var(--line);
  font-size:1rem; color:var(--ink)}
.ticks li:last-child{border-bottom:0}
.ticks li::before{content:""; position:absolute; left:.15rem; top:1.15rem;
  width:9px; height:9px; border-radius:var(--pill); background:var(--gold)}

/* numbered process: counter, no fake "Stage 1 / Stage 2" labels */
.steps{list-style:none; counter-reset:st; margin:2rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:2rem}
.steps li{counter-increment:st; border-top:2px solid var(--gold); padding-top:1.1rem}
.steps li::before{content:counter(st); display:block;
  font-family:"Cormorant Garamond",Georgia,serif; font-size:2.1rem; line-height:1;
  color:var(--gold-ink); margin-bottom:.35rem}
.steps h3{font-size:1.2rem; margin-bottom:.3em}
.steps p{font-size:.95rem; color:var(--ink-soft); margin:0}

/* related services */
.rel-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.1rem;
  margin-top:2rem}
.rel-card{display:block; background:var(--cream); border:1px solid var(--line);
  border-radius:var(--r); padding:1.5rem; text-decoration:none;
  transition:border-color .2s var(--ease), transform .2s var(--ease)}
.rel-card:hover{border-color:var(--brand); transform:translateY(-2px)}
.rel-card h3{margin-bottom:.35em}
.rel-card p{font-size:.93rem; color:var(--ink-soft); margin:0}

.warranty{background:var(--gold-wash); border-left:3px solid var(--gold);
  padding:.9rem 1.1rem; border-radius:0 var(--r) var(--r) 0; font-size:.97rem}

/* service-page estimate band is centred, so let its copy centre too */
.estimate .wrap[style*="center"] p{max-width:60ch}

/* MOBILE NAV: the desktop nav is hidden under 900px. Without this the service
   pages are unreachable from a phone except through the footer, which is the
   orphaned-section failure. Show a compact strip of the top-level links. */
@media (max-width:900px){
  .nav{display:flex; gap:1.1rem; overflow-x:auto; -webkit-overflow-scrolling:touch;
       padding:.55rem 0 .1rem; margin-left:auto; scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav .btn, .nav .has-menu .menu{display:none}
  .mast .wrap{flex-wrap:wrap; gap:.8rem 1rem; min-height:64px}
  .phone-cta{order:-1}
}
@media (max-width:520px){
  .brandmark b{font-size:1.2rem}
  .nav{font-size:.9rem}
}