/* ---------- corner-tick bracket motif -- recurring "blueprint" device ---------- */
.ticks{ position:relative; }
.ticks::before, .ticks::after{
  content:''; position:absolute; width:18px; height:18px; pointer-events:none;
  border-color: var(--gold); opacity:0.9;
}
.ticks::before{ top:-1px; left:-1px; border-top:2px solid; border-left:2px solid; }
.ticks::after{ bottom:-1px; right:-1px; border-bottom:2px solid; border-right:2px solid; }
.ticks.on-light::before, .ticks.on-light::after{ border-color:var(--covenant); }

/* ---------- BARBER (workshop band) ---------- */
.workshop{ padding:clamp(80px,10vw,130px) 0; color:var(--light); }
.workshop-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(40px,6vw,90px); align-items:center; }
.workshop-photo{ position:relative; padding:14px; background:var(--light); box-shadow:0 30px 60px -20px rgba(0,0,0,0.5); transform:rotate(-1.4deg); }
.workshop-photo img{ width:100%; height:auto; display:block; }
.workshop-photo .pin{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%); width:18px; height:18px; border-radius:50%;
  background:var(--gold); box-shadow:0 3px 8px rgba(0,0,0,0.4);
}
.workshop-text h2{ color:var(--light); font-size:clamp(2rem,3.6vw,2.9rem); margin-bottom:22px; }
.workshop-text p{ color:color-mix(in oklch, var(--light) 86%, var(--truth)); margin-bottom:14px; font-size:1.02rem; }
.workshop-text p.pull{ font-family:var(--head); font-weight:700; font-size:1.3rem; color:var(--gold); margin:20px 0; }

/* ---------- SAME HOUSE (paper section) ---------- */
.paper-section{ padding:clamp(80px,10vw,130px) 0; }
.paper-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center; }
.paper-photo{ position:relative; padding:14px; background:var(--light); box-shadow:0 30px 60px -20px rgba(0,0,0,0.28); transform:rotate(1.4deg); border:1px solid color-mix(in oklch, var(--covenant) 14%, transparent); }
.paper-photo img{ width:100%; height:auto; display:block; }
.paper-photo .pin{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%); width:18px; height:18px; border-radius:50%;
  background:var(--gold); box-shadow:0 3px 8px rgba(0,0,0,0.25);
}
.paper-text h2{ font-size:clamp(2rem,3.6vw,2.9rem); margin-bottom:22px; color:var(--truth); }
.paper-text p{ margin-bottom:14px; color:color-mix(in oklch, var(--truth) 85%, var(--covenant)); font-size:1.02rem; }
.paper-text p.pull{ font-family:var(--head); font-weight:700; font-size:1.25rem; color:var(--covenant); margin:20px 0; }

/* ---------- BRIDGE ---------- */
.bridge{ color:var(--light); padding:clamp(90px,11vw,150px) 0; position:relative; overflow:hidden; }
.compass{ position:absolute; right:0px; top:50%; transform:translateY(-50%) rotate(-4deg); width:760px; height:auto; opacity:0.12; filter:brightness(0) invert(1); pointer-events:none; z-index:0; }
.bridge-inner{ position:relative; z-index:2; max-width:640px; }
.bridge h2{ font-size:clamp(2.1rem,4vw,3rem); margin-bottom:26px; }
.bridge p{ color:var(--light); font-size:1.06rem; margin-bottom:15px; }
.bridge .btn{ margin-top:22px; }

/* ---------- BIO ---------- */
.bio{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(50px,7vw,100px); align-items:center; }
.id-col{ position:relative; }
.id-col::before{
  content:''; position:absolute; top:-28px; left:-28px; right:28px; bottom:28px;
  background:var(--covenant); clip-path:polygon(0 0, 100% 0, 100% 80%, 78% 100%, 0 100%); z-index:0;
}
.id-frame{
  position:relative; z-index:1; overflow:hidden; aspect-ratio:3/4;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 10% 100%, 0 88%);
  box-shadow:0 34px 60px -26px rgba(0,0,0,0.4);
}
.id-frame img{ width:100%; height:100%; object-fit:cover; }
.id-tag{
  position:absolute; z-index:2; bottom:-16px; left:-16px; background:var(--gold); color:var(--truth);
  font-family:var(--head); letter-spacing:0.04em;
  padding:12px 20px 12px 16px; clip-path:polygon(0 0, 100% 0, 88% 100%, 0 100%);
  display:flex; flex-direction:column; gap:2px;
}
.id-tag .id-name{ font-weight:800; font-size:0.98rem; text-transform:none; }
.id-tag .id-cred{ font-weight:700; font-size:0.72rem; text-transform:uppercase; opacity:0.85; }
.bio-text h2{ font-size:clamp(2rem,3.6vw,2.9rem); margin-bottom:20px; }
.bio-text .pull{ font-size:1.15rem; font-weight:700; color:var(--covenant); margin-bottom:18px; font-family:var(--head); line-height:1.4; }
.bio-text p{ margin-bottom:14px; color:color-mix(in oklch, var(--truth) 85%, var(--covenant)); font-size:1.02rem; }
.bio-text .btn{ margin-top:20px; }

/* About-page bio card -- steel-blue glass panel (scoped to .service-body's
   .bio so the homepage's own .bio treatment is untouched). Background
   bleeds full viewport width; the grid content itself stays inside the
   normal container width via the standard 100vw/-50vw breakout trick. */
.service-body > .bio{
  position:relative;
  padding:clamp(36px,5vw,64px) 0;
}
.service-body > .bio::before{
  content:'';
  position:absolute;
  top:0; bottom:0; left:50%; width:100vw;
  transform:translateX(-50%);
  z-index:-1;
  background-color:#4A7394;
  background-image:
    linear-gradient(var(--blueprint-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint-line-soft) 1px, transparent 1px);
  background-size:44px 44px;
}
.service-body > .bio .bio-text{
  background:color-mix(in oklch, #ffffff20 88%, transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-top:4px solid var(--gold);
  padding:clamp(24px,3vw,36px);
  box-shadow:0 20px 50px -24px rgba(0,0,0,0.3);
}
.service-body > .bio .kicker.dark{ color:var(--gold); }
.service-body > .bio .kicker.dark::before{ background:var(--gold); }
.service-body > .bio .bio-text h2{ color:var(--light); }
.service-body > .bio .bio-text .pull{ color:var(--light); }
.service-body > .bio .bio-text p{ color:color-mix(in oklch, var(--light) 88%, var(--truth)); }
.service-body > .bio .bio-fact-label{ color:var(--light); opacity:0.9; }
.service-body > .bio .bio-fact-value{ color:color-mix(in oklch, var(--light) 88%, var(--truth)); }
.service-body > .bio .bio-fact{ border-left-color:var(--gold); }

.bio-facts{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:22px; }
.bio-fact{ border-left:3px solid var(--gold); padding-left:14px; }
.bio-fact-label{ display:block; font-family:var(--head); font-weight:700; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--covenant); margin-bottom:4px; }
.bio-fact-value{ display:block; font-size:0.95rem; color:color-mix(in oklch, var(--truth) 85%, var(--covenant)); line-height:1.5; }
@media (max-width:600px){ .bio-facts{ grid-template-columns:1fr; } }

/* ---------- STRIPE ---------- */
.stripe{ background:var(--truth); padding:24px 0; }
.stripe-inner{ display:flex; flex-wrap:wrap; justify-content:center; gap:0; }
.stripe-inner span{ font-family:var(--head); font-weight:700; color:var(--on-dark-muted); font-size:0.82rem; letter-spacing:0.08em; text-transform:uppercase; padding:0 24px; position:relative; }
.stripe-inner span:not(:last-child)::after{ content:''; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:14px; background:var(--gold); }
.stripe-inner span:first-child{ padding-left:0; }

/* ---------- SPEC SHEET SERVICES (staggered/overlapping cards) ---------- */
.spec-section{ position:relative; }
.spec-section .container{ max-width:1280px; }
.spec-head{ max-width:620px; margin-bottom:56px; }
.spec-head .measure{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.spec-head .measure .line{ width:44px; height:1px; background:color-mix(in oklch, var(--covenant) 50%, transparent); position:relative; }
.spec-head .measure .line::before, .spec-head .measure .line::after{ content:''; position:absolute; top:-3px; width:1px; height:7px; background:color-mix(in oklch, var(--covenant) 50%, transparent); }
.spec-head .measure .line::before{ left:0; } .spec-head .measure .line::after{ right:0; }
.spec-head .measure span{ font-family:var(--head); font-weight:700; font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--covenant); }
.spec-head h2{ font-size:clamp(2rem,4vw,2.9rem); }

/* ---------- JOB-TICKET DOSSIER (tabbed spec binder) ---------- */
.dossier{ display:grid; grid-template-columns:380px 1fr; gap:0; align-items:stretch; }
.dossier-tabs{ display:flex; flex-direction:column; }
.dossier-tab{
  display:flex; align-items:center; text-align:left; font-family:var(--body); flex:1;
  background:var(--light); border:1px solid color-mix(in oklch, var(--truth) 14%, transparent);
  border-right:none; padding:30px 26px; cursor:pointer; position:relative; z-index:1;
  transition:background .25s var(--ease), padding-left .25s var(--ease);
}
.dossier-tab + .dossier-tab{ border-top:none; }
.dossier-tab .tl{ font-family:var(--head); font-weight:700; font-size:1.12rem; line-height:1.3; color:color-mix(in oklch, var(--truth) 85%, var(--covenant)); }
.dossier-tab:hover{ padding-left:32px; background:color-mix(in oklch, var(--truth) 5%, var(--light)); }
.dossier-tab.active{
  background:var(--gold); border-color:var(--covenant); z-index:2;
  margin-right:-1px; padding-left:34px;
}
.dossier-tab.active:hover{ background:var(--gold); }
.dossier-tab.active .tl{ color:var(--truth); }
.dossier-tab.active::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--covenant);
}

.dossier-panel{
  border:1px solid var(--covenant); background:var(--light); position:relative; min-height:620px;
  padding:0;
}
.dossier-panel::before, .dossier-panel::after{
  content:''; position:absolute; width:22px; height:22px; border-color:var(--gold); z-index:2; pointer-events:none;
}
.dossier-panel::before{ top:-1px; left:-1px; border-top:2px solid; border-left:2px solid; }
.dossier-panel::after{ bottom:-1px; right:-1px; border-bottom:2px solid; border-right:2px solid; }
.dossier-item{ display:none; position:absolute; inset:0; animation:dossier-in .4s var(--ease); cursor:pointer; }
.dossier-item.active{ display:block; }
@keyframes dossier-in{ from{ opacity:0; transform:translateX(8px); } to{ opacity:1; transform:translateX(0); } }
.dossier-photo{ position:relative; overflow:hidden; width:100%; height:100%; min-height:620px; }
.dossier-photo img{ width:100%; height:100%; object-fit:cover; filter:saturate(0.9); transition:transform .5s var(--ease); }
.dossier-item:hover .dossier-photo img{ transform:scale(1.04); }
.dossier-item:hover .dossier-link{ color:var(--gold); gap:10px; }
.dossier-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, color-mix(in oklch, var(--truth) 82%, transparent) 0%, transparent 46%);
}
.dossier-summary-box{
  position:absolute; left:36px; right:36px; bottom:36px; z-index:2; max-width:560px;
  background:var(--light); padding:32px 34px; box-shadow:0 24px 50px -20px rgba(0,0,0,0.4);
}
.dossier-summary-box::before{
  content:''; position:absolute; top:0; left:0; width:44px; height:4px; background:var(--gold);
}
.dossier-summary{ font-size:1.05rem; color:color-mix(in oklch, var(--truth) 84%, var(--covenant)); line-height:1.65; }
.dossier-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:16px;
  font-family:var(--head); font-weight:700; font-size:0.88rem; color:var(--covenant);
  transition:gap .2s var(--ease), color .2s var(--ease);
}
.dossier-link:hover{ color:var(--gold); gap:10px; }

/* ---------- FINAL CTA ---------- */
.final-cta{ position:relative; overflow:hidden; min-height:80vh; display:flex; align-items:center; }
.final-cta-bg{ position:absolute; inset:0; }
.final-cta-bg img{ width:100%; height:100%; object-fit:cover; }
.final-cta-bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(100deg, var(--truth-deep) 0%, color-mix(in oklch, var(--truth-deep) 60%, transparent) 45%, color-mix(in oklch, var(--covenant) 25%, transparent) 100%); }
.cta-wrap{ position:relative; z-index:2; width:100%; padding:clamp(60px,8vw,0) 0; }
.cta-grid{ display:grid; grid-template-columns:1fr 0.95fr; gap:clamp(40px,6vw,80px); align-items:center; }
.cta-copy h2{ color:var(--light); font-size:clamp(2rem,4vw,2.9rem); margin-bottom:18px; }
.cta-copy p{ color:var(--light); font-size:1.04rem; margin-bottom:22px; max-width:460px; }

/* Contact page reuses .cta-copy on a LIGHT card, not the dark final-CTA
   overlay -- override text color back to the body color or it renders
   white-on-white and silently disappears. */
.contact-copy h2{ color:var(--truth); }
.contact-copy p{ color:color-mix(in oklch, var(--truth) 85%, var(--covenant)); }
.cta-contact{ display:flex; flex-direction:column; gap:8px; }
.cta-contact a{ display:inline-flex; align-items:center; gap:9px; color:var(--gold); font-weight:700; font-size:1.12rem; font-family:var(--head); }
.cta-contact a:hover{ text-decoration:none; }
.cta-contact a svg{ width:18px; height:18px; flex-shrink:0; }
.cta-contact-address{ display:inline-flex; align-items:center; gap:9px; font-weight:600; }
.cta-contact-address svg{ width:18px; height:18px; flex-shrink:0; color:var(--gold); }

.cta-form{
  background: color-mix(in oklch, #ffffff14 88%, #00000000);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: clamp(28px, 4vw, 42px);
  border-top: 4px solid var(--gold);
}
.cta-form h3{ font-family:var(--head); font-weight:800; font-size:1.02rem; margin-bottom:18px; color:var(--light); }

/* Contact page form card -- glassmorphism (translucent tint + blur + soft
   shadow) over the site's blueprint-grid motif instead of a photo. */
.contact-form-col{
  position:relative; overflow:hidden;
  background-color:var(--covenant);
  background-image:
    linear-gradient(rgba(255,255,255,0.07), rgba(255,255,255,0.07)),
    linear-gradient(160deg, color-mix(in oklch, var(--truth-deep) 88%, transparent) 0%, color-mix(in oklch, var(--covenant) 55%, transparent) 100%),
    linear-gradient(var(--blueprint-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint-line-soft) 1px, transparent 1px);
  background-size: auto, auto, 44px 44px, 44px 44px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:0 20px 50px -24px rgba(0,0,0,0.35);
}
.contact-form-col > *{ position:relative; z-index:1; }

/* ---------- FOOTER ---------- */
footer{ background:var(--truth); padding:34px 0; border-top:1px solid color-mix(in oklch, var(--light) 10%, transparent); }
.footer-inner{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; }
.footer-inner .footer-brand{ justify-self:start; }
.footer-inner .pt-badge{ justify-self:center; }
.footer-inner .footer-links{ justify-self:end; }
.footer-brand img{ height:60px; width:auto; filter:brightness(0) invert(1); opacity:0.85; }
.footer-links{ display:flex; gap:22px; flex-wrap:wrap; }
.footer-links a{ color:var(--on-dark-muted); font-size:0.84rem; font-weight:600; font-family:var(--head); }
.footer-links a:hover{ color:var(--gold); }
.pt-badge{ display:flex; align-items:center; gap:8px; color:var(--on-dark-muted); font-size:0.8rem; font-weight:700; font-family:var(--head); border:1px solid color-mix(in oklch, var(--light) 16%, transparent); padding:6px 14px; }
.pt-badge img{ height:22px; width:auto; }
.copyright{ grid-column:1 / -1; width:100%; text-align:center; padding-top:20px; margin-top:20px; border-top:1px solid color-mix(in oklch, var(--light) 8%, transparent); color:color-mix(in oklch, var(--light) 36%, var(--truth)); font-size:0.76rem; }

/* ---------- INNER PAGE CONTENT (service/about/faq/contact bodies) ---------- */
.inner-content{ padding:clamp(60px,8vw,100px) 0; }

/* Service/Specialty/About pages: same blueprint graph-paper motif as the
   homepage's "How I Can Walk With You" section, visible near the top and
   again near the bottom of the content area (each fading in/out), staying
   quiet through the middle so it doesn't compete with long body copy. */
.inner-content.paper-fade{ position:relative; background-color:var(--light); }
.inner-content.paper-fade::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(var(--paper-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-line) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 6%, transparent 22%, transparent 78%, #000 94%, #000 100%);
  mask-image:linear-gradient(180deg, #000 0%, #000 6%, transparent 22%, transparent 78%, #000 94%, #000 100%);
}
.inner-content.paper-fade .container{ position:relative; z-index:1; }
.service-body p{ margin-bottom:16px; font-size:1.05rem; }
/* A paragraph directly before a heading shouldn't add its own bottom margin
   on top of the heading's top margin -- that compounding is what made
   section-to-section gaps feel inconsistent/oversized. */
.service-body > p:has(+ h2){ margin-bottom:0; }
.service-body h2{ font-family:var(--head); font-style:normal; font-weight:600; color:var(--truth); font-size:clamp(1.7rem,3vw,2.3rem); line-height:1.15; margin-bottom:18px; }
.service-body em{ font-style:italic; }
/* The global *{margin:0} reset zeroes <ul>/<li> too, so a list with no
   bottom margin of its own left zero gap before the next paragraph --
   list bullets on legal pages (Privacy Policy, Terms) ran straight into
   the following sentence with no breathing room. */
.service-body ul,
.service-body ol{ margin:0 0 16px; padding-left:1.3em; }
.service-body li{ margin-bottom:6px; }
.service-body li:last-child{ margin-bottom:0; }
.service-body .pull{ font-family:var(--head); font-weight:700; font-size:1.2rem; color:var(--covenant); margin:20px 0; }

.svc-img-section{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px); align-items:stretch; margin:0; }
.svc-img-section--reverse{ direction:rtl; }
.svc-img-section--reverse > *{ direction:ltr; }
.svc-text-col h2{ margin-top:0; }
.svc-text-col > h2:not(:first-child){ margin-top:clamp(32px,4vw,56px); }
.svc-img-col{ position:relative; }
.svc-img-col img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Desktop only: height:100% above forces the img to fill the full
   stretched grid row (align-items:stretch), which for a text column
   taller than the image's own native height meant object-fit:cover had
   to scale the image UP past its uploaded resolution to cover that box
   -- visibly softer/blurrier than the source file, and taller on screen
   than the file actually is. height:auto + max-height:100% caps it the
   other way: the image renders at its native height (scaled only to the
   column's 518px width, no upscale) and simply stops short of the text
   column's height if the text runs longer, instead of stretching past
   its own resolution to match it (found live 2026-08-14). Scoped to
   desktop because .svc-img-section collapses to a single stacked column
   at 768px and below, where this stretch behavior doesn't apply. */
@media (min-width:769px){
  .svc-img-col img{ height:auto; max-height:100%; }
}

/* One consistent top-gap for every top-level section in .service-body,
   regardless of whether it's a plain heading, an image-paired section, or
   the bio card -- prevents the "double gap here, none there" drift between
   section types. First section skips it (the container/hero already give
   it room). */
.service-body > h2,
.service-body > .svc-img-section,
.service-body > .bio{ margin-top:clamp(32px,4vw,56px); }
.service-body > h2:first-child,
.service-body > .svc-img-section:first-child,
.service-body > .bio:first-child{ margin-top:0; }
.service-body > .inner-lead{ margin:0; text-align:left; }
.inner-lead h2{ font-family:var(--head); font-style:normal; font-weight:600; color:var(--truth); font-size:clamp(1.7rem,3vw,2.3rem); line-height:1.15; }

.svc-aside{
  background:var(--paper-line, #f4f7fa); border-left:3px solid var(--gold);
  padding:24px 28px; margin:clamp(32px,5vw,56px) 0; font-style:italic; font-size:1.08rem;
  color:color-mix(in oklch, var(--truth) 85%, var(--covenant));
}

/* ---------- FAQ ACCORDION ---------- */
.faq-section{ padding:clamp(70px,9vw,120px) 0; }
.faq-head{ max-width:680px; margin-bottom:48px; }
.faq-list{ max-width:840px; }
.faq-item{ border:1px solid color-mix(in oklch, var(--covenant) 16%, transparent); background:var(--light); margin-bottom:16px; }
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%;
  background:none; border:none; text-align:left; padding:24px 28px; cursor:pointer;
  font-family:var(--head); font-weight:700; font-size:1.2rem; color:var(--truth);
}
.faq-q .faq-icon{ position:relative; width:18px; height:18px; flex-shrink:0; }
.faq-q .faq-icon::before, .faq-q .faq-icon::after{ content:''; position:absolute; background:var(--covenant); transition:transform .3s var(--ease); }
.faq-q .faq-icon::before{ top:50%; left:0; width:100%; height:2px; transform:translateY(-50%); }
.faq-q .faq-icon::after{ left:50%; top:0; width:2px; height:100%; transform:translateX(-50%); }
.faq-item.open .faq-q .faq-icon::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }
.faq-item.open .faq-q{ color:var(--covenant); }
.faq-a-wrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease); }
.faq-item.open .faq-a-wrap{ grid-template-rows:1fr; }
.faq-a-inner{ overflow:hidden; }
.faq-a{ padding:0 28px 26px; font-size:1.08rem; line-height:1.8; color:color-mix(in oklch, var(--truth) 85%, var(--covenant)); }
.faq-a p{ margin:0 0 1.5em; }
.faq-a p:last-child{ margin-bottom:0; }

/* ---------- REVEAL (max 2 moments: ID photo + dossier panel) ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* ---------- RESPONSIVE (below-fold) ---------- */
@media (max-width:1024px){
  .workshop-grid, .paper-grid, .bio, .cta-grid{ grid-template-columns:1fr; }
  .compass{ display:none; }
}
@media (max-width:768px){
  .workshop-photo{ order:-1; transform:rotate(0); max-width:400px; margin:0 auto; }
  .paper-photo{ order:-1; transform:rotate(0); max-width:400px; margin:0 auto; }
  .id-col{ max-width:320px; margin:0 auto; }
  .dossier{ grid-template-columns:1fr; }
  .dossier-tabs{ flex-direction:row; flex-wrap:wrap; }
  .dossier-tab{ border-right:1px solid color-mix(in oklch, var(--truth) 14%, transparent); flex:1 1 auto; }
  .dossier-tab.active{ margin-right:0; margin-bottom:-1px; }
  .dossier-tab.active::before{ width:auto; height:4px; right:0; bottom:0; top:auto; }
  .dossier-panel{ min-height:420px; }
  .dossier-photo{ min-height:420px; }
  .dossier-summary-box{ left:20px; right:20px; bottom:20px; padding:24px 22px; max-width:none; }
  .final-cta, .pad, .paper-section, .workshop, .bridge{ padding-top:50px; padding-bottom:50px; }
  .svc-img-section{ grid-template-columns:1fr; }
  .svc-img-section--reverse{ direction:ltr; }
  .inner-hero-content h1{ font-size:clamp(1.8rem,7vw,2.6rem); }
  .footer-inner{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .footer-inner .footer-brand, .footer-inner .pt-badge, .footer-inner .footer-links{ justify-self:center; }
}
@media (max-width:480px){
  .inner-hero{ padding:22px 16px; }
}

/* ========== MOBILE RESPONSIVE INVARIANTS -- DO NOT REMOVE ========== */
html, body { overflow-x: clip; }

@media (max-width: 768px) {
  .brand { min-width: 0; flex: 1 1 auto; }
  /* Fixed height:100px;width:150px (client-critical.css) has no mobile
     override -- .nav-actions never shrinks (flex-shrink:0), so squeezing
     the row on narrow phones (iPhone SE 375px) collapses .brand down to
     ~18px wide while height stays pinned at 100px, a 18x100 tap target
     well under the 44px floor. height:auto lets it scale down naturally
     instead of getting crushed. */
  .brand img{ height:56px; width:auto; }
  .mobile-nav-close{ flex-shrink:0; }
  .nav-actions { flex-shrink: 0; margin-left: auto; }
}

@media (hover: none) and (pointer: coarse) {
  button, input[type="submit"], input[type="button"] {
    font-size: 14px; min-height: 44px; box-sizing: border-box;
  }
  .nav-phone { font-size: 14px !important; min-height:44px; display:inline-flex; align-items:center; }
  nav.primary > a, .has-drop > a.drop-toggle {
    font-size: 14px !important; min-height: 44px; min-width: 44px;
    box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  }
  .dropdown a { font-size: 14px !important; min-height: 44px; box-sizing: border-box; display: flex; align-items: center; }
  .nav-cta, .btn-gold, .btn-frame, .btn-frame-dark, a.btn {
    font-size: 14px !important; min-height: 44px; box-sizing: border-box;
  }
  .hamburger span { flex-shrink: 0; height: 2px; min-height: 2px; }
  .hamburger { min-width: 44px; box-sizing: border-box; }
  .brand { min-width: 44px; box-sizing: border-box; }
  .close-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
  .mobile-nav a { font-size: 16px !important; min-height: 44px; box-sizing:border-box; }
  .footer-links a, .footer-brand, .pt-badge { font-size: 14px !important; }
  .footer-links a { min-height: 44px; padding: 8px 0; display: inline-block; box-sizing: border-box; }
  .pt-badge { min-width: 44px; min-height: 44px; box-sizing: border-box; }
  a[href^="tel:"], a[href^="mailto:"] { min-height: 44px; padding: 12px 0; display: inline-block; box-sizing: border-box; }
  .wpforms-form .wpforms-submit,
  .cta-form .wpforms-form .wpforms-submit,
  button[type="submit"].wpforms-submit {
    min-height: 44px !important; padding-top: 12px !important; padding-bottom: 12px !important; box-sizing: border-box !important;
  }
  .wpforms-container .wpforms-field-label,
  .wpforms-container .wpforms-field-label.wpforms-field-label,
  .cta-form .wpforms-container .wpforms-field-label.wpforms-field-label {
    font-size: 14px !important; line-height: 1.4 !important;
  }
  body.page-privacy-policy .inner-body a,
  body.page-terms-and-conditions .inner-body a {
    display: inline-block; min-height: 44px; padding: 11px 0; line-height: 1.4; box-sizing: border-box;
  }
  .faq-q{ font-size:1.05rem; padding:18px 20px; }
  .faq-a{ font-size:1rem; padding:0 20px 22px; }
  .hero-tag, .kicker, .id-tag .id-cred, .copyright { font-size: 14px !important; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 0; height: auto; padding-top: 96px; padding-bottom: 32px; }
  .hero-content { padding: 24px 28px; }
}

/* ========== LEGAL PAGES: NEVER FADE IN ========== */
body.page-terms-and-conditions .reveal,
body.page-terms-and-conditions .fade-in,
body.page-privacy-policy .reveal,
body.page-privacy-policy .fade-in {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* ---------- forceVisible safety net ---------- */
@keyframes forceVisible {
  to { opacity: 1; transform: none; }
}
.inner-content,
.contact-grid,
.faq-list {
  animation: forceVisible 0s 0s forwards;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
  animation: none;
}