/* =========================================================================
   PRESSFRONT - editorial / quiet-luxury design system
   Aesthetic guideline derived from orene.me (see DESIGN_NOTES.md)
   ========================================================================= */

:root{
  /* paper & ink */
  --paper:      #f6f3ee;
  --paper-2:    #efeae1;
  --card:       #ffffff;
  --ink:        #171310;
  --ink-soft:   #433d36;
  --muted:      #837b70;
  --muted-2:    #a49c90;
  --line:       #e4ddd1;
  --line-2:     #d8cfc0;

  /* the single accent: deep forest green */
  --green:      #234a34;
  --green-2:    #2a503c;
  --green-ink:  #1a3a29;
  --green-tint: #eaf0eb;

  /* dark band */
  --dark:       #120f0d;
  --dark-2:     #1c1815;
  --on-dark:    #f3efe8;
  --on-dark-mut:#9d968b;

  --serif: "Source Serif 4", "PT Serif", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --maxw: 1200px;
  --gut: clamp(20px, 5vw, 64px);
  --radius: 3px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; letter-spacing:-.01em; margin:0; }
.italic{ font-style:italic; }
.serif{ font-family:var(--serif); }

/* ---- layout helpers ---- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); }
.wrap-wide{ max-width:1360px; margin:0 auto; padding:0 var(--gut); }
.section{ padding:clamp(64px,10vw,140px) 0; }
.center{ text-align:center; }

.eyebrow{
  font-family:var(--serif);
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 22px;
}
.eyebrow.on-green{ color:rgba(255,255,255,.7); }

.lead{ color:var(--ink-soft); font-size:clamp(16px,1.4vw,18px); max-width:52ch; }
.dim{ color:var(--muted); }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  padding:15px 26px;
  font-size:14px; letter-spacing:.02em;
  border:1px solid var(--ink);
  background:var(--ink); color:#fff;
  border-radius:var(--radius);
  transition:.22s ease;
}
.btn:hover{ background:transparent; color:var(--ink); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:#fff; }
.btn-green{ background:var(--green); border-color:var(--green); color:#fff; }
.btn-green:hover{ background:transparent; color:var(--green); }
.btn-light{ background:#fff; border-color:#fff; color:var(--ink); }
.btn-light:hover{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.btn-block{ width:100%; justify-content:center; }
.link-arrow{ font-family:var(--serif); border-bottom:1px solid currentColor; padding-bottom:2px; }

/* =========================================================================
   NAV
   ========================================================================= */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(246,243,238,.86);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:66px; }
.brand{ font-family:var(--serif); font-size:19px; letter-spacing:.34em; text-transform:uppercase; display:inline-flex; align-items:center; gap:9px; }
.brand b{ font-weight:600; }
.brand img.brand-mark{ height:24px; width:auto; letter-spacing:0; }
.nav-links{ display:flex; gap:30px; align-items:center; }
.nav-links a{ font-size:13.5px; color:var(--ink-soft); letter-spacing:.01em; }
.nav-links a:hover{ color:var(--ink); }
.nav-cta{ font-size:13px !important; padding:9px 18px; border:1px solid var(--ink); border-radius:var(--radius); }
.nav-cta:hover{ background:var(--ink); color:#fff; }
.nav-toggle{ display:none; background:none; border:0; font-size:22px; }
@media(max-width:820px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
  .nav-links.open{
    display:flex; position:absolute; left:0; right:0; top:66px;
    flex-direction:column; gap:0; background:var(--paper); border-bottom:1px solid var(--line);
    padding:8px var(--gut) 20px;
  }
  .nav-links.open a{ padding:12px 0; border-bottom:1px solid var(--line); width:100%; }
  .nav-links.open .nav-cta{ margin-top:12px; text-align:center; }
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{ position:relative; }
.hero-strip{
  display:grid; grid-template-columns:repeat(4,1fr);
  height:clamp(440px,64vh,640px);
}
.hero-panel{ position:relative; overflow:hidden; }
.hero-panel::after{ content:""; position:absolute; inset:0; background:rgba(15,12,10,.34); }
.hero-panel img{ width:100%; height:100%; object-fit:cover; filter:saturate(.92); }
.hero-panel.green::after{ background:linear-gradient(180deg,rgba(35,74,52,.5),rgba(26,58,41,.78)); mix-blend-mode:multiply; }
.hero-panel.mono img{ filter:grayscale(1) contrast(1.02); }
.hero-copy{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#fff; padding:0 22px;
}
.hero-copy h1{
  color:#fff; font-size:clamp(30px,5.4vw,62px); line-height:1.04;
  max-width:15ch; margin:0 0 8px; text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.hero-copy .eyebrow{ color:rgba(255,255,255,.82); }
.hero-sub{ color:rgba(255,255,255,.9); max-width:46ch; margin:14px 0 26px; text-shadow:0 1px 16px rgba(0,0,0,.4); }
.hero-stats{
  display:flex; flex-wrap:wrap; gap:26px 40px; justify-content:center;
  padding:26px 0 4px; border-top:1px solid var(--line); margin-top:0;
}
.hero-statbar{ background:var(--paper-2); border-bottom:1px solid var(--line); }
.stat b{ font-family:var(--serif); font-size:26px; font-weight:600; display:block; line-height:1; }
.stat span{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
@media(max-width:680px){
  .hero-strip{ grid-template-columns:repeat(2,1fr); height:70vh; }
}

/* =========================================================================
   PRICING
   ========================================================================= */
.pricing-head{ max-width:640px; margin:0 auto 54px; text-align:center; }
.pricing-head h2{ font-size:clamp(28px,3.6vw,44px); line-height:1.08; }
.cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch;
}
.card{
  background:var(--card); border:1px solid var(--line-2); border-radius:var(--radius);
  padding:34px 30px; display:flex; flex-direction:column;
  transition:.25s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 22px 50px -30px rgba(23,19,16,.4); }
.card.featured{ border-color:var(--green); box-shadow:0 26px 60px -34px rgba(35,74,52,.55); }
.card-tag{
  align-self:flex-start; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green); border:1px solid var(--green); border-radius:100px; padding:4px 12px; margin-bottom:18px;
}
.card-name{ font-family:var(--serif); font-size:14px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }
.card-price{ font-family:var(--serif); font-size:52px; font-weight:600; line-height:1; margin:10px 0 4px; }
.card-price sup{ font-size:22px; top:-1.4em; margin-right:2px; color:var(--muted); }
.card-tagline{ color:var(--ink-soft); font-size:15px; min-height:44px; margin-bottom:20px; }
.card hr{ border:0; border-top:1px solid var(--line); margin:0 0 20px; }
.spec{ list-style:none; margin:0 0 26px; padding:0; }
.spec li{ display:flex; gap:11px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:14px; align-items:baseline; }
.spec li:last-child{ border-bottom:0; }
.spec .k{ color:var(--muted); flex:0 0 auto; min-width:118px; }
.spec .v{ color:var(--ink); }
.spec .tick{ color:var(--green); }
.card .btn{ margin-top:auto; }
.card-fine{ font-size:12px; color:var(--muted-2); margin:14px 0 0; text-align:center; }
.pubs-inline{ font-size:13px; color:var(--ink-soft); line-height:1.7; margin:0 0 22px; }
/* hero outlet row on cards ("recognizable names + N more") */
.heroes{ margin:2px 0 20px; }
.heroes-label{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin:0 0 8px; }
.heroes-row{ display:flex; flex-wrap:wrap; gap:6px; }
.heroes-row .hlogo{ font-family:var(--serif); font-size:12.5px; color:#4a443c; border:1px solid var(--line-2); border-radius:3px; padding:3px 9px; background:var(--paper); white-space:nowrap; }
.heroes-more{ font-size:12px; color:var(--muted); margin:9px 0 0; }
.pubs-inline b{ color:var(--ink); font-weight:600; }
.assurances{ display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:center; margin-top:44px; color:var(--muted); font-size:13px; }
.assurances span{ display:inline-flex; gap:7px; align-items:center; }
.assurances .tick{ color:var(--green); }
@media(max-width:900px){ .cards{ grid-template-columns:1fr; max-width:460px; margin:0 auto; } }

/* =========================================================================
   LOGO WALL
   ========================================================================= */
.logos{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.logos .eyebrow{ text-align:center; }
.logo-grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:0;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--card);
}
.logo-cell{
  display:flex; align-items:center; justify-content:center; min-height:92px;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  font-family:var(--serif); font-size:16px; color:#4a443c; letter-spacing:.02em;
  padding:12px; text-align:center; filter:grayscale(1); opacity:.72; transition:.2s;
}
.logo-cell:hover{ opacity:1; filter:none; color:var(--green); }
@media(max-width:900px){ .logo-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:480px){ .logo-grid{ grid-template-columns:repeat(2,1fr); } }

/* =========================================================================
   ALTERNATING SPLIT / HOW IT WORKS
   ========================================================================= */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,90px); align-items:center; }
.split.rev .split-media{ order:2; }
.split-media{ position:relative; }
.split-media .frame{
  aspect-ratio:4/3.2; background:var(--green-tint); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; position:relative;
}
.split-media .frame img{ width:100%; height:100%; object-fit:cover; }
.steps{ counter-reset:step; margin-top:34px; }
.step{ display:grid; grid-template-columns:auto 1fr; gap:22px; padding:24px 0; border-top:1px solid var(--line); }
.step:last-child{ border-bottom:1px solid var(--line); }
.step-num{ font-family:var(--serif); font-size:15px; color:var(--green); letter-spacing:.1em; padding-top:3px; }
.step h3{ font-size:21px; margin-bottom:6px; }
.step p{ margin:0; color:var(--ink-soft); font-size:15px; }
h2.big{ font-size:clamp(28px,4vw,48px); line-height:1.06; max-width:16ch; }
@media(max-width:820px){
  .split{ grid-template-columns:1fr; }
  .split.rev .split-media{ order:0; }
}

/* =========================================================================
   PROOF (live examples)
   ========================================================================= */
.proof-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
.proof-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; display:flex; flex-direction:column; }
.proof-cat{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--green); margin-bottom:12px; }
.proof-card h3{ font-size:19px; line-height:1.25; margin-bottom:10px; }
.proof-card p{ color:var(--ink-soft); font-size:14px; margin:0 0 18px; }
.proof-outlets{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.pill{ font-size:12px; color:var(--ink-soft); border:1px solid var(--line-2); border-radius:100px; padding:3px 11px; }
.proof-card .link-arrow{ font-size:14px; margin-top:16px; display:inline-block; color:var(--green); }
@media(max-width:900px){ .proof-grid{ grid-template-columns:1fr; } }

/* =========================================================================
   COMPARISON TABLE
   ========================================================================= */
.compare{ width:100%; border-collapse:collapse; margin-top:44px; font-size:14.5px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.compare th, .compare td{ padding:16px 20px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
.compare thead th{ font-family:var(--serif); font-weight:600; font-size:13px; letter-spacing:.06em; }
.compare thead th.us{ color:var(--green); }
.compare td.us{ color:var(--ink); font-weight:500; }
.compare td:not(.us):not(:first-child){ color:var(--muted); }
.compare tr:last-child td{ border-bottom:0; }
.compare-scroll{ overflow-x:auto; }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq{ max-width:820px; margin:44px auto 0; }
.faq details{ border-top:1px solid var(--line); padding:6px 0; }
.faq details:last-child{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:22px 0; font-family:var(--serif); font-size:19px; display:flex; justify-content:space-between; gap:20px; align-items:center; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:24px; color:var(--green); transition:.2s; }
.faq details[open] summary::after{ content:"\2013"; }
.faq p{ margin:0 0 22px; color:var(--ink-soft); max-width:70ch; }

/* =========================================================================
   GUARANTEE BAND
   ========================================================================= */
.guarantee{ background:var(--green); color:#fff; }
.guarantee .eyebrow{ color:rgba(255,255,255,.7); }
.guarantee-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(30px,6vw,80px); align-items:center; }
.guarantee h2{ color:#fff; font-size:clamp(26px,3.4vw,40px); line-height:1.12; }
.guarantee ul{ margin:22px 0 0; padding:0; list-style:none; }
.guarantee li{ padding:12px 0; border-top:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.9); display:flex; gap:12px; }
.guarantee li:first-child{ border-top:0; }
.seal{ text-align:center; border:1px solid rgba(255,255,255,.3); border-radius:var(--radius); padding:44px 24px; }
.seal b{ font-family:var(--serif); font-size:72px; font-weight:600; line-height:1; display:block; }
.seal span{ display:block; margin-top:10px; letter-spacing:.14em; text-transform:uppercase; font-size:12px; color:rgba(255,255,255,.75); }
@media(max-width:760px){ .guarantee-grid{ grid-template-columns:1fr; } }

/* =========================================================================
   CLOSING DARK CTA
   ========================================================================= */
.closer{ background:var(--dark); color:var(--on-dark); text-align:center; }
.closer h2{ color:#fff; font-size:clamp(34px,6vw,74px); line-height:1.02; }
.closer p{ color:var(--on-dark-mut); max-width:48ch; margin:18px auto 30px; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer{ background:var(--dark-2); color:var(--on-dark-mut); padding:70px 0 40px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:40px; }
.footer h4{ color:var(--on-dark); font-family:var(--serif); font-size:14px; letter-spacing:.06em; margin-bottom:16px; }
.footer .brand{ color:#fff; margin-bottom:14px; display:inline-block; }
.footer ul{ list-style:none; margin:0; padding:0; }
.footer li{ padding:6px 0; font-size:14px; }
.footer a:hover{ color:var(--on-dark); }
.footer-bottom{ margin-top:54px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px; }
@media(max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* =========================================================================
   MODAL (mock checkout)
   ========================================================================= */
.modal-back{ position:fixed; inset:0; background:rgba(18,15,13,.55); backdrop-filter:blur(3px); z-index:100; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal{ background:var(--paper); border-radius:var(--radius); max-width:440px; width:100%; padding:36px 32px; border:1px solid var(--line-2); }
.modal .eyebrow{ margin-bottom:10px; }
.modal h3{ font-size:26px; margin-bottom:6px; }
.modal .price-row{ display:flex; justify-content:space-between; align-items:baseline; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:18px 0; }
.modal .price-row b{ font-family:var(--serif); font-size:30px; }
.modal small{ display:block; color:var(--muted); margin-top:14px; font-size:12.5px; text-align:center; }
.modal-close{ background:none; border:0; float:right; font-size:22px; color:var(--muted); margin:-14px -8px 0 0; }

/* utility */
.tick{ color:var(--green); font-weight:700; }
.hidden{ display:none !important; }

/* =========================================================================
   SIMPLE ⇄ DETAILED MODE
   Default (no class) = SIMPLE. body.detailed reveals everything.
   ========================================================================= */
/* the toggle control */
.mode-switch{ display:inline-flex; align-items:center; gap:0; border:1px solid var(--line-2); border-radius:100px; padding:3px; background:var(--paper-2); }
.mode-switch button{ border:0; background:transparent; font-size:12px; letter-spacing:.04em; color:var(--muted); padding:6px 14px; border-radius:100px; transition:.2s; cursor:pointer; }
.mode-switch button.on{ background:var(--ink); color:#fff; }
@media(max-width:820px){ .mode-switch{ margin-left:auto; } }

/* elements only shown in detailed mode */
.detailed-only{ display:none; }
body.detailed .detailed-only{ display:block; }
body.detailed .detailed-only.is-section{ display:block; }
body.detailed .detailed-only.is-flex{ display:flex; }
body.detailed .detailed-only.is-li{ display:flex; }
/* elements only shown in simple mode */
body.detailed .simple-only{ display:none; }

/* simple-mode card tweaks: named outlets are the hero */
.card-heroes{ margin:6px 0 4px; }
.card-heroes .heroes-label{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin:0 0 10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.card-heroes .heroes-count{ font-family:var(--serif); font-size:12px; letter-spacing:.02em; text-transform:none; color:var(--green); background:var(--green-tint); border:1px solid #cfe0d3; border-radius:100px; padding:2px 10px; font-weight:600; }

/* coverage rows */
.cov-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); font-size:15px; }
.cov-row:last-child{ border-bottom:0; }
.cov-name{ font-family:var(--serif); }
.cov-note{ font-size:11.5px; color:var(--muted-2); display:block; }
.cov-badge{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; border-radius:100px; padding:3px 10px; white-space:nowrap; }
.cov-badge.live{ color:var(--green); background:var(--green-tint); border:1px solid #cfe0d3; }
.cov-badge.partial{ color:#7a5b1e; background:#faf3e2; border:1px solid #e6d3a0; }
.cov-badge.quote{ color:var(--ink-soft); background:var(--paper); border:1px solid var(--line-2); }
.cov-badge.request{ color:var(--muted); background:var(--paper); border:1px solid var(--line-2); }
.card-heroes .heroes-row{ display:flex; flex-wrap:wrap; gap:7px; }
.card-heroes .hlogo{ font-family:var(--serif); font-size:14px; color:var(--ink); border:1px solid var(--line-2); border-radius:3px; padding:5px 11px; background:var(--paper); white-space:nowrap; }
.card.featured .card-heroes .hlogo{ border-color:#cfe0d3; }
.card-heroes .heroes-more{ font-size:12px; color:var(--muted); margin:11px 0 0; }
/* in simple mode, price sits close under name; give the card a bit more air */
body:not(.detailed) .card{ padding-top:30px; }
/* simple mode: the primary buy button gets prominence in all three cards */
body:not(.detailed) .card .btn{ margin-top:22px; }

/* =========================================================================
   SCROLL REVEAL  (mimics orene.me - elements rise + fade in on entry)
   ========================================================================= */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1); }
.reveal.in{ opacity:1; transform:none; }
/* stagger children of a container */
.reveal-group > *{ opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
.reveal-group.in > *{ opacity:1; transform:none; }
.reveal-group.in > *:nth-child(2){ transition-delay:.09s; }
.reveal-group.in > *:nth-child(3){ transition-delay:.18s; }
.reveal-group.in > *:nth-child(4){ transition-delay:.27s; }
.reveal-group.in > *:nth-child(5){ transition-delay:.36s; }
.reveal-group.in > *:nth-child(6){ transition-delay:.45s; }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-group > *{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* =========================================================================
   WRITING-MODE choice + supply-your-own textarea (intake)
   ========================================================================= */
.mode-cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:8px 0 6px; }
.mode-card{ border:1px solid var(--line-2); border-radius:var(--radius); padding:20px; cursor:pointer; background:var(--card); transition:.2s; position:relative; }
.mode-card:hover{ border-color:var(--green); }
.mode-card.sel{ border-color:var(--green); box-shadow:0 0 0 1px var(--green) inset; background:var(--green-tint); }
.mode-card h4{ font-size:17px; margin-bottom:6px; }
.mode-card p{ margin:0; font-size:13.5px; color:var(--ink-soft); }
.mode-card .tagp{ display:inline-block; margin-top:10px; font-size:12px; color:var(--green); font-weight:600; }
@media(max-width:560px){ .mode-cards{ grid-template-columns:1fr; } }

/* add-on note on cards */
.addon-note{ font-size:12px; color:var(--muted); border-top:1px dashed var(--line); padding-top:12px; margin-top:4px; }

/* =========================================================================
   Content protection (deterrent). Activated only when protect.js adds
   .pf-protect to <html>, so selection still works if JS is disabled.
   ========================================================================= */
html.pf-protect,
html.pf-protect body{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* Keep form fields usable so buyers can still fill out the intake form. */
html.pf-protect input,
html.pf-protect textarea,
html.pf-protect select,
html.pf-protect [contenteditable="true"]{
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
html.pf-protect img{ -webkit-user-drag: none; user-drag: none; }

/* Dismissable copyright popup (shown on right-click / F12 / copy attempt) */
.pf-cr-back{
  position: fixed; inset: 0; z-index: 2147483647;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(18,15,13,.55);
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
  -webkit-user-select: none; user-select: none;
}
.pf-cr-back.show{ opacity: 1; visibility: visible; }
.pf-cr-card{
  position: relative;
  width: min(520px, 92vw);
  background: var(--card, #fff);
  color: var(--ink, #171310);
  border: 1px solid var(--line, #e4ddd1);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(18,15,13,.28);
  padding: 30px 30px 26px;
  transform: translateY(8px) scale(.98);
  transition: transform .18s ease;
}
.pf-cr-back.show .pf-cr-card{ transform: translateY(0) scale(1); }
.pf-cr-close{
  position: absolute; top: 12px; right: 14px;
  border: 0; background: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--muted, #837b70);
  padding: 4px 6px; border-radius: 8px;
}
.pf-cr-close:hover{ color: var(--ink, #171310); background: var(--paper-2, #efeae1); }
.pf-cr-title{
  margin: 0 0 14px; font-size: 17px; font-weight: 600;
  color: var(--ink, #171310);
}
.pf-cr-body{
  margin: 0 0 12px; font-size: 14px; line-height: 1.6;
  color: var(--ink-soft, #433d36);
}
.pf-cr-body:last-child{ margin-bottom: 0; }

/* =========================================================================
   Testimonials wall (Orene-style staggered masonry -> single column mobile)
   ========================================================================= */
.testimonials{ background: var(--paper, #f6f3ee); }
.tw{
  margin-top: 40px;
  /* CSS multi-column gives the natural staggered masonry look */
  column-count: 4;
  column-gap: 22px;
}
.tw-card{
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: inline-block;   /* prevents column-break artifacts in some engines */
  width: 100%;
  margin: 0 0 22px;
  background: var(--card, #fff);
  border: 1px solid var(--line, #e4ddd1);
  border-radius: 12px;
  padding: 22px 22px 20px;
  box-shadow: 0 1px 0 rgba(18,15,13,.02);
}
.tw-card blockquote{
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--ink-soft, #433d36);
}
.tw-card figcaption{ display: block; }
.tw-name{
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink, #171310);
}
.tw-name::before{ content: "\2014\00a0"; color: var(--muted, #837b70); font-weight: 400; }
.tw-role{
  display: block;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-2, #a49c90);
}

/* Responsive column counts */
@media (max-width: 1100px){ .tw{ column-count: 3; } }
@media (max-width: 760px){  .tw{ column-count: 2; } }
@media (max-width: 520px){
  .tw{ column-count: 1; }
  .tw-card{ margin-bottom: 16px; }
}

/* Direct-answer definition block (GEO/AEO) */
.define{ padding-top: 8px; }
.define-box{
  max-width: 760px; margin: 0 auto;
  background: var(--card, #fff);
  border: 1px solid var(--line, #e4ddd1);
  border-left: 3px solid var(--green, #234a34);
  border-radius: 12px;
  padding: 24px 26px;
}
.define-lead{
  margin: 8px 0 0;
  font-size: 16px; line-height: 1.6;
  color: var(--ink-soft, #433d36);
}
.define-lead b{ color: var(--ink, #171310); }
.define-meta{
  margin: 14px 0 0;
  font-size: 12px; letter-spacing: .03em;
  color: var(--muted-2, #a49c90);
}