/* ========== TOKENS ========== */
:root{
  --ink:#12100E;
  --ink-2:#1B1815;
  --cream:#FAF7F0;          /* page ground — sampled from the brand banner */
  --cream-2:#F2EADB;        /* tinted section */
  --ink:#141A1C;            /* wordmark black */
  --green:#1D3B2E;          /* office wall / sign green */
  --green-2:#163025;        /* deeper, for the footer */
  --green-hi:#3E6B57;
  --gold:#F5A81C;           /* the bee */
  --gold-hi:#FFC457;
  --gold-deep:#A8710A;      /* gold that passes contrast on cream */
  --text:#2A2E2B;
  --text-mute:#5F6661;
  --line:#E2D9C7;
  --line-dark:rgba(250,247,240,.16);
  --radius:14px;
  --shadow:0 1px 2px rgba(18,16,14,.06), 0 12px 32px -12px rgba(18,16,14,.18);
  --shadow-lg:0 2px 4px rgba(18,16,14,.08), 0 30px 60px -20px rgba(18,16,14,.35);
  --maxw:1160px;
  --serif:"Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ========== RESET ========== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;
  /* the header is sticky and 74px tall — keep anchor jumps from parking
     section content (and the top row of plaque photos) underneath it */
  scroll-padding-top:90px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important; transition:none!important}}
body{margin:0; font-family:var(--sans); color:var(--text); background:var(--cream);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; display:block}
[hidden]{display:none !important}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.12; letter-spacing:-.015em; margin:0}
p{margin:0}
:focus-visible{outline:3px solid var(--green); outline-offset:3px; border-radius:4px}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:22px}
/* grid children must be allowed to shrink below their content's natural width */
.steps > *, .cards > *, .tiers > *, .feats > *, .formgrid > *, .gallery > *, .ftr__grid > *{min-width:0}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep)}
.eyebrow.on-dark{color:var(--gold)}
.lede{font-size:18px; color:var(--text-mute); max-width:60ch}
.section{padding-block:clamp(56px,8vw,96px)}
.section--dark{background:var(--green); color:var(--cream)}
.section--dark .lede{color:#B9CBC1}
.section--tint{background:var(--cream-2)}
.center{text-align:center}
.center .lede{margin-inline:auto}
h2.h{font-size:clamp(28px,4.4vw,44px)}

/* ========== BUTTONS ========== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--sans); font-weight:600; font-size:16px; line-height:1;
  padding:15px 26px; border-radius:100px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn--gold{background:linear-gradient(180deg,var(--gold-hi),var(--gold)); color:#3A2705;
  box-shadow:0 8px 24px -8px rgba(245,168,28,.75)}
.btn--gold:hover{box-shadow:0 14px 30px -10px rgba(245,168,28,.85)}
.btn--ghost{border-color:rgba(20,26,28,.28); color:var(--ink)}
.section--dark .btn--ghost,.pagehead .btn--ghost,.slab .btn--ghost,.cta-band .btn--ghost{border-color:rgba(250,247,240,.4); color:var(--cream)}
.btn--ghost:hover{background:rgba(20,26,28,.06)}
.section--dark .btn--ghost:hover,.pagehead .btn--ghost:hover,.slab .btn--ghost:hover,.cta-band .btn--ghost:hover{background:rgba(250,247,240,.12)}
.btn--dark{background:var(--green); color:var(--cream)}
.btn--lg{font-size:17px; padding:18px 32px}
.btn--block{width:100%}

/* ========== PROMO BAR ========== */
.promo{background:var(--green);
  color:var(--gold-hi); font-size:14px; font-weight:600; text-align:center; padding:9px 18px}
.promo code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:700;
  background:rgba(250,247,240,.16); padding:2px 8px; border-radius:5px}

/* ========== HEADER ========== */
.hdr{position:sticky; top:0; z-index:60; background:var(--cream);
  backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line)}
.hdr__in{display:flex; align-items:center; gap:20px; height:74px}
.hdr__logo{display:block; flex:none}
.hdr__logo img{width:235px; height:auto; max-width:100%}
.nav{display:flex; gap:22px; margin-left:auto; align-items:center}
.nav a{color:var(--text); text-decoration:none; font-size:15px; font-weight:500; transition:color .15s}
.nav a:hover{color:var(--green)}
.nav .btn{display:none} /* only shown inside the mobile menu */
.hdr__cta{display:flex; align-items:center; gap:14px}
.hdr__tel{color:var(--ink); text-decoration:none; font-weight:600; font-size:15px; white-space:nowrap}
.hdr__tel:hover{color:var(--green)}
.burger{display:none; margin-left:auto; background:none; border:1px solid var(--line);
  border-radius:10px; width:44px; height:44px; cursor:pointer; align-items:center; justify-content:center}
.burger span{display:block; width:20px; height:2px; background:var(--ink); position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink)}
.burger span::before{top:-6px} .burger span::after{top:6px}

@media (max-width:1080px){
  .nav{position:fixed; inset:74px 0 auto 0; background:var(--cream); flex-direction:column;
    align-items:stretch; gap:0; padding:8px 22px 22px; border-bottom:1px solid var(--line); box-shadow:var(--shadow); display:none}
  .nav[data-open="true"]{display:flex}
  .nav a{padding:14px 0; border-bottom:1px solid var(--line); font-size:17px}
  .nav .btn{display:inline-flex; margin-top:16px}
  .burger{display:flex}
  .hdr__cta{display:none}
}
@media (max-width:420px){ .hdr__logo img{width:193px} }

/* ========== HERO ========== */
.hero{background:linear-gradient(170deg,#FCFAF5 0%,var(--cream) 55%,#F5EFE2 100%); color:var(--text);
  padding-block:clamp(48px,7vw,84px) clamp(48px,7vw,80px); position:relative; overflow:hidden}
/* soft honeycomb tint in the corners — pattern only, no wordmark */
.hero::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='%23F5A81C' stroke-width='1.6'%3E%3Cpath d='M28 0L52 14v28L28 56 4 42V14z'/%3E%3Cpath d='M0 48.5L4 46m48 0l4 2.5M28 56v13'/%3E%3Cpath d='M28 69L52 83v28M28 69L4 83v28'/%3E%3C/g%3E%3C/svg%3E");
  background-size:112px 194px; opacity:.16;
  -webkit-mask-image:radial-gradient(120% 100% at 100% 0%, #000 0%, transparent 62%);
  mask-image:radial-gradient(120% 100% at 100% 0%, #000 0%, transparent 62%)}
.hero .wrap{position:relative}
.hero__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center}
.hero__grid > *{min-width:0}
.hero h1{font-size:clamp(38px,6.2vw,66px); letter-spacing:-.025em}
.hero h1 em{font-style:normal; color:var(--green)}
.hero__sub{margin-top:20px; font-size:clamp(17px,2vw,20px); color:var(--text-mute); max-width:52ch}
.hero__actions{margin-top:32px; display:flex; flex-wrap:wrap; gap:14px}
.hero__meta{margin-top:28px; display:flex; flex-wrap:wrap; gap:10px 24px; font-size:14.5px; color:var(--text-mute)}
.hero__meta span{display:flex; align-items:center; gap:8px}
.hero__meta svg{flex:none; color:var(--green)}
.hero__art{position:relative; min-width:0}
.hero__art img{width:100%; height:auto; border-radius:18px; box-shadow:var(--shadow-lg)}
.hero__badge{position:absolute; left:-14px; bottom:-14px; background:var(--green); color:var(--cream);
  border-radius:14px; padding:14px 18px; box-shadow:var(--shadow-lg); max-width:220px}
.hero__badge b{display:block; font-family:var(--serif); font-size:24px; line-height:1}
.hero__badge span{font-size:13px; color:#B9CBC1; line-height:1.35; display:block; margin-top:4px}
@media (max-width:880px){
  .hero__grid{grid-template-columns:1fr}
  .hero__art{order:-1}
  .hero__badge{display:none}
}

/* ========== AWARD-CATEGORY STRIP ========== */
.pubs{background:var(--cream-2); padding-block:26px; border-bottom:1px solid var(--line)}
.pubs__label{display:block; text-align:center; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:700; color:var(--text-mute); margin-bottom:16px}
.pubs__list{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 12px;
  list-style:none; padding:0; margin:0}
.pubs__list li{font-family:var(--serif); font-size:clamp(14px,1.7vw,18px); color:var(--green);
  background:#fff; border:1px solid var(--line); border-radius:100px; padding:7px 17px; white-space:nowrap}

/* ========== STEPS ========== */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px}
.step{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px; box-shadow:var(--shadow)}
.step__n{width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--green); color:var(--gold-hi); font-family:var(--serif); font-size:19px; font-weight:700; margin-bottom:18px}
.step h3{font-size:21px; margin-bottom:10px}
.step p{color:var(--text-mute); font-size:15.5px}
@media (max-width:820px){.steps{grid-template-columns:1fr}}

/* ========== PRODUCT CARDS ========== */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:44px}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.card__img{aspect-ratio:1/1; background:var(--cream-2); overflow:hidden; position:relative}
.card__img img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:10px}
.card__body{padding:22px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1}
.card h3{font-size:21px}
.card__new{font-family:var(--sans); font-style:normal; color:var(--gold-deep); font-size:12px;
  font-weight:700; letter-spacing:.1em; vertical-align:middle; margin-left:6px}
.card p{font-size:15.5px; color:var(--text-mute); flex:1}
.card__price{font-weight:700; font-size:15px; color:var(--ink); border-top:1px solid var(--line); padding-top:14px}
.card__price span{font-weight:500; color:var(--text-mute)}
@media (max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}

/* ========== PRICING ========== */
.tiers{display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin-top:44px; align-items:start}
.tier{background:var(--ink-2); border:1px solid var(--line-dark); border-radius:var(--radius); padding:32px 30px; position:relative}
.tier--feat{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 30px 60px -30px rgba(245,168,28,.5)}
.tier__tag{position:absolute; top:-13px; left:30px; background:var(--gold); color:#2A1C05;
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 12px; border-radius:100px}
.tier h3{font-size:24px; color:var(--cream)}
.tier__price{font-family:var(--serif); font-size:42px; color:var(--gold-hi); margin-top:12px; line-height:1}
.tier__price small{font-family:var(--sans); font-size:14px; color:#9A9086; font-weight:500; display:block; margin-top:8px}
.tier ul{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:11px}
.tier li{display:flex; gap:11px; font-size:15.5px; color:#C4B9AC; align-items:flex-start}
.tier li svg{flex:none; margin-top:4px; color:var(--gold)}
.pricing-note{margin-top:32px; font-size:15px; color:#B9CBC1; text-align:center; max-width:70ch; margin-inline:auto}
.pricing-note a{color:var(--gold-hi)}
@media (max-width:760px){.tiers{grid-template-columns:1fr}}

.tablewrap{margin-top:36px; overflow-x:auto; border:1px solid var(--line-dark); border-radius:var(--radius)}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:15px}
th,td{padding:13px 18px; text-align:left; border-bottom:1px solid var(--line-dark); color:#C4B9AC}
th{background:var(--ink-2); color:var(--gold-hi); font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase}
tr:last-child td{border-bottom:none}
td:first-child{color:var(--cream); font-weight:600}

/* ========== FEATURES ========== */
.feats{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:44px}
.feat__ico{width:46px; height:46px; border-radius:12px; background:var(--green); color:var(--gold-hi);
  display:grid; place-items:center; margin-bottom:16px}
.feat h3{font-size:18px; margin-bottom:8px}
.feat p{font-size:15px; color:var(--text-mute)}
@media (max-width:900px){.feats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.feats{grid-template-columns:1fr}}

/* ========== GALLERY (natural heights — nothing gets cropped) ========== */
.gallery{margin-top:44px; columns:4; column-gap:18px}
.gallery figure{margin:0 0 18px; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:14px; break-inside:avoid; box-shadow:var(--shadow)}
.gallery img{width:100%; height:auto; border-radius:4px}
.gallery figcaption{margin-top:12px; font-size:13px; color:var(--text-mute); text-align:center}

/* wide gallery used on the campaign pages, where the pictures ARE the page */
.gallery--wide{columns:3; column-gap:22px; margin-top:0}
.gallery--wide figure{margin-bottom:22px}
@media (max-width:900px){.gallery--wide{columns:2}}
@media (max-width:560px){.gallery--wide{columns:1}}

/* shorter page banner for the picture-book pages */
.pagehead--slim{padding-top:54px; padding-bottom:54px}
.pagehead--slim h1{font-size:clamp(28px,4.4vw,44px)}

@media (max-width:1000px){.gallery{columns:3}}
@media (max-width:760px){.gallery{columns:2}}
@media (max-width:460px){.gallery{columns:1}}

/* ========== FAQ ========== */
.faq{margin-top:44px; max-width:840px; margin-inline:auto; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-family:var(--serif); font-size:19px; font-weight:600; color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--green); border-bottom:2px solid var(--green);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .a{padding:0 0 24px; color:var(--text-mute); font-size:16px; max-width:70ch}
.faq .a p + p{margin-top:12px}

/* ========== FORM ========== */
.cta-band{background:linear-gradient(160deg,var(--green-hi) -40%,var(--green) 45%,var(--green-2) 100%); color:var(--cream)}
.formgrid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,5vw,60px); align-items:start}
.formside h2{color:var(--cream)}
.formside .lede{color:#B9CBC1}
.contactlist{list-style:none; padding:0; margin:30px 0 0; display:grid; gap:18px}
.contactlist li{display:flex; gap:13px; align-items:flex-start; font-size:16px; color:#CBDAD2}
.contactlist svg{flex:none; margin-top:3px; color:var(--gold-hi)}
.contactlist a{color:var(--cream); text-decoration:none; font-weight:600; word-break:break-word}
.contactlist a:hover{color:var(--gold)}
form.order{background:var(--cream); color:var(--text); border-radius:18px; padding:clamp(24px,3.5vw,34px); box-shadow:var(--shadow-lg)}
.fields{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field{display:flex; flex-direction:column; gap:7px}
.field--full{grid-column:1/-1}
label{font-size:13.5px; font-weight:600}
label .req{color:#B4451F}
input,select,textarea{font:inherit; font-size:16px; padding:12px 14px; border:1.5px solid var(--line);
  border-radius:10px; background:#fff; color:var(--text); width:100%}
textarea{resize:vertical; min-height:96px}
input:focus,select:focus,textarea:focus{border-color:var(--green); outline:none; box-shadow:0 0 0 3px rgba(29,59,46,.16)}
.hint{font-size:13px; color:var(--text-mute)}
.hp{position:absolute; left:-9999px}
.formfoot{margin-top:22px; display:flex; flex-direction:column; gap:12px}
.formfoot .hint{text-align:center}
@media (max-width:860px){.formgrid{grid-template-columns:1fr} .fields{grid-template-columns:1fr}}

/* ========== FOOTER ========== */
.ftr{background:var(--green-2); color:#9FB5AA; padding-block:52px 28px; font-size:15px}
.ftr__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px}
.ftr__logo{width:191px; height:auto; max-width:100%; margin-bottom:18px}
.ftr h4{font-family:var(--sans); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-hi); font-weight:700; margin-bottom:16px}
.ftr ul{list-style:none; padding:0; margin:0; display:grid; gap:11px}
.ftr a{color:#C3D4CB; text-decoration:none; word-break:break-word}
.ftr a:hover{color:var(--gold-hi)}
.ftr__legal{margin-top:40px; padding-top:22px; border-top:1px solid rgba(250,247,240,.14); font-size:13px;
  display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; color:#7F968B}
.disclaimer{margin-top:18px; font-size:12.5px; color:#75897F; line-height:1.6; max-width:90ch}
@media (max-width:820px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ftr__grid{grid-template-columns:1fr}}

.skip{position:absolute; left:-9999px; top:0; background:var(--green); color:var(--cream);
  padding:12px 20px; border-radius:0 0 10px 0; font-weight:700; z-index:100}
.skip:focus{left:0}

/* ========== SUB-PAGE HERO + DOCUMENT PAGES ========== */
.pagehead{background:linear-gradient(150deg,var(--green-hi) -30%,var(--green) 45%,var(--green-2) 100%);
  color:var(--cream); padding-block:clamp(44px,7vw,76px)}
.pagehead h1{font-size:clamp(32px,5.2vw,52px); margin-top:10px}
.pagehead p{margin-top:16px; color:#C3D4CB; font-size:18px; max-width:62ch}
.pagehead .updated{margin-top:20px; font-size:14px; color:#8FA79B}

.doc{padding-block:clamp(44px,6vw,72px)}
.doc__in{max-width:760px; margin-inline:auto}
.doc h2{font-size:clamp(22px,2.8vw,28px); margin-top:44px; scroll-margin-top:96px}
.doc h2:first-of-type{margin-top:0}
.doc h3{font-size:19px; margin-top:28px}
.doc p{margin-top:14px; color:#413A33}
.doc ul,.doc ol{margin-top:14px; padding-left:22px; color:#413A33}
.doc li{margin-top:9px}
.doc li::marker{color:var(--gold)}
.doc strong{color:var(--ink)}
.doc a{color:var(--green); font-weight:600}
.doc hr{border:none; border-top:1px solid var(--line); margin:44px 0}
.doc__toc{background:var(--cream-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 26px; margin-bottom:40px}
.doc__toc h2{font-family:var(--sans); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green); margin:0 0 12px}
.doc__toc ol{margin:0; padding-left:20px; columns:2; column-gap:26px}
.doc__toc li{margin-top:6px; font-size:15px}
@media (max-width:560px){.doc__toc ol{columns:1}}
.callout{background:#F4F0E4; border:1px solid #DFD6C2; border-left:4px solid var(--green);
  border-radius:10px; padding:18px 22px; margin-top:26px}
.callout p{margin-top:0; color:#4A3B1C}
.callout p + p{margin-top:10px}

/* ========== ABOUT ========== */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,60px); align-items:center}
.split > *{min-width:0}
.split img{width:100%; height:auto; border-radius:18px; box-shadow:var(--shadow-lg)}
.split .lede{font-size:19px}
.split p + p{margin-top:16px}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.pull{font-family:var(--serif); font-size:clamp(22px,3.2vw,30px); line-height:1.3;
  color:var(--green); border-left:4px solid var(--gold); padding-left:24px; margin:8px 0 0}
.values{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:44px}
.values > *{min-width:0}
.value{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px; box-shadow:var(--shadow)}
.value h3{font-size:20px; margin-bottom:10px}
.value p{color:var(--text-mute); font-size:15.5px}
@media (max-width:860px){.values{grid-template-columns:1fr}}

/* ========== SIMPLE CENTERED PAGES (thanks / 404) ========== */
.slab{min-height:62vh; display:grid; place-items:center; text-align:center;
  background:linear-gradient(150deg,var(--green-hi) -30%,var(--green) 45%,var(--green-2) 100%); color:var(--cream);
  padding-block:clamp(56px,10vw,110px)}
.slab__in{max-width:560px; padding-inline:22px}
.slab img{width:100px; height:auto; max-width:100%; margin:0 auto 26px}
.slab h1{font-size:clamp(32px,5.5vw,50px)}
.slab p{margin-top:18px; color:#C3D4CB; font-size:18px}
.slab .btnrow{margin-top:32px; display:flex; flex-wrap:wrap; gap:14px; justify-content:center}

/* ========== TRUST BAND ========== */
.trust{background:var(--green); padding-block:38px}
.trust__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center}
.trust__grid > *{min-width:0}
.trust b{display:block; font-family:var(--serif); font-size:clamp(26px,3.4vw,34px); color:var(--gold-hi); line-height:1}
.trust span{display:block; margin-top:9px; font-size:14.5px; color:#B9CBC1; line-height:1.4}
@media (max-width:760px){.trust__grid{grid-template-columns:repeat(2,1fr); gap:28px 18px}}

/* ========== REVIEWS ========== */
.rev-lead{background:#fff; border:1px solid var(--line); border-left:4px solid var(--green);
  border-radius:var(--radius); padding:clamp(26px,3.6vw,38px); box-shadow:var(--shadow); margin-top:40px}
.rev-lead blockquote{margin:0; font-family:var(--serif); font-size:clamp(19px,2.4vw,24px);
  line-height:1.45; color:var(--ink)}
.rev-lead footer{margin-top:18px; font-size:15px; color:var(--text-mute); font-family:var(--sans)}
.rev-lead footer b{color:var(--ink)}
.revs{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:20px}
.revs > *{min-width:0}
.rev{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}
.rev p{font-size:15.5px; color:#413A33}
.rev footer{margin-top:14px; font-size:14px; color:var(--text-mute)}
.rev footer b{color:var(--ink)}
.stars{color:var(--gold); letter-spacing:2px; font-size:14px; margin-bottom:12px}
@media (max-width:980px){.revs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.revs{grid-template-columns:1fr}}

/* ========== PRICE + GUARANTEE BLOCK ========== */
.priceblock{max-width:780px; margin:40px auto 0; background:rgba(250,247,240,.07);
  border:1px solid rgba(250,247,240,.18); border-radius:var(--radius); padding:clamp(28px,4vw,40px); text-align:center}
.priceblock .range{font-family:var(--serif); font-size:clamp(30px,4.6vw,42px); color:var(--gold-hi); line-height:1.1}
.priceblock .qual{margin-top:14px; font-size:17px; color:#CBDAD2}
.priceblock .incl{margin-top:24px; padding-top:22px; border-top:1px solid rgba(250,247,240,.18);
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; font-size:15px; color:#B9CBC1}
.priceblock .incl span{display:flex; align-items:center; gap:8px}
.priceblock .incl svg{flex:none; color:var(--gold)}
.priceblock .btn{margin-top:28px}

/* light-background variant of the price block, used on the campaign pages */
.priceblock--light{background:var(--cream-2); border-color:var(--line)}
.priceblock--light .range{color:var(--gold-deep)}
.priceblock--light .qual{color:var(--text-mute)}
.priceblock--light .incl{border-top-color:var(--line); color:var(--text)}
.priceblock--light .incl svg{color:var(--gold-deep)}

/* ========== CAMPAIGN-PAGE NOTICE (/forbes, /barrons) ==========
   The "who we are" box that sits under the headline on any page that names
   a publication. Keep it on those pages. */
.notice{max-width:80ch; margin-inline:auto; text-align:center; font-size:15.5px;
  color:var(--text-mute); background:var(--cream-2); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 28px; line-height:1.6}
.notice strong{display:block; margin-bottom:6px; color:var(--ink);
  font-family:var(--serif); font-size:17px; font-weight:600}

/* ========== CLIENT WALLS ========== */
.client{margin-top:48px}
.client__head{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px; margin-bottom:6px}
.client__head h3{font-size:clamp(21px,2.6vw,26px); color:var(--green)}
.client__head .yrs{font-size:14px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold-deep); background:#fff; border:1px solid var(--line); border-radius:100px; padding:5px 13px}
.client__note{color:var(--text-mute); font-size:16px; max-width:70ch}
.client__grid{display:grid; gap:16px; margin-top:22px}
.client__grid--4{grid-template-columns:repeat(4,1fr)}
.client__grid--3{grid-template-columns:repeat(3,1fr)}
.client__grid--flow{grid-template-columns:repeat(7,1fr); gap:12px}
.client__series{margin-top:26px}
.client__series h4{font-family:var(--sans); font-size:12.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:700; margin-bottom:4px}
.client__series p{font-size:15px; color:var(--text-mute); margin-bottom:4px}
.client__rank{display:inline-block; font-weight:700; color:var(--green)}
.client__grid > *{min-width:0}
.client figure{margin:0; background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:9px; box-shadow:var(--shadow)}
.client figure img{width:100%; height:auto; border-radius:4px}
.client figcaption{margin-top:8px; font-size:12px; color:var(--text-mute); text-align:center; line-height:1.35}
@media (max-width:1040px){.client__grid--flow{grid-template-columns:repeat(4,1fr)}}
@media (max-width:900px){.client__grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.client__grid--flow{grid-template-columns:repeat(3,1fr)}}
@media (max-width:460px){.client__grid--flow{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.client__grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.client__grid--4,.client__grid--3{grid-template-columns:1fr}}

/* ========== LIGHTBOX ========== */
.zoomable{cursor:zoom-in}
.zoomable:focus-visible{outline:3px solid var(--gold); outline-offset:3px}
.lb{position:fixed; inset:0; z-index:200; display:none; background:rgba(12,18,15,.93);
  backdrop-filter:blur(4px); padding:clamp(16px,4vw,48px)}
.lb[data-open="true"]{display:grid; grid-template-rows:minmax(0,1fr) auto; gap:14px; place-items:center}
/* the stage needs a DEFINITE height, otherwise max-height:100% on the image
   has nothing to resolve against and a tall plaque renders at full size and
   spills off the screen. */
.lb__stage{display:grid; place-items:center; align-self:stretch; justify-self:stretch;
  width:100%; min-height:0; overflow:hidden}
/* sized in viewport units on purpose: a percentage max-height has nothing
   definite to resolve against inside a centred grid item, which is why a
   tall plaque used to render at full size and spill off the screen.
   72vh leaves room for the padding, the counter and the caption. */
.lb__img{max-width:min(92vw,900px); max-height:min(72vh,900px); width:auto; height:auto; object-fit:contain;
  border-radius:8px; box-shadow:0 30px 80px -20px rgba(0,0,0,.7); background:#0C0A09}
.lb__cap{color:#C3D4CB; font-size:15px; text-align:center; max-width:60ch}
.lb__cap .client__rank{color:var(--gold-hi); font-weight:700}
.lb__cap b{display:block; color:var(--cream); font-family:var(--serif); font-size:18px; margin-bottom:3px}
.lb__btn{position:absolute; background:rgba(250,247,240,.1); border:1px solid rgba(250,247,240,.3);
  color:var(--cream); width:48px; height:48px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font-size:22px; line-height:1; transition:background .15s}
.lb__btn:hover{background:rgba(250,247,240,.22)}
.lb__close{top:16px; right:16px}
.lb__prev{left:16px; top:50%; transform:translateY(-50%)}
.lb__next{right:16px; top:50%; transform:translateY(-50%)}
.lb__count{position:absolute; top:24px; left:50%; transform:translateX(-50%);
  color:#8FA79B; font-size:13px; letter-spacing:.08em}
@media (max-width:620px){
  .lb__prev{left:8px} .lb__next{right:8px}
  .lb__btn{width:42px; height:42px; font-size:19px}
}
body.lb-open{overflow:hidden}
/* every in-page jump target clears the sticky header */
section[id], main[id], h2[id], h3[id], .faq details[id]{scroll-margin-top:90px}

/* ========== HERO VARIANT: text block + full-bleed client wall ========== */
.hero__solo{max-width:820px; text-align:center; position:relative}
.hero__solo .hero__sub{margin-inline:auto}
.hero__solo .hero__actions,.hero__solo .hero__meta{justify-content:center}
.wallband{margin:0; position:relative; line-height:0; background:var(--green-2)}
.wallband img{width:100%; height:clamp(260px,38vw,520px); object-fit:cover; object-position:center 45%; display:block}
.wallband figcaption{position:absolute; inset:auto 0 0 0; line-height:1.45;
  background:linear-gradient(transparent,rgba(6,13,10,.88)); color:var(--cream);
  padding:70px 22px 20px; text-align:center; font-size:15px}
.wallband figcaption b{color:var(--gold-hi)}

/* ========== PARTNER / CAREERS ========== */
.doors{background:var(--cream-2); border-top:1px solid var(--line); padding-block:clamp(46px,6vw,72px)}
.doors__grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.doors__grid > *{min-width:0}
.door{background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(26px,3.4vw,36px); box-shadow:var(--shadow); display:flex; flex-direction:column}
.door__ico{width:44px; height:44px; border-radius:12px; background:var(--green); color:var(--gold-hi);
  display:grid; place-items:center; margin-bottom:18px}
.door h3{font-size:clamp(20px,2.4vw,24px); margin-bottom:10px}
.door__copy{flex:1}
.door p{color:var(--text-mute); font-size:15.5px}
.door p + p{margin-top:13px}
.door a.mail{display:inline-block; margin-top:20px; font-family:var(--serif); font-size:19px;
  font-weight:600; color:var(--green); text-decoration:none; word-break:break-word}
.door a.mail:hover{color:var(--gold-deep); text-decoration:underline}
@media (max-width:760px){.doors__grid{grid-template-columns:1fr}}