/* ==========================================================================
   RISE & ROOT v5 — tokens, layout (from v4) + motion system
   ========================================================================== */
:root{
  --cream:        #FFFBF6;
  --cream-dim:     #F5EBDC;
  --rust:          #D43605;
  --rust-dark:     #A32903;
  --rust-tint:     rgba(212,54,5,0.08);
  --charcoal:      #2C2C2C;
  --charcoal-soft: #46433F;
  --line:          rgba(44,44,44,0.14);
  /* --rust is itself a red-orange, so an error needs a distinctly darker,
     cooler red to read as "something is wrong" rather than "brand accent". */
  --danger:        #B3261E;
  --danger-tint:   rgba(179,38,30,0.10);
  --line-on-dark:  rgba(255,251,246,0.18);
  --line-on-rust:  rgba(255,251,246,0.3);

  --font: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1180px;
  --pad: clamp(24px, 5vw, 64px);
  --radius: 6px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  /* The header is sticky, so anchor jumps must stop short of it or the top of
     each section lands underneath the bar. Matching the bar height exactly
     lands each section flush under it — any extra would reveal a sliver of
     the previous section above the heading. */
  scroll-padding-top:71px;
}
@media (max-width:768px){ html{ scroll-padding-top:61px; } }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  font-family:var(--font);
  background:var(--cream);
  color:var(--charcoal);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
input,select,textarea{ font-family:inherit; }

.wrap{ max-width:var(--container); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

h1,h2,h3{ font-family:var(--font); font-weight:700; line-height:1.1; letter-spacing:-0.01em; margin:0; }
h2{ font-size:clamp(2rem, 3.6vw, 3.1rem); }
h3{ font-size:1.15rem; font-weight:600; }
p{ margin:0; }
.hl{ color:var(--rust); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rust); margin-bottom:1rem;
}
.eyebrow::before{ content:""; width:22px; height:1.5px; background:var(--rust); display:inline-block; }
.eyebrow-light{ color:var(--rust); }

.section-head{ max-width:640px; margin-bottom:clamp(2.5rem,5vw,3.5rem); }
.section-sub{ color:var(--charcoal-soft); font-size:1.02rem; margin-top:1rem; }
.section-sub-light{ color:rgba(255,251,246,.68); }

/* Visually hidden but available to screen readers and search engines.
   Not display:none — that would remove it from the accessibility tree too. */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:999;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.9rem 1.7rem; border-radius:10px;
  font-weight:600; font-size:.95rem;
  transition:transform .35s var(--ease), background .3s, color .3s, border-color .3s;
  white-space:nowrap;
}
.btn-primary{ background:var(--rust); color:var(--cream); }
.btn-primary:hover{ background:var(--rust-dark); transform:translateY(-2px); }
.btn-light{ background:var(--cream); color:var(--rust); }
.btn-light:hover{ background:var(--charcoal); color:var(--cream); transform:translateY(-2px); }
.btn-outline-light{ border:1.5px solid rgba(255,251,246,.7); color:var(--cream); }
.btn-outline-light:hover{ background:var(--cream); color:var(--rust); transform:translateY(-2px); }

/* ==========================================================================
   HEADER — exact v3
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:200;
  background:var(--rust);
  border-bottom:1px solid var(--line-on-rust);
}
.header-inner{ display:flex; align-items:center; gap:2.4rem; padding-top:.8rem; padding-bottom:.8rem; }
.logo{ display:flex; align-items:center; gap:.65rem; font-weight:700; font-size:1.15rem; color:var(--cream); margin-right:auto; }
.logo-badge{ height:44px; width:auto; border-radius:0; }
.logo-amp{ font-style:italic; }

.main-nav{ display:flex; gap:2.1rem; }
.main-nav a{ font-size:.92rem; font-weight:500; color:var(--cream); position:relative; padding:.2rem 0; }
.main-nav a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--cream); transition:width .3s var(--ease); }
.main-nav a:hover::after{ width:100%; }

.btn-nav{ padding:.7rem 1.4rem; font-size:.88rem; background:var(--cream); color:var(--rust); border-radius:10px; }
.btn-nav:hover{ background:var(--charcoal); color:var(--cream); transform:translateY(-2px); }

.header-right{ display:flex; align-items:center; gap:2px; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; padding:6px; }
.nav-toggle span{ width:22px; height:2px; background:var(--cream); border-radius:2px; }

/* ==========================================================================
   HERO — exact v3
   ========================================================================== */
.hero{ position:relative; height:calc(100vh - 76px); background:var(--rust); color:var(--cream); display:flex; flex-direction:column; justify-content:center; }
.hero-inner{
  position:relative; z-index:2;
  padding-top:60px;
  padding-bottom:80px;
  text-align:center;
  flex:1; display:flex; flex-direction:column; justify-content:center;
}
.hero-headline{
  position:relative;
  font-size:clamp(4rem, 14vw, 12rem);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:.95;
}
.hero-headline .fill{ color:var(--cream); white-space:nowrap; }
.m-letter{ display:inline-block; will-change:transform,opacity; }
.hero-headline .outline{
  position:absolute; inset:0; left:0; right:0;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,251,246,.35);
  transform:translate(10px, 14px);
  z-index:-1;
}
/* The ghost word is injected here, not in the markup, so it stays out of the
   H1's text content for search engines. */
.hero-headline .outline::before{ content:"MARKETING"; }
.hero-sub{
  font-size:clamp(1.1rem,2.4vw,1.6rem);
  font-weight:400;
  margin-top:.6rem;
  color:rgba(255,251,246,.92);
}
.hero-cta{ display:flex; gap:1rem; justify-content:center; margin-top:2.4rem; flex-wrap:wrap; }

.hero-root{
  position:absolute; left:0; right:0; bottom:-10px; width:100%; height:180px;
  color:rgba(255,251,246,.22);
  z-index:1;
}
.hero-root path{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

.hero-strip{ position:absolute; left:0; right:0; bottom:0; z-index:3; background:#ffffff; border-top:1px solid rgba(44,44,44,.12); border-bottom:1px solid rgba(44,44,44,.12); overflow:hidden; }
.marquee{ overflow:hidden; }
.marquee-row{ display:flex; gap:40px; align-items:center; white-space:nowrap; font-family:var(--font); font-weight:500; font-size:15px; color:var(--charcoal); padding:18px 0; animation:marquee 42s linear infinite; }
.marquee-row em{ color:var(--rust); font-style:normal; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee-row{ animation:none; } }
/* The strip is a fixed pixel width, so a fixed duration crosses a narrow
   screen far more slowly in relative terms. Shorten the cycle as the
   viewport narrows to keep the perceived travel speed consistent. */
@media (max-width:900px){ .marquee-row{ animation-duration:26s; } }
@media (max-width:600px){ .marquee-row{ animation-duration:18s; } }
@media (max-width:420px){ .marquee-row{ animation-duration:14s; } }

/* ==========================================================================
   TAGLINE BAND
   ========================================================================== */
.tagline-band{ height:450px; background:#ffffff; display:flex; align-items:center; justify-content:center; }
.tagline-text{
  font-family:var(--font);
  font-size:clamp(1.6rem,3.2vw,2.8rem);
  font-weight:400;
  color:#2C2C2C;
  text-align:center;
  line-height:1.35;
  letter-spacing:.01em;
  margin:0;
}
.tagline-text strong{ font-weight:700; }

/* ==========================================================================
   FOCUS
   ========================================================================== */
.focus{
  display:flex;
  align-items:center;
  padding-left:75px;
  position:relative;
  overflow:visible;
  min-height:480px;
  background:#ffffff;
}
.focus-mockup{
  flex:0 0 560px;
  width:560px;
  height:560px;
  position:relative;
  z-index:2;
  flex-shrink:0;
}
.focus-mockup img{ width:100%; height:100%; object-fit:cover; display:block; }
.focus-content{
  flex:1;
  background:#FFFBF6;
  height:480px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-left:66px;
  padding-right:clamp(2rem,5vw,5rem);
  position:relative;
  z-index:1;
}
.focus-headline{
  font-size:clamp(1.3rem,2.2vw,1.9rem);
  font-weight:400;
  color:#2C2C2C;
  line-height:1.3;
  margin:0 0 2rem;
  letter-spacing:.01em;
}
.focus-headline strong{ font-weight:700; }
.focus-p1{ font-size:1rem; color:var(--charcoal-soft); line-height:1.75; margin:0 0 1.2rem; }
.focus-p2{ font-size:1rem; color:var(--charcoal-soft); line-height:1.75; margin:0; }

@media (max-width:1024px){
  .focus{ padding-left:40px; }
  .focus-mockup{ flex:0 0 420px; width:420px; height:420px; }
}
@media (max-width:768px){
  .tagline-band{ height:auto; padding:3rem var(--pad); }
  .focus{ flex-direction:column; padding-left:0; min-height:auto; }
  .focus-mockup{ flex:none; width:100%; height:320px; }
  .focus-content{ height:auto; padding:2.5rem var(--pad); }
}

/* ==========================================================================
   SERVICES HEADER
   ========================================================================== */
.services-header{
  background:#ffffff;
  padding:clamp(3rem,6vw,5rem) 0;
}
.services-header-inner{
  padding-left:75px;
  padding-right:clamp(2rem,5vw,5rem);
  max-width:860px;
}
.services-title{
  font-size:45px;
  font-weight:700;
  color:#2C2C2C;
  line-height:1.15;
  margin:0 0 1.4rem;
  letter-spacing:-0.01em;
}
.services-sub{
  font-size:16px;
  font-weight:400;
  color:#2C2C2C;
  line-height:1.7;
  margin:0;
}

@media (max-width:768px){
  .services-header-inner{ padding-left:var(--pad); }
  .services-title{ font-size:clamp(1.8rem,6vw,2.6rem); }
}

/* ==========================================================================
   SECTION-SOLUTION — schbang-style: full-height cols, mouse-track horizontal scroll
   ========================================================================== */
.section-solution{
  background:#ffffff;
  border-top:1px solid var(--line);
  overflow:hidden;
  width:100%;
  /* height set by JS to 100vh on desktop; auto on mobile */
}
.sol-strip{
  display:flex;
  flex-direction:row;
  /* width set by JS: 8 × col-width; each col = viewport/5 so strip = viewport × 1.6 */
  will-change:transform;
  transition:transform .05s linear;
  height:100%;
}
.sol-col{
  flex:0 0 auto;
  /* width set by JS */
  border-right:1px solid var(--line);
  position:relative;
  overflow:hidden;
  cursor:default;
  height:100%;
  display:flex;
  flex-direction:column;
  padding:40px 32px 48px;
  z-index:0;
}
.sol-col:last-child{ border-right:none; }
.sol-col:hover{ z-index:10; }

/* Number — top-left, always visible */
.sol-num{
  font-size:12px;
  font-weight:600;
  color:var(--rust);
  letter-spacing:.08em;
  line-height:1;
  display:block;
}

/* Large faded label — vertically centred, fades on hover */
.sol-label{
  font-size:clamp(1.6rem,3vw,3rem);
  font-weight:700;
  color:rgba(44,44,44,.1);
  line-height:1.15;
  margin-top:auto;
  margin-bottom:auto;
  transition:opacity .35s var(--ease);
  word-break:break-word;
  hyphens:auto;
}
.sol-col:hover .sol-label{ opacity:0; }

/* Desc block — hidden off-left, slides in on hover with rust bg */
/* The rust panel appears on hover rather than sliding across — a short fade
   so the colour just "arrives". The content inside still slides up, which is
   where the motion should read. */
.sol-desc{
  position:absolute;
  inset:0;
  padding:40px 32px 48px;
  display:flex;
  flex-direction:column;
  justify-content:center;   /* vertically centred */
  align-items:flex-start;   /* but still left aligned */
  text-align:left;
  background:var(--rust);
  opacity:0;
  visibility:hidden;
  transition:opacity .14s linear, visibility .14s linear;
}
.sol-col:hover .sol-desc{
  opacity:1;
  visibility:visible;
}
/* Inner content keeps a sliding entrance. */
.sol-desc .sol-icon,
.sol-desc .sol-name,
.sol-desc .sol-text{
  transform:translateX(-24px);
  opacity:0;
  transition:transform .45s var(--ease), opacity .45s var(--ease);
}
.sol-col:hover .sol-desc .sol-icon{ transform:translateX(0); opacity:1; transition-delay:.05s; }
.sol-col:hover .sol-desc .sol-name{ transform:translateX(0); opacity:1; transition-delay:.11s; }
.sol-col:hover .sol-desc .sol-text{ transform:translateX(0); opacity:1; transition-delay:.17s; }

.sol-icon{
  width:28px;
  height:28px;
  color:#ffffff;
  margin-bottom:1.6rem;
  flex-shrink:0;
}
.sol-name{
  font-size:16px;
  font-weight:700;
  color:#ffffff;
  line-height:1.3;
  margin:0 0 .7rem;
}
.sol-text{
  font-size:13.5px;
  font-weight:400;
  color:rgba(255,255,255,.82);
  line-height:1.7;
  margin:0;
}

/* Mobile fallback — simple wrap grid, no mouse scroll */
@media (max-width:900px){
  .section-solution{ height:auto !important; }
  .sol-strip{ flex-wrap:wrap; width:100% !important; transform:none !important; transition:none; }
  .sol-col{ flex:0 0 50%; height:auto !important; min-height:200px; border-bottom:1px solid var(--line); padding:28px 24px 32px; }
  .sol-col:nth-child(2n){ border-right:none; }
  .sol-col:nth-last-child(-n+2):not(:nth-child(2n+1) ~ *){ border-bottom:none; }
  .sol-col:last-child{ border-bottom:none; }
  /* On mobile show desc immediately (no hover). The desc block is designed
     for a rust panel (white text); once it sits inline on the white section
     the copy must switch to the dark-on-light palette or it is invisible. */
  .sol-label{ display:none; }
  .sol-desc{
    position:static; transform:none !important; transition:none;
    background:transparent; padding:0; margin-top:1rem;
    opacity:1; visibility:visible;      /* no hover on touch — always shown */
  }
  /* Cancel the desktop slide-in so the copy is not stranded at opacity 0. */
  .sol-desc .sol-icon,
  .sol-desc .sol-name,
  .sol-desc .sol-text{ transform:none !important; opacity:1 !important; transition:none; }
  .sol-desc .sol-icon{ color:var(--rust); margin-bottom:1rem; }
  .sol-desc .sol-name{ color:var(--charcoal); }
  .sol-desc .sol-text{ color:var(--charcoal-soft); }
  .sol-col:hover .sol-num{ color:var(--rust); }
}
@media (max-width:480px){
  .sol-col{ flex:0 0 100%; border-right:none; }
}

/* ==========================================================================
   PROCESS
   ========================================================================== */
.process{
  background:#ffffff;
  padding:clamp(4rem,8vw,6rem) 0 clamp(4rem,8vw,6rem);
}
.process-header{
  padding:0 75px;
  max-width:600px;
  margin-bottom:clamp(3rem,6vw,5rem);
}
.process-title{
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  font-weight:800;
  color:var(--charcoal);
  line-height:1.15;
  letter-spacing:-0.01em;
  margin:0 0 1.2rem;
  white-space:nowrap;
}
.process-sub{
  font-size:15px;
  font-weight:400;
  color:var(--charcoal-soft);
  line-height:1.7;
  margin:0;
}

/* Steps container — two columns with centre line */
.process-steps{
  position:relative;
  display:flex;
  flex-direction:column;
}

/* The vertical centre line */
.process-line{
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:1px;
  background:var(--line);
  transform:translateX(-50%);
}
/* Rust fill that draws downward as you scroll the timeline. */
.process-line-fill{
  position:absolute;
  inset:0;
  background:var(--rust);
  transform-origin:top center;
  transform:scaleY(0);
  will-change:transform;
}
/* Node on the centre line for each step. */
.process-dot{
  position:absolute;
  /* Centre with margins, NOT translate(-50%,-50%): the reveal animation
     rewrites `transform`, which would drop the centring and shift the dot
     right by half its width. Margins are immune to that. */
  left:50%;
  top:50%;
  width:11px;
  height:11px;
  margin-left:-5.5px;
  margin-top:-5.5px;
  border-radius:50%;
  background:var(--rust);
  /* No white border: it would punch a gap in the timeline above and below
     each dot, making a perfectly centred node look offset from the line. */
  box-shadow:0 0 0 3px rgba(212,54,5,.15);
  transform:scale(0);
  z-index:2;
}
.process-step{ position:relative; }

/* Each step row takes full width, alternates content side */
.process-step{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:260px;
  padding:0;
}

/* RIGHT steps: content in right column */
.step-right .process-step-content{
  grid-column:2;
  padding:clamp(2.5rem,5vw,4rem) 75px clamp(2.5rem,5vw,4rem) clamp(3rem,5vw,5rem);
  text-align:left;
}

/* LEFT steps: content in left column */
.step-left .process-step-content{
  grid-column:1;
  padding:clamp(2.5rem,5vw,4rem) clamp(3rem,5vw,5rem) clamp(2.5rem,5vw,4rem) 75px;
  text-align:right;
}

.process-num{
  display:block;
  font-size:clamp(4rem,8vw,7rem);
  font-weight:300;
  color:var(--charcoal);
  line-height:1;
  margin-bottom:.3rem;
  letter-spacing:-0.03em;
}
.process-name{
  font-size:clamp(1.1rem,2vw,1.5rem);
  font-weight:400;
  color:var(--charcoal);
  margin:0 0 .8rem;
  letter-spacing:0;
}
.process-desc{
  font-size:14px;
  font-weight:400;
  color:var(--charcoal-soft);
  line-height:1.75;
  margin:0;
  max-width:340px;
}
.step-left .process-desc{
  margin-left:auto;
}

/* Responsive — stack to single column */
@media (max-width:768px){
  .process-header{ padding:0 var(--pad); }
  .process-line{ display:none; }
  /* The centre line is hidden on mobile, so the nodes have nothing to sit on —
     they would float in the middle of the copy. Hide them with the line. */
  .process-dot{ display:none; }
  .process-step{ grid-template-columns:1fr; min-height:auto; }
  .step-right .process-step-content,
  .step-left .process-step-content{
    grid-column:1;
    text-align:left;
    padding:2rem var(--pad);
  }
  .step-left .process-desc{ margin-left:0; }
  .process-step + .process-step{
    border-top:1px solid var(--line);
  }
  /* The big numerals carry a left side bearing at this size, so the glyph
     sits ~3px inside its box while the name/description start flush.
     Pull the number back so all three share one optical left edge. */
  .process-num{ margin-left:-0.055em; }
}

/* ==========================================================================
   INDUSTRIES
   ========================================================================== */
.industries{
  background:#2C2C2C;
  padding:clamp(4rem,8vw,6rem) 75px;
}
.industries-inner{ max-width:1180px; }
.industries-header{
  max-width:520px;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.industries-title{
  font-size:clamp(2rem,4vw,3rem);
  font-weight:800;
  color:#ffffff;
  letter-spacing:-0.01em;
  line-height:1.1;
  margin:0 0 1.2rem;
}
.industries-sub{
  font-size:15px;
  font-weight:400;
  color:rgba(255,255,255,.6);
  line-height:1.7;
  margin:0;
}

.industries-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.ind-card{
  background:#363636;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  padding:28px 24px;
  min-height:160px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  cursor:default;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.ind-card:hover{
  background:var(--rust);
  border-color:var(--rust);
  transform:translateY(-4px);
}
.ind-icon{
  width:32px;
  height:32px;
  color:rgba(255,255,255,.75);
  stroke-width:1.5;
  flex-shrink:0;
}
.ind-card:hover .ind-icon{ color:#ffffff; }
.ind-name{
  font-size:15px;
  font-weight:600;
  color:#ffffff;
  line-height:1.3;
  margin-top:auto;
  padding-top:1.2rem;
}

@media (max-width:900px){
  .industries{ padding:3rem var(--pad); }
  .industries-grid{ grid-template-columns:repeat(2,1fr); }
}
/* Stay at two columns all the way down — a single column makes the cards
   read as a long, sparse list. Tighten gap/padding instead. */
@media (max-width:480px){
  .industries-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .ind-card{ padding:20px 16px; min-height:132px; }
  .ind-icon{ width:26px; height:26px; }
  .ind-name{ font-size:13.5px; padding-top:.9rem; }
}

/* ==========================================================================
   BLOGS / READS
   ========================================================================== */
.blogs{
  background:var(--cream);
  padding:clamp(4rem,8vw,6rem) 75px;
}
.blogs-inner{ max-width:1180px; }
.blogs-header{
  max-width:560px;
  margin-bottom:clamp(3rem,6vw,5rem);
}
.blogs-title{
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  font-weight:800;
  color:var(--charcoal);
  line-height:1.15;
  letter-spacing:-0.01em;
  margin:0 0 1.2rem;
}
.blogs-sub{
  font-size:15px;
  font-weight:400;
  color:var(--charcoal-soft);
  line-height:1.7;
  margin:0;
}
.blogs-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);
}
.blog-card{
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  /* Card shell at every width so each post reads as its own object. */
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:1.75rem 1.5rem;
  box-shadow:0 2px 10px rgba(44,44,44,.05);
}
.blog-tag{
  display:inline-block;
  align-self:flex-start;
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--rust);
  border:1.5px solid var(--rust);
  border-radius:999px;
  padding:.3rem .85rem;
}
.blog-card-title{
  font-size:15px;
  font-weight:700;
  color:var(--charcoal);
  line-height:1.45;
  margin:0;
}
.blog-card-desc{
  font-size:14px;
  font-weight:400;
  color:var(--charcoal-soft);
  line-height:1.7;
  margin:0;
  flex:1;
}
.blog-read{
  font-size:14px;
  font-weight:500;
  color:var(--rust);
  text-decoration:none;
  align-self:flex-start;
  position:relative;
  padding-bottom:1px;
}
.blog-arrow{
  width:14px;
  height:14px;
  display:inline-block;
  vertical-align:middle;
  margin-left:4px;
  stroke-width:2;
  transition:transform .3s var(--ease);
}
.blog-read:hover .blog-arrow{ transform:translateX(4px); }

@media (max-width:900px){
  .blogs{ padding:3rem var(--pad); }
  .blogs-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  /* Stacked in one column, tighten the card padding and spacing. */
  .blogs-grid{ grid-template-columns:1fr; gap:1.25rem; }
  .blog-card{ padding:1.5rem 1.35rem; gap:.9rem; }
  .blog-card-title{ font-size:16px; }
}

/* ==========================================================================
   TESTIMONIAL BAND
   ========================================================================== */
.testi-band{
  background:var(--rust);
  display:flex;
  align-items:center;
  min-height:340px;
  padding:clamp(3.5rem,7vw,5.5rem) 75px;
  gap:clamp(2rem,6vw,6rem);
}
.testi-left{
  flex:0 0 42%;
  max-width:42%;
}
.testi-heading{
  font-size:clamp(1.6rem,3.2vw,2.6rem);
  font-weight:800;
  color:#ffffff;
  line-height:1.15;
  letter-spacing:-0.01em;
  margin:0;
}
.testi-right{
  flex:1;
  position:relative;
  padding:0 2rem;
}
.testi-quote{
  font-size:clamp(4rem,8vw,7rem);
  font-weight:700;
  color:rgba(255,255,255,.55);
  line-height:1;
  font-family:Georgia, serif;
  display:block;
}
/* Quotes sit tight against the body copy rather than floating away from it. */
.testi-quote-open{
  margin-bottom:-1.6rem;
}
.testi-quote-close{
  text-align:right;
  margin-top:-1.4rem;
}

/* ---- Slider ---- */
.testi-slides{
  position:relative;
  display:grid;                 /* all slides stack in one cell so the band
                                   keeps the height of the tallest quote and
                                   never jumps when switching */
}
/* Slides move horizontally: the outgoing quote leaves toward the side the
   new one arrives from, so switching reads as travel rather than a swap.
   `.is-prev` is set by JS to mark the direction of the last change. */
.testi-slide{
  grid-area:1 / 1;
  margin:0;
  opacity:0;
  visibility:hidden;
  transform:translateX(60px);
  transition:opacity .55s var(--ease), transform .55s var(--ease), visibility .55s;
  pointer-events:none;
}
.testi-slide.is-prev{ transform:translateX(-60px); }
.testi-slide.is-active{
  opacity:1;
  visibility:visible;
  transform:translateX(0);
  pointer-events:auto;
}
.testi-author{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  margin-top:1.1rem;
}
.testi-name{
  font-size:15px;
  font-weight:700;
  color:#ffffff;
}
.testi-role{
  font-size:13px;
  font-weight:400;
  color:rgba(255,255,255,.72);
}
.testi-dots{
  display:flex;
  gap:10px;
  margin-top:1.6rem;
}
.testi-dot{
  width:9px; height:9px; padding:0;
  border-radius:50%;
  background:rgba(255,255,255,.4);
  border:none;
  cursor:pointer;
  transition:background .3s var(--ease), width .3s var(--ease);
}
.testi-dot:hover{ background:rgba(255,255,255,.7); }
.testi-dot.is-active{
  width:26px;
  border-radius:999px;
  background:#ffffff;
}
.testi-body{
  font-size:clamp(.95rem,1.4vw,1.1rem);
  font-weight:400;
  color:rgba(255,255,255,.88);
  line-height:1.75;
  margin:0;
}

@media (max-width:768px){
  .testi-band{
    flex-direction:column;
    align-items:flex-start;
    padding:3rem var(--pad);
    gap:2rem;
  }
  .testi-left{ flex:none; max-width:100%; }
  .testi-right{ padding:0; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{
  background:#ffffff;
  padding:clamp(4rem,8vw,6rem) 75px;
}
.faq-inner{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:clamp(3rem,6vw,8rem);
  align-items:start;
  max-width:1180px;
}
.faq-left{ position:sticky; top:120px; }
.faq-title{
  font-size:clamp(1.8rem,3vw,2.6rem);
  font-weight:800;
  color:var(--charcoal);
  line-height:1.15;
  letter-spacing:-0.01em;
  margin:0 0 1.4rem;
}
.faq-sub{
  font-size:15px;
  font-weight:400;
  color:var(--charcoal-soft);
  line-height:1.7;
  margin:0;
}
.faq-list{
  list-style:none;
  margin:0; padding:0;
  border-top:1px solid var(--line);
}
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.4rem 0;
  font-size:15px;
  font-weight:700;
  color:var(--charcoal);
  text-align:left;
  background:none;
  border:none;
  cursor:pointer;
  font-family:var(--font);
  line-height:1.4;
}
.faq-ico{
  width:18px;
  height:18px;
  flex-shrink:0;
  color:var(--charcoal);
  stroke-width:2;
  transition:transform .3s var(--ease);
}
.faq-item.open .faq-ico{ transform:rotate(45deg); }
.faq-a{
  overflow:hidden;
  height:0;
  opacity:0;
}
.faq-a p{
  font-size:14px;
  color:var(--charcoal-soft);
  line-height:1.75;
  padding-bottom:1.4rem;
  margin:0;
}

@media (max-width:768px){
  .faq{ padding:3rem var(--pad); }
  .faq-inner{ grid-template-columns:1fr; gap:2rem; }
  .faq-left{ position:static; }
}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band{
  background:#ffffff;
  padding:clamp(4rem,8vw,6rem) var(--pad);
  border-top:1px solid var(--line);
}
.cta-band-inner{
  max-width:900px;
  margin:0 auto;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.4rem;
}
.cta-band-title{
  font-size:clamp(1.8rem,4vw,3rem);
  font-weight:800;
  color:var(--charcoal);
  line-height:1.12;
  letter-spacing:-0.01em;
  margin:0;
}
.cta-band-sub{
  font-size:15px;
  font-weight:400;
  color:var(--charcoal-soft);
  line-height:1.6;
  margin:0;
}
.cta-band-btn{
  margin-top:.6rem;
  padding:1rem 2.8rem;
  font-size:1rem;
  border-radius:10px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{
  background:var(--cream);
  border-top:1px solid var(--line);
}
.footer-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(3rem,6vw,6rem);
  padding:clamp(3rem,6vw,5rem) 75px;
  max-width:1180px;
  margin:0 auto;
  align-items:start;
}
.footer-left{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-self:stretch;
}
.footer-nav{
  display:flex;
  gap:2.5rem;
  flex-wrap:wrap;
}
.footer-nav a{
  font-size:15px;
  font-weight:400;
  color:var(--charcoal);
  text-decoration:none;
  transition:color .2s;
}
.footer-nav a:hover{ color:var(--rust); }
.footer-desc{
  font-size:14px;
  font-weight:400;
  color:var(--charcoal-soft);
  line-height:1.75;
  margin:0;
  max-width:480px;
}
.footer-logo{
  width:100%;
  max-width:480px;
  height:auto;
  display:block;
}

/* Form card */
.footer-right{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:2rem;
}
.footer-form{
  display:flex;
  flex-direction:column;
  gap:1.2rem;
}
.ff-field{ display:flex; flex-direction:column; gap:.4rem; }
.ff-label{
  font-size:14px;
  font-weight:500;
  color:var(--charcoal);
}
.ff-input{
  width:100%;
  padding:.7rem 1rem;
  border:1px solid rgba(44,44,44,.18);
  border-radius:8px;
  font-size:14px;
  font-family:var(--font);
  color:var(--charcoal);
  background:#ffffff;
  outline:none;
  transition:border-color .2s;
  box-sizing:border-box;
}
.ff-input::placeholder{ color:rgba(44,44,44,.35); }
.ff-input:focus{ border-color:var(--rust); }
.ff-textarea{ resize:vertical; min-height:100px; }
.ff-submit{
  width:100%;
  justify-content:center;
  border-radius:10px;
  padding:1rem;
  font-size:.95rem;
  margin-top:.4rem;
}
.ff-success{
  font-size:13px;
  color:var(--rust);
  text-align:center;
  margin:0;
}

.footer-bar{
  border-top:1px solid var(--line);
  padding:1.2rem 75px;
  font-size:13px;
  color:var(--charcoal-soft);
  max-width:100%;
}

@media (max-width:900px){
  .footer-inner{ grid-template-columns:1fr; padding:3rem var(--pad); }
  .footer-bar{ padding:1.2rem var(--pad); }
  .footer-wordmark{ font-size:clamp(2.5rem,10vw,4rem); }

  /* Stacked footer: switch to flex so the wordmark can be re-ordered to sit
     after the contact form, and give the nav links room to breathe.
     align-items must be stretch — the base grid rule sets `start`, which in a
     column flex container shrinks every child to its content width and would
     narrow the contact form. */
  .footer-inner{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:2.25rem;
  }
  .footer-left{ display:contents; }
  .footer-nav{
    order:1;
    gap:1.1rem 2rem;
    row-gap:1.1rem;
    margin-bottom:.25rem;
  }
  .footer-desc{ order:2; }
  .footer-right{ order:3; }
  /* align-self keeps the wordmark at its natural size under `stretch`. */
  .footer-logo{ order:4; align-self:flex-start; max-width:320px; margin-top:.5rem; }
}

/* ==========================================================================
   REVEAL
   ========================================================================== */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in{ opacity:1; transform:translateY(0); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:768px){
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .main-nav.open{
    display:flex; flex-direction:column; gap:1.2rem;
    position:absolute; top:100%; left:0; right:0;
    background:var(--rust); padding:1.5rem var(--pad);
    border-top:1px solid var(--line-on-rust);
  }
}

/* ==========================================================================
   ==========================================================================
   V5 MOTION LAYER
   Everything below is new in v5. Content and layout are inherited from v4;
   this layer adds the choreography surfaces the motion system drives.
   ==========================================================================
   ========================================================================== */

/* --------------------------------------------------------------------------
   Body gate — content is hidden until the preloader hands off, so the hero
   never flashes un-animated. .no-motion short-circuits the whole system.
   -------------------------------------------------------------------------- */
/* The preloader is an opaque full-screen curtain, so page content underneath
   needs no opacity gate — that avoids any chance of content being stranded
   at opacity:0 if the handoff is interrupted. Content is always visible;
   only the curtain moves. */

/* --------------------------------------------------------------------------
   PRELOADER
   -------------------------------------------------------------------------- */
.preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--rust);
  display:flex; align-items:center; justify-content:center;
  will-change:transform;
}
html.no-motion .preloader{ display:none !important; }
.pre-inner{
  display:flex; flex-direction:column; align-items:center; gap:1.2rem;
  color:var(--cream);
}
.pre-label{
  font-size:.82rem; font-weight:600; letter-spacing:.34em;
  text-transform:uppercase; opacity:0;
}
.pre-count{
  font-size:clamp(3rem,10vw,7rem); font-weight:800; line-height:1;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.pre-bar{
  width:min(260px,50vw); height:2px;
  background:rgba(255,251,246,.25); overflow:hidden; border-radius:2px;
}
.pre-bar-fill{
  width:100%; height:100%; background:var(--cream);
  transform:scaleX(0); transform-origin:left center;
}

/* --------------------------------------------------------------------------
   SCROLL PROGRESS BAR
   -------------------------------------------------------------------------- */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:9998;
  background:var(--rust);
  transform:scaleX(0); transform-origin:left center;
  will-change:transform;
}
html.no-motion .scroll-progress{ display:none; }

/* --------------------------------------------------------------------------
   SPLIT TEXT — masked reveals
   -------------------------------------------------------------------------- */
.split-word{ display:inline-block; white-space:nowrap; }
.split-mask{ display:inline-block; overflow:hidden; vertical-align:top; }
.split-char,
.split-word-inner{ display:inline-block; will-change:transform,opacity; }
/* Descenders (g, y, p) need breathing room inside the mask. */
[data-split] .split-mask{ padding-bottom:.12em; margin-bottom:-.12em; }

/* --------------------------------------------------------------------------
   HEADER — condense + hide-on-scroll-down
   -------------------------------------------------------------------------- */
.site-header{
  transition:transform .45s var(--ease), padding .35s var(--ease),
             box-shadow .35s var(--ease);
}
.site-header.is-stuck{ box-shadow:0 8px 30px rgba(44,44,44,.14); }
/* The logo keeps its full size on scroll — only the bar padding tightens. */
.site-header.is-stuck .header-inner{ padding-top:.55rem; padding-bottom:.55rem; }
.site-header.is-hidden{ transform:translateY(-100%); }

/* Nav toggle → X */
.nav-toggle span{ transition:transform .3s var(--ease), opacity .2s var(--ease); }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero{ overflow:hidden; }
/* Soft radial light behind the wordmark for depth. */
.hero-glow{
  position:absolute; left:50%; top:42%;
  width:min(1100px,120vw); height:min(1100px,120vw);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,251,246,.18) 0%, rgba(255,251,246,0) 62%);
  pointer-events:none; z-index:1;
}
.hero-headline{ will-change:transform,opacity; }
/* Each glyph rises out of its own mask. Extra vertical room keeps the
   overflow clip off the glyph itself (the wordmark has no descenders, but
   the cap height still needs slack at this size). */
.m-mask{
  display:inline-block; overflow:hidden; vertical-align:top;
  line-height:1;
  padding:.06em 0 .1em;
  margin-bottom:-.1em;
}
.m-letter{ display:inline-block; will-change:transform,opacity; }
.hero-headline .outline{ will-change:transform,opacity; }

/* Pre-animation state. Only applied once JS confirms it will animate these
   in, so a JS failure leaves the hero fully readable. */
html.js-motion .hero-sub,
html.js-motion .hero-cta,
html.js-motion .hero-strip{ opacity:0; }

/* --------------------------------------------------------------------------
   MOBILE HERO — the wordmark is nowrap by design, so it must be allowed to
   scale down rather than overflow the viewport.
   -------------------------------------------------------------------------- */
@media (max-width:768px){
  .hero{ height:auto; min-height:calc(100svh - 68px); padding-bottom:64px; }
  .hero-headline{ font-size:clamp(2.6rem,15vw,5rem); }
  .hero-inner{ padding-top:40px; padding-bottom:120px; }
  .hero-sub{ font-size:clamp(1rem,4.4vw,1.3rem); }
  .hero-cta{ margin-top:1.8rem; gap:.7rem; }
  .hero-cta .btn{ padding:.85rem 1.3rem; font-size:.9rem; }
  /* The header keeps logo + toggle only; the CTA lives in the menu. */
  .header-right{ display:none; }
  .main-nav.open .btn-nav{ display:inline-flex; }
  .logo-badge{ height:34px; }
}
@media (max-width:380px){
  .hero-cta{ flex-direction:column; align-items:center; width:100%; }
  .hero-cta .btn{ width:100%; justify-content:center; }
}

/* --------------------------------------------------------------------------
   BUTTONS — motion only on hover. Each button keeps its resting colours;
   the lift is the whole interaction. No colour swap, no sheen, no glow.
   -------------------------------------------------------------------------- */
.btn{
  position:relative;
  transition:transform .25s var(--ease);
}
.btn-primary:hover,
.btn-light:hover,
.btn-outline-light:hover,
.btn-nav:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
html.no-motion .btn:hover{ transform:none; }

/* Hold the resting palette through hover/focus/active — the v4 base rules
   swap background and text colour, which we no longer want. */
.btn-primary:hover, .btn-primary:focus-visible, .btn-primary:active{
  background:var(--rust); color:var(--cream);
}
.btn-light:hover, .btn-light:focus-visible, .btn-light:active{
  background:var(--cream); color:var(--rust);
}
.btn-outline-light:hover, .btn-outline-light:focus-visible, .btn-outline-light:active{
  background:transparent; color:var(--cream); border-color:rgba(255,251,246,.7);
}
.btn-nav:hover, .btn-nav:focus-visible, .btn-nav:active{
  background:var(--cream); color:var(--rust);
}

/* Nav underline sweep from left */
.main-nav a::after{ transition:width .35s var(--ease); }

/* NOTE: the services section (.section-solution) deliberately has no v5 motion
   layer — its styles and behaviour are kept exactly as in v4. */

/* --------------------------------------------------------------------------
   INDUSTRIES — 3D tilt
   -------------------------------------------------------------------------- */
.industries-grid{ perspective:1000px; }
.ind-card{
  transform-style:preserve-3d;
  will-change:transform;
  /* JS owns transform; keep colour transitions in CSS. */
  transition:background .35s var(--ease), border-color .35s var(--ease),
             box-shadow .35s var(--ease);
}
.ind-card:hover{ transform:none; box-shadow:0 18px 40px rgba(0,0,0,.35); }
.ind-icon{ transition:color .3s var(--ease), transform .4s var(--ease); }
.ind-card:hover .ind-icon{ transform:scale(1.12) rotate(-6deg); }

/* --------------------------------------------------------------------------
   BLOG CARDS
   -------------------------------------------------------------------------- */
.blog-card{
  will-change:transform;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.blog-card:hover{
  border-color:rgba(212,54,5,.35);
  box-shadow:0 12px 28px rgba(44,44,44,.09);
}
.blog-card-title{ transition:color .3s var(--ease); }
.blog-card:hover .blog-card-title{ color:var(--rust); }
.blog-read::after{
  content:""; position:absolute; left:0; bottom:0;
  width:0; height:1px; background:var(--rust);
  transition:width .35s var(--ease);
}
.blog-card:hover .blog-read::after{ width:100%; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq-a-inner{ will-change:transform,opacity; }
.faq-q{ transition:color .3s var(--ease); }
.faq-q:hover{ color:var(--rust); }
.faq-q:hover .faq-ico{ color:var(--rust); }
.faq-item.open .faq-q{ color:var(--rust); }
.faq-item.open .faq-ico{ color:var(--rust); }
/* Open-state accent rail. The rail sits at left:0, so the question and answer
   need padding at every width or the text butts against it. */
.faq-q{ padding-left:1rem; }
.faq-a p{ padding-left:1rem; padding-right:.5rem; }
.faq-item{ position:relative; }
.faq-item::before{
  content:""; position:absolute; left:0; top:0; bottom:0;
  width:2px; background:var(--rust);
  transform:scaleY(0); transform-origin:top center;
  transition:transform .4s var(--ease);
}
.faq-item.open::before{ transform:scaleY(1); }

/* --------------------------------------------------------------------------
   TESTIMONIAL
   -------------------------------------------------------------------------- */
.testi-quote{ will-change:transform,opacity; }

/* --------------------------------------------------------------------------
   FOOTER FORM
   -------------------------------------------------------------------------- */
.ff-label{ transition:color .25s var(--ease); }
.ff-field.is-focused .ff-label{ color:var(--rust); }
.ff-input{ transition:border-color .25s var(--ease), box-shadow .25s var(--ease); }
.ff-input:focus{ box-shadow:0 0 0 3px var(--rust-tint); }

/* --------------------------------------------------------------------------
   FORM VALIDATION + SUBMIT STATES
   `.has-error` mirrors the existing `.is-focused` idiom: a state class on the
   .ff-field wrapper driving its descendants. .ff-input already transitions
   border-color and box-shadow, so the error state animates for free.
   -------------------------------------------------------------------------- */
.ff-field.has-error .ff-label{ color:var(--danger); }
.ff-field.has-error .ff-input{ border-color:var(--danger); }
.ff-field.has-error .ff-input:focus{ box-shadow:0 0 0 3px var(--danger-tint); }

.ff-error{
  font-size:12px;
  font-weight:500;
  color:var(--danger);
  line-height:1.45;
  margin:.1rem 0 0;
}

/* Whole-form failure (network down, endpoint misconfigured). */
.ff-formerror{
  font-size:13px;
  color:var(--danger);
  text-align:center;
  line-height:1.5;
  margin:0;
}

/* Consent checkbox — inline, not the stacked label/input of a normal field. */
.ff-consent-field{ gap:.3rem; }
.ff-consent{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  font-size:13px;
  line-height:1.5;
  color:var(--charcoal-soft);
  cursor:pointer;
}
.ff-consent input[type="checkbox"]{
  flex:0 0 auto;
  width:16px;
  height:16px;
  margin:.15rem 0 0;
  accent-color:var(--rust);
  cursor:pointer;
}
.ff-consent a{ color:var(--rust); text-decoration:underline; }
.ff-consent-field.has-error .ff-consent{ color:var(--danger); }

/* Honeypot: removed from view without display:none, which some bots detect
   and skip. Kept out of the layout and off the tab order. */
.ff-hp{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* Submit states — no :disabled style existed, so a disabled button still
   showed the hover lift and full-strength rust. */
.ff-submit:disabled,
.btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none !important;
}
.ff-submit.is-submitting{ cursor:progress; }
.footer-nav a{ position:relative; }
.footer-nav a::after{
  content:""; position:absolute; left:0; bottom:-3px;
  width:0; height:1px; background:var(--rust);
  transition:width .3s var(--ease);
}
.footer-nav a:hover::after{ width:100%; }

/* --------------------------------------------------------------------------
   BACK TO TOP
   -------------------------------------------------------------------------- */
.back-to-top{
  position:fixed; right:28px; bottom:28px; z-index:400;
  width:48px; height:48px; border-radius:50%;
  background:var(--rust); color:var(--cream);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(16px) scale(.9);
  pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease),
             background .3s var(--ease);
  box-shadow:0 10px 30px rgba(212,54,5,.3);
}
.back-to-top svg{ width:20px; height:20px; }
.back-to-top.is-visible{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.back-to-top:hover{ background:var(--rust-dark); }
@media (max-width:600px){ .back-to-top{ right:16px; bottom:16px; width:42px; height:42px; } }

/* --------------------------------------------------------------------------
   REDUCED MOTION / NO-MOTION — everything visible, nothing moving
   -------------------------------------------------------------------------- */
html.no-motion [data-reveal],
html.no-motion [data-stagger] > *,
html.no-motion .hero-sub,
html.no-motion .hero-cta,
html.no-motion .hero-strip,
html.no-motion .process-num,
html.no-motion .process-name,
html.no-motion .process-desc,
html.no-motion .testi-quote{
  opacity:1 !important;
  transform:none !important;
}
html.no-motion .process-dot{ transform:scale(1) !important; }
html.no-motion .process-line-fill{ transform:scaleY(1) !important; }
html.no-motion .faq-item.open .faq-a{ height:auto !important; opacity:1 !important; }
html.no-motion .split-char,
html.no-motion .split-word-inner{ transform:none !important; opacity:1 !important; }

@media (prefers-reduced-motion:reduce){
  .preloader{ display:none !important; }
  .scroll-progress{ display:none !important; }
  body main,body .site-header,body .footer{ opacity:1 !important; }
}