/*
Theme Name:   Hameldon Child
Theme URI:    https://hameldontech.co.uk
Description:  Divi child theme for Hameldon Technology. Design tokens, component styles and GSAP scroll motion. See 06-brand-and-style-guide.md section 9.
Author:       Hameldon Technology Ltd
Author URI:   https://hameldontech.co.uk
Template:     Divi
Version:      1.19.0
Text Domain:  hameldon-child
*/

/* =========================================================
   1. DESIGN TOKENS
   Declared at :root. Every use below carries an inline
   fallback, because Divi and cached CSS do not always
   resolve custom properties.
   ========================================================= */
:root{
  --ht-bg:#FBFAF7;
  --ht-tint:#F2EFE9;
  --ht-surface:#FFFFFF;
  --ht-ink:#16130F;
  --ht-body:#4E4740;
  --ht-muted:#8C837A;
  --ht-copper:#C6673B;
  --ht-copper-dk:#B25A31;
  --ht-green:#3F8F5F;
  --ht-line:#E7E1D7;
  --ht-line-soft:#F0EBE3;

  --ht-code-bg:#18150F;
  --ht-code-line:#2A251D;
  --ht-code-txt:#CFC7BA;
  --ht-code-tag:#D98A5E;
  --ht-code-val:#A9B98F;
  --ht-code-cmt:#5E564A;
  /* Larger figures sit at 62% opacity rather than 35%, so their base
     text and comments start lighter to land in the same place. */
  --ht-code-dim:#9A9084;
  --ht-code-cmt-lg:#7A7164;

  --ht-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --ht-sans:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --ht-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --ht-r-lg:18px;
  --ht-r-md:12px;
  --ht-r-sm:8px;

  --ht-sh1:0 1px 2px rgba(22,19,15,.04), 0 4px 12px rgba(22,19,15,.05);
  --ht-sh2:0 2px 4px rgba(22,19,15,.05), 0 14px 34px rgba(22,19,15,.09);
  --ht-sh3:0 30px 70px rgba(22,19,15,.15), 0 8px 20px rgba(22,19,15,.07);

  --ht-max:1160px;
  --ht-ease:cubic-bezier(.16,1,.3,1);
}

/* =========================================================
   2. BASE
   ========================================================= */
body{
  background:#FBFAF7;
  background:var(--ht-bg,#FBFAF7);
  color:#4E4740;
  color:var(--ht-body,#4E4740);
  font-family:var(--ht-sans,"Source Sans 3",Helvetica,Arial,sans-serif);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--ht-serif,Georgia,serif);
  color:#16130F;
  color:var(--ht-ink,#16130F);
  font-weight:500;
  letter-spacing:-.015em;
  text-wrap:balance;
}
h1{font-size:clamp(2.4rem,4.6vw,3.6rem);line-height:1.06}
h2{font-size:clamp(1.85rem,3.2vw,2.5rem);line-height:1.14}
h3{font-size:1.1875rem;line-height:1.3}

/* Accessibility: Divi ships no visible focus ring. */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:3px solid #C6673B;
  outline:3px solid var(--ht-copper,#C6673B);
  outline-offset:3px;
  border-radius:2px;
}
.ht-skip{
  position:absolute;left:-9999px;top:0;z-index:9999;
  background:#C6673B;background:var(--ht-copper,#C6673B);
  color:#fff;padding:.75rem 1.25rem;font-weight:600;
}
.ht-skip:focus{left:0}

/* =========================================================
   3. COMPONENTS
   ========================================================= */
.ht-lab{
  font-family:var(--ht-mono,monospace);
  font-size:.6875rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  color:#8C837A;color:var(--ht-muted,#8C837A);
}

/* Buttons. Ink pill primary. Overrides Divi's .et_pb_button. */
.ht-btn,
.et_pb_button.ht-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--ht-sans,Helvetica,Arial,sans-serif);
  font-size:.9375rem;font-weight:600;line-height:1;
  padding:.72rem 1.35rem;min-height:46px;
  border-radius:999px;
  border:1px solid #16130F;border:1px solid var(--ht-ink,#16130F);
  background:#16130F;background:var(--ht-ink,#16130F);
  color:#fff;
  box-shadow:var(--ht-sh1,0 1px 2px rgba(22,19,15,.04));
  transition:transform .18s var(--ht-ease,ease),background .18s var(--ht-ease,ease),box-shadow .18s var(--ht-ease,ease);
}
.ht-btn:hover,.et_pb_button.ht-btn:hover{
  background:#2b241d;color:#fff;transform:translateY(-1px);
  box-shadow:var(--ht-sh2,0 14px 34px rgba(22,19,15,.09));
}
/* Divi injects an arrow pseudo-element on buttons. Remove it. */
.et_pb_button.ht-btn:after{display:none!important}

.ht-btn-o,
.et_pb_button.ht-btn-o{
  background:transparent;
  color:#16130F;color:var(--ht-ink,#16130F);
  border-color:#E7E1D7;border-color:var(--ht-line,#E7E1D7);
  box-shadow:none;
}
.ht-btn-o:hover,.et_pb_button.ht-btn-o:hover{
  background:#FFF;background:var(--ht-surface,#FFF);
  border-color:#cfc6b8;transform:translateY(-1px);
}

/* Availability pill */
.ht-pill{
  display:inline-flex;align-items:center;gap:.55rem;
  border:1px solid #E7E1D7;border:1px solid var(--ht-line,#E7E1D7);
  background:#FFF;background:var(--ht-surface,#FFF);
  border-radius:999px;padding:.4rem .9rem;
  font-size:.8125rem;font-weight:500;
  box-shadow:var(--ht-sh1,0 1px 2px rgba(22,19,15,.04));
}
.ht-pill i{
  position:relative;
  width:7px;height:7px;border-radius:50%;flex:none;
  background:#3F8F5F;background:var(--ht-green,#3F8F5F);
}
/* Live indicator. A ring expands out of the dot and fades. */
.ht-pill i::after{
  content:"";
  position:absolute;inset:0;border-radius:50%;
  background:#3F8F5F;background:var(--ht-green,#3F8F5F);
  animation:ht-ping 2.4s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ht-ping{
  0%{transform:scale(1);opacity:.5}
  70%{transform:scale(2.8);opacity:0}
  100%{transform:scale(2.8);opacity:0}
}
/* A pulsing dot is motion. Hold it steady when asked to. */
@media(prefers-reduced-motion:reduce){
  .ht-pill i::after{display:none}
}

/* Cards */
.ht-card{
  background:#FFF;background:var(--ht-surface,#FFF);
  border:1px solid #E7E1D7;border:1px solid var(--ht-line,#E7E1D7);
  border-radius:var(--ht-r-lg,18px);
  box-shadow:var(--ht-sh1,0 1px 2px rgba(22,19,15,.04));
  overflow:hidden;
  transition:transform .22s var(--ht-ease,ease),box-shadow .22s var(--ht-ease,ease);
}
.ht-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--ht-sh2,0 14px 34px rgba(22,19,15,.09));
}

/* Code panel. Used by the config-to-output figures. */
.ht-code{
  background:#18150F;background:var(--ht-code-bg,#18150F);
  border-radius:var(--ht-r-md,12px);
  font-family:var(--ht-mono,monospace);
  font-size:.6875rem;line-height:1.9;
  color:#6F6659;
  white-space:pre;overflow:hidden;
  padding:.9rem 1rem;
}
.ht-code .tag{color:#D98A5E;color:var(--ht-code-tag,#D98A5E)}
.ht-code .val{color:#A9B98F;color:var(--ht-code-val,#A9B98F)}
.ht-code .txt{color:#CFC7BA;color:var(--ht-code-txt,#CFC7BA)}
.ht-code .cmt{color:#5E564A;color:var(--ht-code-cmt,#5E564A)}
/* Highlighted line during the pinned build sequence */
.ht-code .ln{
  display:block;border-left:2px solid transparent;padding-left:.6rem;
  transition:background .3s var(--ht-ease,ease),border-color .3s var(--ht-ease,ease),color .3s var(--ht-ease,ease);
}
.ht-code .ln.is-hot{
  background:rgba(198,103,59,.13);
  border-left-color:#C6673B;border-left-color:var(--ht-copper,#C6673B);
  color:#CFC7BA;color:var(--ht-code-txt,#CFC7BA);
}

/* Hydro-style column rules. Wide screens only. */
@media(min-width:1240px){
  .ht-rules{position:fixed;inset:0;pointer-events:none;z-index:0}
  .ht-rules i{position:absolute;top:0;bottom:0;width:1px;background:#E7E1D7;background:var(--ht-line,#E7E1D7)}
  .ht-rules i:first-child{left:calc(50% - var(--ht-max,1160px)/2)}
  .ht-rules i:last-child{left:calc(50% + var(--ht-max,1160px)/2)}
}
@media(max-width:1239px){.ht-rules{display:none}}

/* =========================================================
   4. NATIVE CSS SCROLL-DRIVEN ANIMATION
   Enhancement only. Everything must be fully visible
   without it: Firefox has no support as of Sept 2026, so
   the hidden start state lives ONLY inside @supports.
   ========================================================= */
@keyframes ht-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ht-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

.ht-progress{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:#C6673B;background:var(--ht-copper,#C6673B);
  transform-origin:0 50%;transform:scaleX(0);
}
@supports (animation-timeline: scroll()){
  .ht-progress{animation:ht-grow linear both;animation-timeline:scroll(root block)}
}
@supports (animation-timeline: view()){
  .ht-sd{animation:ht-rise linear both;animation-timeline:view();animation-range:entry 5% cover 26%}
}

/* =========================================================
   5. LAYOUT HELPERS
   For content placed in Divi Code modules. Divi's own row
   widths are bypassed: set the Section and Row padding to 0
   and let these control the rhythm.
   ========================================================= */
.ht-wrap{
  max-width:1160px;max-width:var(--ht-max,1160px);
  margin-block:0;margin-inline:auto;
  padding-inline:clamp(1.25rem,4.5vw,2.75rem);
}
.ht-sect{padding-block:clamp(3rem,6.5vw,4.75rem)}
.ht-sect-tight{padding-block:clamp(2rem,4vw,3rem)}
.ht-ground-tint{background:#F2EFE9;background:var(--ht-tint,#F2EFE9)}
.ht-ground-surface{background:#FFF;background:var(--ht-surface,#FFF)}
.ht-ground-ink{background:#16130F;background:var(--ht-ink,#16130F);color:#B9B2A8}
.ht-ground-ink h1,.ht-ground-ink h2,.ht-ground-ink h3,.ht-ground-ink h4{color:#fff}

/* Divi wraps Code module output. Neutralise its VERTICAL spacing only.
   Must not be `margin:0` — that kills the auto horizontal centring on
   any section that carries .ht-wrap directly (the CTA band does), and
   the block lands hard against the left edge. */
.et_pb_code_inner > .ht-foot,
.et_pb_code_inner > .ht-sect,
.et_pb_code_inner > section{margin-block:0}

/* =========================================================
   6. GLOBAL HEADER
   Mobile menu is pure CSS (checkbox + label), no JavaScript,
   because the Cloudflare WAF strips inline script from Divi
   editor saves. Same pattern as the CHEK accordions.
   ========================================================= */
.ht-head{
  position:sticky;top:0;z-index:100;
  background:rgba(251,250,247,.88);
  border-bottom:1px solid #F0EBE3;
  border-bottom:1px solid var(--ht-line-soft,#F0EBE3);
}
@supports (backdrop-filter:blur(12px)){
  .ht-head{backdrop-filter:blur(12px)}
}
/* WP admin bar offset */
.admin-bar .ht-head{top:32px}
@media screen and (max-width:782px){.admin-bar .ht-head{top:46px}}

.ht-head-inner{
  max-width:1160px;max-width:var(--ht-max,1160px);
  margin:0 auto;padding-inline:clamp(1.25rem,4.5vw,2.75rem);
  min-height:84px;
  display:flex;align-items:center;gap:1.25rem;
}
.ht-logo{margin-right:auto;display:flex;align-items:center;line-height:0}
.ht-logo img{height:40px;width:auto;display:block}

.ht-nav{display:none;gap:1.5rem;align-items:center}
@media(min-width:1000px){.ht-nav{display:flex}}
.ht-nav a{
  font-size:.9375rem;font-weight:500;text-decoration:none;
  color:#4E4740;color:var(--ht-body,#4E4740);
  display:inline-flex;align-items:center;gap:.4rem;
  transition:color .18s var(--ht-ease,ease);
}
.ht-nav a::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:#C6673B;background:var(--ht-copper,#C6673B);
  opacity:0;transition:opacity .18s var(--ht-ease,ease);
}
.ht-nav a:hover{color:#16130F;color:var(--ht-ink,#16130F)}
.ht-nav a:hover::before{opacity:1}
.ht-nav a[aria-current="page"]{color:#16130F;color:var(--ht-ink,#16130F);font-weight:600}
.ht-nav a[aria-current="page"]::before{opacity:1}

.ht-head-cta{display:none}
@media(min-width:620px){.ht-head-cta{display:inline-flex}}

/* --- mobile toggle --- */
.ht-menu-toggle{
  position:absolute;opacity:0;width:1px;height:1px;
  margin:0;pointer-events:none;
}
.ht-burger{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;cursor:pointer;flex:none;
  border:1px solid #E7E1D7;border:1px solid var(--ht-line,#E7E1D7);
  border-radius:var(--ht-r-sm,8px);
}
@media(min-width:1000px){.ht-burger{display:none}}
.ht-burger span{
  display:block;height:1.5px;width:100%;
  background:#16130F;background:var(--ht-ink,#16130F);
  transition:transform .22s var(--ht-ease,ease),opacity .18s var(--ht-ease,ease);
}
/* The toggle is now a direct child of .ht-head, BEFORE both
   .ht-head-inner and .ht-mnav, so `~` can reach each of them.
   Previously the input sat inside .ht-head-inner, which made the
   burger a sibling (animated fine) but the menu a nephew, so
   `:checked ~ .ht-mnav` never matched and mobile nav never opened. */
.ht-menu-toggle:focus-visible ~ .ht-head-inner .ht-burger{
  outline:3px solid #C6673B;outline:3px solid var(--ht-copper,#C6673B);outline-offset:3px;
}
.ht-menu-toggle:checked ~ .ht-head-inner .ht-burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.ht-menu-toggle:checked ~ .ht-head-inner .ht-burger span:nth-child(2){opacity:0}
.ht-menu-toggle:checked ~ .ht-head-inner .ht-burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Overlays the page, does not push it down. In normal flow it grew
   the sticky header and shoved all the content below it. */
.ht-mnav{
  display:none;
  position:absolute;top:100%;left:0;right:0;
  border-top:1px solid #F0EBE3;border-top:1px solid var(--ht-line-soft,#F0EBE3);
  background:#FBFAF7;background:var(--ht-bg,#FBFAF7);
  box-shadow:var(--ht-sh2,0 14px 34px rgba(22,19,15,.09));
  max-height:calc(100svh - 84px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.ht-menu-toggle:checked ~ .ht-mnav{display:block}
@media(min-width:1000px){.ht-mnav{display:none!important}}
.ht-mnav ul{
  list-style:none;margin:0;
  padding:.5rem clamp(1.25rem,4.5vw,2.75rem) 1.5rem;
  max-width:1160px;max-width:var(--ht-max,1160px);
  margin-inline:auto;
}

/* :not(.ht-btn) matters. Without it this rule beat .ht-btn on
   specificity and stripped the CTA: text went dark on a dark pill,
   and padding-inline dropped to 0 so the label sat hard left. */
.ht-mnav a:not(.ht-btn){
  display:block;padding:.85rem 0;text-decoration:none;font-weight:500;
  color:#4E4740;color:var(--ht-body,#4E4740);
  border-bottom:1px solid #F0EBE3;border-bottom:1px solid var(--ht-line-soft,#F0EBE3);
}
.ht-mnav a[aria-current="page"]:not(.ht-btn){color:#C6673B;color:var(--ht-copper,#C6673B);font-weight:600}
.ht-mnav .ht-btn{
  margin-top:1.1rem;
  width:100%;
  color:#fff!important;
  text-decoration:none;
}

/* =========================================================
   6b. DIVI OVERRIDE LAYER
   Divi prints its Theme Options / Customizer CSS AFTER the
   child stylesheet. Both target plain h1..h6, so Divi wins on
   source order and headings inherit the old dark-design colour
   (#f4f5f7) and Divi's fixed header sizes.
   These rules are scoped to our own components only, so the
   !important is contained and will not fight page content.
   Also set Divi > Theme Options > General > Header Text Color
   to #16130F so this layer is a belt rather than the trousers.
   ========================================================= */
/* Scoped by WRAPPER, not by component.
   The previous version listed every component by name, which meant a
   new page brought a new gap: .ht-page-head h1 fell straight through
   and rendered near-white. Everything of ours sits inside .ht-wrap or
   .ht-foot, and `.ht-wrap h1` (0,1,1) beats Divi's bare `h1` (0,0,1),
   so this covers pages that do not exist yet. */
.ht-wrap h1,.ht-wrap h2,.ht-wrap h3,.ht-wrap h4,
.ht-foot h2,.ht-foot h3,.ht-foot h4{
  font-family:var(--ht-serif,Georgia,serif)!important;
  font-weight:500!important;
  letter-spacing:-.015em!important;
  color:#16130F!important;
  color:var(--ht-ink,#16130F)!important;
}

/* Sizes: Divi sets fixed px, we want the fluid scale back */
.ht-wrap h1{font-size:clamp(2.4rem,4.6vw,3.6rem)!important;line-height:1.06!important}
.ht-wrap h2{font-size:clamp(1.85rem,3.2vw,2.5rem)!important;line-height:1.14!important}
.ht-wrap h3{font-size:1.1875rem!important;line-height:1.3!important}
.ht-band h2{font-size:clamp(1.6rem,2.8vw,2.2rem)!important;line-height:1.16!important}
.ht-detail-row h3{font-size:1rem!important}

/* Dark grounds flip back to white */
.ht-ground-ink h1,.ht-ground-ink h2,
.ht-ground-ink h3,.ht-ground-ink h4,
.ht-band h2{color:#fff!important}

/* Mono label headings */
.ht-foot .ht-foot-h{
  font-family:var(--ht-mono,monospace)!important;
  letter-spacing:.12em!important;
  font-size:.6875rem!important;
  color:#fff!important;
}

/* Copper emphasis inside headings */
.ht-wrap h1 em,.ht-wrap h2 em,.ht-pv-h1 em{
  font-style:normal!important;
  color:#C6673B!important;
  color:var(--ht-copper,#C6673B)!important;
}

/* Body copy. No !important, so component rules and inline colours
   still win where they are more specific. */
.ht-wrap p,.ht-wrap li{color:#4E4740;color:var(--ht-body,#4E4740)}
.ht-wrap .ht-lab,
.ht-wrap .ht-legal-note,
.ht-wrap .ht-crumb{color:#8C837A;color:var(--ht-muted,#8C837A)}
.ht-ground-ink p,.ht-ground-ink li,.ht-band p{color:#B9B2A8}

/* Divi styles lists inside text and code modules with discs and a
   left indent. Ours are navigation, not prose. */
.ht-foot ul.ht-foot-list,
.ht-mnav ul{
  list-style:none!important;
  padding:0!important;
  margin-block:0!important;
}
.ht-foot ul.ht-foot-list li,
.ht-mnav ul li{
  list-style:none!important;
  margin:0!important;
  padding:0;
}
.ht-foot ul.ht-foot-list li::marker,
.ht-mnav ul li::marker{content:""}
.ht-mnav ul{padding:.5rem clamp(1.25rem,4.5vw,2.75rem) 1.25rem!important}

/* =========================================================
   7. HOME PAGE
   ========================================================= */

/* --- hero --- */
.ht-hero{padding-block:clamp(2.5rem,5.5vw,4rem) clamp(2rem,4vw,3rem)}
.ht-hero-grid{display:grid;gap:2.75rem;align-items:center}
@media(min-width:1020px){
  .ht-hero-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:3.5rem}
}
.ht-hero h1{
  font-size:clamp(2.4rem,4.6vw,3.6rem);line-height:1.06;
  margin:1.25rem 0 0;max-width:15ch;
}
.ht-hero h1 em{font-style:normal;color:#C6673B;color:var(--ht-copper,#C6673B)}
.ht-hero-sub{
  margin-top:1.25rem;font-size:1.0625rem;max-width:42ch;
  color:#4E4740;color:var(--ht-body,#4E4740);
}
.ht-row{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.9rem}

/* --- hero mockup stage --- */
.ht-stage{position:relative;padding:1rem 0 2.5rem}
.ht-win{
  background:#FFF;background:var(--ht-surface,#FFF);
  border:1px solid #E7E1D7;border:1px solid var(--ht-line,#E7E1D7);
  border-radius:var(--ht-r-lg,18px);
  box-shadow:var(--ht-sh3,0 30px 70px rgba(22,19,15,.15));
  overflow:hidden;
}
.ht-win-bar{
  display:flex;align-items:center;gap:.45rem;padding:.7rem .9rem;
  border-bottom:1px solid #F0EBE3;border-bottom:1px solid var(--ht-line-soft,#F0EBE3);
  background:#FDFCFA;
}
.ht-win-bar i{width:9px;height:9px;border-radius:50%;background:#E3DCD1;flex:none}
.ht-win-url{
  margin-left:.5rem;flex:1;height:22px;border-radius:999px;
  background:#F2EFE9;background:var(--ht-tint,#F2EFE9);
  display:flex;align-items:center;padding:0 .7rem;
  font-family:var(--ht-mono,monospace);font-size:.625rem;
  color:#8C837A;color:var(--ht-muted,#8C837A);
}
.ht-win-body{padding:1.2rem 1.3rem 1.5rem;min-height:230px;position:relative}
.ht-sk{background:#F2EFE9;background:var(--ht-tint,#F2EFE9);border-radius:5px}
.ht-sk-h{height:15px;width:62%;background:#16130F;opacity:.88;border-radius:4px}
.ht-sk-l{height:8px;margin-top:.55rem}
.ht-sk-btn{height:26px;width:104px;border-radius:999px;background:#C6673B;background:var(--ht-copper,#C6673B);margin-top:1rem}
.ht-sk-img{
  position:absolute;right:1.3rem;top:1.2rem;width:38%;height:120px;
  border-radius:var(--ht-r-md,12px);
  background:linear-gradient(140deg,#F2E2D8,#F2EFE9);
}
.ht-sk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;margin-top:1.5rem}
.ht-sk-card{
  height:50px;border-radius:var(--ht-r-sm,8px);background:#FDFCFA;
  border:1px solid #F0EBE3;border:1px solid var(--ht-line-soft,#F0EBE3);
}
.ht-phone{
  position:absolute;left:-8px;bottom:0;width:148px;
  background:#FFF;background:var(--ht-surface,#FFF);
  border:1px solid #E7E1D7;border:1px solid var(--ht-line,#E7E1D7);
  border-radius:20px;box-shadow:var(--ht-sh3,0 30px 70px rgba(22,19,15,.15));
  padding:.55rem;transform:rotate(-4deg);
}
@media(max-width:600px){.ht-phone{width:120px;left:-4px}}
.ht-phone-scr{background:#F2EFE9;background:var(--ht-tint,#F2EFE9);border-radius:14px;padding:.6rem;min-height:146px}
.ht-notif{
  background:#FFF;background:var(--ht-surface,#FFF);
  border:1px solid #E7E1D7;border:1px solid var(--ht-line,#E7E1D7);
  border-radius:10px;padding:.5rem .55rem;
  box-shadow:var(--ht-sh1,0 1px 2px rgba(22,19,15,.04));
  display:flex;gap:.45rem;align-items:flex-start;
}
.ht-notif + .ht-notif{margin-top:.4rem}
.ht-notif .ic{width:20px;height:20px;border-radius:6px;background:#C6673B;background:var(--ht-copper,#C6673B);flex:none;display:grid;place-items:center}
.ht-notif b{display:block;font-size:.625rem;color:#16130F;color:var(--ht-ink,#16130F);font-weight:600;line-height:1.3}
.ht-notif span span{display:block;font-size:.5625rem;color:#8C837A;color:var(--ht-muted,#8C837A);line-height:1.35}

/* --- proof strip --- */
.ht-proof{display:grid;gap:1.5rem}
@media(min-width:760px){.ht-proof{grid-template-columns:repeat(3,1fr);gap:2.5rem}}
.ht-proof-item{display:flex;gap:.8rem;align-items:flex-start}
.ht-proof-item svg{flex:none;margin-top:3px;color:#C6673B;color:var(--ht-copper,#C6673B)}
.ht-proof-item p{font-size:.9375rem;line-height:1.6;margin:0}
.ht-proof-item strong{display:block;color:#16130F;color:var(--ht-ink,#16130F);font-weight:600}

/* --- stats --- */
.ht-stats{display:grid;gap:1.5rem}
@media(min-width:720px){.ht-stats{grid-template-columns:repeat(4,1fr);gap:1rem}}
.ht-stat b{
  display:block;font-family:var(--ht-serif,Georgia,serif);
  font-size:2rem;font-weight:600;line-height:1;
  color:#16130F;color:var(--ht-ink,#16130F);
  font-variant-numeric:tabular-nums;
}
/* MUST be a direct child selector. `.ht-stat span` also matched the
   counter span inside <b>, which made the number small, muted and
   display:block, pushing the "+" onto its own line. */
.ht-stat > span{display:block;font-size:.875rem;margin-top:.4rem;color:#8C837A;color:var(--ht-muted,#8C837A);max-width:22ch;line-height:1.45}
.ht-stat b span{font:inherit;color:inherit;display:inline;margin:0}

/* --- pinned build sequence --- */
/* Natural height by default. The full viewport height is only needed
   once ScrollTrigger actually pins, and ht-motion.js adds .is-pinning
   at that point. Without this, a blocked or disabled GSAP leaves a
   screen-height block of dead space. */
.ht-build-pin{display:flex;align-items:center;padding-block:clamp(1.5rem,3vw,2.25rem)}

/* While pinned, the whole thing must fit one screen: both panels fully
   visible, vertically centred, nothing running off the bottom. Fixed
   height rather than min-height, and the inner column centres within it. */
[data-ht-build].is-pinning .ht-build-pin{height:100svh;min-height:0;overflow:hidden}
[data-ht-build].is-pinning .ht-build-pin > .ht-wrap{
  display:flex;flex-direction:column;justify-content:center;
  max-height:100%;
}
[data-ht-build].is-pinning .ht-build-grid{min-height:0}
[data-ht-build].is-pinning .ht-editor,
[data-ht-build].is-pinning .ht-preview{min-height:0}

/* Short viewports: the editor is 18 lines, and on a laptop the content
   can exceed the viewport, which breaks the pin. Tighten rather than
   let it overflow. */
@media (max-height:820px){
  [data-ht-build].is-pinning .ht-ed-body{font-size:.6875rem;line-height:1.65}
  [data-ht-build].is-pinning .ht-pv-body{min-height:200px}
  [data-ht-build].is-pinning .ht-build-head{margin-bottom:1.1rem}
  [data-ht-build].is-pinning .ht-build-head p{display:none}
  [data-ht-build].is-pinning .ht-build-pin{padding-block:1.5rem}
}
.ht-build-head{text-align:center;margin-bottom:1.4rem}
.ht-build-head h2{margin-top:.4rem}
.ht-build-head p{margin-top:.45rem;font-size:.9375rem;color:#8C837A;color:var(--ht-muted,#8C837A);max-width:56ch;margin-inline:auto}
.ht-build-grid{display:grid;gap:1.25rem;align-items:stretch}
@media(min-width:900px){.ht-build-grid{grid-template-columns:1fr 1fr;gap:1.5rem}}
.ht-editor{
  background:#18150F;background:var(--ht-code-bg,#18150F);
  border:1px solid #2E2820;border-radius:var(--ht-r-lg,18px);
  box-shadow:var(--ht-sh3,0 30px 70px rgba(22,19,15,.15));overflow:hidden;
}
.ht-ed-bar{display:flex;align-items:center;gap:.45rem;padding:.65rem .85rem;border-bottom:1px solid #2A251D}
.ht-ed-bar i{width:9px;height:9px;border-radius:50%;background:#3A332A}
.ht-ed-bar span{margin-left:.5rem;font-family:var(--ht-mono,monospace);font-size:.625rem;color:#8A8073;letter-spacing:.05em}
.ht-ed-body{padding:.75rem 0;font-family:var(--ht-mono,monospace);font-size:.75rem;line-height:1;overflow:hidden}
@media(max-width:480px){.ht-ed-body{font-size:.6875rem}}
/* line-height 1 leaves no room between rows, so the breathing space
   comes from padding instead. Keeps descenders clear of the caret. */
.ht-ed-body .ln{padding-block:.28em}
.ht-ed-body .ln{
  display:flex;gap:.9rem;padding:0 1rem 0 .75rem;
  border-left:2px solid transparent;color:#6F6659;white-space:pre;
  transition:background .3s ease,border-color .3s ease,color .3s ease;
}
.ht-ed-body .ln .no{color:#4A4238;user-select:none;min-width:1.2rem;text-align:right;font-size:.6875rem}

/* Typewriter reveal.
   .tp is the typed portion of a line. JS sets max-width in `ch` units,
   which is exact because the face is monospace. Default is `none`, so
   with JavaScript off the code is fully visible rather than blank. */
.ht-ed-body .ln .tp{
  display:inline-block;
  max-width:none;
  overflow:hidden;
  white-space:pre;
  vertical-align:bottom;
}
.ht-ed-body .ln.is-typing{color:#CFC7BA;color:var(--ht-code-txt,#CFC7BA)}
.ht-ed-body .ln.is-typing::after{
  content:"";
  display:inline-block;
  width:.55em;height:.95em;
  margin-left:1px;
  vertical-align:-.12em;
  background:#C6673B;background:var(--ht-copper,#C6673B);
  animation:ht-caret 1.05s steps(1,end) infinite;
}
@keyframes ht-caret{0%,50%{opacity:1}50.01%,100%{opacity:0}}
/* A caret is motion. Under reduced motion it holds steady instead. */
@media(prefers-reduced-motion:reduce){
  .ht-ed-body .ln.is-typing::after{animation:none;opacity:.5}
}
/* Lines already typed read at full strength */
.ht-ed-body .ln.is-done{color:#CFC7BA;color:var(--ht-code-txt,#CFC7BA)}
.ht-preview{
  background:#FFF;background:var(--ht-surface,#FFF);
  border:1px solid #E7E1D7;border:1px solid var(--ht-line,#E7E1D7);
  border-radius:var(--ht-r-lg,18px);
  box-shadow:var(--ht-sh3,0 30px 70px rgba(22,19,15,.15));
  overflow:hidden;display:flex;flex-direction:column;
}
.ht-pv-body{padding:1.1rem 1.2rem 1.4rem;flex:1;display:flex;flex-direction:column;min-height:250px}
.ht-pv-nav{display:flex;align-items:center;gap:.6rem;padding-bottom:.8rem;border-bottom:1px solid #F0EBE3}
.ht-pv-nav img{height:17px;width:auto}
.ht-pv-nav .nl{margin-left:auto;display:flex;gap:.7rem;font-size:.625rem;color:#8C837A;font-weight:500}
.ht-pv-h1{
  font-family:var(--ht-serif,Georgia,serif);font-size:clamp(1.15rem,2.1vw,1.6rem);
  font-weight:500;color:#16130F;color:var(--ht-ink,#16130F);
  line-height:1.12;letter-spacing:-.015em;margin-top:1.1rem;
}
.ht-pv-h1 em{font-style:normal;color:#C6673B;color:var(--ht-copper,#C6673B)}
.ht-pv-p{font-size:.8125rem;margin-top:.6rem;max-width:32ch}
.ht-pv-btn{
  align-self:flex-start;margin-top:1rem;
  background:#16130F;background:var(--ht-ink,#16130F);
  color:#fff;border-radius:999px;padding:.5rem 1rem;font-size:.75rem;font-weight:600;
}
.ht-pv-stats{margin-top:auto;padding-top:1.1rem;border-top:1px solid #F0EBE3;display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.ht-pv-stats b{display:block;font-family:var(--ht-serif,Georgia,serif);font-size:1.05rem;font-weight:600;color:#16130F;line-height:1}
.ht-pv-stats span{display:block;font-size:.5938rem;color:#8C837A;margin-top:.2rem;line-height:1.3}
.ht-build-cap{
  margin-top:.9rem;text-align:center;
  font-family:var(--ht-mono,monospace);font-size:.6875rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:#8C837A;color:var(--ht-muted,#8C837A);min-height:1.2rem;
}

/* --- service cards --- */
.ht-cards.ht-cards-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:60rem;
  margin-inline:auto;
}
@media (max-width:640px){
  .ht-cards.ht-cards-2{grid-template-columns:1fr}
}
.ht-cards{display:grid;gap:1.1rem}
@media(min-width:840px){.ht-cards{grid-template-columns:repeat(3,1fr)}}
.ht-card-link{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.ht-fig{
  background:#18150F;background:var(--ht-code-bg,#18150F);
  border-bottom:1px solid #F0EBE3;height:176px;position:relative;overflow:hidden;padding:.9rem;
}
.ht-cfg{font-family:var(--ht-mono,monospace);font-size:.6563rem;line-height:1.9;color:#6F6659;white-space:pre;margin:0}
.ht-cfg b{font-weight:400;color:#D98A5E;color:var(--ht-code-tag,#D98A5E)}
.ht-cfg u{text-decoration:none;color:#A9B98F;color:var(--ht-code-val,#A9B98F)}
.ht-cfg .t{color:#CFC7BA;color:var(--ht-code-txt,#CFC7BA)}
.ht-out{
  position:absolute;left:.9rem;right:.9rem;bottom:.9rem;
  background:#FFF;background:var(--ht-surface,#FFF);
  border-radius:var(--ht-r-sm,8px);
  box-shadow:var(--ht-sh2,0 14px 34px rgba(22,19,15,.09));
  padding:.6rem .65rem;opacity:0;
}
.ht-out-row{display:flex;align-items:center;gap:.5rem}
.ht-out-row + .ht-out-row{margin-top:.4rem}
.ht-out .nm{font-family:var(--ht-mono,monospace);font-size:.625rem;color:#16130F}
.ht-out .sd{margin-left:auto;width:6px;height:6px;border-radius:50%;background:#DDD5C9}
.ht-bars{display:flex;align-items:flex-end;gap:2px;height:12px}
.ht-bars i{width:3px;background:#C6673B;background:var(--ht-copper,#C6673B);opacity:.2;border-radius:1px}
.ht-bars i:nth-child(1){height:4px}.ht-bars i:nth-child(2){height:7px}
.ht-bars i:nth-child(3){height:9px}.ht-bars i:nth-child(4){height:12px}
.ht-chip{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--ht-mono,monospace);font-size:.5938rem;letter-spacing:.06em;color:#16130F}
.ht-chip i{width:5px;height:5px;border-radius:50%;background:#3F8F5F;background:var(--ht-green,#3F8F5F)}
.ht-card-bd{padding:1.35rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.ht-card-bd p{font-size:.9375rem}
.ht-go{
  margin-top:auto;padding-top:1rem;font-size:.875rem;font-weight:600;
  color:#16130F;color:var(--ht-ink,#16130F);
  display:inline-flex;align-items:center;gap:.4rem;
}
.ht-go svg{transition:transform .18s var(--ht-ease,ease)}
.ht-card:hover .ht-go svg{transform:translateX(3px)}

/* --- ongoing tier --- */
.ht-ongoing{display:grid;gap:2rem}
@media(min-width:900px){.ht-ongoing{grid-template-columns:22rem minmax(0,1fr);gap:3.5rem;align-items:start}}
.ht-ongoing p{color:#B9B2A8}

/* --- steps --- */
.ht-steps{display:grid;gap:2rem;margin-top:2.5rem}
@media(min-width:820px){.ht-steps{grid-template-columns:repeat(3,1fr);gap:2.5rem}}
.ht-step{padding-top:1.5rem;border-top:1px solid #E7E1D7;border-top:1px solid var(--ht-line,#E7E1D7)}
.ht-step-n{
  display:block;font-family:var(--ht-mono,monospace);font-size:.6875rem;
  letter-spacing:.12em;color:#C6673B;color:var(--ht-copper,#C6673B);margin-bottom:.9rem;
}
.ht-step h3{margin-bottom:.5rem}
.ht-step p{font-size:.9375rem}

/* =========================================================
   7b. PAGE HEADER (inner pages)
   ========================================================= */
.ht-page-head{padding-block:clamp(2.5rem,5vw,3.75rem) clamp(1.5rem,3vw,2.25rem)}
.ht-page-head h1{max-width:18ch;margin-top:.75rem}
.ht-page-head .ht-lede{
  margin-top:1.1rem;font-size:1.0625rem;max-width:56ch;
  color:#4E4740;color:var(--ht-body,#4E4740);
}
.ht-crumb{
  font-family:var(--ht-mono,monospace);font-size:.6875rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:#8C837A;color:var(--ht-muted,#8C837A);
}
.ht-crumb a{color:#8C837A;color:var(--ht-muted,#8C837A);text-decoration:none}
.ht-crumb a:hover{color:#C6673B;color:var(--ht-copper,#C6673B)}

/* One line under the lede. Keeps the left column from running out of
   content halfway down the figure beside it. */
.ht-note{
  margin-top:1.4rem;padding-top:1.1rem;
  border-top:1px solid #E7E1D7;border-top:1px solid var(--ht-line,#E7E1D7);
  font-family:var(--ht-mono,monospace);font-size:.75rem;line-height:1.7;
  max-width:40ch;
  color:#8C837A;color:var(--ht-muted,#8C837A);
}

/* Page head, two columns.
   Was: narrow text top left, nothing on the right, then a full width
   figure underneath. Two awkward rhythms instead of one. The figure now
   sits beside the text and the void on the right goes away. */
.ht-head-split{display:grid;gap:2rem}
@media(min-width:1000px){
  .ht-head-split{
    grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
    gap:3rem;align-items:center;
  }
}
/* In a column the heading no longer needs the 18ch clamp that stops it
   running the full page width. */
.ht-head-split h1{max-width:none}
.ht-head-split .ht-lede{max-width:46ch}

/* =========================================================
   7bb. SHARED CONTENT BLOCKS
   Used by What we do and every service page after it.
   ========================================================= */
.ht-split{display:grid;gap:2rem}
@media(min-width:900px){
  .ht-split{grid-template-columns:22rem minmax(0,1fr);gap:3.5rem;align-items:start}
  /* The left column is a label and maybe a short heading, so it ran out
     of content a third of the way down and left a large void beside the
     prose. Sticky holds it in view instead, which reads as deliberate.
     align-items:start above is what makes sticky work here.
     104px = 84px sticky header + a little air. */
  .ht-split > :first-child{position:sticky;top:104px}
}

.ht-ticks{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.9rem}
.ht-ticks li{
  display:flex;gap:.75rem;align-items:flex-start;
  font-size:1rem;line-height:1.6;margin:0;
}
.ht-ticks li > svg{flex:none;margin-top:5px;color:#C6673B;color:var(--ht-copper,#C6673B)}
.ht-ticks strong{
  color:#16130F;color:var(--ht-ink,#16130F);
  font-weight:600;
}
.ht-ground-ink .ht-ticks strong{color:#fff}
/* The "what we don't do" variant. Muted marks, not copper ticks. */
.ht-ticks-no li > svg{color:#8C837A;color:var(--ht-muted,#8C837A)}

.ht-prose > * + *{margin-top:1.3rem}
.ht-prose p{font-size:1rem;line-height:1.7}

/* Service page figure. Same animation contract as the cards, just larger.
   Sits in the right column of .ht-head-split.

   Two differences from the card version, both because of the size.
   1. The output panel is in flow rather than absolutely positioned. At
      card size it overlays two lines of config and reads as a result
      landing on top. At this size it sat squarely over the last three
      lines and just looked like a mistake.
   2. The config text is lighter. See .ht-fig-wide .ht-cfg below. */
.ht-fig-wide{
  height:auto;min-height:19rem;
  border:0;border-radius:var(--ht-r-lg,18px);
  padding:1.6rem;
  box-shadow:var(--ht-sh2,0 14px 34px rgba(22,19,15,.09));
  display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem;
}
/* Lighter than the card default. The card fades its config to 35% once
   the output lands, which reads fine on 176px of panel and reads as
   broken on 300px. ht-motion.js rests this one at 62% instead, and the
   base colour comes up to match. */
.ht-fig-wide .ht-cfg{
  font-size:.8125rem;line-height:2.1;
  color:#9A9084;color:var(--ht-code-dim,#9A9084);
}
.ht-fig-wide .ht-cfg .cmt{color:#7A7164;color:var(--ht-code-cmt-lg,#7A7164)}
.ht-fig-wide .ht-out{
  position:static;align-self:flex-end;
  width:min(17rem,100%);
}
@media(max-width:620px){
  .ht-fig-wide{min-height:0;padding:1.25rem;gap:1.25rem}
  .ht-fig-wide .ht-cfg{font-size:.75rem;line-height:2}
  .ht-fig-wide .ht-out{width:100%}
}

/* =========================================================
   7c. CONTACT
   ========================================================= */
.ht-contact{display:grid;gap:2rem}
@media(min-width:900px){
  .ht-contact{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3rem;align-items:start}
}
.ht-panel{
  background:#FFF;background:var(--ht-surface,#FFF);
  border:1px solid #E7E1D7;border:1px solid var(--ht-line,#E7E1D7);
  border-radius:var(--ht-r-lg,18px);
  box-shadow:var(--ht-sh1,0 1px 2px rgba(22,19,15,.04));
  padding:clamp(1.5rem,4vw,2.25rem);
}
/* Where the GoHighLevel embed goes. Styled so an empty slot is
   obviously unfinished rather than looking like a broken page. */
/* Tall enough that the form is fully visible even if form_embed.js
   never runs. A little whitespace beats an iframe with its own
   scrollbar. The script shrinks it to the real height when it loads. */
.ht-form-slot{min-height:44rem}
.ht-form-slot iframe{width:100%;border:0;display:block;min-height:44rem}
.ht-form-slot:empty::before{
  content:"GoHighLevel form embed goes here";
  display:grid;place-items:center;min-height:44rem;
  border:1px dashed #E7E1D7;border-radius:var(--ht-r-md,12px);
  font-family:var(--ht-mono,monospace);font-size:.75rem;letter-spacing:.08em;
  color:#8C837A;color:var(--ht-muted,#8C837A);
}

.ht-detail{display:grid;gap:1.6rem;align-content:start}
.ht-detail-row{display:flex;gap:.85rem;align-items:flex-start}
.ht-detail-row > svg{flex:none;margin-top:3px;color:#C6673B;color:var(--ht-copper,#C6673B)}
.ht-detail-row h3{font-size:1rem;margin-bottom:.15rem}
.ht-detail-row p{font-size:.9375rem;line-height:1.6}
.ht-detail-row a{color:#C6673B;color:var(--ht-copper,#C6673B);text-decoration:none}
.ht-detail-row a:hover{text-decoration:underline}

.ht-callout{
  border-left:3px solid #C6673B;border-left:3px solid var(--ht-copper,#C6673B);
  background:#F2EFE9;background:var(--ht-tint,#F2EFE9);
  border-radius:0 var(--ht-r-md,12px) var(--ht-r-md,12px) 0;
  padding:1.1rem 1.25rem;
}
.ht-callout p{font-size:.9375rem;line-height:1.6;margin:0}
.ht-callout strong{color:#16130F;color:var(--ht-ink,#16130F)}

.ht-legal-note{
  font-size:.8125rem;line-height:1.6;
  color:#8C837A;color:var(--ht-muted,#8C837A);
  margin-top:1.25rem;
}

/* Jump-link contents list. Sits in the sticky left column of a
   .ht-split, so a long notice has somewhere to go and the column is
   not 300px of nothing. */
.ht-toc{
  display:grid;gap:.5rem;margin-top:1.25rem;
  padding-left:1rem;
  border-left:1px solid #E7E1D7;border-left:1px solid var(--ht-line,#E7E1D7);
}
.ht-toc a{
  display:block;font-size:.875rem;line-height:1.45;
  color:#8C837A;color:var(--ht-muted,#8C837A);
  text-decoration:none;
  transition:color .16s var(--ht-ease,ease);
}
.ht-toc a:hover{color:#C6673B;color:var(--ht-copper,#C6673B)}
/* 84px sticky header plus air, so an anchor target is not hidden under it. */
.ht-legal h2[id]{scroll-margin-top:104px}

/* =========================================================
   7bg. CAPABILITY STATEMENT
   Written to be scanned by someone checking a supplier against a
   requirement, not read. Dense, flat, no prose to wade through.
   ========================================================= */

/* Supplier reference data. Key on the left, value on the right. */
.ht-spec{
  margin-top:1.5rem;
  border-top:1px solid #E7E1D7;border-top:1px solid var(--ht-line,#E7E1D7);
}
.ht-spec-row{
  display:grid;gap:.3rem;padding:.9rem 0;
  border-bottom:1px solid #F0EBE3;border-bottom:1px solid var(--ht-line-soft,#F0EBE3);
}
@media(min-width:640px){
  .ht-spec-row{
    grid-template-columns:13rem minmax(0,1fr);
    gap:1.5rem;align-items:baseline;
  }
}
.ht-spec-k{
  font-family:var(--ht-mono,monospace);font-size:.6875rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:#8C837A;color:var(--ht-muted,#8C837A);
  margin:0;
}
.ht-spec-v{
  font-size:.9375rem;line-height:1.6;margin:0;
  color:#3A352D;color:var(--ht-body,#4E4740);
}
.ht-spec-v a{color:#C6673B;color:var(--ht-copper,#C6673B);text-decoration:none}
.ht-spec-v a:hover{text-decoration:underline}
/* Anything a buyer might copy into a form reads as data, not prose. */
.ht-spec-v .num{font-family:var(--ht-mono,monospace);font-size:.875rem}

/* Capability groups. Formal service terminology, each group pointing
   back at the plain English page that describes the same work. */
.ht-caps{display:grid;gap:2.5rem;margin-top:1.5rem}
@media(min-width:780px){
  .ht-caps{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.75rem 3rem}
}
.ht-caps-g h3{font-size:1.0625rem;margin:0 0 .25rem}
.ht-caps-g > ul{
  list-style:none!important;
  margin:.9rem 0 0;padding:0;
  display:grid;gap:.5rem;
}
.ht-caps-g > ul > li{
  margin:0;padding-left:1rem;position:relative;
  font-size:.9375rem;line-height:1.55;
  color:#4E4740;color:var(--ht-body,#4E4740);
}
.ht-caps-g > ul > li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:5px;height:1px;
  background:#C6673B;background:var(--ht-copper,#C6673B);
}
.ht-caps-ref{
  font-family:var(--ht-mono,monospace);font-size:.6875rem;
  letter-spacing:.06em;margin:0;
}
.ht-caps-ref a{color:#8C837A;color:var(--ht-muted,#8C837A);text-decoration:none}
.ht-caps-ref a:hover{color:#C6673B;color:var(--ht-copper,#C6673B)}

/* =========================================================
   7bf. CASE STUDIES
   Before, what we did, where it is now. Three parts, each with
   a mono label and a rule, so a case reads as a sequence rather
   than three paragraphs that happen to be next to each other.
   ========================================================= */
.ht-case{display:grid;gap:1.75rem}
.ht-case-part{
  padding-top:1.35rem;
  border-top:1px solid #E7E1D7;border-top:1px solid var(--ht-line,#E7E1D7);
}
.ht-case-part:first-child{padding-top:0;border-top:0}
.ht-case-h{
  font-family:var(--ht-mono,monospace);font-size:.6875rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:#C6673B;color:var(--ht-copper,#C6673B);
  margin-bottom:.65rem;
}
.ht-case-part p{font-size:1rem;line-height:1.7;margin:0}
.ht-case-part p + p{margin-top:.9rem}
/* On the tinted band the hairline needs to be a shade darker or it
   disappears into the background. */
.ht-ground-tint .ht-case-part{border-top-color:#E0D9CD}

/* Sector and scope, in the left column above the fold of each case. */
.ht-case-meta{
  list-style:none;margin:1.5rem 0 0;padding:0;
  display:grid;gap:.55rem;
}
.ht-case-meta li{
  display:flex;gap:.6rem;margin:0;
  font-family:var(--ht-mono,monospace);font-size:.75rem;line-height:1.5;
  color:#4E4740;color:var(--ht-body,#4E4740);
}
.ht-case-meta b{
  flex:none;width:4.5rem;font-weight:400;
  color:#8C837A;color:var(--ht-muted,#8C837A);
}

/* =========================================================
   7be. LONG FORM LEGAL
   Privacy notice and anything else that is mostly prose with
   headings. One measured column, not a split, because a legal
   document is read top to bottom rather than scanned.
   ========================================================= */
.ht-legal{max-width:64ch;font-size:1rem}
.ht-legal > * + *{margin-top:1.1rem}
.ht-legal h2{
  margin-top:2.75rem;margin-bottom:.9rem;
  font-size:1.3125rem;
}
.ht-legal h2:first-child{margin-top:0}
.ht-legal p{font-size:1rem;line-height:1.75}
/* Divi styles lists inside Code modules, including stripping the
   markers, so both the type and the indent are set explicitly. */
.ht-legal ul{
  list-style:disc!important;
  margin:1.1rem 0 0;padding-left:1.35rem;
}
.ht-legal li{
  font-size:1rem;line-height:1.75;margin:0 0 .45rem;
  color:#4E4740;color:var(--ht-body,#4E4740);
}
.ht-legal li::marker{color:#C6673B;color:var(--ht-copper,#C6673B)}
.ht-legal li strong{color:#16130F;color:var(--ht-ink,#16130F);font-weight:600}
.ht-legal a{
  color:#C6673B;color:var(--ht-copper,#C6673B);
  text-decoration:none;
  border-bottom:1px solid rgba(198,103,59,.35);
}
.ht-legal a:hover{border-bottom-color:#C6673B;border-bottom-color:var(--ht-copper,#C6673B)}
.ht-legal .ht-updated{
  font-family:var(--ht-mono,monospace);font-size:.75rem;
  letter-spacing:.06em;
  color:#8C837A;color:var(--ht-muted,#8C837A);
}

/* =========================================================
   7bd. LOGO MARQUEE
   Two rows of platform logos drifting in opposite directions.
   CSS only. Each row holds the same track twice: the animation
   moves one full track width plus one gap, so track two lands
   exactly where track one started and the loop is seamless.
   ========================================================= */
.ht-marquee{
  --ht-mq-gap:1rem;
  --ht-mq-speed:64s;
  width:100%;overflow:hidden;
  display:grid;gap:var(--ht-mq-gap);
  /* Fade both ends so logos enter and leave rather than
     being cut off against the edge of the screen. */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6rem,#000 calc(100% - 6rem),transparent);
          mask-image:linear-gradient(to right,transparent,#000 6rem,#000 calc(100% - 6rem),transparent);
}
.ht-mq-row{display:flex;gap:var(--ht-mq-gap);width:100%;overflow:hidden}
.ht-mq-track{
  display:flex;gap:var(--ht-mq-gap);flex:none;
  list-style:none;margin:0;padding:0;
  animation:ht-mq var(--ht-mq-speed) linear infinite;
  will-change:transform;
}
.ht-mq-rev .ht-mq-track{animation-direction:reverse}
@keyframes ht-mq{
  to{transform:translateX(calc(-100% - var(--ht-mq-gap)))}
}
/* Stop while someone is reading a particular logo. */
.ht-marquee:hover .ht-mq-track,
.ht-marquee:focus-within .ht-mq-track{animation-play-state:paused}

.ht-mq-item{
  flex:none;margin:0;
  display:grid;place-items:center;
  height:72px;min-width:9.5rem;padding:0 1.6rem;
  background:#FFF;background:var(--ht-surface,#FFF);
  border:1px solid #E7E1D7;border:1px solid var(--ht-line,#E7E1D7);
  border-radius:var(--ht-r-md,12px);
  box-shadow:var(--ht-sh1,0 1px 2px rgba(22,19,15,.04));
}
.ht-mq-item img{
  display:block;width:auto;height:auto;
  max-height:30px;max-width:9rem;
  object-fit:contain;
}
/* Before the real files are swapped in, the src is still REPLACE-…,
   which does not load, so the browser falls back to the alt text.
   Style that fallback so an unfinished row reads as a list of names
   waiting for artwork rather than a wall of broken images. */
.ht-mq-item img[src^="REPLACE-"]{
  font-family:var(--ht-mono,monospace);font-size:.75rem;letter-spacing:.02em;
  color:#8C837A;color:var(--ht-muted,#8C837A);
  text-align:center;
}
.ht-mq-item img[src=""],
.ht-mq-item img:not([src]){visibility:hidden}

@media(max-width:620px){
  .ht-marquee{--ht-mq-gap:.75rem}
  .ht-mq-item{height:60px;min-width:8rem;padding:0 1.1rem}
  .ht-mq-item img{max-height:24px;max-width:7rem}
}

/* No drift for anyone who has asked for less motion. The row becomes
   an ordinary horizontal scroller and the duplicate track goes, so a
   screen reader and a swipe both get one clean copy of the list. */
@media(prefers-reduced-motion:reduce){
  .ht-mq-track{animation:none}
  .ht-mq-track[aria-hidden="true"]{display:none}
  .ht-mq-row{overflow-x:auto;scrollbar-width:thin}
}

/* =========================================================
   7bc. FAQ ACCORDION
   Native <details>. No JavaScript, so it still works if the
   motion script is delayed or blocked by an optimiser, and
   the browser's own find-in-page opens closed answers.
   ========================================================= */
.ht-faq{
  margin-top:2.5rem;
  border-top:1px solid #E7E1D7;border-top:1px solid var(--ht-line,#E7E1D7);
}
.ht-faq details{
  border-bottom:1px solid #E7E1D7;border-bottom:1px solid var(--ht-line,#E7E1D7);
  margin:0;
}
.ht-faq summary{
  display:block;list-style:none;cursor:pointer;position:relative;
  padding:1.3rem 3rem 1.3rem 0;margin:0;
  font-family:var(--ht-serif,Georgia,serif);
  font-size:1.0625rem;font-weight:500;line-height:1.4;
  letter-spacing:-.01em;
  color:#16130F;color:var(--ht-ink,#16130F);
  transition:color .18s var(--ht-ease,ease);
}
.ht-faq summary::-webkit-details-marker{display:none}
.ht-faq summary:hover{color:#C6673B;color:var(--ht-copper,#C6673B)}
.ht-faq summary:focus-visible{
  outline:2px solid #C6673B;outline:2px solid var(--ht-copper,#C6673B);
  outline-offset:3px;
}
/* The plus. Two bars, one of which straightens out on open. */
.ht-faq summary::before,
.ht-faq summary::after{
  content:"";position:absolute;right:.55rem;top:50%;
  width:13px;height:1.5px;border-radius:1px;
  background:#C6673B;background:var(--ht-copper,#C6673B);
  transform:translateY(-50%);
  transition:transform .22s var(--ht-ease,ease);
}
.ht-faq summary::after{transform:translateY(-50%) rotate(90deg)}
.ht-faq details[open] summary::after{transform:translateY(-50%) rotate(0deg)}
.ht-faq-a{padding:0 3rem 1.6rem 0;max-width:62ch;font-size:.9688rem}
.ht-faq-a p{
  font-size:.9688rem;line-height:1.7;margin:0;
  color:#4E4740;color:var(--ht-body,#4E4740);
}
.ht-faq-a p + p{margin-top:.9rem}

/* --- CTA band --- */
.ht-band{
  background:#16130F;background:var(--ht-ink,#16130F);
  color:#B9B2A8;border-radius:var(--ht-r-lg,18px);
  padding:clamp(2rem,4vw,3rem);text-align:center;
  box-shadow:var(--ht-sh2,0 14px 34px rgba(22,19,15,.09));
}
.ht-band h2{color:#fff;max-width:22ch;margin-inline:auto}
.ht-band p{margin-top:.85rem;max-width:48ch;margin-inline:auto}
.ht-band .ht-row{justify-content:center}
.ht-band .ht-btn{background:#fff;color:#16130F;border-color:#fff}
.ht-band .ht-btn:hover{background:#EFEAE2;border-color:#EFEAE2;color:#16130F}
.ht-band .ht-btn-o{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.ht-band .ht-btn-o:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.5);color:#fff}

/* =========================================================
   8. GLOBAL FOOTER
   ========================================================= */
.ht-foot{
  background:#16130F;background:var(--ht-ink,#16130F);
  color:#B9B2A8;
  font-family:var(--ht-sans,Helvetica,Arial,sans-serif);
  font-size:.9375rem;line-height:1.7;
}
.ht-foot a{color:#B9B2A8;text-decoration:none;transition:color .18s var(--ht-ease,ease)}
.ht-foot a:hover{color:#C6673B;color:var(--ht-copper,#C6673B)}

.ht-foot-grid{
  max-width:1160px;max-width:var(--ht-max,1160px);
  margin:0 auto;padding:clamp(2.75rem,5vw,3.5rem) clamp(1.25rem,4.5vw,2.75rem);
  display:grid;gap:2.5rem;
}
@media(min-width:820px){
  .ht-foot-grid{grid-template-columns:1.7fr 1fr 1fr;gap:3rem}
}
.ht-foot-logo{height:30px;width:auto;margin-bottom:1.25rem}
.ht-foot-legal{
  font-size:.8125rem;line-height:1.75;
  color:#8C837A;color:var(--ht-muted,#8C837A);
  max-width:42ch;margin:0;
}
.ht-foot-legal strong{color:#B9B2A8;font-weight:600}
.ht-foot-h{
  font-family:var(--ht-mono,monospace);
  font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;margin:0 0 1rem;
}
.ht-foot-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.ht-foot-list li{margin:0}

.ht-foot-bar{border-top:1px solid rgba(184,178,166,.16)}
.ht-foot-bar > div{
  max-width:1160px;max-width:var(--ht-max,1160px);
  margin:0 auto;padding:1.15rem clamp(1.25rem,4.5vw,2.75rem);
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;
  font-size:.8125rem;color:#8C837A;color:var(--ht-muted,#8C837A);
}
.ht-foot-bar .ht-foot-cred{margin-left:auto}

/* =========================================================
   7. REDUCED MOTION
   Non-negotiable. Forces every animated element visible.
   ========================================================= */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .ht-sd,[data-ht-reveal],[data-ht-step],[data-ht-out]{
    opacity:1!important;transform:none!important;
  }
  .ht-progress{display:none}
}