/* =============================================================
   Long-form article layout (.shk-lf)

   A magazine treatment for blog posts: full-bleed hero, banded
   sections, card rows and a closing CTA. It is deliberately
   self-contained so a post using it never has to fight the prose
   styles, and it loads only on pages that carry the class.

   Colour comes from the theme tokens, so it follows the brand
   rather than carrying a second palette of its own.
   ============================================================= */

.shk-lf{
  --lf-navy:var(--c-primary-900);
  --lf-blue:var(--c-primary);
  --lf-accent:var(--c-accent);
  --lf-ink:var(--c-ink);
  --lf-muted:var(--c-ink-2);
  --lf-soft:var(--c-ink-3);
  --lf-line:var(--c-line);
  --lf-bg2:var(--c-surface-2);
  --lf-bg3:var(--c-primary-050);
  --lf-sh:0 12px 34px rgba(36,28,22,.10);
  --lf-shs:0 4px 16px rgba(36,28,22,.07);
  color:var(--lf-muted); line-height:1.7;
}
.shk-lf *{ box-sizing:border-box }
.shk-lf img{ max-width:100%; height:auto; display:block }
.shk-lf .wrap{ max-width:var(--w-wide); margin:0 auto; padding:0 16px }
@media (min-width:600px){ .shk-lf .wrap{ padding-inline:clamp(1.25rem,4vw,2.5rem) } }
/* The frame is wide so it lines up with the header, but a line of text 1320px
   long is unreadable. Prose keeps its measure; only the full-width furniture
   uses the whole frame. */
.shk-lf .lf-sec{ padding:clamp(2.5rem,6vw,4.5rem) 0 }
.shk-lf .lf-sec > .wrap > p,
.shk-lf .lf-sec > .wrap > h2,
.shk-lf .lf-sec > .wrap > h3,
.shk-lf .lf-sec > .wrap > ul,
.shk-lf .lf-sec > .wrap > ol{ max-width:74ch }
.shk-lf .lf-sec--tight{ padding-top:0 }

/* ---------- reveal on scroll ---------- */
.shk-lf .rv{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease }
.shk-lf .rv.is-in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){ .shk-lf .rv{ opacity:1; transform:none; transition:none } }
.no-js .shk-lf .rv{ opacity:1; transform:none }

/* ---------- shared bits ---------- */
.shk-lf .pill{
  display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border-radius:999px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); color:#fff;
  font-family:var(--font-head); font-size:.72rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:20px;
}
.shk-lf .pill::before{
  content:''; width:8px; height:8px; border-radius:50%;
  background:var(--lf-accent); box-shadow:0 0 0 4px rgba(201,195,187,.28);
}
.shk-lf .ey{
  font-family:var(--font-head); font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--lf-blue); margin:0 0 .7rem;
}
.shk-lf h2.h2{
  font-size:clamp(1.65rem,1.1rem + 2vw,2.6rem); color:var(--lf-ink);
  margin:0 0 1rem; line-height:1.14;
}
.shk-lf h3.h3{
  font-family:var(--font-head); font-weight:700; font-size:clamp(1.15rem,1rem + .6vw,1.45rem);
  color:var(--lf-ink); margin:2rem 0 .6rem;
}
.shk-lf em{ font-style:normal; color:var(--lf-blue) }
.shk-lf .lf-hero em{ color:var(--lf-accent) }
.shk-lf .lf-cta em{ color:var(--lf-accent) }
.shk-lf p.p{ margin:0 0 1.1em; font-size:1.02rem }
.shk-lf a{ color:var(--lf-blue); text-underline-offset:.18em }

/* ---------- hero ---------- */
.shk-lf .lf-hero{
  position:relative; min-height:clamp(380px,56vw,560px);
  display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden;
  background-color:var(--lf-navy); background-size:cover; background-position:center;
}
.shk-lf .lf-hero::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(42,31,23,.74),rgba(42,31,23,.88));
}
/* Texture, not decoration: bigger circles, almost no opacity, and masked so it
   fades out toward the middle where the headline sits. */
.shk-lf .lf-hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.028' stroke-width='1'%3E%3Ccircle cx='54' cy='74' r='30'/%3E%3Ccircle cx='214' cy='188' r='46'/%3E%3Ccircle cx='272' cy='54' r='19'/%3E%3Ccircle cx='120' cy='256' r='26'/%3E%3C/g%3E%3C/svg%3E");
  background-size:320px 320px;
  -webkit-mask:radial-gradient(120% 90% at 50% 50%, transparent 30%, #000 92%);
  mask:radial-gradient(120% 90% at 50% 50%, transparent 30%, #000 92%);
}
.shk-lf .lf-hero-in{ position:relative; z-index:2; max-width:880px; padding:clamp(3rem,8vw,5rem) 20px }
.shk-lf .lf-hero h1{
  font-size:clamp(1.95rem,1.2rem + 3.2vw,3.4rem); color:#fff; line-height:1.1; margin:0 0 18px;
  text-shadow:0 2px 24px rgba(4,6,40,.5);
}
.shk-lf .lf-hero-sub{
  font-size:clamp(1rem,.95rem + .35vw,1.18rem); color:rgba(255,255,255,.92);
  max-width:680px; margin:0 auto 24px; line-height:1.6;
}
.shk-lf .lf-meta{
  display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:center;
  font-size:.86rem; color:rgba(255,255,255,.8); margin-bottom:26px;
}
.shk-lf .lf-meta span{ display:inline-flex; align-items:center; gap:7px }
.shk-lf .lf-meta svg{ width:16px; height:16px; stroke:var(--lf-accent); fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; flex:none }
.shk-lf .lf-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center }

/* ---------- buttons ---------- */
.shk-lf .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:48px; padding:.8rem 1.5rem; border-radius:999px;
  font-family:var(--font-head); font-weight:700; font-size:.98rem; line-height:1.2;
  text-decoration:none; border:2px solid transparent; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.shk-lf .btn:active{ transform:translateY(1px) }
.shk-lf .btn svg{ width:19px; height:19px; flex:none; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.shk-lf .btn-a{ background:var(--lf-accent); color:var(--c-primary-900) }
.shk-lf .btn-a:hover{ background:var(--c-accent-600); color:var(--c-primary-900); box-shadow:var(--lf-shs) }
.shk-lf .btn-b{ background:var(--lf-blue); color:#fff }
.shk-lf .btn-b:hover{ background:var(--c-primary-800); color:#fff; box-shadow:var(--lf-shs) }
.shk-lf .btn-o{ border-color:var(--lf-line); color:var(--lf-ink); background:var(--c-surface) }
.shk-lf .btn-o:hover{ border-color:var(--lf-blue); color:var(--lf-blue) }
.shk-lf .btn-g{ border-color:rgba(255,255,255,.55); color:#fff; background:transparent }
.shk-lf .btn-g:hover{ background:rgba(255,255,255,.14); color:#fff }
@media (max-width:420px){ .shk-lf .btn{ width:100% } }

/* ---------- intro, two columns ---------- */
.shk-lf .lf-intro{ display:grid; gap:1.5rem }
@media (min-width:860px){ .shk-lf .lf-intro{ grid-template-columns:1fr 1fr; gap:2.5rem } }
/* Both columns at the same size. A larger first column beside a smaller second
   one read as two different documents stuck together, and on a blog the
   heading already does the job of saying where to start. */
.shk-lf .lf-lead{ font-size:1.02rem; color:var(--lf-ink); line-height:1.75; margin:0 }
.shk-lf .lf-second{ margin:0; padding-left:1.25rem; border-left:3px solid var(--lf-blue); font-size:1.02rem; color:var(--lf-ink); line-height:1.75 }

/* ---------- full-bleed image strip ---------- */
.shk-lf .lf-strip{ position:relative; margin:0 }
.shk-lf .lf-strip img{ width:100%; height:clamp(220px,38vw,440px); object-fit:cover }
.shk-lf .lf-strip-cap{
  position:absolute; left:0; right:0; bottom:0; padding:2.5rem 20px 1.1rem; text-align:center;
  color:#fff; font-size:.95rem; font-style:italic;
  background:linear-gradient(180deg,transparent,rgba(42,31,23,.78));
}

/* ---------- tinted zone with the bubble pattern ---------- */
.shk-lf .lf-zone{
  background:var(--lf-bg2); position:relative;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%235A4334' stroke-opacity='0.05' stroke-width='1.4'%3E%3Ccircle cx='26' cy='34' r='16'/%3E%3Ccircle cx='112' cy='96' r='24'/%3E%3Ccircle cx='140' cy='28' r='10'/%3E%3Ccircle cx='58' cy='130' r='13'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- three icon cards ---------- */
.shk-lf .lf-cards{ display:grid; gap:1rem; margin-top:1.75rem }
@media (min-width:760px){ .shk-lf .lf-cards{ grid-template-columns:repeat(3,1fr) } }
.shk-lf .lf-card{
  background:var(--c-surface); border:1px solid var(--lf-line); border-radius:var(--radius);
  padding:1.6rem 1.4rem; box-shadow:var(--lf-shs);
}
.shk-lf .lf-card h4{ margin:0 0 .5rem; color:var(--lf-ink); font-size:1.08rem }
.shk-lf .lf-card p{ margin:0; font-size:.96rem }
/* Unboxed and large. At 23px inside a tinted square the icon was a bullet with
   a frame around it; at 52px with nothing behind it, the line drawing is the
   graphic. The stroke thins as the icon grows so it keeps the same weight
   as the type beside it. */
.shk-lf .lf-ico{
  width:auto; height:auto; border-radius:0; display:block;
  background:none; margin-bottom:1.1rem;
}
.shk-lf .lf-ico svg{ width:52px; height:52px; fill:none; stroke:var(--lf-blue); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round }

/* ---------- section divider ---------- */
.shk-lf .lf-break{ display:flex; align-items:center; gap:1rem; color:var(--lf-blue); opacity:.55 }
.shk-lf .lf-break span{ flex:1; height:1px; background:var(--lf-line) }
.shk-lf .lf-break svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; flex:none }

/* ---------- checklist cards ---------- */
.shk-lf .lf-checks{ display:grid; gap:1rem; margin-top:1.5rem }
@media (min-width:760px){ .shk-lf .lf-checks{ grid-template-columns:1fr 1fr } }
.shk-lf .lf-check{
  background:var(--c-surface); border:1px solid var(--lf-line); border-radius:var(--radius);
  padding:1.5rem 1.4rem; box-shadow:var(--lf-shs);
}
.shk-lf .lf-check h4{
  display:flex; align-items:center; gap:.6rem; margin:0 0 .85rem;
  color:var(--lf-ink); font-size:1.05rem;
}
.shk-lf .lf-check h4 svg{ width:20px; height:20px; flex:none; fill:none; stroke:var(--lf-accent);
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.shk-lf .lf-check ul{ margin:0; padding:0; list-style:none }
.shk-lf .lf-check li{
  position:relative; padding-left:1.6rem; margin-bottom:.55rem; font-size:.96rem;
}
.shk-lf .lf-check li::before{
  content:''; position:absolute; left:0; top:.45em; width:9px; height:5px;
  border-left:2.5px solid var(--lf-blue); border-bottom:2.5px solid var(--lf-blue);
  transform:rotate(-45deg);
}
.shk-lf .lf-check li:last-child{ margin-bottom:0 }

/* ---------- callout ---------- */
.shk-lf .lf-callout{
  margin:2rem 0; padding:1.4rem 1.5rem; border-radius:var(--radius);
  background:var(--lf-bg3); border-left:4px solid var(--lf-blue);
}
.shk-lf .lf-callout p{ margin:0; color:var(--lf-ink) }
.shk-lf .lf-inline-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:1.75rem }

/* ---------- FAQ, reskinned from the shared accordion ---------- */
.shk-lf .shk-faq{ max-width:none }
.shk-lf .shk-faq-title{ font-size:clamp(1.65rem,1.1rem + 2vw,2.6rem); margin-bottom:1.25rem }
.shk-lf .shk-faq-list{ gap:.7rem }
.shk-lf .shk-faq-item{ border-radius:var(--radius); box-shadow:var(--lf-shs) }
.shk-lf .shk-faq-item summary{ padding:1.15rem 3.2rem 1.15rem 1.35rem; font-size:1.04rem }
.shk-lf .shk-faq-answer{ padding:0 1.35rem 1.3rem }

/* ---------- closing CTA band ---------- */
.shk-lf .lf-cta{
  background:linear-gradient(160deg,var(--c-primary-900) 0%,var(--c-primary) 82%);
  color:#fff; text-align:center; position:relative; overflow:hidden;
}
.shk-lf .lf-cta::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(900px 420px at 80% 10%, rgba(201,195,187,.24), transparent 62%);
}
.shk-lf .lf-cta-in{ position:relative; z-index:1; max-width:860px; margin:0 auto;
  padding:clamp(2.75rem,7vw,4.5rem) 20px }
.shk-lf .lf-cta h3{ color:#fff; font-size:clamp(1.6rem,1.1rem + 1.9vw,2.4rem); margin:0 0 .8rem }
.shk-lf .lf-cta p{ color:rgba(255,255,255,.9); margin:0 auto 1.75rem; max-width:620px }
.shk-lf .lf-stats{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem 2.75rem; margin-bottom:1.75rem }
.shk-lf .lf-stats div{ display:flex; flex-direction:column; gap:.2rem }
.shk-lf .lf-stats b{ font-family:var(--font-head); font-size:1.7rem; color:var(--lf-accent); line-height:1 }
.shk-lf .lf-stats span{ font-size:.82rem; color:rgba(255,255,255,.76); letter-spacing:.04em }

/* ---------- signature ---------- */
.shk-lf .lf-sig{
  background:var(--c-surface); border:1px solid var(--lf-line); border-radius:var(--radius-lg);
  box-shadow:var(--lf-sh); overflow:hidden;
}
.shk-lf .lf-sig-grid{ display:grid; grid-template-columns:1fr }
.shk-lf .lf-sig-img{ position:relative }
.shk-lf .lf-sig-img img{
  width:100%; height:100%; display:block;
  aspect-ratio:768/492; object-fit:cover; object-position:center 28%;
}
/* Stacked on a phone, the photo needs a fade into the copy under it. Side by
   side it does not, so the fade only exists in the stacked case. */
.shk-lf .lf-sig-img::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:22%;
  background:linear-gradient(180deg, rgba(255,255,255,0), var(--c-surface));
  pointer-events:none;
}
.shk-lf .lf-sig-body{ padding:clamp(1.25rem,3vw,2.2rem) clamp(1.5rem,3vw,2.4rem) clamp(1.5rem,3vw,2.4rem) }
/* Half and half, photo left, words right. */
@media (min-width:860px){
  .shk-lf .lf-sig-grid{ grid-template-columns:1fr 1fr; align-items:stretch }
  .shk-lf .lf-sig-img{ min-height:100% }
  .shk-lf .lf-sig-img img{
    position:absolute; inset:0; aspect-ratio:auto;
    width:100%; height:100%; object-position:center 30%;
  }
  .shk-lf .lf-sig-img::after{ display:none }
  .shk-lf .lf-sig-body{ display:flex; flex-direction:column; justify-content:center; min-width:0 }
}
.shk-lf .lf-sig-pill{
  display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px;
  background:var(--lf-bg3); color:var(--lf-blue); font-family:var(--font-head);
  font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.9rem;
  white-space:nowrap; align-self:flex-start; max-width:100%;
}
.shk-lf .lf-sig-pill svg{ width:14px; height:14px; flex:none; stroke-width:2.2 }
/* A floor under every inline SVG in a post. The content is authored HTML, so
   one missing width attribute must never be able to blow a layout apart. */
.shk-lf svg{ flex:none; max-width:100% }
.shk-lf span > svg:only-child{ width:1em; height:1em }
.shk-lf .lf-sig-body h3{ margin:0 0 .4rem; font-size:clamp(1.25rem,1.05rem + .8vw,1.65rem) }
.shk-lf .lf-sig-since{ font-size:.88rem; color:var(--lf-soft); margin-bottom:.9rem }
.shk-lf .lf-sig-body p{ margin:0 0 1.25rem }

/* ---------- services row ---------- */
.shk-lf .lf-svc{ background:var(--lf-navy); color:#fff; padding:clamp(2.5rem,6vw,4rem) 0 }
.shk-lf .lf-svc h3{ color:#fff; margin:0; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem) }
.shk-lf .lf-svc-head{ text-align:center; margin-bottom:1.75rem }
.shk-lf .lf-svc-head .pill{ margin-bottom:14px }
.shk-lf .lf-svc-row{ display:grid; gap:1rem; grid-template-columns:repeat(2,1fr) }
@media (min-width:760px){ .shk-lf .lf-svc-row{ grid-template-columns:repeat(5,1fr) } }
.shk-lf .lf-svc-item a{ color:#fff; text-decoration:none; display:block }
.shk-lf .lf-svc-img{ border-radius:var(--radius-sm); overflow:hidden; margin-bottom:.6rem }
.shk-lf .lf-svc-img img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .3s ease }
.shk-lf .lf-svc-item a:hover .lf-svc-img img{ transform:scale(1.05) }
.shk-lf .lf-svc-item span{ font-family:var(--font-head); font-weight:700; font-size:.92rem }
@media (prefers-reduced-motion:reduce){ .shk-lf .lf-svc-img img{ transition:none } }

/* ---------- breadcrumb bar above the hero ---------- */
.shk-lf-crumbs{ background:var(--c-surface-2); padding:.75rem 0 }
.shk-lf-crumbs .wrap{ max-width:var(--w-wide); margin:0 auto; padding:0 16px }
@media (min-width:600px){ .shk-lf-crumbs .wrap{ padding-inline:clamp(1.25rem,4vw,2.5rem) } }


/* ---------- breadcrumb clear of the badge ----------
   The crumb bar sits directly under the header, which is exactly where the
   logo badge hangs. Both start on the same grid line, so the first 150px of
   the trail ran underneath the seal. The trail now starts past the badge at
   each size the badge takes; on a phone the badge sits inside the bar and
   there is nothing to clear. */
@media (min-width:861px){ .shk-lf-crumbs .shk-crumbs ol{ padding-left:138px } }
@media (min-width:1200px){ .shk-lf-crumbs .shk-crumbs ol{ padding-left:172px } }