/* =====================================================================
   Inner pages (services, pricing, areas, work) and the homepage's
   pricing / areas sections. Uses the tokens from kestrel.css.
   ===================================================================== */

/* the menu panel now has more than five links */
.menu{overflow-y:auto;padding-block:5rem 2rem;justify-content:flex-start}
.menu a{font-size:clamp(1.6rem,7vw,2.4rem);line-height:1.2}
.menu.open a:nth-child(n+6){transition-delay:.3s}
body.page .nav{background:#0B0B0D;border-bottom-color:var(--line)}

/* ------------------------------------------------------------ page hero */
.phero{
  background:var(--ground);
  padding:clamp(7.5rem,14vw,11rem) 0 clamp(3rem,6vw,5rem);
  border-bottom:1px solid var(--line);
}
.crumbs{font-family:var(--f-m);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin-bottom:1.6rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.4rem .7rem}
.crumbs li+li::before{content:"/";margin-right:.7rem;opacity:.5}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--chalk)}
.phero h1{font-size:clamp(2.3rem,6vw,4.6rem);line-height:.98;max-width:18ch;margin-bottom:1.6rem}
.phero__lede{font-size:clamp(1.05rem,1rem + .5vw,1.3rem);color:var(--dim);max-width:60ch;line-height:1.55}
.phero__cta{display:flex;flex-wrap:wrap;gap:1.25rem 1.75rem;align-items:center;margin-top:2rem}

/* -------------------------------------------------------------- sections */
.psec{padding-block:clamp(3rem,7vw,6rem)}
.psec .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--gap)}
.psec--stack .wrap{grid-template-columns:1fr}
.psec h2{font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:1.02}
.psec h3{font-size:1.25rem;line-height:1.15;letter-spacing:-.025em;margin-bottom:.6rem}
.prose{max-width:66ch}
.prose p+p,.prose p+ul,.prose ul+p,.prose p+h3,.prose ul+h3{margin-top:1.1rem}
.prose h3{margin-top:2rem}
.prose ul{display:grid;gap:.6rem}
.prose li{padding-left:1.3rem;position:relative}
.prose li::before{content:"";position:absolute;left:0;top:.72em;width:.6rem;height:1px;background:var(--barley)}
.prose a,.plain a{color:var(--chalk);text-decoration-color:var(--barley);text-underline-offset:3px}
.prose strong{font-weight:600}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1rem}
.card{background:var(--raise);border:1px solid var(--line);border-radius:12px;padding:1.5rem;
  text-decoration:none;display:block;transition:border-color .3s,transform .4s var(--ease)}
a.card:hover{border-color:var(--barley);transform:translateY(-3px)}
/* Card titles are h2 (they're the only heading in a hub section, so an h3 would skip
   a level under the page h1) but they must stay card-sized, not section-sized. */
.card :is(h2,h3){font-size:1.25rem;line-height:1.15;letter-spacing:-.025em;margin-bottom:.5rem}
.card p{color:var(--dim);font-size:.95rem}
.card__k{display:block;margin-bottom:.7rem;font-family:var(--f-m);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--barley)}

.faq{max-width:70ch;display:grid;gap:.6rem}
.faq details{border:1px solid var(--line);border-radius:10px;background:var(--raise);padding:0 1.25rem}
.faq summary{cursor:pointer;padding:1rem 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--barley);font-family:var(--f-m)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding-bottom:1.1rem;color:var(--dim)}

/* --------------------------------------------------------------- pricing */
.price{background:var(--raise);border:1px solid var(--line-2);border-radius:16px;padding:clamp(1.5rem,4vw,2.5rem);max-width:560px}
.price__amt{font-family:var(--f-d);font-weight:800;font-size:clamp(3rem,8vw,4.6rem);letter-spacing:-.05em;line-height:1}
.price__amt small{font-size:1.1rem;font-weight:600;letter-spacing:0;color:var(--dim);margin-left:.4rem}
.price ul{margin:1.5rem 0 2rem;display:grid;gap:.7rem}
.price li{padding-left:1.4rem;position:relative}
.price li::before{content:"";position:absolute;left:0;top:.6em;width:.75rem;height:.4rem;
  border-left:2px solid var(--barley);border-bottom:2px solid var(--barley);transform:rotate(-45deg)}
.price__note{margin-top:.9rem;max-width:52ch;color:var(--dim);font-size:.95rem;line-height:1.55}
.price__lead{max-width:58ch;margin-bottom:1.6rem;color:var(--dim);
  font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.5}
.price__lead b{color:var(--chalk);font-weight:600}

/* The monthly card is the one being recommended, so it inverts out of the light
   section. It re-declares the dark tokens rather than hard-coding colours, so the
   button, the tick marks and the muted text inside it all keep working unchanged. */
.price--dark{
  --ground:#17191D;--raise:#1F2228;
  --line:rgba(255,255,255,.10);--line-2:rgba(255,255,255,.18);
  --chalk:#FFFFFF;--dim:rgba(255,255,255,.66);--faint:rgba(255,255,255,.50);
  --orange:#FF7518;--barley:#FF7518;--rufous-soft:#FF8F42;
  background:var(--raise);color:var(--chalk);border-color:var(--line-2);
}

/* ------------------------------------------- homepage problems / why grids
   Two-column text pairs: a short bold claim and the sentence that earns it.
   Used by the "is your website working hard enough" list and by Why Kestrel. */
.home-sec__lead{color:var(--dim);max-width:58ch;margin-bottom:clamp(2rem,4vw,3rem);
  font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.6}
.probs{display:grid;gap:1.25rem 2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));margin-bottom:2rem}
.probs li{border-top:1px solid var(--line-2);padding-top:1rem}
.probs b{display:block;margin-bottom:.35rem;font-size:1.05rem}
.probs span{display:block;color:var(--dim);font-size:.95rem;line-height:1.55}
.probs--why li{border-top-color:var(--orange)}

/* ------------------------------------------------- homepage pricing block
   Lives in pages.css because it borrows .price from here. Two cards side by
   side on desktop, stacked on a phone. */
.home-price{padding-block:var(--sec)}
.home-price__h{font-family:var(--f-d);font-weight:800;letter-spacing:-.04em;line-height:1.02;
  font-size:clamp(2.2rem,5.5vw,3.8rem);margin:.5rem 0 1.25rem}
.home-price__sub{color:var(--dim);max-width:54ch;margin-bottom:clamp(2rem,4vw,3rem);
  font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.6}
.home-price__cards{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));
  align-items:start;margin-bottom:2.25rem}
.home-price__cards .price{max-width:none}
.home-price__cards--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,16.5rem),1fr))}
.home-price__cards--3 .price__amt{font-size:clamp(2.2rem,4.6vw,2.9rem)}
/* pricing page: the two monthly tiers side by side */
.tiers{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));align-items:start}
.tiers .price{max-width:none}
.home-price__cards .price__amt{font-size:clamp(2.6rem,6vw,3.6rem)}
.home-price__cta{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap}

/* ------------------------------------------------- free website review
   Reuses .form/.field from kestrel.css; this only caps the width so the
   fields do not stretch to the full column on a wide screen. */
.form--review{max-width:48rem}
.field__opt{text-transform:none;letter-spacing:0;opacity:.7}

/* ----------------------------------------------------------- contact */
.contact-grid{display:grid;gap:clamp(2rem,5vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));align-items:start}
.contact-grid h2{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:1.25rem}
.contact-grid__note{margin-top:1.25rem;color:var(--dim);font-size:.95rem;
  line-height:1.55;max-width:38ch}
.contact-routes{display:grid;gap:.6rem}
.contact-routes a{
  display:block;text-decoration:none;background:var(--raise);
  border:1px solid var(--line);border-radius:12px;padding:1rem 1.15rem;
  transition:border-color .3s,transform .3s var(--ease);
}
.contact-routes a:hover{border-color:var(--orange);transform:translateY(-2px)}
.contact-routes b{display:block;margin-bottom:.2rem}
.contact-routes span{display:block;color:var(--dim);font-size:.92rem;line-height:1.5}

/* --------------------------------------------------------- free audit */
.audit{max-width:640px}
.audit label{display:block;font-family:var(--f-m);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--barley);margin-bottom:.7rem}
.audit__row-in{display:flex;gap:.6rem;flex-wrap:wrap}
.audit__row-in input{
  flex:1 1 16rem;min-width:0;background:var(--raise);color:var(--chalk);
  border:1px solid var(--line-2);border-radius:100px;padding:1rem 1.4rem;
  font-family:var(--f-b);font-size:1rem;
}
.audit__row-in input:focus{border-color:var(--barley);outline:none}
.audit__row-in .btn{flex:0 0 auto}
.audit__row-in .btn[disabled]{opacity:.6;cursor:progress}
.audit__note{margin-top:.9rem;font-size:.85rem;color:var(--dim);max-width:50ch}

.audit__out{margin-top:2.5rem}
.audit__msg{padding:1rem 1.25rem;border-radius:12px;border:1px solid var(--line-2);
  background:var(--raise);font-size:.95rem;color:var(--dim)}
.audit__msg--bad{border-color:var(--rufous-soft);color:var(--chalk)}
.audit__head{margin-bottom:1.5rem}
.audit__score{font-family:var(--f-d);font-weight:800;letter-spacing:-.04em;line-height:1;
  margin:.5rem 0 .4rem}
.audit__score b{font-size:clamp(2.6rem,7vw,4rem)}
.audit__score span{font-size:1rem;font-weight:500;color:var(--dim);margin-left:.4rem;
  letter-spacing:0;font-family:var(--f-b)}
.audit__verdict{font-size:1.1rem}
.audit__list{display:grid;gap:.6rem;margin-bottom:2rem}
.audit__row{display:flex;gap:1rem;align-items:flex-start;
  background:var(--raise);border:1px solid var(--line);border-radius:12px;padding:1rem 1.15rem}
.audit__row b{display:block;margin-bottom:.2rem}
.audit__row p{color:var(--dim);font-size:.92rem;line-height:1.5}
.audit__state{flex:0 0 7.5rem;font-family:var(--f-m);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;padding-top:.25rem}
.audit__row--good .audit__state{color:#2E7D52}
.audit__row--warn .audit__state{color:var(--barley)}
.audit__row--bad{border-color:var(--rufous-soft)}
.audit__row--bad .audit__state{color:var(--rufous-soft)}
.audit__after{border-top:1px solid var(--line-2);padding-top:1.5rem}
.audit__after p{color:var(--dim);max-width:60ch;margin-bottom:1.25rem}
@media (max-width:620px){
  .audit__row{flex-direction:column;gap:.35rem}
  .audit__state{flex:none;padding-top:0}
  .audit__row-in .btn{width:100%;justify-content:center}
}

/* ------------------------------------------------------------- consent
   Only ever in the DOM when a measurement ID is set. Sits bottom-left rather
   than across the whole screen: it is a question, not a toll gate, and it must
   not cover the contact form on a phone. */
.consent{
  position:fixed;z-index:80;left:var(--pad);bottom:var(--pad);
  width:min(30rem,calc(100vw - var(--pad)*2));
  background:var(--raise);color:var(--chalk);
  border:1px solid var(--line-2);border-radius:14px;
  padding:1.1rem 1.25rem;box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.consent[hidden]{display:none}
.consent p{font-size:.9rem;line-height:1.5;color:var(--dim);margin-bottom:.9rem}
.consent a{color:var(--chalk)}
.consent__btns{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.consent__no{
  background:none;border:0;cursor:pointer;color:var(--dim);
  font-family:var(--f-b);font-size:.85rem;padding:.62rem .4rem;
  text-decoration:underline;text-underline-offset:3px;
}
.consent__no:hover{color:var(--chalk)}
@media (max-width:560px){
  .consent{left:0;right:0;bottom:0;width:auto;border-radius:14px 14px 0 0;border-left:0;border-right:0;border-bottom:0}
  /* These are the primary controls on a phone, so they get a real 44px target. */
  .consent .btn--sm{min-height:44px;padding-inline:1.4rem}
  .consent__no{min-height:44px;padding-inline:.8rem}
}

/* ----------------------------------------------------------- link lists */
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chips a{display:inline-block;padding:.55rem 1rem;border:1px solid var(--line-2);border-radius:100px;
  text-decoration:none;font-size:.92rem;transition:border-color .3s,color .3s}
.chips a:hover{border-color:var(--barley);color:var(--barley)}

.sect-h2{font-family:var(--f-d);font-weight:800;letter-spacing:-.035em;line-height:1.02;
  font-size:clamp(2rem,5vw,3.6rem);margin-bottom:1.5rem}
.home-sec{padding-block:var(--sec)}
.home-sec .prose{margin-bottom:2rem}

/* ------------------------------------------------------------ case study */
.cs__shot{max-width:1000px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cs__tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.cs__tags li{font-family:var(--f-m);font-size:.68rem;letter-spacing:.08em;padding:.4rem .75rem;
  border:1px solid var(--line-2);border-radius:100px;color:var(--dim)}

/* ------------------------------------------------------------- cta band */
.cta{background:var(--void);padding-block:clamp(3.5rem,7vw,6rem);border-top:1px solid var(--line)}
.cta h2{font-size:clamp(2rem,5vw,3.4rem);line-height:1;margin-bottom:1rem;max-width:20ch}
.cta p{color:var(--dim);max-width:52ch;margin-bottom:1.75rem}
.cta__row{display:flex;flex-wrap:wrap;gap:1.25rem 2rem;align-items:center}

/* ---------------------------------------------------------- footer extras */
.foot__cols{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.5rem;
  padding-top:1.5rem;border-top:1px solid var(--line)}
.foot__cols h2{font-family:var(--f-m);font-size:.66rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);margin-bottom:.8rem;line-height:1.3}
.foot__cols a{display:block;text-decoration:none;font-size:.9rem;color:var(--dim);padding-block:.3rem}
.foot__cols a:hover{color:var(--chalk)}
.foot__cols address{font-style:normal;font-size:.9rem;color:var(--dim);line-height:1.6}

@media (max-width:820px){
  .psec .wrap{grid-template-columns:1fr;gap:1.5rem}
  .phero h1{max-width:none}
}