/* ============================================================
   SEARCH SPARK
   LOCAL SEO | SEO | DIGITAL MARKETING

   Palette (brand guide, exact):
     #EFF6EE  Snow Drift
     #212922  Ink
     #3E6259  Stromboli
   Typeface: MONTSERRAT, self-hosted.
   ============================================================ */

@font-face{font-family:'Montserrat';src:url('fonts/Montserrat-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('fonts/Montserrat-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('fonts/Montserrat-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('fonts/Montserrat-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('fonts/Montserrat-ExtraBold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}

:root{
  --snow:#EFF6EE;
  --ink:#212922;
  --green:#3E6259;

  --green-deep:#2B4740;
  --green-lift:#54806F;
  --green-glow:#7BA396;
  --paper:#fff;
  --muted:#6A756F;
  --muted-dark:#9FB0A8;
  --line:#DFE7DF;
  --line-dark:rgba(239,246,238,.12);

  --font:'Montserrat',system-ui,sans-serif;

  /* legacy aliases: the inner pages' inline <style> blocks still reference
     these. Keep them pointing at the current tokens rather than editing
     five files' worth of inline CSS. */
  --display:'Montserrat',system-ui,sans-serif;
  --body:'Montserrat',system-ui,sans-serif;
  --green-bright:#7BA396;

  --wrap:1280px;
  --r:20px;
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.36,.64,1);
}

*{margin:0;padding:0;box-sizing:border-box}
/* one root bump scales every rem on the page together */
html{scroll-behavior:smooth;font-size:17.5px}
html.lenis{scroll-behavior:auto}
body{
  font-family:var(--font);font-weight:400;
  color:var(--ink);background:var(--snow);
  line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
::selection{background:var(--green);color:#fff}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.locked{overflow:hidden}
.bg-paper{background:var(--paper)}

/* ---------- inline icons (Qurova has no arrow/star glyphs) ---------- */
.ico{width:1em;height:1em;flex:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico-arw{transition:transform .45s var(--spring)}

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader{
  position:fixed;inset:0;z-index:9999;background:radial-gradient(120% 120% at 50% 40%,#243027,var(--ink) 70%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transition:opacity .7s var(--ease),visibility .7s;
}
.preloader.done{opacity:0;visibility:hidden}

/* Glow rings radiate out from the mark like a spark catching — two staggered
   rings on a loop behind the logo. */
.pl-stage{position:relative;display:grid;place-items:center;width:150px;height:150px}
.pl-ring{position:absolute;width:92px;height:92px;border-radius:50%;border:1px solid rgba(122,184,148,.5);opacity:0;animation:plRing 2.4s var(--ease) infinite}
.pl-ring-2{animation-delay:1.2s}
@keyframes plRing{0%{transform:scale(.55);opacity:0}35%{opacity:.55}100%{transform:scale(1.55);opacity:0}}

/* The brand mark draws its own outline on, then floods with colour — a "spark
   igniting" beat before the site appears. pathLength="1" normalises every path
   so one dash rule (dasharray:1) covers the whole stroke regardless of length. */
.pl-mark{position:relative;width:78px;height:104px;animation:plFloat 2.6s var(--ease) infinite}
.pl-mark svg{width:100%;height:100%;overflow:visible}
.preloader .bolt-dark,.preloader .bolt-green{
  stroke-width:1.4;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0;
}
.preloader .bolt-dark{stroke:var(--snow);fill:var(--snow);
  animation:plDraw 1s var(--ease) .1s forwards, plFill .5s ease .9s forwards}
.preloader .bolt-green{stroke:var(--green-lift);fill:var(--green-lift);
  animation:plDraw 1s var(--ease) .25s forwards, plFill .5s ease 1.05s forwards}
.preloader .lens,.preloader .handle{
  stroke:var(--snow);stroke-width:2.6;fill:none;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:plDraw .8s var(--ease) .5s forwards}
.preloader .glass{filter:drop-shadow(0 0 7px rgba(122,184,148,.55))}
@keyframes plDraw{to{stroke-dashoffset:0}}
@keyframes plFill{to{fill-opacity:1}}
@keyframes plFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* Wordmark rises in once the mark has ignited. */
.pl-word{
  font-family:var(--display);font-weight:700;font-size:.82rem;
  letter-spacing:.36em;text-indent:.36em;
  opacity:0;transform:translateY(10px);animation:plWordIn .7s var(--ease) 1.15s forwards;
}
.pl-word b{color:var(--snow);font-weight:700}
.pl-word i{color:var(--green-lift);font-style:normal;font-weight:700}
@keyframes plWordIn{to{opacity:1;transform:none}}

.pl-bar{width:170px;height:2px;background:rgba(239,246,238,.14);overflow:hidden;border-radius:2px}
.pl-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--green-glow));box-shadow:0 0 10px rgba(122,184,148,.6);transition:width .25s linear}
.pl-num{font-size:.72rem;letter-spacing:.32em;color:var(--muted-dark);font-weight:500}

/* ============================================================
   CURSOR
   ============================================================ */
.cursor,.cursor-ring{position:fixed;top:0;left:0;z-index:9000;pointer-events:none;border-radius:50%;mix-blend-mode:difference}
.cursor{width:7px;height:7px;background:#EFF6EE;margin:-3.5px 0 0 -3.5px}
.cursor-ring{
  width:40px;height:40px;margin:-20px 0 0 -20px;border:1px solid rgba(239,246,238,.6);
  transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),opacity .3s;
}
.cursor-ring.grow{width:70px;height:70px;margin:-35px 0 0 -35px;border-color:rgba(239,246,238,.9)}
body:not(.has-cursor) .cursor,body:not(.has-cursor) .cursor-ring{display:none}

/* ---------- scroll progress ---------- */
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;background:linear-gradient(90deg,var(--green),var(--green-glow))}

/* ============================================================
   TYPE
   ============================================================ */
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.03;letter-spacing:-.045em}
.h-xl{font-size:clamp(2.7rem,5.6vw,5.1rem)}
.h-lg{font-size:clamp(2.15rem,4.5vw,3.5rem);font-weight:600}
.h-md{font-size:clamp(1.6rem,2.6vw,2.2rem)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--green);
}
.eyebrow::before{content:"";width:28px;height:2px;background:currentColor;flex:none}
.eyebrow.center{justify-content:center}
.lead{font-size:1.12rem;line-height:1.7;color:var(--muted);max-width:56ch;font-weight:400}

.on-ink{background:var(--ink);color:var(--snow)}
.on-ink h1,.on-ink h2,.on-ink h3{color:var(--snow)}
.on-ink .eyebrow{color:var(--green-glow)}
.on-ink .lead{color:var(--muted-dark)}

/* split-text reveal: a word is a mask, its inner span slides up through it.
   The padding keeps descenders (g, y, p) from being clipped by the mask;
   the negative margin gives that padding back so line spacing is unchanged. */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.split .wi{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ease)}
.split.in .wi{transform:none}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--display);font-weight:700;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  padding:1.15rem 2.1rem;border-radius:999px;border:1.5px solid transparent;
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
/* the fill wipes up from the bottom on hover */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  transform:translateY(101%);transition:transform .55s var(--ease);
}
.btn:hover::before{transform:none}

.btn-primary{background:var(--ink);color:var(--snow)}
.btn-primary::before{background:var(--green)}
.btn-ghost{border-color:currentColor;color:var(--ink)}
.btn-ghost::before{background:var(--ink)}
.btn-ghost:hover{color:var(--snow);border-color:var(--ink)}
.btn-light{background:var(--snow);color:var(--ink)}
.btn-light::before{background:var(--green-glow)}
.on-ink .btn-ghost{color:var(--snow)}
.on-ink .btn-ghost::before{background:var(--snow)}
.on-ink .btn-ghost:hover{color:var(--ink);border-color:var(--snow)}
.btn:hover .ico-arw{transform:translateX(5px)}

/* text link with an underline that wipes in */
.tlink{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;position:relative}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.tlink:hover::after{transform:scaleX(1);transform-origin:left}
.tlink:hover .ico-arw{transform:translateX(5px)}

/* ============================================================
   LOGO
   ============================================================ */
.brand{display:flex;align-items:center;gap:.9rem}
.brand-mark{width:42px;height:56px;flex:none;overflow:visible}
.brand-mark .bolt-dark{fill:var(--ink)}
.brand-mark .bolt-green{fill:var(--green);stroke:var(--snow);stroke-width:3.2;stroke-linejoin:round}
.brand-mark .glass{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round}
.brand-word{display:flex;flex-direction:column;line-height:1}
.brand-word b{font-family:var(--display);font-weight:800;font-size:1.2rem;letter-spacing:.08em}
.brand-word b i{font-style:normal;color:var(--green)}
.brand-word small{font-family:var(--display);font-size:.5rem;letter-spacing:.22em;color:var(--muted);font-weight:700;margin-top:.38rem;white-space:nowrap}

.on-ink .brand-mark .bolt-dark,.preloader .bolt-dark{fill:var(--snow)}
.on-ink .brand-mark .bolt-green,.preloader .bolt-green{fill:var(--green-lift);stroke:var(--ink)}
.on-ink .brand-mark .glass,.preloader .glass{stroke:var(--snow)}
.on-ink .brand-word b i{color:var(--green-glow)}
.on-ink .brand-word small{color:#8DA096}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:150;
  padding-top:16px;
  transition:transform .5s var(--ease);
}
.nav.stuck{background:transparent;box-shadow:none}
.nav.hide{transform:translateY(-100%)}
.nav-in{
  /* relative: the services mega panel anchors to the bar, not to its own <li> */
  position:relative;
  display:flex;align-items:center;justify-content:space-between;height:84px;gap:2rem;
  padding:0 22px 0 24px;border-radius:30px;
  background:rgba(255,255,255,.72);border:1px solid rgba(33,41,34,.09);
  backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 28px 60px -46px rgba(33,41,34,.45)
}
.nav.stuck .nav-in{background:rgba(239,246,238,.92);border-color:rgba(33,41,34,.08)}
.nav .brand{gap:.72rem}
.nav .brand-mark{width:34px;height:46px}
.nav .brand-word b{font-size:1.02rem;letter-spacing:.06em}
.nav .brand-word small{display:none}
.nav-links{display:flex;align-items:center;gap:1.75rem;list-style:none}
/* The <a> carries the clip, so the hit area and the mega toggle live on the
   <li> instead -- vertical padding on the <a> itself would be subtracted from
   its content box by border-box and slice the glyphs in half. */
.nav-links>li:not(.nav-cta){display:flex;align-items:center;gap:.3rem;padding:.35rem 0}
/* :not(.nav-cta) matters -- these rules force display:block + a clipped
   box, which flattens the Get Started button if it is included.
   The window must equal exactly ONE span: no vertical padding, and both spans
   share the <a>'s line-height, so translateY(-100%) lands the second copy
   precisely where the first sat with nothing left showing above it. */
.nav-links>li:not(.nav-cta)>a{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;position:relative;display:block;overflow:hidden;height:1.6em;line-height:1.6}
/* each link swaps to a duplicate of itself sliding up */
.nav-links>li:not(.nav-cta)>a span{display:block;line-height:1.6;transition:transform .45s var(--ease)}
.nav-links>li:not(.nav-cta)>a span+span{color:var(--green)}
.nav-links>li:not(.nav-cta)>a:hover span,.nav-links>li:not(.nav-cta)>a.active span{transform:translateY(-100%)}
.nav-cta{margin-left:.4rem}
.nav-cta .btn{padding:.95rem 1.45rem;font-size:.72rem}

/* ---- Services mega menu ---------------------------------------------- */
.mega-toggle{display:grid;place-items:center;width:16px;height:16px;padding:0;border:0;background:none;color:currentColor;cursor:pointer}
.mega-chev{width:6px;height:6px;display:block;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease)}
.has-mega:hover .mega-chev,.has-mega.is-open .mega-chev,.has-mega:focus-within .mega-chev{transform:translateY(1px) rotate(-135deg)}
.mega{
  position:absolute;top:calc(100% + 14px);left:0;right:0;z-index:60;
  padding:26px 28px 0;
  background:rgba(255,255,255,.97);backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(33,41,34,.09);border-radius:26px;
  box-shadow:0 40px 90px -50px rgba(33,41,34,.5);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s;
}
.has-mega:hover .mega,.has-mega:focus-within .mega,.has-mega.is-open .mega{opacity:1;visibility:visible;transform:none}
.mega-in{display:grid;grid-template-columns:repeat(5,1fr);gap:20px 24px}
/* Flat catalog (a single group): one block spanning the panel, services laid out
   in even columns with no group heading above them. */
.mega.is-flat .mega-in{grid-template-columns:1fr}
.mega.is-flat .mega-col>ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 18px}
/* a group with more than six services takes two tracks and lists in two
   columns, so the panel never grows taller than the viewport */
.mega-col.is-split{grid-column:span 2}
.mega-col.is-split>ul{grid-template-columns:1fr 1fr}
.mega-head{display:block;font-family:var(--display);font-weight:800;font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.mega-lead{font-size:.75rem;line-height:1.5;color:var(--muted);margin:.45rem 0 .8rem;min-height:3.4em}
.mega-col>ul{display:grid;gap:1px;list-style:none}
.mega-col>ul>li>a{display:block;padding:.44rem .6rem;border-radius:10px;font-size:.83rem;font-weight:600;color:var(--ink);transition:background .2s var(--ease),color .2s var(--ease)}
.mega-col>ul>li>a:hover,.mega-col>ul>li>a:focus-visible{background:var(--snow);color:var(--green)}
.mega-col>ul>li>a.is-current{background:var(--green);color:#fff}
.mega-foot{display:flex;align-items:center;justify-content:flex-end;gap:1rem;margin-top:18px;padding:14px 2px;border-top:1px solid var(--line);font-size:.75rem;color:var(--muted)}

.burger{display:none;flex-direction:column;gap:6px;padding:8px}
.burger span{width:26px;height:2px;background:var(--ink);border-radius:2px;transition:.4s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ============================================================
   REVEAL / MOTION PRIMITIVES
   ============================================================ */
.rv{opacity:0;transform:translateY(42px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-img{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease)}
.rv-img.in{clip-path:inset(0 0 0 0)}
.d1{transition-delay:.09s}.d2{transition-delay:.18s}.d3{transition-delay:.27s}
.d4{transition-delay:.36s}.d5{transition-delay:.45s}.d6{transition-delay:.54s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .rv,.split .wi{opacity:1;transform:none;clip-path:none}
  .rv-img{clip-path:none}
}

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section{padding:130px 0;position:relative}
.section-head{max-width:720px;margin-bottom:66px}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2{margin:1rem 0}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:66px}
.head-row .section-head{margin-bottom:0}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;padding:170px 0 104px;overflow:hidden;
  background:linear-gradient(180deg,#F7FBF6 0%,#EFF6EE 58%,#F8FBF7 100%)
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url('pattern-analytics.jpg') center/cover no-repeat;opacity:.045;
}
.blob{position:absolute;border-radius:50%;z-index:0;pointer-events:none;filter:blur(10px)}
.blob-a{width:700px;height:700px;top:-300px;right:-210px;background:radial-gradient(circle,rgba(62,98,89,.18),transparent 68%)}
.blob-b{width:500px;height:500px;bottom:-210px;left:-170px;background:radial-gradient(circle,rgba(43,71,64,.14),transparent 70%)}

.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);gap:72px;align-items:center}
.hero-copy{max-width:620px}
/* The headline carries its own <br> breaks ("Local SEO." / "Technical SEO." /
   "Digital growth."), so it must NOT be re-wrapped by a character cap — a 10.5ch
   cap split "Technical SEO." across two lines. Sized to keep each line inside
   the copy column. */
.hero h1{margin:1.25rem 0 0;max-width:none;line-height:.95;font-size:clamp(2.3rem,4.3vw,3.9rem)}
.hero h1 .accent{color:var(--green)}
.hero .lead{margin:1.7rem 0 0;max-width:33rem}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.1rem}

.hero-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:2.3rem}
.hm{
  padding:20px 18px;border-radius:22px;background:rgba(255,255,255,.68);
  border:1px solid rgba(33,41,34,.08);box-shadow:0 28px 54px -48px rgba(33,41,34,.35)
}
.hm b{font-weight:700;font-size:1.8rem;display:block;line-height:1}
.hm>span{display:block;margin-top:.55rem;font-size:.76rem;color:var(--muted);letter-spacing:.02em;line-height:1.55}

.hero-stage{position:relative;min-height:640px;padding:0 0 0 64px}
/* Decorative frame sits INSIDE the photo block, never dangling past it — when it
   ran to the stage floor it read as an empty pale panel under the collage. */
.hero-stage::before{
  content:"";position:absolute;inset:34px 30px 34px 120px;border-radius:40px;
  border:1px solid rgba(62,98,89,.16);pointer-events:none
}
.hero-photo{
  position:absolute;overflow:hidden;border-radius:34px;background:#DCE6DD;
  border:1px solid rgba(33,41,34,.08);box-shadow:0 54px 90px -62px rgba(33,41,34,.46)
}
.hero-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.hero-stage:hover .hero-photo img{transform:scale(1.05)}
.hero-photo-main{top:0;right:0;width:min(100%,560px);height:100%}
.hero-photo-main::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(33,41,34,.08))}
.hero-photo-secondary{left:0;bottom:0;width:330px;height:430px;z-index:2}
.hero-note{
  position:absolute;z-index:3;border-radius:28px;border:1px solid rgba(33,41,34,.08);
  box-shadow:0 36px 70px -54px rgba(33,41,34,.5)
}
.hero-note-top{
  top:52px;left:18px;max-width:280px;padding:22px 22px 20px;
  background:rgba(255,255,255,.88);backdrop-filter:blur(14px)
}
.hero-note-top span{
  display:block;font-family:var(--display);font-size:.66rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--green);margin-bottom:.8rem
}
.hero-note-top b{display:block;font-size:1rem;line-height:1.55;font-weight:700}
.hero-note-bottom{
  right:22px;bottom:0;width:360px;padding:16px;display:grid;grid-template-columns:90px 1fr;gap:16px;
  background:rgba(33,41,34,.96);color:#fff
}
.hero-note-media{border-radius:18px;overflow:hidden;height:100%}
.hero-note-media img{width:100%;height:100%;object-fit:cover}
.hero-note-copy span{
  display:block;font-family:var(--display);font-size:.66rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--green-glow);margin-bottom:.6rem
}
.hero-note-copy b{display:block;font-size:.92rem;line-height:1.55;font-weight:600}

/* the mat board the photo is mounted in */
.hero-shell{
  position:relative;z-index:1;padding:14px;border-radius:30px;
  background:linear-gradient(150deg,#fff,var(--snow));
  border:1px solid var(--line);
  box-shadow:0 60px 110px -58px rgba(33,41,34,.85);
}
/* an accent outline sitting proud of the mount, down and to the right.
   The mat is opaque, so it reads as a shadow-line rather than showing through. */
.hero-shell::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;inset:0;
  border:1.5px solid var(--green);border-radius:30px;opacity:.34;
  transform:translate(24px,24px);
}
.hero-shell .corner{position:absolute;z-index:2;width:28px;height:28px;border:2px solid var(--green);opacity:.65}
.hero-shell .corner.tl{top:-11px;left:-11px;border-right:0;border-bottom:0;border-radius:9px 0 0 0}
.hero-shell .corner.br{bottom:-11px;right:-11px;border-left:0;border-top:0;border-radius:0 0 9px 0}

.deco-dots{
  position:absolute;z-index:0;width:160px;height:160px;top:-44px;left:-50px;
  background-image:radial-gradient(var(--green) 1.5px,transparent 1.5px);
  background-size:14px 14px;opacity:.24;
}
/* the brand's search lens, drifting */
.lens-ring{position:absolute;z-index:4;top:-46px;right:-24px;width:104px;height:104px;color:var(--green);opacity:.62;animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.hero-frame{
  position:relative;border-radius:19px;overflow:hidden;aspect-ratio:5/4;
  background:var(--green-deep);
}
/* the source render is soft and vividly emerald: crop past its vignette,
   lift the contrast, then remap the hue onto Stromboli */
/* hero-visual.png is pre-cropped to the artwork, so no zoom is needed here */
.hero-frame img{position:relative;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:contrast(1.14) brightness(.98)}
.hero-frame::before{content:"";position:absolute;inset:0;z-index:1;background:var(--green);mix-blend-mode:color;opacity:.72}
.hero-frame::after{content:"";position:absolute;inset:0;z-index:2;background:radial-gradient(120% 90% at 50% 40%,transparent 42%,rgba(33,41,34,.34)),linear-gradient(180deg,transparent 54%,rgba(33,41,34,.5))}

.badge{
  position:absolute;z-index:3;display:flex;align-items:center;gap:.8rem;
  background:var(--paper);border-radius:16px;padding:.9rem 1.15rem;
  box-shadow:0 30px 50px -30px rgba(33,41,34,.85);
  /* an absolute box with only `right` set shrink-to-fits against its static
     left edge, which clips the label; max-content lets it grow leftward */
  width:max-content;
}
.badge b{font-weight:600;font-size:.9rem;line-height:1.2;display:flex;align-items:center;gap:.35rem}
.badge small{display:block;font-size:.68rem;color:var(--muted);letter-spacing:.02em}
.badge .up{color:var(--green);font-style:normal;display:inline-flex;align-items:center;gap:.2rem}
.badge .up svg{width:9px;height:8px;fill:currentColor}
.badge .dot{width:9px;height:9px;border-radius:50%;background:var(--green);flex:none;box-shadow:0 0 0 0 rgba(62,98,89,.6);animation:ping 1.8s infinite}
@keyframes ping{70%{box-shadow:0 0 0 11px rgba(62,98,89,0)}100%{box-shadow:0 0 0 0 rgba(62,98,89,0)}}
.badge-rank{width:34px;height:34px;border-radius:10px;background:var(--snow);display:grid;place-items:center;font-weight:700;font-size:.8rem;color:var(--green);flex:none}
.badge-a{top:8%;left:-42px}
.badge-b{bottom:11%;right:-46px}

/* ============================================================
   HERO DASHBOARD — a coded SEO analytics mockup, not a photo.

   Lives inside .hero-frame. Everything is sized in cqw/em against the frame
   (container-type:inline-size), so the whole panel scales like an image but
   stays vector-crisp at any width. Resting states are the *finished* states,
   so the reduced-motion rule (which kills every animation) leaves a complete,
   readable dashboard rather than a half-drawn one.
   ============================================================ */
.hero-frame.is-dash{background:none;container-type:inline-size}
/* drop the photo tint + vignette for the coded panel */
.hero-frame.is-dash::before,.hero-frame.is-dash::after{display:none}

.hero-dash{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;gap:.85em;
  padding:1.05em 1.15em;
  font-size:clamp(9px,2.85cqw,15.5px);
  line-height:1.3;color:var(--snow);
  background:
    radial-gradient(120% 82% at 84% -6%,rgba(123,163,150,.26),transparent 55%),
    linear-gradient(158deg,#2f4b43 0%,#26332b 58%,#1b221d 100%);
  --dcard:rgba(255,255,255,.055);
  --dline:rgba(255,255,255,.10);
  --dmut:#93a99e;
  --mint:#9FD3C1;
  /* No entrance animation and no JS/IntersectionObserver gate: the panel is
     unconditionally opaque and visible on load. Its internal chart line, bars
     and node still animate, and each of those rests in a fully-visible state,
     so nothing here can ever leave the dashboard blank. */
}

/* window chrome */
.dash-bar{display:flex;align-items:center;gap:.42em;flex:none}
.dash-bar i{width:.6em;height:.6em;border-radius:50%;background:rgba(255,255,255,.2);flex:none}
.dash-url{margin-left:.35em;flex:1;min-width:0;display:flex;align-items:center;gap:.4em;
  background:rgba(255,255,255,.06);border:1px solid var(--dline);border-radius:.7em;
  padding:.34em .7em;font-size:.72em;color:#b9c9c0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-url svg{width:.9em;height:.9em;color:var(--mint);fill:none;flex:none}
.dash-live{display:flex;align-items:center;gap:.34em;font-size:.68em;font-weight:600;color:var(--mint);flex:none}
.dash-live b{width:.5em;height:.5em;border-radius:50%;background:var(--mint);animation:ping 1.8s infinite}

/* headline metric + weekly traffic bars.
   Right-aligned on purpose: the "Ranking live" badge overhangs the frame's
   top-LEFT, so nothing readable can live there. */
.dash-head{display:flex;align-items:flex-end;justify-content:flex-end;gap:.8em;flex:none}
.dash-kpi{text-align:right}
.dash-kpi span{display:block;font-size:.64em;letter-spacing:.13em;text-transform:uppercase;color:var(--dmut);margin-bottom:.32em}
.dash-kpi b{display:block;font-size:2em;font-weight:700;line-height:.9;letter-spacing:-.02em}
/* delta + sparkline share one row beneath the number, so nothing wraps */
.dash-kpi-foot{display:flex;align-items:center;justify-content:flex-end;gap:.55em;margin-top:.5em}
.dash-kpi em{font-style:normal;font-size:.72em;color:var(--mint);font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:.22em}
.dash-kpi em svg{width:.62em;height:.52em;fill:currentColor}
.dash-spark{display:flex;align-items:flex-end;gap:.24em;height:1.5em;flex:none}
.dash-spark i{width:.44em;border-radius:.16em .16em 0 0;transform-origin:bottom;
  background:linear-gradient(var(--mint),rgba(159,211,193,.32));
  animation:barGrow .8s var(--ease) both}
@keyframes barGrow{from{transform:scaleY(0)}}
.dash-spark i:nth-child(1){animation-delay:.04s}.dash-spark i:nth-child(2){animation-delay:.1s}
.dash-spark i:nth-child(3){animation-delay:.16s}.dash-spark i:nth-child(4){animation-delay:.22s}
.dash-spark i:nth-child(5){animation-delay:.28s}.dash-spark i:nth-child(6){animation-delay:.34s}
.dash-spark i:nth-child(7){animation-delay:.4s}

/* ranking / traffic area chart */
.dash-chart{position:relative;flex:1 1 auto;min-height:0;
  background:var(--dcard);border:1px solid var(--dline);border-radius:.85em;padding:.55em .5em .2em}
.dash-chart svg{width:100%;height:100%;display:block;overflow:visible}
.dash-grid line{stroke:rgba(255,255,255,.07);stroke-width:1}
.dash-area{fill:url(#dashFill)}
.dash-line{fill:none;stroke:url(#dashStroke);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:760;stroke-dashoffset:0;animation:dashDraw 2.1s var(--ease) both}
@keyframes dashDraw{from{stroke-dashoffset:760}}
.dash-node{fill:var(--mint)}
.dash-node-ring{fill:none;stroke:var(--mint);animation:nodePulse 2.1s ease-out infinite}
@keyframes nodePulse{0%{r:3;opacity:.55}100%{r:13;opacity:0}}
.dash-tip{position:absolute;top:7%;left:62%;transform:translateX(-50%);
  background:rgba(14,19,16,.92);border:1px solid var(--dline);border-radius:.5em;
  padding:.3em .55em;font-size:.62em;font-weight:700;white-space:nowrap;
  box-shadow:0 .5em 1em rgba(0,0,0,.45)}
.dash-tip s{display:block;text-decoration:none;color:var(--dmut);font-weight:500;font-size:.86em}

/* a Google result mockup (left) + keyword performance (right).
   SERP sits left so its light card is clear of the white "Position 1" badge
   overhanging the bottom-RIGHT. */
.dash-low{display:grid;grid-template-columns:.98fr 1.02fr;gap:.62em;flex:none}
.dash-card{background:var(--dcard);border:1px solid var(--dline);border-radius:.85em;padding:.62em .72em;min-width:0}
.dash-card h4{font-size:.62em;letter-spacing:.11em;text-transform:uppercase;color:var(--dmut);font-weight:600;margin-bottom:.55em}
/* rank pill sits FIRST (left): the "Position 1" badge overhangs the bottom-
   right, so only the secondary delta can end up under it, never the position. */
.kw{display:flex;align-items:center;gap:.45em;font-size:.8em}
.kw + .kw{margin-top:.46em}
.kw-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#d7e2db}
.kw-pos{background:rgba(159,211,193,.15);color:var(--mint);border-radius:.4em;padding:.1em .42em;font-weight:700;flex:none}
.kw-delta{display:inline-flex;align-items:center;gap:.14em;color:var(--mint);font-weight:600;font-size:.9em;flex:none}
.kw-delta svg{width:.6em;height:.5em;fill:currentColor}

/* the SERP card is deliberately light — it reads as a real search result */
.dash-serp{background:#fff;color:var(--ink);border-radius:.85em;padding:.6em .72em;
  display:flex;flex-direction:column;gap:.24em;box-shadow:0 .7em 1.5em rgba(0,0,0,.3)}
.serp-url{display:flex;align-items:center;gap:.4em;font-size:.62em;min-width:0}
.serp-fav{width:1.25em;height:1.25em;border-radius:50%;background:var(--snow);display:grid;place-items:center;flex:none}
.serp-fav svg{width:.72em;height:.72em;color:var(--green);fill:none}
.serp-url b{color:var(--ink);font-weight:600}
.serp-url span{color:#8a958d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.serp-title{font-size:.82em;color:#1b3a55;font-weight:600;line-height:1.18;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.serp-desc{font-size:.62em;color:#5f6b62;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.serp-rank{align-self:flex-start;margin-top:.12em;background:var(--green);color:#fff;
  font-size:.56em;font-weight:700;letter-spacing:.09em;padding:.22em .55em;border-radius:.4em}

.scroll-cue{position:relative;z-index:1;display:flex;align-items:center;gap:.7rem;margin-top:56px;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:500}
.scroll-cue i{display:block;width:1px;height:44px;background:linear-gradient(var(--green),transparent);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--green);animation:cue 1.9s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ============================================================
   BRANDS BAND (dark, geometric motif flush to the left edge)
   ============================================================ */
.brands{position:relative;background:var(--ink);overflow:hidden;min-height:176px;display:flex;align-items:center}
/* four 79px tiles: three quarter-discs and one solid accent square */
.brands-motif{
  position:absolute;left:0;top:0;z-index:0;
  display:grid;grid-template-columns:repeat(2,79px);grid-template-rows:repeat(2,79px);
}
.brands-motif i{display:block;background:rgba(239,246,238,.09)}
/* left column: two discs curving toward each other, leaving a pointed arch
   of background between them. right column: accent square over a plain one. */
.brands-motif i:nth-child(1){border-radius:0 0 79px 0}
.brands-motif i:nth-child(2){background:var(--green-glow)}
.brands-motif i:nth-child(3){border-radius:0 79px 0 0}
.brands-motif i:nth-child(4){border-radius:0}

.brands-row{
  position:relative;z-index:1;width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:3rem;flex-wrap:wrap;
  padding-left:230px;
}
.brands-row a{
  font-weight:600;font-size:1.2rem;letter-spacing:.03em;color:#AEBBB3;white-space:nowrap;
  transition:color .35s var(--ease),transform .45s var(--spring);
}
.brands-row a:hover{color:#fff;transform:translateY(-2px)}

@media(max-width:1080px){
  .brands-motif{display:none}
  .brands-row{padding-left:0;justify-content:center;gap:2.4rem}
}

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:84px;align-items:center}
.about-visual{position:relative;padding:0 0 52px}
.about-blob{
  position:absolute;z-index:0;left:-56px;bottom:-10px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(62,98,89,.2),transparent 68%);
}
.about-media{position:relative;z-index:1;width:80%;aspect-ratio:4/5;border-radius:24px;overflow:hidden;box-shadow:0 55px 95px -58px rgba(33,41,34,.85)}
.about-media img{width:100%;height:100%;object-fit:cover}

/* the second frame notches into the first; the snow border cuts the overlap */
.about-media-sm{
  position:absolute;z-index:2;right:0;bottom:0;width:47%;aspect-ratio:1/1;
  border-radius:22px;overflow:hidden;border:11px solid var(--snow);
  box-shadow:0 40px 70px -46px rgba(33,41,34,.8);
}
.about-media-sm img{width:100%;height:100%;object-fit:cover}

.about-stat{
  position:absolute;z-index:3;left:-28px;top:8%;
  background:var(--paper);border-radius:18px;padding:1.3rem 1.7rem;
  box-shadow:0 34px 64px -36px rgba(33,41,34,.85);
}
.about-stat b{font-weight:700;font-size:2.2rem;line-height:1;display:block;color:var(--green)}
.about-stat>span{font-size:.74rem;color:var(--muted);letter-spacing:.05em}

/* straddles the main frame's top-right corner rather than floating beside it */
.seal{
  position:absolute;z-index:4;left:67%;top:-34px;width:116px;height:116px;
  border-radius:50%;display:grid;place-items:center;
  box-shadow:0 26px 50px -26px rgba(33,41,34,.9);
}
.seal-text{position:absolute;inset:0;width:100%;height:100%;animation:spin 22s linear infinite}
.seal-text text{font-family:var(--font);font-size:9.4px;font-weight:600;letter-spacing:.13em;fill:var(--snow)}
.seal-mark{width:27px;height:36px}

.about-list{list-style:none;margin:2.2rem 0 2.6rem;display:grid;gap:1rem}
.about-list li{display:flex;gap:.9rem;align-items:flex-start;font-size:.98rem}
.about-list .ico{width:20px;height:20px;margin-top:.32rem;color:var(--green);stroke:currentColor;fill:none}

.about-cta{display:flex;align-items:center;gap:1.8rem;flex-wrap:wrap}
.about-phone{display:flex;align-items:center;gap:.9rem}
.ap-ico{
  width:48px;height:48px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--green);
  transition:background .4s var(--ease),color .4s,border-color .4s,transform .45s var(--spring);
}
.ap-ico .ico{width:19px;height:19px;stroke:currentColor;fill:none}
.about-phone:hover .ap-ico{background:var(--green);border-color:var(--green);color:#fff;transform:translateY(-3px)}
.about-phone small{display:block;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.about-phone b{font-weight:600;font-size:1.02rem}

/* ============================================================
   BENEFITS
   ============================================================ */
.benefits{background:var(--paper)}
.ben-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.ben{padding:56px 44px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden;transition:background .5s var(--ease)}
.ben:last-child{border-right:0}
.ben::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.ben:hover{background:var(--snow)}
.ben:hover::before{transform:none}
.ben-n{font-weight:600;font-size:.74rem;letter-spacing:.2em;color:var(--green)}
.ben h3{font-size:1.4rem;margin:1.5rem 0 .8rem}
.ben p{color:var(--muted);font-size:.95rem}
.ben-ico{width:52px;height:52px;color:var(--green);stroke:currentColor;fill:none;stroke-width:1.5;margin-top:2rem;transition:transform .55s var(--spring)}
.ben:hover .ben-ico{transform:translateY(-6px) rotate(-6deg)}

/* ============================================================
   PILLARS (dark strip)
   ============================================================ */
.pillars{background:var(--ink);color:var(--snow);padding:0}
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.pillar{padding:74px 46px;border-right:1px solid var(--line-dark);position:relative;overflow:hidden;transition:background .5s var(--ease)}
.pillar:last-child{border-right:0}
.pillar:hover{background:rgba(239,246,238,.04)}
.pillar h3{font-size:1.5rem;margin-bottom:.7rem;color:var(--snow)}
.pillar p{color:var(--muted-dark);font-size:.93rem}
.pillar .ico{width:36px;height:36px;color:var(--green-glow);stroke:currentColor;fill:none;stroke-width:1.5;margin-bottom:1.6rem}
.pillar-i{position:absolute;top:30px;right:36px;font-weight:700;font-size:3.4rem;color:rgba(239,246,238,.05);line-height:1}

/* ============================================================
   SERVICES — expanding panels
   ============================================================ */
.panels{display:flex;gap:16px;height:540px}
.panel{
  position:relative;flex:1 1 0;min-width:0;border-radius:20px;overflow:hidden;cursor:pointer;
  background:linear-gradient(168deg,#33534B 0%,var(--ink) 76%);
  transition:flex-grow .8s var(--ease);
}
/* a soft lamp behind the glyph, brightening as the panel wakes up */
.panel::before{
  content:"";position:absolute;left:50%;top:-6%;width:150%;aspect-ratio:1;
  transform:translateX(-50%) scale(1);pointer-events:none;
  background:radial-gradient(circle,rgba(123,163,150,.24),transparent 60%);
  transition:opacity .7s var(--ease),transform .9s var(--ease);opacity:.7;
}
.panel.is-open::before{opacity:1}
.panel:hover::before{opacity:1;transform:translateX(-50%) scale(1.12)}

/* number and title nudge with the art */
.panel-n{transition:color .5s var(--ease),transform .6s var(--spring)}
.panel:hover .panel-n{transform:translateY(-3px);color:#BFD6CB}
.panel-title{transition:transform .6s var(--spring)}
.panel:not(.is-open):hover .panel-title{transform:translateY(-6px)}

/* Service panels now use full photographic artwork rather than centered glyphs,
   so let the image fill the card and keep motion subtle. */
.panel-art{
  position:absolute;inset:0;
  width:100%;height:100%;max-width:none;
  transform:none;
  transition:transform .9s var(--ease);
}
.panel:not(.is-open) .panel-art{top:0}
.panel-img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:none;opacity:.88;
  transform:scale(1.03);
  transition:transform 1s var(--ease),opacity .6s var(--ease),filter .6s var(--ease);
}
.panel:hover .panel-art,.panel.is-open .panel-art,.panel.is-open:hover .panel-art{transform:none}
.panel.is-open .panel-img,.panel:hover .panel-img{opacity:1;transform:scale(1.08)}

/* transparent at the top so it never washes the glyph out */
.panel::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(33,41,34,.06) 0%,rgba(33,41,34,.24) 34%,rgba(33,41,34,.92) 100%)}
.panel.is-open{flex-grow:3.7}

.panel-inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:32px}
.panel-n{position:absolute;top:30px;left:32px;font-weight:600;font-size:.74rem;letter-spacing:.2em;color:var(--green-glow)}
.panel-title{color:#fff;font-size:1.34rem;white-space:nowrap;letter-spacing:-.01em}
/* collapsed, the label stands up and reads bottom-to-top */
.panel:not(.is-open) .panel-title{writing-mode:vertical-rl;transform:rotate(180deg);margin-bottom:4px}

/* 0fr -> 1fr, so the copy contributes no height while collapsed. With a plain
   opacity:0 it still laid out -- and in a 130px-wide panel that wrapped into a
   column tall enough to shove the title off the top of the card. */
.panel-body{
  display:grid;grid-template-rows:0fr;opacity:0;pointer-events:none;
  transition:grid-template-rows .7s var(--ease),opacity .45s var(--ease);
}
.panel-body>div{overflow:hidden;min-width:380px;max-width:380px}
.panel.is-open .panel-body{grid-template-rows:1fr;opacity:1;pointer-events:auto}
.panel-body p{color:var(--muted-dark);font-size:.94rem;padding-top:1.1rem}
.panel-body .tlink{margin-top:1.4rem;color:#fff;font-size:.72rem}
.panel:focus-visible{outline:2px solid var(--green-glow);outline-offset:3px}

@media(max-width:900px){
  .panels{flex-direction:column;height:auto;gap:14px}
  .panel{flex:none;height:184px;transition:height .7s var(--ease)}
  .panel.is-open{height:376px}
  .panel:not(.is-open) .panel-title{writing-mode:horizontal-tb;transform:none;margin-bottom:0}

  .panel-art{
    left:0;right:0;top:0;
    width:100%;height:100%;
    transform:none;
    transition:transform .9s var(--ease);
  }
  .panel:not(.is-open) .panel-art{top:0}
  .panel-art .panel-img{width:100%;height:100%}
  .panel:hover .panel-art,.panel.is-open .panel-art,.panel.is-open:hover .panel-art{transform:none}

  .panel::before{width:110%;top:-30%}
  .panel:hover::before{transform:translateX(-50%) scale(1.06)}
  .panel-inner{padding:24px}
  .panel-body>div{min-width:0;max-width:78%}
  .panel-title{white-space:normal;max-width:76%}
}

/* ============================================================
   WORK SLIDER
   ============================================================ */
.work{background:var(--ink);color:var(--snow);overflow:hidden}
.slider{position:relative}
.slider-view{overflow:hidden}
.slider-track{display:flex;gap:28px;transition:transform .85s var(--ease);will-change:transform}
.slide{flex:0 0 calc((100% - 56px)/3);min-width:0}

.case{
  position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;
  display:flex;flex-direction:column;justify-content:flex-end;padding:34px;color:#fff;
  transition:transform .6s var(--spring);
}
.case img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform 1s var(--ease)}
.case::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(33,41,34,.1) 0%,rgba(33,41,34,.66) 52%,rgba(33,41,34,.96) 100%)}
.case>*{position:relative;z-index:2}
.case:hover img{transform:scale(1.08)}
.case:hover{transform:translateY(-10px)}
.case .tag{font-weight:600;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--green-glow)}
.case h3{font-size:1.45rem;margin:.7rem 0 0;color:#fff}
.case .metric{display:flex;gap:2rem;margin-top:1.3rem}
.case .metric b{font-weight:700;font-size:1.4rem;display:block;line-height:1}
.case .metric span{font-size:.7rem;opacity:.76}

/* Three case cards have no photograph yet, only an icon render. Zoom past the
   glyph so it crops into abstract texture under the gradient, instead of
   reading as one giant centred icon. Swap in real photos and drop the class. */
.case--glyph img{transform:scale(1.95);object-position:center 40%;filter:saturate(.85)}
.case--glyph:hover img{transform:scale(2.08)}
.case--glyph::after{background:linear-gradient(180deg,rgba(33,41,34,.4) 0%,rgba(33,41,34,.8) 52%,rgba(33,41,34,.97) 100%)}

.slider-nav{display:flex;gap:.8rem}
.sbtn{
  width:56px;height:56px;border-radius:50%;border:1px solid var(--line-dark);
  display:grid;place-items:center;color:var(--snow);
  transition:background .4s var(--ease),border-color .4s,color .4s,transform .4s var(--spring);
}
.sbtn .ico{width:20px;height:20px;stroke:currentColor;fill:none}
.sbtn:hover:not(:disabled){background:var(--green);border-color:var(--green);transform:translateY(-3px)}
.sbtn:disabled{opacity:.32;cursor:not-allowed}
.work .sbtn{color:var(--snow)}

/* ============================================================
   STATS
   ============================================================ */
.stats{background:var(--green);color:#fff;position:relative;overflow:hidden;padding:110px 0}
.stats::before{content:"";position:absolute;inset:0;background:url('pattern-analytics.jpg') center/cover no-repeat;opacity:.14;mix-blend-mode:luminosity}
.stats .wrap{position:relative;z-index:1}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;text-align:center}
.stat b{font-weight:700;font-size:clamp(2.4rem,5vw,3.8rem);display:block;line-height:1}
.stat>span{opacity:.85;font-size:.82rem;letter-spacing:.05em}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi{background:var(--paper)}
.quote{background:var(--snow);border:1px solid var(--line);border-radius:var(--r);padding:40px;height:100%;display:flex;flex-direction:column;transition:border-color .5s,box-shadow .5s var(--ease),transform .6s var(--spring)}
.quote:hover{border-color:var(--green-glow);box-shadow:0 40px 70px -46px rgba(33,41,34,.6);transform:translateY(-8px)}
.stars{display:flex;gap:.28rem;color:var(--green);margin-bottom:1.4rem}
.stars svg{width:17px;height:17px;fill:currentColor}
.quote p{font-size:1.04rem;line-height:1.75;flex:1}
.quote-who{display:flex;align-items:center;gap:1rem;margin-top:2rem}
.quote-who img{width:60px;height:60px;border-radius:50%;object-fit:cover;flex:none;border:3px solid var(--paper);box-shadow:0 0 0 2px var(--green)}
.quote-who b{font-weight:600;font-size:.96rem;display:block}
.quote-who small{color:var(--muted);font-size:.82rem}

/* ============================================================
   TEAM
   ============================================================ */
.team-showcase{background:linear-gradient(180deg,#F3F8F1 0%,#EFF6EE 100%)}
.team-showcase .head-row{align-items:center}
.team-showcase .section-head{max-width:820px}
.team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.team-unit{display:flex;flex-direction:column;gap:16px}
.team-card{
  position:relative;border-radius:28px;overflow:hidden;aspect-ratio:1/1.12;
  background:linear-gradient(160deg,#E4EDE4,#D3E0D4);
  border:1px solid var(--line);box-shadow:0 36px 70px -56px rgba(33,41,34,.32)
}
.team-card img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 22%;transition:transform 1s var(--ease)
}
.team-unit:hover .team-card img{transform:scale(1.05)}
/* faint grounding wash at the base of each portrait */
.team-card::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(180deg,transparent,rgba(33,41,34,.1))}
.team-meta{position:static;transform:none;opacity:1;color:var(--ink);padding:0 4px}
.team-meta b{font-weight:700;font-size:1.08rem;display:block;letter-spacing:-.02em}
.team-meta small{display:block;margin-top:.28rem;font-size:.82rem;color:var(--muted);opacity:1}

/* ============================================================
   FAQ — heading parked on the left, accordion on the right
   ============================================================ */
.faq-split{background:var(--paper)}
.faq-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:96px;align-items:start}
.faq-head{position:sticky;top:130px}
.faq-title{text-transform:uppercase;font-weight:700;font-size:clamp(2.3rem,4.4vw,3.8rem);line-height:.95;letter-spacing:-.01em}
.faq-intro{color:var(--muted);margin-top:1.7rem;font-size:.95rem;max-width:32ch}

/* the reference uses a bare +/- glyph, not a bordered pill */
.faq-split .faq-q{padding:26px 0;font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;gap:22px;line-height:1.45}
.faq-split .faq-sign{width:22px;height:22px;border:0;background:none;border-radius:0}
.faq-split .faq-item.open .faq-sign{background:none}
.faq-split .faq-sign i{background:var(--ink)}
.faq-split .faq-sign i:nth-child(1){width:16px;height:2px}
.faq-split .faq-sign i:nth-child(2){width:2px;height:16px}
.faq-split .faq-item.open .faq-sign i{background:var(--ink)}
/* the open question stays ink in the reference; only hover tints green */
.faq-split .faq-item.open .faq-q{color:var(--ink)}
.faq-split .faq-q:hover{color:var(--green)}
.faq-split .faq-a p{padding-bottom:28px;font-size:.95rem;color:var(--muted);max-width:66ch}
.faq-split .faq-item:first-child{border-top:1px solid var(--line)}

@media(max-width:980px){
  .faq-grid{grid-template-columns:1fr;gap:44px}
  .faq-head{position:static}
}

/* ============================================================
   FAQ (shared accordion mechanics)
   ============================================================ */
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:30px 0;text-align:left;font-weight:600;font-size:1.1rem;
  transition:color .35s;
}
.faq-q:hover,.faq-item.open .faq-q{color:var(--green)}
.faq-sign{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);flex:none;display:grid;place-items:center;position:relative;transition:background .4s var(--ease),border-color .4s}
.faq-item.open .faq-sign{background:var(--green);border-color:var(--green)}
.faq-sign i{position:absolute;background:currentColor;border-radius:2px;transition:transform .45s var(--spring),background .4s}
.faq-sign i:nth-child(1){width:13px;height:1.8px}
.faq-sign i:nth-child(2){width:1.8px;height:13px}
.faq-item.open .faq-sign i{background:#fff}
.faq-item.open .faq-sign i:nth-child(2){transform:rotate(90deg)}
/* 0fr -> 1fr animates without hard-coding a max-height */
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{color:var(--muted);padding-bottom:30px;max-width:70ch;font-size:.98rem}

/* ============================================================
   CTA — full-bleed ink band, concentric rings bleeding off the right
   ============================================================ */
/* The footer is ink too, so padding alone just made one taller slab. The
   bottom margin lets the page background show through as a real gap. */
.cta-band{
  position:relative;overflow:hidden;background:var(--ink);color:var(--snow);
  padding:158px 0 168px;text-align:center;
  margin-bottom:clamp(56px,7vw,112px);
}
/* the extra right padding nudges the centred block clear of the rings */
.cta-band .wrap{position:relative;z-index:1;padding-right:clamp(28px,16vw,268px)}
.cta-band h2{
  color:var(--snow);text-transform:uppercase;font-weight:700;
  font-size:clamp(1.85rem,3.3vw,2.95rem);
  line-height:1.1;letter-spacing:-.005em;margin:0 auto;
}

/* the rings are one SVG so the two strokes always overlap identically */
.cta-rings{position:absolute;z-index:0;top:-120px;right:-190px;width:660px;height:660px;pointer-events:none}
.cta-rings svg{width:100%;height:100%;overflow:visible}
/* a sliver of a third ring clipped by the bottom-right corner */
.cta-arc{position:absolute;z-index:0;right:-56px;bottom:-92px;width:190px;height:190px;border-radius:50%;border:28px solid var(--green);pointer-events:none}

.cta-link{
  display:inline-flex;align-items:center;gap:.9rem;margin-top:2.7rem;padding-bottom:.6rem;
  border-bottom:1.5px solid var(--snow);
  font-weight:600;font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.cta-link svg{width:34px;height:12px;stroke:currentColor;fill:none;stroke-width:1.4;transition:transform .45s var(--spring)}
.cta-link:hover{color:var(--green-glow);border-color:var(--green-glow)}
.cta-link:hover svg{transform:translateX(6px)}

@media(max-width:900px){
  .cta-band{padding:110px 0 120px}
  .cta-rings{width:420px;height:420px;top:-80px;right:-170px;opacity:.85}
  .cta-arc{width:120px;height:120px;border-width:20px;right:-40px;bottom:-60px}
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{position:relative;background:var(--ink);color:var(--snow);padding:110px 0 34px}
.footer a{color:#B9C6BF;transition:color .3s}
.footer a:hover{color:#fff}
.f-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.25fr;gap:52px}
.footer .brand{margin-bottom:1.4rem}
.f-about{color:var(--muted-dark);max-width:34ch;font-size:.93rem}
.f-col h4{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--green-glow);margin-bottom:1.4rem;font-weight:600}
.f-col ul{list-style:none;display:flex;flex-direction:column;gap:.8rem;font-size:.93rem}
.f-viewall{display:inline-flex;align-items:center;gap:.4rem;margin-top:.35rem;color:var(--green-glow)!important;font-weight:600}
.f-viewall:hover{color:#fff!important}
.f-news{display:flex;margin-top:1.4rem;background:rgba(239,246,238,.07);border-radius:999px;padding:5px;max-width:300px;transition:background .35s}
.f-news:focus-within{background:rgba(239,246,238,.13)}
.f-news input{flex:1;min-width:0;background:none;border:0;color:#fff;padding:.6rem 1rem;font-family:var(--font);outline:none}
.f-news input::placeholder{color:#8A998F}
.f-news button{background:var(--green);border-radius:999px;padding:.65rem 1.3rem;color:#fff;font-weight:600;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;transition:background .35s}
.f-news button:hover{background:var(--green-lift)}
.f-bottom{border-top:1px solid var(--line-dark);margin-top:70px;padding-top:28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:.83rem;color:#8A998F}
.f-social{display:flex;gap:.8rem}
.f-social a{width:42px;height:42px;border:1px solid var(--line-dark);border-radius:50%;display:grid;place-items:center;transition:background .4s,border-color .4s,transform .45s var(--spring)}
.f-social a:hover{background:var(--green);border-color:var(--green);transform:translateY(-5px)}

/* ============================================================
   INTERIOR PAGE HERO + BREADCRUMBS
   ============================================================ */
/* Compact, centred banner. It used to be a very tall band with the title and
   lead pinned hard left, which left most of the width and a deep strip along the
   bottom completely empty. Centring the column and cutting the padding turns it
   into a proportionate header. */
.page-hero{position:relative;overflow:hidden;padding:158px 0 64px;background:linear-gradient(180deg,#E6EFE6,var(--snow));text-align:center}
.page-hero::before{content:"";position:absolute;inset:0;background:url('pattern-analytics.jpg') center/cover no-repeat;opacity:.05}
.page-hero::after{
  content:"";position:absolute;left:50%;bottom:-190px;transform:translateX(-50%);
  width:520px;height:320px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(62,98,89,.16),transparent 70%)
}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{margin:0 auto 1.1rem;font-size:clamp(2rem,3.6vw,3.2rem);font-weight:700;max-width:20ch}
.page-hero .lead{max-width:60ch;margin-inline:auto}
.page-hero .crumbs ol{justify-content:center}

.crumbs{margin-bottom:2rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.85rem;font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.crumbs li{display:flex;align-items:center;gap:.85rem;color:var(--muted)}
/* a dot separator, not a "/" -- no glyph to misalign, no stray slashes */
.crumbs li+li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green);opacity:.55;flex:none}
.crumbs a{transition:color .3s}
.crumbs a:hover{color:var(--green)}
.crumbs [aria-current="page"]{color:var(--green);font-weight:600}

/* generic card, still used by the inner pages */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:38px;transition:transform .55s var(--spring),box-shadow .55s var(--ease),border-color .5s}
.card:hover{transform:translateY(-10px);box-shadow:0 40px 70px -44px rgba(33,41,34,.55);border-color:var(--green-glow)}

/* ============================================================
   BLOG (CMS)
   ============================================================ */
.postcard{
  display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:transform .55s var(--spring),box-shadow .55s var(--ease),border-color .5s;
}
.postcard:hover{transform:translateY(-10px);box-shadow:0 40px 70px -44px rgba(33,41,34,.55);border-color:var(--green-glow)}
.postcard-media{height:210px;overflow:hidden;background:var(--green-deep);flex:none;position:relative}
.postcard-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.postcard:hover .postcard-media img{transform:scale(1.06)}
.postcard-fallback{position:absolute;inset:0;display:grid;place-items:center}
.postcard-fallback svg{width:46px;height:62px}
.postcard-body{padding:28px 28px 30px;display:flex;flex-direction:column;flex:1}
.postcard-date{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green);font-weight:600}
.postcard h2,.postcard h3{font-size:1.24rem;margin:.8rem 0 .6rem;letter-spacing:-.015em;font-weight:800}
.postcard p{color:var(--muted);font-size:.94rem;flex:1}
.postcard .tlink{margin-top:1.5rem;align-self:flex-start;font-size:.72rem}
.postcard:hover .tlink{color:var(--green)}

.pager{display:flex;align-items:center;justify-content:center;gap:1.6rem;margin-top:60px;flex-wrap:wrap}
.pager-count{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}

.post-hero-img{width:100%;height:auto;border-radius:var(--r);margin-bottom:52px}

/* ---------- rendered post / page body ---------- */
.prose{font-size:1.08rem;line-height:1.78;color:var(--ink)}
.prose > * + *{margin-top:1.35rem}
.prose h2{font-size:1.9rem;margin-top:2.8rem;letter-spacing:-.02em}
.prose h3{font-size:1.4rem;margin-top:2.2rem}
.prose p{color:#3d453f}
.prose a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--green-deep)}
.prose ul,.prose ol{padding-left:1.4rem}
.prose li + li{margin-top:.5rem}
.prose img{border-radius:14px;margin-block:1.8rem}
.prose blockquote{border-left:3px solid var(--green);padding:.2rem 0 .2rem 1.5rem;color:var(--muted);font-size:1.15rem}
.prose code{background:var(--snow);padding:.15em .4em;border-radius:5px;font-size:.9em;font-family:ui-monospace,Menlo,Consolas,monospace}
.prose pre{background:var(--ink);color:var(--snow);padding:20px 24px;border-radius:12px;overflow-x:auto}
.prose pre code{background:none;padding:0;color:inherit}
.prose hr{border:0;border-top:1px solid var(--line);margin-block:2.4rem}

/* ============================================================
   GRID HELPERS
   ============================================================ */
.grid{display:grid;gap:28px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .hero-grid,.about-grid{grid-template-columns:1fr;gap:64px}
  .hero{padding-top:146px}
  .hero-copy{max-width:none}
  .hero h1{max-width:none}
  .hero-stage{max-width:680px;margin-left:auto;padding-left:54px}
  .hero-stage::before{inset:40px 24px 0 104px}
  .hero-photo-main{width:min(100%,540px);height:600px}
  .hero-note-top{left:0}
  .hero-note-bottom{right:0}
  .about-visual{max-width:560px}
  .slide{flex-basis:calc((100% - 28px)/2)}
  .g4,.team-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .section{padding:92px 0}
  .g3{grid-template-columns:repeat(2,1fr)}
  .ben-grid,.pillar-grid{grid-template-columns:1fr}
  .ben,.pillar{border-right:0;border-bottom:1px solid var(--line)}
  .pillar{border-bottom:1px solid var(--line-dark)}
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:48px}
  .f-grid{grid-template-columns:1fr 1fr;gap:40px}
  .head-row{flex-direction:column;align-items:flex-start}
  .burger{display:flex}
  .nav{padding-top:12px}
  .nav-in{height:78px;padding:0 18px;border-radius:24px}
  .nav .brand-word b{font-size:.96rem}
  .nav-links{
    position:fixed;inset:102px 20px auto 20px;flex-direction:column;align-items:stretch;
    /* the services accordion can outgrow the drawer, so it scrolls */
    max-height:calc(100dvh - 132px);overflow-y:auto;overscroll-behavior:contain;
    background:rgba(255,255,255,.94);backdrop-filter:blur(18px);padding:24px;gap:1.25rem;
    border:1px solid rgba(33,41,34,.08);border-radius:26px;box-shadow:0 34px 70px -54px rgba(33,41,34,.45);
    transform:translateY(-180%);transition:transform .55s var(--ease);
  }
  .nav-links.open{transform:none}
  .nav-links>li:not(.nav-cta){flex-wrap:wrap;padding:0}
  .nav-links>li:not(.nav-cta)>a{height:auto;overflow:visible;line-height:1.4}
  .nav-links>li:not(.nav-cta)>a span+span{display:none}
  .nav-cta{margin-left:0;margin-top:.2rem}

  /* In the drawer the mega stops being a popover and becomes an accordion.
     display:none is what gates it here, so the desktop :hover / :focus-within
     rules (which only touch opacity and visibility) cannot spring it open on
     a tap-held link. */
  .mega-toggle{width:36px;height:36px;margin-left:auto}
  .mega{
    position:static;flex-basis:100%;display:none;
    opacity:1;visibility:visible;transform:none;transition:none;
    margin-top:10px;padding:6px 0 0;
    background:none;backdrop-filter:none;box-shadow:none;
    border:0;border-top:1px solid var(--line);border-radius:0;
  }
  .has-mega.is-open .mega{display:block}
  .mega-in{grid-template-columns:1fr;gap:14px}
  .mega-col.is-split{grid-column:auto}
  .mega-col.is-split>ul{grid-template-columns:1fr}
  .mega-lead{display:none}
  .mega-foot{margin-top:12px}
  .hero-metrics{grid-template-columns:1fr 1fr}
  .hero-stage{min-height:620px;padding-left:34px}
  .hero-stage::before{inset:34px 18px 0 64px}
  .hero-photo-main{width:min(100%,470px);height:540px}
  .hero-photo-secondary{width:210px;height:270px}
  .hero-note-top{max-width:240px}
  .hero-note-bottom{width:320px}
}
@media(max-width:640px){
  html{font-size:16.5px}
  .g2,.g3,.g4,.team-grid{grid-template-columns:1fr}
  .slide{flex-basis:100%}
  .f-grid{grid-template-columns:1fr}
  .cta{padding:70px 26px;border-radius:24px}
  .ben,.pillar{padding:44px 28px}
  .hero{padding-top:132px}
  .hero h1{max-width:none}
  .hero-actions{flex-direction:column;align-items:flex-start}
  .hero-metrics{grid-template-columns:1fr;gap:14px}
  .quote{padding:30px}
  .hero-stage{min-height:auto;padding:0;display:grid;gap:16px}
  .hero-stage::before{display:none}
  .hero-photo,.hero-note{position:relative;top:auto;right:auto;bottom:auto;left:auto;width:auto}
  .hero-photo-main{height:auto;aspect-ratio:4/5}
  .hero-photo-secondary{display:none}
  .hero-note-top,.hero-note-bottom{max-width:none}
  .hero-note-bottom{grid-template-columns:82px 1fr}
  .about-stat{left:0;top:auto;bottom:-8px;padding:1rem 1.25rem}
  .about-stat b{font-size:1.7rem}
  .seal{width:88px;height:88px;top:-22px;right:2%}
  .about-cta{gap:1.2rem}
}

/* ============================================================
   COVER-IMAGE FILL FIX

   Elementor's frontend stylesheet ships `.elementor img{height:auto}`. That is
   the same specificity (0,1,1) as the theme's own `.x img{height:100%}` fill
   rules, but it is enqueued AFTER them, so it won the cascade and collapsed
   every cover image to its natural aspect ratio -- leaving the pale placeholder
   gaps under the hero collage and inside the team cards.

   Prefixing with `body` lifts these to (0,1,2) so the intended fill wins back,
   without resorting to !important. Keep this block last.
   ============================================================ */
body .hero-photo img,
body .hero-note-media img,
body .hero-frame img,
body .about-media img,
body .about-media-sm img,
body .team-card img,
body .case img,
body .postcard-media img{width:100%;height:100%;object-fit:cover}