/* ---------------------------------------------------------------------------
   Shared stylesheet for the content pages (case studies, guides).

   The homepage keeps its own inline <style> block. This is deliberately NOT a
   copy of it: index.html is the live shopfront and is not worth the risk of a
   refactor, and most of its CSS is hero/pricing furniture these pages do not
   use. What is shared is the part that has to match — the design tokens, the
   header and the footer — so a case study reads as the same site rather than
   a bolted-on subpage.

   Tokens below are copied verbatim from index.html. If one changes there,
   change it here. There is no build step to keep them in sync.
   --------------------------------------------------------------------------- */

:root{
  --navy:#1d2b45;
  --navy-700:#243553;
  --navy-900:#141f33;
  --cream:#f5f8fd;
  --cream-200:#e9eff8;
  --gold:#c9a25b;
  --gold-soft:#e3c98f;
  --gold-grad:linear-gradient(135deg,#e6d09a 0%,#c9a25b 52%,#b3863a 100%);
  --ink:#1d2b45;
  --muted:#5d6b82;
  --line:rgba(29,43,69,.12);
  --white:#ffffff;
  --radius:20px;
  --shadow-sm:0 2px 10px rgba(29,43,69,.08);
  --shadow-md:0 18px 44px rgba(29,43,69,.13);
  --maxw:1180px;
  --readw:720px;          /* measure for body copy — narrower than the grid */
  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:var(--navy-900)}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
[hidden]{display:none!important}

/* An inline `display:` beats the hidden attribute, and a .wrap padding
   shorthand would flatten section rhythm — both have bitten this repo before.
   padding-inline only. */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:24px}
.read{max-width:var(--readw);margin:0 auto;padding-inline:24px}
.serif{font-family:var(--serif)}

h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.018em}
.eyebrow{
  font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--gold)}

/* ---- Header ------------------------------------------------------------ */
/* On content pages the header sits on a dark hero band, same as the homepage
   above the fold, then turns dark-on-light once scrolled past it. */
#hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:18px 0;transition:background .3s ease,box-shadow .3s ease,padding .3s ease;
}
#hdr.scrolled{background:rgba(245,248,253,.92);backdrop-filter:blur(12px);box-shadow:var(--shadow-sm);padding:12px 0}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:42px;height:42px;border-radius:11px;background:var(--navy);display:grid;place-items:center;flex:none;border:1px solid rgba(233,240,250,.2)}
.brand-mark svg{width:30px;height:30px}
.brand-stack{display:flex;align-items:baseline;gap:7px}
.brand-name{font-family:var(--serif);font-weight:600;font-size:22px;color:var(--cream);letter-spacing:.2px;transition:color .3s ease}
.brand-tag{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);align-self:flex-start;margin-top:8px;transition:color .3s ease}
#hdr.scrolled .brand-name{color:var(--ink)}
#hdr.scrolled .brand-tag{color:var(--gold)}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:15px;font-weight:500;color:var(--cream);opacity:.85;transition:opacity .2s,color .3s ease}
.nav-links a:hover{opacity:1}
#hdr.scrolled .nav-links a{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:14px}

.btn{
  display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;
  padding:14px 26px;border-radius:999px;cursor:pointer;border:1.5px solid transparent;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease,background .3s ease,color .3s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--gold-grad);color:var(--navy-900);box-shadow:0 8px 22px rgba(201,162,91,.32)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(201,162,91,.40)}
.btn-ghost{background:rgba(233,240,250,.04);color:var(--cream);border-color:rgba(233,240,250,.35)}
.btn-ghost:hover{background:rgba(233,240,250,.12)}
#hdr.scrolled .btn-ghost{color:var(--ink);border-color:var(--line)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-outline:hover{border-color:var(--gold);color:var(--navy)}

/* ---- Page hero --------------------------------------------------------- */
.page-hero{
  background:var(--navy-900);color:var(--cream);
  padding:150px 0 72px;position:relative;overflow:hidden;
}
.page-hero::after{
  content:"";position:absolute;right:-140px;top:-140px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,91,.16),transparent 68%);pointer-events:none;
}
.page-hero h1{font-size:clamp(34px,5.2vw,58px);margin:18px 0 18px;color:var(--cream);position:relative}
.page-hero .lead{font-size:clamp(16px,1.6vw,19.5px);color:rgba(233,240,250,.76);max-width:640px;position:relative}
.crumbs{font-size:13.5px;color:rgba(233,240,250,.6);margin-bottom:6px;position:relative}
.crumbs a{color:var(--gold-soft)}
.crumbs a:hover{text-decoration:underline}

/* Facts strip under a case-study hero. */
.facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;
  background:rgba(233,240,250,.14);border:1px solid rgba(233,240,250,.14);
  border-radius:14px;overflow:hidden;margin-top:40px;position:relative;
}
.fact{background:var(--navy-900);padding:20px 22px}
.fact dt{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:7px}
.fact dd{font-size:15.5px;color:var(--cream);line-height:1.45}
.fact dd a{color:var(--cream);border-bottom:1px solid rgba(227,201,143,.5)}

/* ---- Article body ------------------------------------------------------ */
.article{padding:76px 0 96px}
.article h2{font-size:clamp(25px,3.1vw,34px);margin:56px 0 16px}
.article h2:first-child{margin-top:0}
.article h3{font-size:clamp(19px,2.1vw,22px);margin:36px 0 12px}
.article p{margin-bottom:19px;font-size:17px;color:#33405a}
.article ul,.article ol{margin:0 0 22px 22px}
.article li{margin-bottom:10px;font-size:17px;color:#33405a}
.article strong{color:var(--ink);font-weight:600}
.article a:not(.btn){color:var(--navy);border-bottom:1.5px solid var(--gold);font-weight:500}
.article a:not(.btn):hover{background:rgba(201,162,91,.13)}
.article hr{border:0;border-top:1px solid var(--line);margin:52px 0}

.callout{
  background:var(--cream-200);border-left:3px solid var(--gold);
  border-radius:0 12px 12px 0;padding:22px 26px;margin:32px 0;
}
.callout p:last-child{margin-bottom:0}
.callout p{font-size:16.5px}

/* Before / after pairs on a case study. */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:30px 0 34px}
.ba-col{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:24px 26px;box-shadow:var(--shadow-sm)}
.ba-col h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--sans);font-weight:700;margin-bottom:14px}
.ba-before h4{color:var(--muted)}
.ba-after h4{color:var(--gold)}
.ba-col ul{margin:0 0 0 18px}
.ba-col li{font-size:15.5px;margin-bottom:9px}
.ba-col li:last-child{margin-bottom:0}

/* Price table on the cost guide. */
.ptable{width:100%;border-collapse:collapse;margin:26px 0 30px;font-size:16px}
.ptable th,.ptable td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.ptable th{font-family:var(--sans);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700}
.ptable td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}
.ptable tr:last-child td{border-bottom:0}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Work index cards. */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px;margin-top:8px}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 30px;box-shadow:var(--shadow-sm);
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease,border-color .3s ease;
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:rgba(201,162,91,.5)}
.card .kicker{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);font-weight:700}
.card h3{font-size:24px;margin:12px 0 6px}
.card .where{font-size:14px;color:var(--muted);margin-bottom:14px}
.card p{font-size:15.5px;color:#33405a;margin-bottom:20px;flex:1}
.card .more{font-size:15px;font-weight:600;color:var(--navy);display:inline-flex;align-items:center;gap:7px}
.card:hover .more{color:var(--gold)}

/* Closing call to action. */
.cta-band{background:var(--navy);color:var(--cream);padding:76px 0;text-align:center}
.cta-band h2{font-size:clamp(27px,3.6vw,40px);color:var(--cream);margin-bottom:14px}
.cta-band p{color:rgba(233,240,250,.75);max-width:520px;margin:0 auto 28px;font-size:17px}

/* ---- Footer ------------------------------------------------------------ */
footer{background:var(--navy-900);color:rgba(233,240,250,.7);padding:56px 0 32px}
.foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:36px}
.foot-brand{max-width:300px}
.foot-brand .brand-name{color:var(--cream)}
.foot-brand p{font-size:14px;margin-top:14px;color:rgba(233,240,250,.6)}
.foot-cols{display:flex;gap:64px;flex-wrap:wrap}
.foot-col h5{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:14px}
.foot-col a{display:block;font-size:14.5px;margin-bottom:10px;opacity:.82;transition:opacity .2s}
.foot-col a:hover{opacity:1}
.foot-bot{border-top:1px solid rgba(233,240,250,.12);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:rgba(233,240,250,.5)}

/* ---- Narrow ------------------------------------------------------------ */
@media (max-width:860px){
  .nav-links{display:none}
  .nav-login{display:none}
  .ba{grid-template-columns:1fr}
  .page-hero{padding:126px 0 56px}
  .article{padding:56px 0 72px}
  .article h2{margin-top:44px}
}
@media (max-width:420px){
  .btn{padding:13px 20px;font-size:14.5px}
  .brand-tag{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}