/* Farrever After Events - rebuilt site.
   Type and color are lifted from the business's own brand: Didot italic display
   (Playfair Display here), Brandon Grotesque Light body (Jost here), ink #414141,
   cream #F7EFE9 and clay #DEA27A from the live site, gold #C0A030 and sage #7E9A8C
   sampled from the logo artwork.
   Controlling idea: the site is a wedding-day RUN OF SHOW. A hairline time spine
   runs down every page; sections are call times on it. */

:root{
  color-scheme: only light;
  /* Straight off her live site: white ground, blush-cream panel #F7EFE9,
     soft charcoal text #414141 (never black), clay accent #DEA27A. The logo's
     gold and sage are deliberately NOT in the interface: the logo is an older
     asset and the site she actually runs is white, cream, charcoal and clay. */
  --paper:#ffffff;
  --cream:#f7efe9;
  --cream-2:#fcf8f5;
  --ink:#414141;
  --ink-2:#6f6a66;
  --char:#3c3a39;          /* her one dark band, deepened a hair for contrast */
  --clay:#dea27a;          /* her accent, decorative and on dark */
  --clay-ink:#a35a2c;      /* the same hue darkened until small text passes AA */
  --line:#eaded4;
  --line-2:#f4ece5;

  --display:"Bodoni Moda",Didot,"Bodoni MT","Playfair Display","Times New Roman",serif;
  --sans:"Jost","Brandon Grotesque",Futura,"Century Gothic",system-ui,sans-serif;

  --wrap:1180px;
  --gut:clamp(20px,5vw,64px);

  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --t-fast:160ms;
  --t-mid:320ms;
  --t-slow:640ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.72;
  letter-spacing:.008em;overflow-x:hidden;
}
img{max-width:100%;display:block}
/* width set in CSS plus a height attribute squashes the image; the
   attributes are there to reserve space, not to size it. */
.sbs img,.seenon img,.flogo img,.awardmarks img{height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.14;margin:0}
h1{font-size:clamp(38px,6.4vw,76px);letter-spacing:-.012em}
h2{font-size:clamp(28px,3.9vw,46px);letter-spacing:-.008em}
h3{font-size:clamp(20px,2.3vw,27px)}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
strong{font-weight:500;color:var(--char)}
::selection{background:var(--clay);color:#fff}

.wrap{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}
.narrow{width:min(760px,100%)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--char);color:#fff;
  padding:12px 18px;font-size:14px}
.skip:focus{left:8px;top:8px}
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--clay);outline-offset:3px;border-radius:2px}

/* ---------- the time spine: the motif, repeated on every page ---------- */
.spine{position:absolute;left:calc(var(--gut) / 2);top:0;bottom:0;width:1px;
  background:var(--line);pointer-events:none;z-index:0}
.spine::after{content:"";position:absolute;inset:0 auto 0 0;width:1px;
  background:linear-gradient(var(--clay),var(--clay-ink));
  transform-origin:top;transform:scaleY(var(--spine,0));transition:transform 80ms linear}
@media (max-width:960px){.spine{display:none}}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid transparent;
  transition:border-color var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease)}
header.stuck{border-color:var(--line-2);box-shadow:0 1px 24px rgba(60,58,57,.05)}
.bar{display:flex;align-items:center;gap:20px;min-height:76px}
.brand{font-family:var(--display);font-style:italic;font-size:clamp(19px,2vw,25px);
  text-decoration:none;color:var(--char);white-space:nowrap;flex:0 0 auto;letter-spacing:.005em}
.brand span{color:var(--clay-ink)}
nav.main{margin-left:auto;display:flex;align-items:center;gap:clamp(12px,1.9vw,28px)}
nav.main a{text-decoration:none;font-size:13.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink);position:relative;padding:6px 0;transition:color var(--t-fast) var(--ease)}
nav.main a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--clay);transform:scaleX(0);transform-origin:right;
  transition:transform var(--t-mid) var(--ease)}
nav.main a:hover{color:var(--char)}
nav.main a:hover::after,nav.main a[aria-current=page]::after{transform:scaleX(1);transform-origin:left}
nav.main a[aria-current=page]{color:var(--char)}
.navcta{border:1px solid var(--char);padding:10px 18px !important;color:var(--char) !important;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.navcta::after{display:none}
.navcta:hover{background:var(--char);color:#fff !important}
.burger{margin-left:auto;display:none;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:24px;height:1.5px;background:var(--char);margin:5px 0;
  transition:transform var(--t-mid) var(--ease),opacity var(--t-fast) var(--ease)}
body.navopen .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.navopen .burger span:nth-child(2){opacity:0}
body.navopen .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media (max-width:960px){
  .burger{display:block}
  /* Anchored to the header rather than a fixed 76px, because the preview
     banner sits above it at the top of the page and moves it down. */
  header{position:sticky}
  nav.main{position:absolute;top:100%;left:0;right:0;background:var(--paper);flex-direction:column;
    align-items:stretch;gap:0;padding:8px var(--gut) 26px;border-bottom:1px solid var(--line);
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease)}
  body.navopen nav.main{opacity:1;transform:none;pointer-events:auto}
  nav.main a{padding:15px 0;border-bottom:1px solid var(--line-2);font-size:15px}
  .navcta{margin-top:16px;text-align:center;border-bottom:1px solid var(--char) !important}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:11px;font-size:13.5px;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;padding:15px 28px;border:1px solid var(--char);
  background:var(--char);color:#fff;cursor:pointer;font-family:var(--sans);font-weight:400;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(60,58,57,.18)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--char)}
.btn.ghost:hover{background:var(--char);color:#fff}
.btn svg{width:14px;height:14px;transition:transform var(--t-mid) var(--ease)}
.btn:hover svg{transform:translateX(4px)}

/* ---------- section furniture ---------- */
section{position:relative;padding:clamp(64px,9vw,128px) 0}
section.tight{padding:clamp(44px,6vw,80px) 0}
.cream{background:var(--cream)}
.cream-2{background:var(--cream-2)}
.deep{background:var(--char);color:#f2ece6}
.deep h2,.deep h3,.deep strong{color:#fff}
.deep .eyebrow{color:var(--clay)}

/* the call time - the spine's tick marks, and the site's recurring motif */
.eyebrow{display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--clay-ink);margin:0 0 18px;font-weight:400}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;flex:0 0 auto}
.eyebrow.center{justify-content:center}

/* Didot-style drop initial - lifted from her own headings ("S ervices") */
.dropcap{font-family:var(--display);font-style:italic}
.dropcap::first-letter{font-size:1.85em;line-height:.8;padding-right:.06em;color:var(--char)}

.lede{font-size:clamp(18px,1.6vw,21px);line-height:1.66;color:var(--ink-2)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(86vh,760px);display:flex;align-items:flex-end;
  padding:0;overflow:hidden;background:var(--char)}
.hero-img{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 38%;}
html.js .hero-img img{transform:scale(1.06);opacity:0;transition:opacity 900ms var(--ease-soft),transform 2400ms var(--ease-soft)}
html.js .hero-img img.in{opacity:1;transform:scale(1)}
.hero-img::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(26,23,20,.62) 0%,rgba(26,23,20,.34) 42%,rgba(26,23,20,0) 72%),
    linear-gradient(180deg,rgba(26,23,20,.34) 0%,rgba(26,23,20,.06) 34%,rgba(26,23,20,.72) 100%)}
@media (max-width:860px){
  .hero-img::after{background:
    linear-gradient(180deg,rgba(26,23,20,.5) 0%,rgba(26,23,20,.28) 38%,rgba(26,23,20,.8) 100%)}
}
.hero-body{position:relative;z-index:2;color:#fff;padding-bottom:clamp(48px,7vw,92px);
  padding-top:clamp(120px,18vw,200px);width:100%}
.hero h1{color:#fff;font-style:italic;text-shadow:0 2px 40px rgba(0,0,0,.35)}
.hero .lede{color:rgba(255,255,255,.9);max-width:46ch;margin-top:22px}
.hero .eyebrow{color:rgba(255,255,255,.94)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero .btn{background:#fff;border-color:#fff;color:var(--char)}
.hero .btn.ghost{background:transparent;border-color:rgba(255,255,255,.65);color:#fff}
.hero .btn.ghost:hover{background:#fff;color:var(--char);border-color:#fff}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:38px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.22);font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.8)}

/* page header for interior pages */
.phead{padding:clamp(56px,8vw,104px) 0 clamp(32px,4vw,52px);position:relative}
.phead h1{font-style:italic;max-width:16ch}
.phead .lede{margin-top:22px;max-width:60ch}

/* ---------- run of show: the signature block ---------- */
.ros{list-style:none;margin:0;padding:0;position:relative}
.ros::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:1px;background:var(--line)}
.deep .ros::before{background:rgba(255,255,255,.2)}
.ros li{position:relative;padding:0 0 clamp(30px,4vw,46px) clamp(30px,5vw,60px)}
.ros li:last-child{padding-bottom:0}
.ros li::before{content:"";position:absolute;left:-3.5px;top:11px;width:8px;height:8px;
  border-radius:50%;background:var(--clay);box-shadow:0 0 0 5px var(--paper)}
.cream .ros li::before{box-shadow:0 0 0 5px var(--cream)}
.deep .ros li::before{background:var(--clay);box-shadow:0 0 0 5px var(--char)}
.ros .when{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--clay-ink);margin-bottom:7px}
.deep .ros .when{color:var(--clay)}
.ros h3{margin-bottom:8px}
.ros p{color:var(--ink-2);max-width:62ch}
.deep .ros p{color:rgba(242,236,230,.82)}

/* ---------- generic layout helpers ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,76px);align-items:center}
.split.wide-left{grid-template-columns:1.15fr .85fr}
.split.wide-right{grid-template-columns:.85fr 1.15fr}
@media (max-width:860px){
  .split,.split.wide-left,.split.wide-right{grid-template-columns:1fr;gap:clamp(24px,5vw,34px)}
  .split .frame.ar34{aspect-ratio:4/5}
  section{padding:clamp(52px,8vw,96px) 0}
}
.grid{display:grid;gap:clamp(18px,2.6vw,34px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}}
.frame{position:relative;overflow:hidden;background:var(--cream)}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform 1200ms var(--ease-soft)}
.frame:hover img{transform:scale(1.035)}
.ar43{aspect-ratio:4/3}.ar11{aspect-ratio:1/1}.ar34{aspect-ratio:3/4}.ar169{aspect-ratio:16/9}
.credit{font-size:12px;letter-spacing:.06em;color:var(--ink-2);margin-top:9px}

/* ---------- cards ---------- */
.card{background:var(--paper);border:1px solid var(--line-2);padding:clamp(24px,3vw,38px);
  position:relative;transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease),
  border-color var(--t-mid) var(--ease)}
.cream .card{background:var(--paper)}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(60,58,57,.07);border-color:var(--line)}
.card h3{margin-bottom:10px}
.card p{color:var(--ink-2)}
.card .price{font-family:var(--display);font-style:italic;font-size:26px;color:var(--clay-ink);
  display:block;margin:2px 0 14px}
a.card{text-decoration:none;display:block}
a.card .more{display:inline-flex;align-items:center;gap:9px;margin-top:18px;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--char)}
a.card .more svg{width:13px;height:13px;transition:transform var(--t-mid) var(--ease)}
a.card:hover .more svg{transform:translateX(5px)}

/* ---------- inclusions / checklists (her package copy) ---------- */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:15px}
.checks li{position:relative;padding-left:30px;color:var(--ink-2)}
.checks li::before{content:"";position:absolute;left:0;top:.62em;width:13px;height:7px;
  border-left:1.5px solid var(--clay-ink);border-bottom:1.5px solid var(--clay-ink);
  transform:rotate(-45deg)}
.subhead{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--clay-ink);
  margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line)}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.stats div{background:var(--paper);padding:clamp(22px,3vw,34px);text-align:center}
.cream .stats div{background:var(--cream)}
.stats b{display:block;font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(32px,4.4vw,50px);color:var(--char);line-height:1}
.stats span{display:block;margin-top:9px;font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-2)}
@media (max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- reviews ---------- */
.quote{font-family:var(--display);font-style:italic;font-size:clamp(21px,2.5vw,31px);
  line-height:1.44;color:var(--char)}
.rev{break-inside:avoid;background:var(--paper);border:1px solid var(--line-2);
  padding:clamp(22px,2.6vw,32px);margin-bottom:clamp(18px,2.4vw,30px)}
.cream .rev{background:var(--paper)}
.rev .stars{color:var(--clay-ink);letter-spacing:3px;font-size:13px;margin-bottom:12px}
.rev h3{font-size:19px;margin-bottom:10px}
.rev p{font-size:15.5px;line-height:1.72;color:var(--ink-2)}
.rev .who{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2);
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  display:flex;flex-wrap:wrap;gap:6px 14px}
.rev .who b{color:var(--char);font-weight:400}
.masonry{columns:3;column-gap:clamp(16px,2.2vw,26px)}
@media (max-width:1000px){.masonry{columns:2}}
@media (max-width:640px){.masonry{columns:1}}
/* ---------- the award wall ----------
   The badges are keyed to transparency by mkbadges.py, so there are no cells
   and no borders here: the marks sit on the page at one optical height and are
   grouped by who issued them. */
.awards{background:var(--paper);border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2)}
.awardwall{display:grid;gap:clamp(28px,3.6vw,46px);max-width:980px;margin-inline:auto}
.awardrow+.awardrow{border-top:1px solid var(--line-2);padding-top:clamp(26px,3.4vw,42px)}
.awardlabel{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 clamp(16px,2vw,24px)}
.awardlabel b{color:var(--clay-ink);font-weight:400}
.awardmarks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;align-items:center;gap:clamp(12px,2vw,28px)}
.awardmarks li{display:grid;place-items:center}
.awardmarks img{height:clamp(74px,7.6vw,116px);width:auto;max-width:100%;
  object-fit:contain;transition:transform var(--t-mid) var(--ease)}
.awardmarks li:hover img{transform:translateY(-4px) scale(1.04)}
@media (max-width:560px){
  .awardmarks{gap:18px}
  .awardmarks img{height:66px}
}
.seenon{margin:clamp(30px,4vw,52px) auto 0;max-width:560px;padding:0;border:0}
.seenon img{width:100%;display:block}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.gal button{padding:0;border:0;background:var(--cream);cursor:zoom-in;overflow:hidden;
  aspect-ratio:3/2;display:block}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease-soft),
  filter var(--t-mid) var(--ease)}
.gal button:hover img{transform:scale(1.05)}
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(24,21,19,.94);display:none;
  align-items:center;justify-content:center;padding:clamp(12px,3vw,48px)}
.lightbox[open],.lightbox.on{display:flex}
.lightbox img{max-width:100%;max-height:88vh;object-fit:contain;
  animation:lbin var(--t-mid) var(--ease)}
@keyframes lbin{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.lightbox .lbbtn{position:absolute;background:none;border:0;color:#fff;cursor:pointer;
  font-size:30px;line-height:1;padding:16px;opacity:.75;transition:opacity var(--t-fast) var(--ease)}
.lightbox .lbbtn:hover{opacity:1}
.lb-close{top:6px;right:10px}
.lb-prev{left:2px;top:50%;transform:translateY(-50%)}
.lb-next{right:2px;top:50%;transform:translateY(-50%)}
.lb-count{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.7);
  font-size:12.5px;letter-spacing:.14em}

/* ---------- forms ---------- */
form.inquire{display:grid;gap:20px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:620px){.f2{grid-template-columns:1fr}}
label{display:block;font-size:12px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:8px}
label .req{color:var(--clay)}
input,select,textarea{width:100%;font-family:var(--sans);font-size:16px;font-weight:300;
  color:var(--ink);background:var(--paper);border:1px solid var(--line);padding:14px 15px;
  border-radius:0;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
textarea{min-height:150px;resize:vertical;line-height:1.6}
input:focus,select:focus,textarea:focus{border-color:var(--char);
  box-shadow:0 0 0 3px rgba(222,162,122,.22);outline:none}
.hp{position:absolute;left:-9999px}
.formnote{font-size:13.5px;color:var(--ink-2)}
.formstatus{padding:14px 16px;border:1px solid var(--clay-ink);background:#f3f7f4;font-size:15px;display:none}
.formstatus.on{display:block}
.formstatus.err{border-color:var(--clay);background:#fdf3ec}

/* ---------- contact rows ---------- */
.contactlist{list-style:none;margin:0;padding:0;display:grid;gap:2px;background:var(--line-2)}
.contactlist a,.contactlist div{display:flex;gap:16px;align-items:center;background:var(--paper);
  padding:19px 22px;text-decoration:none;transition:background var(--t-fast) var(--ease)}
.contactlist a:hover{background:var(--cream-2)}
.contactlist svg{width:19px;height:19px;flex:0 0 auto;color:var(--clay-ink);stroke-width:1.4}
.contactlist b{display:block;font-weight:400;color:var(--char);font-size:16.5px}
.contactlist span{display:block;font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2);margin-top:2px}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative;
  font-family:var(--display);font-size:clamp(18px,2vw,22px);color:var(--char)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--clay-ink);border-bottom:1.5px solid var(--clay-ink);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--t-mid) var(--ease)}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq .ans{padding:0 0 26px;color:var(--ink-2);max-width:72ch}

/* ---------- footer ---------- */
footer{background:var(--char);color:#e9e2da;padding:clamp(56px,7vw,86px) 0 34px;position:relative}
footer a{color:#e9e2da;text-decoration:none}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,5vw,64px)}
@media (max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}}
.flogo{max-width:230px;margin-bottom:20px}
.fh{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--clay);
  margin:0 0 16px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:15px}
footer ul a{display:inline-block;padding:3px 0;min-height:24px}
footer ul a{opacity:.86;transition:opacity var(--t-fast) var(--ease)}
footer ul a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.fbot{margin-top:clamp(36px,5vw,56px);padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:10px 24px;font-size:13px;color:rgba(233,226,218,.62)}
.fbot a{text-decoration:underline;text-underline-offset:3px}

/* ---------- sticky contact bar: her real call / email / facebook / chat ---------- */
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);box-shadow:0 -2px 22px rgba(60,58,57,.08)}
.actionbar ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.actionbar a{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px
  calc(10px + env(safe-area-inset-bottom));text-decoration:none;color:var(--char);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase}
.actionbar svg{width:20px;height:20px;stroke-width:1.5;color:var(--clay-ink)}
.actionbar a+a{border-left:1px solid var(--line-2)}
@media (max-width:860px){.actionbar{display:block}body{padding-bottom:70px}}

/* ---------- motion system ---------- */
/* Content must never depend on JavaScript to be visible. The reveal only arms
   itself once the inline head script has marked the document as scripted. */
html.js [data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease);
  transition-delay:var(--d,0ms)}
html.js [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  html.js [data-reveal]{opacity:1;transform:none}
  html.js .hero-img img,html.js .hero-img img.in{opacity:1;transform:none}
}
@media print{header,footer,.actionbar,.spine{display:none}body{padding:0}}

/* Her logo artwork is shipped untouched; it carries its own pale ground, so the
   footer plate is set to that exact color instead of keying the artwork. */
.flogo{display:inline-block;background:#e9ecee;padding:14px 18px;margin-bottom:20px;
  max-width:260px}
.flogo img{width:100%;height:auto}
.badges img[src$="favicon.png"]{display:none}

/* tap targets: inline links inside prose and CTAs keep a 24px box */
.deep p a,.wrap > p a,.credit a,.faq .ans a{display:inline-block;padding:3px 0;min-height:24px}
.contactlist b{text-transform:none;letter-spacing:.005em;line-height:1.35}
.eyebrow{align-items:flex-start}
.eyebrow::before{margin-top:.62em}
@media (max-width:560px){.eyebrow::before{display:none}}

/* ---------- reviews as an argument ---------- */
.revhead{display:grid;grid-template-columns:1.5fr .8fr;gap:clamp(30px,5vw,64px);align-items:end}
@media (max-width:860px){.revhead{grid-template-columns:1fr}}
.revscore{text-align:center;border:1px solid var(--line);padding:clamp(22px,3vw,32px);
  background:var(--cream-2)}
.revscore-n{font-family:var(--display);font-style:italic;font-size:clamp(54px,7vw,82px);
  line-height:.9;color:var(--char)}
.revscore-s{color:var(--clay-ink);letter-spacing:4px;font-size:15px;margin-top:10px}
.revscore-l{margin-top:12px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);line-height:1.6}
.revscore-l a{color:var(--char)}

.srcs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
@media (max-width:820px){.srcs{grid-template-columns:repeat(2,1fr)}}
.src{background:var(--paper);padding:clamp(20px,2.6vw,30px);text-align:center}
.src b{display:block;font-family:var(--display);font-weight:400;font-style:italic;
  font-size:clamp(30px,4vw,44px);line-height:1;color:var(--char)}
.src b span{font-size:.46em;font-style:normal;color:var(--ink-2);margin-left:2px}
.src>span{display:block;margin-top:10px;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.src em{display:block;margin-top:9px;font-style:normal;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--clay-ink)}
.src em a{color:inherit}

.revfeature{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,5vw,70px);
  align-items:center}
@media (max-width:900px){.revfeature{grid-template-columns:1fr}}
.rev-pull{margin:0;font-family:var(--display);font-style:italic;
  font-size:clamp(21px,2.5vw,32px);line-height:1.42;color:#fff;max-width:26ch}
.rev-attr{margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.2);
  font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,236,230,.75)}
.rev-attr b{display:block;font-family:var(--display);font-style:italic;font-weight:400;
  font-size:19px;letter-spacing:.01em;text-transform:none;color:#fff;margin-bottom:6px}

.sechead{max-width:66ch;margin-bottom:clamp(34px,5vw,58px)}
.sechead .lede{margin-top:18px}

.theme{border-top:1px solid var(--line);padding-top:clamp(26px,3.4vw,40px);
  margin-top:clamp(30px,4vw,52px)}
.theme-head{display:grid;grid-template-columns:150px 1fr;gap:clamp(18px,3vw,44px);
  margin-bottom:clamp(22px,3vw,34px)}
@media (max-width:720px){.theme-head{grid-template-columns:1fr;gap:12px}}
.theme-mark{display:flex;flex-direction:column;gap:8px}
.theme-n{font-family:var(--display);font-style:italic;font-size:34px;line-height:1;
  color:var(--clay)}
.theme-count{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.theme-text h3{margin-bottom:9px}
.theme-note{color:var(--ink-2);max-width:62ch;margin:0}
.theme-q{columns:3;column-gap:clamp(16px,2.2vw,26px)}
@media (max-width:1040px){.theme-q{columns:2}}
@media (max-width:640px){.theme-q{columns:1}}

.rev{break-inside:avoid;background:var(--paper);border:1px solid var(--line-2);
  padding:clamp(20px,2.4vw,28px);margin:0 0 clamp(16px,2.2vw,26px)}
.cream .rev{background:var(--paper)}
.rev blockquote{margin:0;font-size:15.5px;line-height:1.72;color:var(--ink-2)}
.rev blockquote p{margin:0 0 .9em}
.rev blockquote p:last-child{margin:0}
.rev h4{font-family:var(--display);font-size:18px;font-weight:400;margin:0 0 10px;
  color:var(--char)}
.rev .stars{color:var(--clay-ink);letter-spacing:3px;font-size:12.5px;margin-bottom:11px}
.rev .who{margin-top:15px;padding-top:13px;border-top:1px solid var(--line-2);
  font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);
  display:flex;flex-wrap:wrap;gap:5px 13px}
.rev .who b{color:var(--char);font-weight:400}
.rev-long{border-color:var(--line);background:var(--cream-2)}
.cream .rev-long{background:var(--cream-2)}

.panel{background:var(--cream);padding:clamp(28px,4vw,46px);border:1px solid var(--line)}
.panel h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:12px}
.panel p{color:var(--ink-2);max-width:66ch}
.kv{display:grid;grid-template-columns:auto 1fr;gap:12px clamp(18px,3vw,34px);margin:24px 0 0}
.kv dt{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--clay-ink);
  padding-top:3px}
.kv dt a{color:inherit}
.kv dd{margin:0;color:var(--ink-2);font-size:15px}
@media (max-width:620px){.kv{grid-template-columns:1fr;gap:4px 0}.kv dd{margin-bottom:14px}}

/* ---------- CTA band, and the run-of-show on light ---------- */
.ctaband{border-top:1px solid var(--line)}
.ctaline{margin-top:26px;font-size:14.5px;color:var(--ink-2);display:flex;gap:10px;
  justify-content:center;flex-wrap:wrap;align-items:center}
.ctaline a{color:var(--char);text-decoration:none;border-bottom:1px solid var(--line);
  padding:3px 0;min-height:24px;display:inline-block;
  transition:border-color var(--t-fast) var(--ease)}
.ctaline a:hover{border-color:var(--clay-ink)}
.rossticky{position:sticky;top:110px}
@media (max-width:860px){.rossticky{position:static}}
.attrib{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay-ink);
  margin-top:-4px}
.rev .who .tag{border:1px solid var(--line);padding:2px 7px;color:var(--clay-ink);
  letter-spacing:.09em;font-size:10.5px}
p .tag{border:1px solid var(--line);padding:2px 7px;color:var(--clay-ink);
  letter-spacing:.09em;font-size:11px;text-transform:uppercase;white-space:nowrap}
/* The press banner carries its own near-white ground; the plate matches it so the
   artwork never shows as a lighter box on the cream. */
.seenon{background:#f9f7f3;padding:8px}
/* The section numeral is large display text, so 3:1 is the bar; the raw clay
   only reaches 2.2:1 on paper. */
.theme-n{color:#c9753f}

/* ---------- /compare : the pitch page ---------- */
.cmphead h1{max-width:18ch}
.cmplinks{margin-top:26px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.cmplinks a{color:var(--char);text-decoration:none;border-bottom:1px solid var(--clay);
  padding:4px 0;min-height:24px;display:inline-block}
.scores{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,32px)}
@media (max-width:820px){.scores{grid-template-columns:1fr}}
.score{border:1px solid var(--line);padding:clamp(24px,3vw,38px);background:var(--paper)}
.score.new{background:var(--cream-2);border-color:var(--clay)}
.scorelabel{margin:0;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2)}
.scoren{margin:6px 0 0;font-family:var(--display);font-style:italic;
  font-size:clamp(54px,7vw,84px);line-height:1;color:var(--char)}
.scoren i{font-size:.3em;font-style:normal;color:var(--ink-2);margin-left:4px}
.score.new .scoren{color:var(--clay-ink)}
.scoreline{margin:14px 0 0;color:var(--ink-2);font-size:15.5px}
.scoreparts{list-style:none;margin:24px 0 0;padding:20px 0 0;display:grid;gap:13px;
  border-top:1px solid var(--line-2)}
.scoreparts li{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:baseline}
.scoreparts span:first-child{font-size:14.5px;color:var(--ink-2)}
.scoreparts b{font-weight:400;font-family:var(--display);font-size:19px;color:var(--char)}
.scoreparts b i{font-size:.6em;font-style:normal;color:var(--ink-2)}
.scoreparts .bar{grid-column:1/-1;height:3px;background:var(--line-2);display:block}
.scoreparts .bar span{display:block;height:100%;background:var(--clay)}
.score.new .scoreparts .bar span{background:var(--clay-ink)}

.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.cmp{width:100%;border-collapse:collapse;background:var(--paper);
  border:1px solid var(--line);font-size:15px;min-width:520px}
table.cmp th,table.cmp td{padding:13px clamp(12px,1.6vw,20px);text-align:left;
  border-bottom:1px solid var(--line-2)}
table.cmp thead th{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);font-weight:400;background:var(--cream-2);white-space:nowrap}
table.cmp tbody th{font-weight:400;color:var(--ink-2)}
table.cmp td{font-family:var(--display);font-size:18px;color:var(--char);white-space:nowrap}
table.cmp td.win{color:var(--clay-ink)}
table.cmp tr:last-child th,table.cmp tr:last-child td{border-bottom:0}
.tablenote{margin-top:22px;font-size:14.5px;color:var(--ink-2);max-width:74ch}
.tablenote b{color:var(--char)}

/* ---------- before / after: one column per SITE ----------
   The reader is comparing two websites, not four pictures, so each site owns a
   column and holds both of its screens. */
.sbsgroup{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,40px);
  align-items:start}
@media (max-width:820px){.sbsgroup{grid-template-columns:1fr;gap:clamp(30px,5vw,44px)}}
.site{margin:0;border:1px solid var(--line-2);background:var(--cream-2);
  padding:clamp(14px,1.8vw,22px)}
.site.new{border-color:var(--clay);background:var(--paper)}
.sitelabel{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 clamp(12px,1.4vw,16px)}
.site.new .sitelabel{color:var(--clay-ink)}
.screen img{width:100%;height:auto;display:block;border:1px solid var(--line-2);
  background:var(--paper)}
.screen.phone{width:58%;margin:clamp(12px,1.6vw,18px) auto 0}
@media (max-width:820px){.screen.phone{width:64%}}
@media (max-width:520px){.screen.phone{width:76%}}

/* Eight findings in one column is a wall. Two columns halves the scroll and
   lets each one be read as a unit. */
.findgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,36px)}
@media (max-width:860px){.findgrid{grid-template-columns:1fr}}
.find{border-top:2px solid var(--clay);padding-top:clamp(16px,2vw,22px)}
.findn{font-family:var(--display);font-style:italic;font-size:22px;
  color:var(--clay-ink);margin:0 0 6px}
.find h3{margin-bottom:12px;font-size:clamp(19px,2vw,23px)}
.find p{color:var(--ink-2);max-width:60ch;font-size:15px}
.evidence{font-family:var(--display);font-size:17px;color:var(--char);
  border-left:2px solid var(--clay);padding:6px 0 6px 16px;margin-bottom:14px}
.why b{color:var(--char);font-weight:400}

.plainlist{margin:0;padding:0 0 0 1.6em;display:grid;gap:14px;color:var(--ink-2)}
.plainlist li{padding-left:6px}
.plainlist li::marker{color:var(--clay-ink);font-family:var(--display);font-style:italic}
.correction{border:1px solid var(--clay);background:var(--cream-2);
  padding:clamp(20px,2.6vw,30px)}
.correction p{color:var(--ink-2);font-size:15.5px;max-width:72ch}
.correction p+p{margin-top:.9em}
.correctionlabel{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--clay-ink);margin:0 0 12px}

/* ---------- ratings banner: proof as numbers, directly under the hero ----------
   Each cell leads with the figure and names where it came from underneath, so
   every number on it is checkable. The badges do the same job at the foot of the
   page; this does it in the first three seconds. */
.ratings{border-bottom:1px solid var(--line-2)}
.ratingbar{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,3vw,44px)}
/* Two columns all the way down: one column made the banner 1,188px tall on a
   phone and pushed the whole page below it. */
@media (max-width:860px){.ratingbar{grid-template-columns:repeat(2,1fr);
  gap:clamp(20px,4vw,30px)}}
@media (max-width:560px){
  .ratingbar{gap:18px 16px}
  .rb b{font-size:30px}
  .rb-line{font-size:14px;margin-top:9px}
  .rb-src{font-size:10.5px;letter-spacing:.1em}
}
.rb{border-top:2px solid var(--clay);padding-top:16px;min-width:0}
.rb b{display:block;font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(34px,4.4vw,52px);line-height:1;color:var(--char)}
.rb b .u{font-size:max(13px,.4em);font-style:normal;color:var(--ink-2);
  margin-left:3px;letter-spacing:.01em}
.rb-line{display:block;margin-top:11px;font-size:15px;color:var(--ink-2);line-height:1.45}
.rb-stars{color:var(--clay-ink);letter-spacing:1.5px;font-size:13px}
.rb-src{display:block;margin-top:5px;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--clay-ink)}
.rb-src a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line);
  padding-bottom:1px}
.rb-src a:hover{border-color:var(--clay-ink)}

.scorenote{margin:clamp(18px,2.2vw,26px) 0 0;font-size:14px;color:var(--ink-2)}
.scorenote a{color:var(--clay-ink)}
.correction{scroll-margin-top:100px}

/* ---------- spec-build preview banner ----------
   This is an unsolicited concept using someone else's brand. It says so on every
   page, and every page is noindex so it cannot compete with her real site. */
.pvbanner{background:var(--char);color:#e9e2da;font-size:12.5px;line-height:1.5;
  text-align:center;padding:9px var(--gut);letter-spacing:.01em}
.pvbanner a{color:#fff;text-decoration:underline;text-underline-offset:3px}


/* ---------- every page, paired ---------- */
.pairsec{padding:clamp(34px,4.4vw,60px) 0;border-top:1px solid var(--line-2)}
.pairsec:first-of-type{border-top:0}
.pairhead{display:flex;align-items:baseline;gap:8px 18px;flex-wrap:wrap;
  margin-bottom:clamp(14px,1.8vw,20px)}
.pairhead h3{margin:0;font-size:clamp(21px,2.4vw,28px)}
.pairpath{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.pairpath.new{color:var(--clay-ink)}
.pairnote{margin:0 0 clamp(16px,2vw,22px);color:var(--ink-2);font-size:15px;max-width:74ch}
.sbsgroup.solo{grid-template-columns:minmax(0,1fr);max-width:620px}
.pairjump{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:clamp(18px,2.2vw,26px)}
.pairjump a{font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  color:var(--ink-2);border:1px solid var(--line);padding:8px 13px;
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.pairjump a:hover{border-color:var(--clay-ink);color:var(--clay-ink)}
.pairsec{scroll-margin-top:90px}

/* ---------- photo-led home ----------
   Measured against her live site: hers is 87.9% photograph by area, the first
   version of this was 16.6%. She sells a visual service and there are 165
   photographs available. */
.photoband{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;
  width:100%;margin:0}
@media (max-width:820px){.photoband{grid-template-columns:repeat(3,1fr)}}
.photoband .frame{aspect-ratio:4/5}

/* dense packing, or a tile that spans 4 columns leaves a hole the next tile
   cannot fill and the spread renders with white gaps in it. */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);
  grid-auto-rows:minmax(0,19vw);grid-auto-flow:row dense;gap:4px;
  margin-top:clamp(18px,2.2vw,28px)}
.mosaic .mt{grid-column:span 2;grid-row:span 1;overflow:hidden;display:block;
  background:var(--cream)}
.mosaic .mt.wide{grid-column:span 4}
.mosaic .mt.tall{grid-row:span 2}
.mosaic img{width:100%;height:100%;object-fit:cover;
  transition:transform 900ms var(--ease-soft)}
.mosaic .mt:hover img{transform:scale(1.05)}
@media (max-width:900px){
  .mosaic{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(0,26vw)}
  .mosaic .mt.wide{grid-column:span 4}
}
@media (max-width:560px){
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(0,42vw);gap:3px}
  .mosaic .mt,.mosaic .mt.wide{grid-column:span 1}
  .mosaic .mt.tall{grid-row:span 1}
}

.stack2{display:grid;gap:clamp(10px,1.4vw,16px)}
@media (max-width:860px){.stack2{grid-template-columns:1fr 1fr}}
.galhead{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap}

/* the condensed run of show used on the home page */
.ros.tight li{padding-bottom:clamp(20px,2.4vw,28px)}
.ros.tight h3{font-size:clamp(18px,1.9vw,21px)}

/* ---------- page pairs as disclosures ---------- */
.pairsec{border-top:1px solid var(--line);margin:0}
.pairsec:last-of-type{border-bottom:1px solid var(--line)}
.pairsec summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;
  gap:10px 18px;flex-wrap:wrap;padding:clamp(18px,2.2vw,24px) 44px clamp(18px,2.2vw,24px) 0;
  position:relative}
.pairsec summary::-webkit-details-marker{display:none}
.pairsec summary::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;
  border-right:1.5px solid var(--clay-ink);border-bottom:1.5px solid var(--clay-ink);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--t-mid) var(--ease)}
.pairsec[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.pairsec summary:hover .pairname{color:var(--clay-ink)}
.pairname{font-family:var(--display);font-size:clamp(19px,2.2vw,25px);color:var(--char);
  transition:color var(--t-fast) var(--ease)}
.pairbody{padding:0 0 clamp(26px,3.4vw,40px)}
.pairsec{scroll-margin-top:90px}