/*
Theme Name: Gendana
Theme URI: https://www.gendana.com
Author: Alphabeta Solutions
Author URI: https://alphabetang.com
Description: Business theme built for Gendana Solutions Limited, covering the three services the company sells: logistics, cleaning and fumigation, and media. Elementor compatible, with a Gendana Settings panel for front-end content, team members, vacancies, logged enquiries and applications, maintenance mode and licence activation.
Version: 3.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
License: Proprietary — licensed per domain by Alphabeta Solutions
Text Domain: gendana
Tags: business, services, one-column, custom-colors, custom-menu, featured-images, theme-options, translation-ready
*/

/* WordPress core classes the editor and comments rely on */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.screen-reader-text:focus{position:static!important;width:auto;height:auto;clip:auto;
  padding:.7rem 1rem;background:var(--surf);color:var(--head);border-radius:8px;z-index:99999}
.alignleft{float:left;margin:.4rem 1.4rem 1rem 0}
.alignright{float:right;margin:.4rem 0 1rem 1.4rem}
.aligncenter{display:block;margin-inline:auto}
.alignwide{max-width:1100px;margin-inline:auto}
.alignfull{width:100%}
.wp-caption{max-width:100%}
.wp-caption-text,.wp-element-caption{font-size:.84rem;color:var(--muted);margin-top:.5rem}
.sticky,.gallery-caption,.bypostauthor{}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:1rem;top:1rem;z-index:99999}

/* ==================================================================
   GENDANA SOLUTIONS — stylesheet
   Brand is exactly four colours: #FFFFFF #3197EC #12D6F8 #111459.
   Everything else is a shade or tint of those.
================================================================== */

/* ---------------- tokens ---------------- */
:root{
  --blue:#3197EC; --cyan:#12D6F8; --navy:#111459; --white:#fff;
  --grad:linear-gradient(90deg,#3197EC 0%,#12D6F8 100%);
  --grad-135:linear-gradient(135deg,#3197EC 0%,#12D6F8 100%);

  /* Burnt copper, the one warm colour on the site. It is reserved for the
     things a visitor is meant to act on: the primary button, the page they
     are currently on, and the benefit ticks. Everything structural stays
     blue, so the warm colour never has to compete for attention. */
  --amber-a:#E67E22; --amber-b:#F39C12;
  --amber-grad:linear-gradient(100deg,#E67E22 0%,#F39C12 52%,#E67E22 100%);
  --amber-ink:#241403;          /* 5.9:1 on #E67E22 */

  /* Thin-line icons used in place of list bullets. Painted with mask +
     currentColor so they follow the theme instead of being baked in. */
  --ico-check:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.6 5.1 5.1L20 6.8'/%3E%3C/svg%3E");
  --ico-arrow:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h14M12.4 5.4 19 12l-6.6 6.6'/%3E%3C/svg%3E");
  --f-display:"Outfit","Segoe UI",system-ui,sans-serif;
  --f-body:"Manrope","Segoe UI",system-ui,sans-serif;
  --f-mono:"DM Mono",ui-monospace,monospace;
  --r:14px; --r-lg:22px;
  --wrap:1240px; --gut:clamp(20px,5vw,48px);
  --ease:cubic-bezier(.22,1,.36,1);
}

[data-theme="dark"]{
  --bg:#080A2B; --bg-2:#0E1147; --surf:#141a5c; --surf-2:#1B2170;
  --text:#EEF1FB; --head:#fff; --muted:#8E93B8;
  --line:rgba(49,151,236,.20); --line-2:rgba(49,151,236,.38);
  --accent:#12D6F8; --accent-ink:#0A0C35;
  --amber-text:#F39C12;         /* 7.8:1 on #080A2B */
  --amber-line:rgba(230,126,34,.42);
  --glow:0 0 60px -12px rgba(18,214,248,.45);
  --amber-glow:0 14px 38px -14px rgba(230,126,34,.68); --danger:#FF8A97;
  --card:linear-gradient(160deg,rgba(49,151,236,.13),rgba(17,20,89,.55));
  --shadow:0 24px 60px -28px rgba(0,0,0,.85);
}
[data-theme="light"]{
  --bg:#F4F6FC; --bg-2:#EAEFFA; --surf:#fff; --surf-2:#F0F3FB;
  --text:#2B3161; --head:#111459; --muted:#5F6790;
  --line:rgba(17,20,89,.13); --line-2:rgba(49,151,236,.42);
  --accent:#1C6BB5; --accent-ink:#fff;
  --amber-text:#A85408;         /* 4.8:1 on #F4F6FC */
  --amber-line:rgba(168,84,8,.38);
  --glow:0 0 50px -18px rgba(49,151,236,.5);
  --amber-glow:0 14px 34px -16px rgba(168,84,8,.5); --danger:#B3182C;
  --card:linear-gradient(160deg,#fff,#F2F5FD);
  --shadow:0 22px 48px -26px rgba(17,20,89,.3);
}

/* ---------------- base ---------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:400 clamp(16px,.36vw + 15px,18.5px)/1.72 var(--f-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background .45s var(--ease),color .45s var(--ease);
}
body.is-locked{overflow:hidden}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--head);line-height:1.08;
  letter-spacing:-.03em;font-weight:700;margin:0 0 .5em}
h1{font-size:clamp(2.35rem,5.4vw,4.4rem);line-height:1.04}
h2{font-size:clamp(1.8rem,3.2vw,2.8rem)}
h3{font-size:clamp(1.22rem,1.6vw,1.62rem);letter-spacing:-.02em;line-height:1.18}
h4{font-size:clamp(1.05rem,1.2vw,1.22rem);letter-spacing:-.015em;line-height:1.3}
p{margin:0 0 1.15em;max-width:70ch}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
::selection{background:var(--cyan);color:#0A0C35}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding:clamp(72px,10vw,140px) 0;position:relative}
.eyebrow{font:500 .72rem/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:.7rem;margin-bottom:1.4rem}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--grad);border-radius:2px}
.lead{font-size:clamp(1.1rem,1.15vw,1.35rem);line-height:1.68;color:var(--muted);max-width:60ch}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------- buttons ---------------- */
/*
 * Four things move on a button, all on the same easing so they read as one
 * gesture: the whole control drifts a few pixels toward the pointer, the
 * gradient slides under it, a specular band crosses the face, and a soft
 * highlight tracks the cursor. main.js feeds --mx/--my/--px/--py; with the
 * script absent, or under prefers-reduced-motion, every one of them sits at
 * its resting value and the button is simply a button.
 */
.btn{--mx:0px;--my:0px;--lift:0px;--sc:1;--px:50%;--py:50%;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font:600 .98rem/1 var(--f-body);letter-spacing:-.01em;padding:1.05rem 1.75rem;border-radius:999px;
  border:1px solid transparent;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;
  transform:translate3d(var(--mx),calc(var(--my) + var(--lift)),0) scale(var(--sc));
  transition:transform .42s var(--ease),box-shadow .42s var(--ease),
    background-position .75s var(--ease),color .3s,border-color .3s}
.btn:hover{--lift:-3px}
.btn:active{--lift:-1px;--sc:.975;transition-duration:.12s}
.btn > span{position:relative;z-index:2}

/* the light that crosses the face */
.btn::before{content:"";position:absolute;top:-60%;bottom:-60%;left:-30%;width:34%;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transform:translateX(-260%) skewX(-18deg);opacity:0;pointer-events:none}
.btn:hover::before{animation:btnSheen .95s var(--ease) .06s}
@keyframes btnSheen{
  0%{transform:translateX(-260%) skewX(-18deg);opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{transform:translateX(560%) skewX(-18deg);opacity:0}
}

/* the highlight that follows the cursor */
.btn::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120px circle at var(--px) var(--py),rgba(255,255,255,.30),transparent 62%);
  opacity:0;transition:opacity .45s var(--ease)}
.btn:hover::after{opacity:1}

/* primary — the only warm control on the page */
.btn--grad{color:var(--amber-ink);
  background-image:var(--amber-grad);background-size:220% 100%;background-position:0 0;
  box-shadow:var(--amber-glow)}
.btn--grad:hover{background-position:100% 0;box-shadow:0 18px 44px -14px rgba(230,126,34,.8)}
.btn--grad:active{box-shadow:0 8px 20px -10px rgba(230,126,34,.7)}

/* secondary — stays cool, so the hierarchy never wobbles */
.btn--ghost{border-color:var(--line-2);color:var(--head);background:transparent}
.btn--ghost::after{background:radial-gradient(150px circle at var(--px) var(--py),
  color-mix(in srgb,var(--accent) 22%,transparent),transparent 68%)}
.btn--ghost::before{background:linear-gradient(90deg,transparent,
  color-mix(in srgb,var(--accent) 30%,transparent),transparent)}
.btn--ghost:hover{border-color:var(--cyan);color:var(--accent)}

.btn--sm{padding:.78rem 1.3rem;font-size:.86rem}

/* Fine pointers only. On a touch screen there is no cursor to follow, and a
   drifting button under a thumb is just a button that moves away. */
@media(hover:none),(pointer:coarse){
  .btn{--mx:0px !important;--my:0px !important}
  .btn::after{display:none}
}

/* ---------------- preloader ---------------- */
#preloader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:var(--bg);transition:opacity .6s var(--ease),visibility .6s}
#preloader.done{opacity:0;visibility:hidden}
.pre-box{display:grid;justify-items:center;gap:1.7rem}
.pre-ring{position:relative;width:132px;height:132px}
.pre-ring::before,.pre-ring::after{content:"";position:absolute;border-radius:50%}
.pre-ring::before{inset:0;border:1px solid var(--line)}
.pre-ring::after{inset:0;border:2px solid transparent;border-top-color:var(--cyan);
  border-right-color:var(--blue);animation:preSpin 1.15s linear infinite}
@keyframes preSpin{to{transform:rotate(360deg)}}
.pre-mark{position:absolute;inset:0;margin:auto;width:74px;height:74px;display:block;
  overflow:visible;transform-origin:center;
  animation:markIn 1s var(--ease) both, markBreathe 2.6s 1s ease-in-out infinite}
.pre-mark path{fill:url(#preGrad)}   /* never animate the path: its transform
                                        attribute carries the coordinate flip */
@keyframes markIn{from{opacity:0;transform:scale(.4) rotate(-40deg)}to{opacity:1;transform:none}}
@keyframes markBreathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.07);opacity:.82}}
.pre-word{display:flex;gap:.34em;font:600 .78rem/1 var(--f-mono);letter-spacing:.3em;
  text-transform:uppercase;color:var(--muted)}
.pre-word b{font-weight:600;opacity:0;transform:translateY(8px);
  animation:preLetter .5s var(--ease) forwards}
@keyframes preLetter{to{opacity:1;transform:none}}
#preloader.done .pre-box{transform:scale(.94);opacity:0;transition:all .5s var(--ease)}

/* ---------------- header ---------------- */
.hdr{position:fixed;inset:0 0 auto;z-index:900;transition:background .4s var(--ease),
  border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
.hdr.stuck{background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(18px) saturate(150%);border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;gap:1.4rem;height:76px}
.brand{display:flex;align-items:center;gap:.65rem;margin-right:auto;flex-shrink:0}
.brand svg{width:36px;height:36px;flex-shrink:0}
.brand b{font:700 1.18rem/1 var(--f-display);letter-spacing:-.04em;color:var(--head)}
.brand i{display:block;font:500 .53rem/1 var(--f-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-top:4px;font-style:normal}

.nav{display:flex;gap:.35rem;align-items:center}
.nav a{position:relative;padding:.55rem .85rem;font-size:.92rem;font-weight:500;color:var(--text);
  border-radius:999px;transition:color .28s}
.nav a::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:.28rem;height:1.5px;
  background:var(--grad);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease)}
.nav a:hover{color:var(--head)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--head)}

.hdr__act{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.tgl{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:var(--head);cursor:pointer;
  transition:border-color .3s,transform .4s var(--ease)}
.tgl:hover{border-color:var(--cyan);transform:rotate(18deg)}
.tgl svg{width:18px;height:18px}
[data-theme="dark"] .tgl .i-sun{display:block}[data-theme="dark"] .tgl .i-moon{display:none}
[data-theme="light"] .tgl .i-sun{display:none}[data-theme="light"] .tgl .i-moon{display:block}

.burger{display:none;width:42px;height:42px;border:1px solid var(--line);background:none;
  border-radius:50%;cursor:pointer;position:relative}
.burger span{position:absolute;left:12px;width:18px;height:1.8px;background:var(--head);border-radius:2px;
  transition:transform .4s var(--ease),opacity .25s}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:20px}.burger span:nth-child(3){top:25px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:890;background:var(--bg);
  padding:104px var(--gut) 40px;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .4s var(--ease),transform .45s var(--ease),visibility .4s}
.drawer.open{opacity:1;visibility:visible;transform:none}
.drawer a.dl{display:flex;align-items:baseline;gap:.9rem;padding:.75rem 0;
  font:600 clamp(1.7rem,7vw,2.4rem)/1.1 var(--f-display);letter-spacing:-.035em;color:var(--head);
  border-bottom:1px solid var(--line);opacity:0;transform:translateY(14px)}
.drawer.open a.dl{animation:dIn .5s var(--ease) forwards}
.drawer a.dl em{font:500 .6rem/1 var(--f-mono);font-style:normal;color:var(--accent);letter-spacing:.14em}
@keyframes dIn{to{opacity:1;transform:none}}
.drawer__cta{margin-top:2rem;display:grid;gap:.8rem}
.drawer__cta .btn{width:100%;padding:1.15rem}
.drawer__foot{margin-top:auto;padding-top:2rem;font:500 .7rem/1.8 var(--f-mono);color:var(--muted)}

/* WordPress menus: wp_nav_menu emits <li> wrappers the static build has no
   need for. These rules make either markup render identically. */
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.35rem;align-items:center}
.nav li{list-style:none;margin:0;padding:0}
.nav li > a{position:relative;padding:.55rem .85rem;font-size:.92rem;font-weight:500;
  color:var(--text);border-radius:999px;display:block;transition:color .28s}
.nav li > a::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:.28rem;height:1.5px;
  background:var(--grad);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease)}
.nav li > a:hover{color:var(--head)}
.nav li > a:hover::after,
.nav li.current-menu-item > a::after,
.nav li.current_page_item > a::after{transform:scaleX(1)}
.nav li.current-menu-item > a,.nav li.current_page_item > a{color:var(--head)}

.drawer nav ul{list-style:none;margin:0;padding:0;counter-reset:gdnav}
.drawer nav li{list-style:none;margin:0;counter-increment:gdnav}
.drawer nav li > a{display:flex;align-items:baseline;gap:.9rem;padding:.75rem 0;
  font:600 clamp(1.7rem,7vw,2.4rem)/1.1 var(--f-display);letter-spacing:-.035em;color:var(--head);
  border-bottom:1px solid var(--line);opacity:0;transform:translateY(14px)}
.drawer nav li > a::before{content:"0" counter(gdnav);font:500 .6rem/1 var(--f-mono);
  color:var(--accent);letter-spacing:.14em;flex-shrink:0}
.drawer.open nav li > a{animation:dIn .5s var(--ease) forwards}
.drawer nav li:nth-child(1) > a{animation-delay:.09s}
.drawer nav li:nth-child(2) > a{animation-delay:.145s}
.drawer nav li:nth-child(3) > a{animation-delay:.2s}
.drawer nav li:nth-child(4) > a{animation-delay:.255s}
.drawer nav li:nth-child(5) > a{animation-delay:.31s}
.drawer nav li:nth-child(6) > a{animation-delay:.365s}
.drawer nav li:nth-child(7) > a{animation-delay:.42s}
.drawer nav li.current-menu-item > a,.drawer nav li.current_page_item > a{color:var(--accent)}

/* ---------------- hero ---------------- */
.hero{padding:calc(76px + clamp(48px,8vw,90px)) 0 clamp(56px,7vw,90px);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-24%;right:-14%;width:64vw;height:64vw;
  background:radial-gradient(circle,rgba(49,151,236,.20),transparent 62%);pointer-events:none}
[data-theme="light"] .hero::before{background:radial-gradient(circle,rgba(49,151,236,.16),transparent 62%)}
.hero__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(28px,4vw,64px);align-items:center}
.hero h1{margin-bottom:1.1rem}
.hero h1 .grad-text{display:inline-block}
.hero__cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
.hero__meta{display:flex;gap:0;flex-wrap:wrap;margin-top:2.6rem;padding-top:1.8rem;position:relative}
.hero__meta::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2) 12%,var(--line-2) 88%,transparent)}
.hero__meta::after{content:"";position:absolute;top:-2px;left:0;width:78px;height:3px;border-radius:3px;
  background:var(--grad);box-shadow:var(--glow)}
.hero__meta div{position:relative;padding:0 clamp(.9rem,2.2vw,1.7rem);flex:1 1 auto;min-width:0}
.hero__meta div:first-child{padding-left:0}
.hero__meta div + div::before{content:"";position:absolute;left:0;top:.25rem;bottom:.25rem;width:1px;
  background:linear-gradient(180deg,transparent,var(--line-2) 22%,var(--line-2) 78%,transparent)}
.hero__meta div{font:500 .7rem/1.6 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hero__meta b{display:block;font:700 1.5rem/1 var(--f-display);color:var(--head);letter-spacing:-.03em;margin-bottom:.3rem}

/* signature: fragmentation → consolidation */
.mech{width:100%;height:auto;overflow:visible}
.mech .node{opacity:0}
.mech .node text{font:500 10px var(--f-mono);letter-spacing:.05em;fill:var(--muted);text-transform:uppercase}
.mech .node rect{fill:none;stroke:var(--line-2);stroke-width:1;rx:6}
.mech .spine{stroke:url(#mGrad);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:260;stroke-dashoffset:260}
.mech .band{opacity:0}
.mech .band rect{fill:var(--surf);stroke:var(--line-2);stroke-width:1;rx:9}
.mech .band .bt{font:700 17px var(--f-display);fill:var(--head);letter-spacing:-.02em}
.mech .band .bs{font:500 9.6px var(--f-mono);fill:var(--accent);letter-spacing:.07em}
.mech .core{opacity:0;transform-box:fill-box;transform-origin:center}
.mech.run .node{animation:nodeGo 1.5s var(--ease) forwards}
.mech.run .node:nth-of-type(1){animation-delay:.05s}
.mech.run .node:nth-of-type(2){animation-delay:.13s}
.mech.run .node:nth-of-type(3){animation-delay:.21s}
.mech.run .node:nth-of-type(4){animation-delay:.29s}
.mech.run .node:nth-of-type(5){animation-delay:.37s}
@keyframes nodeGo{
  0%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.9)}
  22%{opacity:1;transform:translate(var(--dx),var(--dy)) scale(1)}
  70%{opacity:1}
  100%{opacity:0;transform:translate(0,0) scale(.7)}
}
.mech.run .spine{animation:spineGo .9s .95s var(--ease) forwards}
@keyframes spineGo{to{stroke-dashoffset:0}}
.mech.run .band{animation:bandGo .7s var(--ease) forwards}
.mech.run .band:nth-of-type(1){animation-delay:1.25s}
.mech.run .band:nth-of-type(2){animation-delay:1.38s}
.mech.run .band:nth-of-type(3){animation-delay:1.51s}
@keyframes bandGo{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
.mech.run .core{animation:coreGo .8s 1.6s var(--ease) forwards}
@keyframes coreGo{from{opacity:0;transform:scale(.4) rotate(-40deg)}to{opacity:1;transform:none}}

/* ticker */
.ticker{border-block:1px solid var(--line);overflow:hidden;padding:.95rem 0;
  background:color-mix(in srgb,var(--surf) 40%,transparent)}
.ticker__row{display:flex;gap:0;width:max-content;animation:tick 42s linear infinite}
.ticker:hover .ticker__row{animation-play-state:paused}
.ticker span{font:500 .72rem/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);padding:0 1.5rem;display:flex;align-items:center;gap:1.5rem;white-space:nowrap}
.ticker span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--grad)}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------------- divisions ---------------- */
.bands{display:grid;gap:14px;margin-top:3rem}
.band-i{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  overflow:hidden;transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s}
.band-i:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.band-i[open]{border-color:var(--line-2);box-shadow:var(--shadow)}
.band-i summary{list-style:none;cursor:pointer;padding:clamp(20px,2.6vw,34px);
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,2.4vw,32px);align-items:center}
.band-i summary::-webkit-details-marker{display:none}
.band-n{font:500 .68rem/1 var(--f-mono);letter-spacing:.16em;color:var(--accent);
  writing-mode:vertical-rl;text-orientation:mixed;text-transform:uppercase}
.band-h h3{margin:0 0 .35rem;font-size:clamp(1.5rem,2.9vw,2.15rem);letter-spacing:-.035em}
.band-h p{margin:0;color:var(--muted);font-size:.95rem;max-width:52ch}
.band-tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.9rem}
.band-tags i{font:500 .64rem/1 var(--f-mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);padding:.42rem .6rem;border-radius:999px}
.band-plus{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);
  display:grid;place-items:center;color:var(--accent);flex-shrink:0;transition:transform .45s var(--ease),background .35s}
.band-i[open] .band-plus{transform:rotate(135deg);background:var(--grad);color:#06133A;border-color:transparent}
.band-body{padding:0 clamp(20px,2.6vw,34px) clamp(24px,2.6vw,34px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.4rem;
  border-top:1px solid var(--line);padding-top:1.7rem;margin-top:.4rem}
.band-body h4{font:600 .95rem/1.3 var(--f-display);margin:0 0 .45rem;color:var(--head)}
.band-body p{font-size:.9rem;color:var(--muted);margin:0}
.band-eng{grid-column:1/-1;font:500 .7rem/1.5 var(--f-mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);border-top:1px dashed var(--line);padding-top:1.1rem}

/* ---------------- advantage / venn ---------------- */
.adv{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.venn{width:100%;max-width:460px;margin-inline:auto;overflow:visible}
.venn circle{fill:none;stroke:var(--line-2);stroke-width:1.4;transition:transform 1.1s var(--ease)}
.venn .c1{transform:translateX(-16px)}.venn .c2{transform:translateX(16px)}
.venn.in .c1,.venn.in .c2{transform:none}
.venn .lens{fill:url(#vGrad);opacity:0;transition:opacity .8s .5s var(--ease)}
.venn.in .lens{opacity:.9}
.venn text{font:500 10px var(--f-mono);letter-spacing:.09em;text-transform:uppercase;fill:var(--muted)}
.venn .mid{font:600 11px var(--f-display);fill:#06133A;letter-spacing:-.01em;text-transform:none}
.adv-list{display:grid;gap:0;margin-top:1.6rem;border-top:1px solid var(--line)}
.adv-list div{padding:1rem 0;border-bottom:1px solid var(--line);display:flex;gap:1rem;align-items:baseline;
  font-weight:500;color:var(--head)}
.adv-list b{font:500 .68rem/1 var(--f-mono);color:var(--accent);letter-spacing:.1em;min-width:26px}

/* ---------------- timeline ---------------- */
.tl{margin-top:3.4rem;position:relative;padding-top:2.4rem}
.tl__track{position:absolute;top:0;left:0;right:0;height:2px;background:var(--line);border-radius:2px}
.tl__fill{height:100%;width:0;background:var(--grad);border-radius:2px;transition:width .9s var(--ease)}
.tl__row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.tl__node{position:relative}
.tl__node::before{content:"";position:absolute;top:-2.75rem;left:0;width:13px;height:13px;border-radius:50%;
  background:var(--bg);border:2px solid var(--line);transition:border-color .5s,box-shadow .5s}
.tl__node.on::before{border-color:var(--cyan);box-shadow:var(--glow)}
.tl__node b{display:block;font:500 .72rem/1 var(--f-mono);letter-spacing:.16em;color:var(--accent);margin-bottom:.6rem}
.tl__node p{margin:0;color:var(--muted);font-size:.93rem}

/* ---------------- team ---------------- */
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px;margin-top:3rem}
.tcard{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  padding:1.6rem 1.4rem;text-align:left;cursor:pointer;color:inherit;font:inherit;overflow:hidden;
  transition:transform .45s var(--ease),border-color .4s,box-shadow .45s}
.tcard::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--grad);opacity:0;transition:opacity .45s var(--ease);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.tcard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.tcard:hover::before,.tcard:focus-visible::before{opacity:1}
.tcard .shot{display:block;position:relative;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;
  margin:0 auto 1.2rem;max-width:150px;border:1px solid var(--line-2);
  background:var(--bg-2);isolation:isolate}
.tcard .shot::before{content:"";position:absolute;inset:-2px;border-radius:50%;z-index:-1;
  background:var(--grad);opacity:0;transition:opacity .45s var(--ease)}
.tcard:hover .shot::before,.tcard:focus-visible .shot::before{opacity:1}
.tcard .shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s var(--ease)}
.tcard:hover .shot img{transform:scale(1.06)}
.tcard{text-align:center}
.tcard em{position:static;display:block;margin-bottom:.9rem;text-align:center}
.tcard h3{font-size:1.05rem;margin:0 0 .3rem;letter-spacing:-.025em}
.tcard__txt{display:block;width:100%}
.tcard__role{font:500 .66rem/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block}

/* chief executive - wide horizontal card, centred above the member grid.
   Deliberately a different shape from the circular member cards below. */
.tlead{margin-top:3rem;display:flex;justify-content:center}
.tlead + .team{margin-top:2.4rem}
.tcard--lead{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);
  gap:clamp(20px,3vw,40px);align-items:center;text-align:left;
  width:100%;max-width:820px;padding:clamp(1.5rem,2.6vw,2.2rem);
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--card)),var(--card) 64%)}
.tcard--lead::before{opacity:.6}
.tcard--lead:hover::before,.tcard--lead:focus-visible::before{opacity:1}
.tcard--lead .shot{width:100%;max-width:none;aspect-ratio:1;margin:0;
  border-radius:var(--r)}
.tcard--lead .shot,.tcard--lead .shot::before,.tcard--lead .shot img{border-radius:var(--r)}
.tcard--lead .tcard__txt{display:block;width:100%}
.tcard--lead h3{font-size:clamp(1.3rem,2.2vw,1.75rem);margin:.6rem 0 .4rem}
.tcard--lead .tcard__role{font-size:.72rem;color:var(--accent)}
.tcard--lead .tcard__bio{max-height:none;margin-top:.95rem;font-size:.94rem;text-align:left}
.tcard--lead .tcard__bio::after{display:none}
.tcard--lead em{position:static;display:inline-block;margin:0 0 .2rem;text-align:left}
.tcard__badge{display:inline-flex;align-items:center;gap:.45rem;font:500 .6rem/1 var(--f-mono);
  letter-spacing:.15em;text-transform:uppercase;color:var(--accent);
  border:1px solid var(--line-2);border-radius:999px;padding:.4rem .68rem}
.tcard__badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--grad,var(--accent))}
@media(max-width:640px){
  .tcard--lead{grid-template-columns:1fr;justify-items:center;text-align:center}
  .tcard--lead .shot{width:min(200px,60vw)}
  .tcard--lead .tcard__bio{text-align:left}
}

.tcard__bio{position:relative;margin-top:.9rem;max-height:4.9em;overflow:hidden;
  font-size:.86rem;line-height:1.62;color:var(--muted);text-align:left}
.tcard__bio::after{content:"";position:absolute;inset:auto 0 0;height:2.6em;
  background:linear-gradient(180deg,transparent,var(--surf) 78%);pointer-events:none}
[data-theme="dark"] .tcard__bio::after{background:linear-gradient(180deg,transparent,#111a52 82%)}
[data-theme="light"] .tcard__bio::after{background:linear-gradient(180deg,transparent,#f4f7fd 82%)}
.tcard__more{display:inline-flex;align-items:center;gap:.4rem;margin-top:.85rem;
  font:500 .64rem/1 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.tcard__more::after{content:"→";transition:transform .35s var(--ease)}
.tcard:hover .tcard__more::after{transform:translateX(4px)}
.tcard em{position:absolute;top:1.5rem;right:1.4rem;font:500 .58rem/1 var(--f-mono);font-style:normal;
  color:var(--accent);letter-spacing:.08em}

.modal{position:fixed;inset:0;z-index:950;display:grid;place-items:center;padding:var(--gut);
  background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.modal.open{opacity:1;visibility:visible}
.modal__in{background:var(--surf);border:1px solid var(--line-2);border-radius:var(--r-lg);
  max-width:640px;width:100%;padding:clamp(24px,4vw,44px);position:relative;
  max-height:84vh;overflow-y:auto;transform:translateY(18px) scale(.98);
  transition:transform .45s var(--ease);box-shadow:var(--shadow)}
.modal.open .modal__in{transform:none}
.modal__x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:none;color:var(--head);cursor:pointer;font-size:1.1rem}
.modal__x:hover{border-color:var(--cyan);color:var(--accent)}
.modal__shot{width:112px;height:112px;border-radius:50%;overflow:hidden;margin-bottom:1.1rem;
  border:1px solid var(--line-2)}
.modal__shot img{width:100%;height:100%;object-fit:cover;display:block}
.modal h3{font-size:1.5rem;margin-bottom:.25rem}
.modal .role{font:500 .68rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1.5rem;display:block}
.modal p{color:var(--muted);font-size:.96rem;margin:0}

/* ---------------- audience filter ---------------- */
.aud__tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2.2rem}
.aud__tabs button{font:500 .85rem/1 var(--f-body);padding:.85rem 1.25rem;border-radius:999px;
  border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;
  transition:all .35s var(--ease)}
.aud__tabs button:hover{color:var(--head);border-color:var(--line-2)}
.aud__tabs button[aria-selected="true"]{background:var(--grad);color:#06133A;border-color:transparent;font-weight:600}
.aud__note{font-size:1.05rem;color:var(--head);margin-bottom:1.6rem;font-weight:500;max-width:56ch}
.aud__out{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.aud__card{border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;background:var(--card);
  animation:fadeUp .5s var(--ease) both}
.aud__card:nth-child(2){animation-delay:.08s}.aud__card:nth-child(3){animation-delay:.16s}
.aud__card h3{font:600 1.1rem/1.2 var(--f-display);margin:0 0 .5rem;color:var(--head);letter-spacing:-.02em}
.aud__card ul{margin:0;padding-left:1.05rem;color:var(--muted);font-size:.9rem}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------------- forms / quote ---------------- */
.form{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3.4vw,44px);box-shadow:var(--shadow)}
.steps{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.steps i{font:500 .64rem/1 var(--f-mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.steps i.on{color:var(--accent)}
.pbar{height:3px;background:var(--line);border-radius:3px;overflow:hidden;margin-bottom:2.2rem}
.pbar i{display:block;height:100%;width:33.33%;background:var(--grad);border-radius:3px;
  transition:width .55s var(--ease)}
.step{display:none;animation:fadeUp .45s var(--ease) both}
.step.on{display:block}
.field{margin-bottom:1.15rem}
.field label{display:block;font:500 .72rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.6rem}
.field input,.field select,.field textarea{width:100%;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r);padding:.95rem 1.05rem;color:var(--text);font:400 .96rem var(--f-body);
  transition:border-color .3s,box-shadow .3s}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cyan);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 18%,transparent)}
.field .err{display:none;font-size:.8rem;margin-top:.45rem}
.field.bad .err{display:block}

.filedrop{display:flex;align-items:center;gap:.95rem;padding:1.05rem 1.15rem;cursor:pointer;
  font:inherit;text-transform:none;letter-spacing:normal;
  border:1px dashed var(--line-2);border-radius:var(--r);background:var(--bg-2);
  transition:border-color .3s,background .3s}
.filedrop:hover,.filedrop:focus-within{border-color:var(--cyan);
  background:color-mix(in srgb,var(--cyan) 7%,transparent)}
.filedrop input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.filedrop__ico{width:40px;height:40px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;
  background:var(--grad);color:#06133A}
.filedrop__ico svg{width:19px;height:19px}
.filedrop__txt{display:grid;gap:.2rem;min-width:0}
.filedrop__txt b{font:600 .95rem/1.2 var(--f-body);color:var(--head);
  text-transform:none;letter-spacing:-.01em;overflow-wrap:anywhere}
.filedrop__txt em{font:500 .68rem/1 var(--f-mono);font-style:normal;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.filedrop.has-file{border-style:solid;border-color:var(--cyan)}
.field.bad .filedrop{border-color:var(--danger)}
.orsep{display:flex;align-items:center;gap:1rem;margin:.2rem 0 1.15rem;
  font:500 .66rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.orsep::before,.orsep::after{content:"";height:1px;flex:1;background:var(--line)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media(max-width:560px){.frow{grid-template-columns:1fr}}
.fset.is-hidden{display:none}
.form__done{display:none}
.form__done.on{display:block;animation:fadeUp .45s var(--ease) both}
.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.65rem}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:flex;flex-direction:column;gap:.3rem;padding:1.05rem;border:1px solid var(--line);
  border-radius:var(--r);cursor:pointer;transition:all .3s var(--ease);font-weight:600;color:var(--head)}
.chip span em{font:500 .62rem/1.3 var(--f-mono);font-style:normal;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.chip input:checked + span{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 10%,transparent)}
.chip input:focus-visible + span{outline:2px solid var(--cyan);outline-offset:2px}
.form__nav{display:flex;gap:.7rem;margin-top:1.8rem;flex-wrap:wrap}
.summary{background:var(--bg-2);border:1px dashed var(--line-2);border-radius:var(--r);
  padding:1.2rem;margin-bottom:1.3rem;font-size:.95rem;color:var(--head)}
.done{text-align:center;padding:1.5rem 0}
.done .tick{width:64px;height:64px;margin:0 auto 1.4rem;border-radius:50%;background:var(--grad);
  display:grid;place-items:center;color:#06133A;font-size:1.7rem;animation:pop .6s var(--ease) both}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}


/* ---------------- form messaging / anti-bot ---------------- */
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.formmsg{border:1px solid var(--danger);color:var(--danger);background:color-mix(in srgb,var(--danger) 9%,transparent);
  padding:.9rem 1.1rem;border-radius:var(--r);font-size:.92rem;margin-bottom:1.5rem}
.fielderr{color:var(--danger);font-size:.83rem;margin-top:.9rem}
.field .err{color:var(--danger)}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--danger)}
.btn:disabled{opacity:.6;cursor:progress;transform:none}

/* ---------------- blog ---------------- */
.bfeat{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,3.4vw,50px);align-items:center;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3.4vw,46px);
  background:var(--card);margin-bottom:3.4rem;position:relative;overflow:hidden}
.bfeat::before{content:"";position:absolute;top:-40%;right:-10%;width:46%;height:180%;
  background:radial-gradient(circle,rgba(18,214,248,.14),transparent 65%)}
.bfeat h2{font-size:clamp(1.7rem,3.2vw,2.7rem);margin-bottom:.8rem}
.bmeta{display:flex;gap:.9rem;align-items:center;flex-wrap:wrap;
  font:500 .66rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:1.2rem}
.bmeta b{color:var(--accent);font-weight:500}
.bmeta span{width:3px;height:3px;border-radius:50%;background:var(--muted)}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.bcard{border:1px solid var(--line);border-radius:var(--r-lg);padding:1.8rem;background:var(--card);
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:transform .45s var(--ease),border-color .4s,box-shadow .45s}
.bcard::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--grad);
  transition:width .5s var(--ease)}
.bcard:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:var(--shadow)}
.bcard:hover::after{width:100%}
.bcard h3{font-size:1.24rem;margin-bottom:.7rem;letter-spacing:-.028em}
.bcard p{color:var(--muted);font-size:.92rem;margin-bottom:1.4rem;flex:1}
.bfoot{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  margin-top:auto;padding-top:1rem;border-top:1px solid var(--line)}
.bfoot time{font:500 .7rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-right:auto}
.bfoot .more{margin-left:auto;white-space:nowrap;flex-shrink:0}
.bcard .more{font:500 .7rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:.5rem}
.bcard .more::after{content:"→";transition:transform .35s var(--ease)}
.bcard:hover .more::after{transform:translateX(5px)}
.bcat{display:inline-flex;align-self:flex-start;width:fit-content;max-width:100%;font:500 .62rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--line-2);padding:.42rem .68rem;border-radius:999px;margin-bottom:1.2rem}

/* single post */
.pread{position:fixed;top:0;left:0;height:3px;background:var(--grad);z-index:920;width:0;
  transition:width .1s linear}
.phead{padding:calc(76px + clamp(40px,6vw,80px)) 0 clamp(28px,4vw,50px);text-align:center;position:relative}
.phead::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:70vw;height:100%;background:radial-gradient(ellipse at top,rgba(49,151,236,.17),transparent 68%);
  pointer-events:none}
.phead h1{font-size:clamp(1.9rem,4.4vw,3.5rem);max-width:19ch;margin-inline:auto;position:relative}
.phead .bmeta{justify-content:center;position:relative}
.prose{max-width:70ch;margin-inline:auto;font-size:clamp(1.02rem,.4vw + 1rem,1.13rem);line-height:1.78}
.prose h2{font-size:clamp(1.4rem,2.4vw,1.95rem);margin:2.6rem 0 .9rem}
.prose p{color:var(--text);margin-bottom:1.35em;max-width:none}
.prose p:first-of-type{font-size:1.14em;color:var(--head);font-weight:500}
.share{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;margin:3rem auto 0;max-width:70ch;
  padding-top:1.8rem;border-top:1px solid var(--line)}
.share b{font:500 .68rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:.5rem}
.share a,.share button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--head);background:none;cursor:pointer;
  transition:all .32s var(--ease)}
.share a:hover,.share button:hover{border-color:transparent;background:var(--grad);color:#06133A;transform:translateY(-3px)}
.share svg{width:17px;height:17px;fill:currentColor}
.copied{font:500 .68rem/1 var(--f-mono);color:var(--accent);letter-spacing:.1em;opacity:0;transition:opacity .3s}
.copied.on{opacity:1}

/* ---------------- careers ---------------- */
.role{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);overflow:hidden;
  transition:border-color .4s,box-shadow .4s}
.role + .role{margin-top:12px}
.role[open],.role:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.role summary{list-style:none;cursor:pointer;padding:1.5rem clamp(18px,2.4vw,30px);
  display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.role summary::-webkit-details-marker{display:none}
.role h3{margin:0;font-size:clamp(1.08rem,1.9vw,1.4rem);flex:1;min-width:200px}
.role .tag{font:500 .62rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);padding:.45rem .68rem;border-radius:999px}
.role .tag.hot{color:var(--accent);border-color:var(--line-2)}
.role__body{padding:0 clamp(18px,2.4vw,30px) 1.8rem;border-top:1px solid var(--line);padding-top:1.4rem}
.role__body p{color:var(--muted);font-size:.95rem}

/* ---------------- contact ---------------- */
.cgrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(26px,3.6vw,56px);align-items:start}
.cinfo{display:grid;gap:0;border-top:1px solid var(--line)}
.cinfo--2{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.4rem;border-top:0}
.cinfo--2 > *{border-top:1px solid var(--line)}
.cinfo--2 b{font-size:.6rem}
.cinfo--2 span{font-size:.94rem}
.cinfo a,.cinfo div{padding:1.25rem 0;border-bottom:1px solid var(--line);display:block;
  transition:color .3s,padding-left .35s var(--ease)}
.cinfo a:hover{color:var(--accent);padding-left:.5rem}
.cinfo b{display:block;font:500 .66rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.5rem}
.cinfo span{font-size:1.02rem;font-weight:500;color:var(--head);word-break:break-word}
.cinfo a:hover span{color:var(--accent)}
/* contact page social rows - icon and label on one baseline */
.sicon{width:15px;height:15px;flex-shrink:0;fill:currentColor;display:inline-block;vertical-align:middle}
.cinfo__soc b{display:flex;align-items:center;gap:.5rem}
.cinfo__soc b .sicon{fill:var(--accent)}
.cinfo__soc span{overflow-wrap:anywhere}

/* ---------------- footer ---------------- */
.ftr{border-top:1px solid var(--line);padding:clamp(54px,7vw,88px) 0 2rem;
  background:color-mix(in srgb,var(--surf) 34%,transparent)}
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(24px,3vw,46px)}
.ftr .ftr__h{font:500 .68rem/1 var(--f-mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin:0 0 1.2rem}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.ftr ul a{font-size:.94rem;color:var(--text);
  transition:color .3s,padding-left .3s var(--ease)}
/* Menu and services links are single words - they must never be split.
   Flex wrapping lets them move to the next row instead of being squeezed
   into a cell narrower than the word itself. */
.ftr .ftr__menu{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem}
.ftr__menu li{min-width:0;flex:0 0 auto}
.ftr .ftr__menu a{display:inline-block;white-space:nowrap;
  overflow-wrap:normal;word-break:keep-all;hyphens:none}
.ftr ul a:hover{color:var(--accent);padding-left:4px}
.ftr__brand p{color:var(--muted);font-size:.93rem;max-width:32ch;margin:1.1rem 0 0}

/* footer subscribe */
.ftr__sub{margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.ftr__sub .ftr__h{display:block;margin:0 0 .9rem}
.ftr__subrow{display:grid;gap:.6rem}
.ftr__subrow input{width:100%;min-width:0;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r);padding:.8rem .95rem;font:inherit;font-size:.9rem;color:var(--text);
  transition:border-color .3s,box-shadow .3s}
.ftr__subrow input::placeholder{color:var(--muted);opacity:.75}
.ftr__subrow input:focus{outline:none;border-color:var(--cyan);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.ftr__subrow button{width:100%;padding:.82rem 1.3rem;border:0;cursor:pointer;border-radius:var(--r);
  background:var(--grad);color:#06133A;font:600 .7rem/1 var(--f-mono);letter-spacing:.12em;
  text-transform:uppercase;transition:transform .3s var(--ease),box-shadow .3s}
.ftr__subrow button:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px var(--accent)}
.ftr__subrow button:active{transform:none}
.ftr__submsg{margin:.7rem 0 0;font-size:.78rem;line-height:1.5;color:var(--muted)}
.ftr__submsg.is-ok{color:var(--accent)}
.ftr__submsg.is-bad{color:#e0685f}
@media(min-width:520px){.ftr__subrow{grid-template-columns:1fr auto}.ftr__subrow button{width:auto}}

.ftr__reach{display:grid;gap:.7rem;list-style:none;margin:0 0 .2rem;padding:0}
.ftr__reach a{display:flex;align-items:center;gap:.6rem;font-size:.9rem;min-width:0}
.ftr__reach a span{min-width:0;overflow-wrap:break-word}
@media(max-width:420px){.ftr__reach a{font-size:.85rem}}
.ftr__reach svg{width:15px;height:15px;flex-shrink:0;stroke:var(--accent);fill:none;stroke-width:1.9}
.ftr__bot{margin-top:clamp(38px,5vw,64px);padding-top:1.6rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:.8rem 1.4rem;flex-wrap:wrap;
  font:500 .68rem/1.7 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ftr__bot a{color:var(--accent)}
.ftr__bot a:hover{text-decoration:underline}
.ftr__reach li.addr svg{align-self:flex-start;margin-top:.2rem}
.ftr__reach li.addr span{line-height:1.45}
.ftr__reach li.addr a{align-items:flex-start;cursor:default}

/* contact map */
.map{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:2.6rem;
  background:var(--bg-2);line-height:0}
.map iframe{width:100%;height:clamp(240px,34vw,380px);border:0;display:block;
  filter:saturate(.85)}
[data-theme="dark"] .map iframe{filter:invert(.9) hue-rotate(180deg) saturate(.75) brightness(.95)}
.map__link{margin-top:.8rem;font:500 .68rem/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.map__link a{color:var(--accent)}

/* ---------------- cta strip ---------------- */
.cta{border:1px solid var(--line-2);border-radius:var(--r-lg);padding:clamp(30px,5vw,64px);
  background:var(--card);text-align:center;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:-50% 20%;background:radial-gradient(circle,rgba(18,214,248,.16),transparent 60%)}
.cta > *{position:relative}
.cta h2{max-width:16ch;margin-inline:auto}
.cta .btnrow{margin-top:1.6rem;justify-content:center}
.btnrow{display:flex;gap:.8rem;flex-wrap:wrap}

/* ---------------- reveal ---------------- */
[data-rv]{opacity:0;transform:translateY(24px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-rv].in{opacity:1;transform:none}
[data-rv-d="1"]{transition-delay:.1s}[data-rv-d="2"]{transition-delay:.2s}
[data-rv-d="3"]{transition-delay:.3s}[data-rv-d="4"]{transition-delay:.4s}


/* ================= imagery ================= */
.media{position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--bg-2)}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 38%,color-mix(in srgb,var(--bg) 72%,transparent) 100%)}
.media--flat::after{display:none}
.hero__media{aspect-ratio:16/11}
.hero--img{position:relative}
.hero__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.28}
[data-theme="light"] .hero__bg img{opacity:.16}
.hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--bg) 8%,color-mix(in srgb,var(--bg) 62%,transparent) 58%,transparent)}
.sec__media{aspect-ratio:4/3}
.band-media{aspect-ratio:16/9;margin-bottom:1.3rem}

/* ================= page banner ================= */
.banner{width:100%;position:relative;overflow:hidden;line-height:0;
  border-block:1px solid var(--line);background:var(--bg-2)}
.banner img{width:100%;height:clamp(150px,26vw,330px);object-fit:cover;display:block}
.banner::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 55%,transparent),transparent 45%,
    color-mix(in srgb,var(--bg) 70%,transparent))}
.banner__cap{position:absolute;left:0;right:0;bottom:clamp(12px,2.4vw,26px);z-index:2;line-height:1.4}
.banner__cap span{font:500 .66rem/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;
  color:#fff;background:rgba(6,12,40,.55);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.22);padding:.55rem .8rem;border-radius:999px;display:inline-block}

/* ================= works carousel ================= */
.reel__head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:1.2rem}
.reel__head h4{font:600 1.05rem/1.2 var(--f-display);margin:0;color:var(--head)}
.reel__hint{font:500 .64rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.reel{display:flex;gap:14px;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;padding:2px 2px 10px;
  -webkit-overflow-scrolling:touch;cursor:grab;overscroll-behavior-x:contain}
.reel::-webkit-scrollbar{display:none}
.reel.dragging{cursor:grabbing}
.work{flex:0 0 clamp(238px,26vw,320px);position:relative;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--card);
  padding:0;text-align:left;color:inherit;font:inherit;cursor:pointer;
  transition:transform .5s var(--ease),border-color .4s,box-shadow .5s}
.work:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:var(--shadow)}
.work__img{aspect-ratio:4/3;position:relative;overflow:hidden}
.work__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.work:hover .work__img img{transform:scale(1.07)}
.work__img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(6,10,40,.72) 100%)}
.work__zoom{position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 62%,transparent);
  backdrop-filter:blur(6px);color:#fff;opacity:0;transform:scale(.8);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.work:hover .work__zoom,.work:focus-visible .work__zoom{opacity:1;transform:none}
.work__body{padding:1.05rem 1.1rem 1.25rem}
.work__body strong{display:block;font:600 1rem/1.25 var(--f-display);color:var(--head);
  letter-spacing:-.02em;margin-bottom:.35rem}
.work__body em{font:500 .62rem/1 var(--f-mono);font-style:normal;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent)}

/* work modal */
.modal--work .modal__in{max-width:820px;padding:0;overflow:hidden}
.modal--work .wm-img{aspect-ratio:4/3;background:var(--bg-2)}
.modal--work .wm-img img{width:100%;height:100%;object-fit:cover}
.modal--work .wm-body{padding:clamp(20px,3vw,32px)}
.modal--work h3{font-size:clamp(1.25rem,2.4vw,1.75rem);margin-bottom:.85rem}
.wm-tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.1rem}
.wm-tags span{display:inline-flex;align-items:center;gap:.45rem;
  font:500 .66rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--line-2);
  background:color-mix(in srgb,var(--cyan) 8%,transparent);
  padding:.5rem .75rem;border-radius:999px;white-space:nowrap}
.wm-tags span svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.9;flex-shrink:0}
.modal--work .wm-act{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.5rem}
.modal--work .modal__x{background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(8px);z-index:3}

/* ================= FAQ ================= */
.faqs{display:grid;gap:10px;margin-top:2.6rem}
.faq{border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  transition:border-color .35s,box-shadow .35s}
.faq[open],.faq:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.faq summary{list-style:none;cursor:pointer;padding:1.15rem 1.3rem;display:flex;gap:1rem;
  align-items:center;font:600 1rem/1.4 var(--f-display);color:var(--head);letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{margin-left:auto;flex-shrink:0;width:24px;height:24px;position:relative}
.faq summary span::before,.faq summary span::after{content:"";position:absolute;background:var(--accent);
  border-radius:2px;transition:transform .4s var(--ease)}
.faq summary span::before{top:11px;left:4px;width:16px;height:2px}
.faq summary span::after{top:4px;left:11px;width:2px;height:16px}
.faq[open] summary span::after{transform:rotate(90deg)}
.faq__a{padding:0 1.3rem 1.35rem;color:var(--muted);font-size:.95rem;max-width:74ch}
.faq__a p{margin:0}

/* ================= floating actions ================= */
.fab{position:fixed;z-index:9999;display:grid;place-items:center;
  border-radius:50%;border:0;cursor:pointer;text-decoration:none;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),opacity .35s,visibility .35s}
.fab:hover{transform:translateY(-4px) scale(1.05)}
.fab--wa{bottom:25px;left:25px;right:auto;width:60px;height:60px;background:#25D366;color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.2)}
.fab--wa svg{width:34px;height:34px;fill:currentColor;position:relative;z-index:2}
.fab--wa:hover{background:#1DA851;box-shadow:0 6px 20px rgba(0,0,0,.26)}
/* radiating rings */
.fab--wa::before,.fab--wa::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:#25D366;z-index:0;animation:waRadiate 2.1s cubic-bezier(.2,.6,.35,1) infinite}
.fab--wa::after{animation-delay:1.05s}
@keyframes waRadiate{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(2.05);opacity:0}
  100%{transform:scale(2.05);opacity:0}}
.fab--top{bottom:25px;right:25px;width:48px;height:48px;
  background:var(--surf);color:var(--head);border:1px solid var(--line-2);
  opacity:0;visibility:hidden;box-shadow:var(--shadow);position:fixed}
.fab--top.show{opacity:1;visibility:visible}
.fab--top .arw{width:16px;height:16px;position:relative;z-index:2}
.fab--top .ring{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);
  transform:rotate(-90deg);pointer-events:none}
.fab--top .ring circle{fill:none;stroke-width:2.5;stroke-linecap:round}
.fab--top .ring .trk{stroke:var(--line)}
.fab--top .ring .bar{stroke:url(#topGrad);
  stroke-dasharray:var(--c,132);stroke-dashoffset:var(--c,132);
  transition:stroke-dashoffset .12s linear}

/* ================= comments ================= */
.comments{max-width:70ch;margin:clamp(40px,6vw,72px) auto clamp(48px,7vw,92px);padding-top:2.2rem;border-top:1px solid var(--line)}

/* submission toast */
.gtoast[hidden]{display:none}
.gtoast{position:fixed;top:calc(76px + 14px);left:0;right:0;z-index:960;
  display:flex;justify-content:center;padding:0 var(--gut);pointer-events:none}
.gtoast__in{display:flex;align-items:center;gap:.9rem;max-width:min(460px,100%);
  padding:.95rem 1.2rem;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--card);box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(14px)}
.gtoast.show .gtoast__in{animation:gtoastLife 5s var(--ease) forwards}
.gtoast__tick{flex-shrink:0;display:grid;place-items:center;width:34px;height:34px;
  border-radius:50%;background:var(--grad);color:#fff}
.gtoast__tick svg{width:17px;height:17px;stroke-dasharray:26;stroke-dashoffset:26}
.gtoast.show .gtoast__tick svg{animation:gtoastTick .5s var(--ease) .18s forwards}
.gtoast__txt{display:grid;gap:.18rem;min-width:0}
.gtoast__txt strong{font:600 .98rem/1.2 var(--f-display);color:var(--head);letter-spacing:-.015em}
.gtoast__txt em{font-style:normal;font-size:.84rem;color:var(--muted);line-height:1.45}
@keyframes gtoastLife{
  0%{opacity:0;visibility:visible;transform:translateY(14px)}
  7%{opacity:1;visibility:visible;transform:none}
  86%{opacity:1;visibility:visible;transform:none}
  100%{opacity:0;visibility:hidden;transform:translateY(-10px)}
}
@keyframes gtoastTick{to{stroke-dashoffset:0}}
@media(max-width:620px){.gtoast{top:auto;bottom:calc(var(--gut) + 74px)}}

.comments__head{margin-bottom:1.8rem}
.comments__head h2{font-size:clamp(1.3rem,2.4vw,1.8rem);margin:0}
.commentlist,.commentlist .children{list-style:none;margin:0;padding:0}
.commentlist .children{margin-left:clamp(14px,3vw,42px);padding-left:clamp(12px,2vw,20px);
  border-left:1px solid var(--line)}
.commentlist li.comment{margin-bottom:1.1rem}
.commentlist article{border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  padding:1.2rem 1.3rem;transition:border-color .35s}
.commentlist article:hover{border-color:var(--line-2)}
.cmt__top{display:flex;align-items:center;gap:.8rem;margin-bottom:.7rem;flex-wrap:wrap}
.cmt__top img{width:40px;height:40px;border-radius:50%;flex-shrink:0}
.cmt__who{font:600 .95rem/1.2 var(--f-display);color:var(--head);letter-spacing:-.015em}
.cmt__when{font:500 .62rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cmt__body{font-size:.94rem;color:var(--text)}
.cmt__body p{margin:0 0 .7rem}
.cmt__body p:last-child{margin:0}
.cmt__acts{display:flex;gap:1rem;margin-top:.8rem;font:500 .64rem/1 var(--f-mono);
  letter-spacing:.12em;text-transform:uppercase}
.cmt__acts a{color:var(--accent)}
.cmt__pending{font:500 .64rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);display:inline-block;margin-bottom:.6rem}
.comments__title{font-size:clamp(1.2rem,2.2vw,1.55rem);margin:2.4rem 0 .6rem}
.comments__note,.comment-notes{color:var(--muted);font-size:.9rem;margin-bottom:1.4rem}
.comment-form{margin-top:1rem}
.comment-form .form-submit{margin:0}
.comments__closed{color:var(--muted);font-size:.92rem}
.comment-reply-title small{font-size:.7rem;margin-left:.6rem}

/* ---------------- responsive ---------------- */
@media(max-width:1000px){
  .hero__grid,.adv,.cgrid,.bfeat{grid-template-columns:1fr}
  .adv .venn{order:-1}
}
@media(max-width:860px){
  .nav{display:none}
  .burger{display:block}
  .hdr__act .btn--grad{display:none}
  .band-n{writing-mode:horizontal-tb;margin-bottom:.4rem}
  .band-i summary{grid-template-columns:1fr auto;grid-template-areas:"n n" "h p"}
  .band-n{grid-area:n}.band-h{grid-area:h}.band-plus{grid-area:p}
}
@media(max-width:640px){
  .team{gap:12px}
  .tcard{padding:1.2rem .9rem}
  .tcard .shot{max-width:112px}
  .tcard--lead{padding:1.4rem 1.1rem}
  .banner__cap{display:none}
  /* button pairs stay on one line */
  .hero__cta,.btnrow{flex-wrap:nowrap;gap:.55rem}
  .hero__cta .btn,.btnrow .btn{flex:1 1 0;min-width:0;padding:1rem .7rem;font-size:.82rem;
    white-space:nowrap;text-align:center}
  .tl__row{grid-template-columns:1fr;gap:2.6rem}
  .tl__node::before{top:-1.9rem}
  .tl{padding-top:1.8rem}
  .hero__meta{gap:1.1rem}
  .team{grid-template-columns:1fr 1fr}
}
@media(max-width:420px){
  .team{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-rv]{opacity:1;transform:none}
  .mech .node{opacity:0}.mech .band{opacity:1}.mech .core{opacity:1}
  .mech .spine{stroke-dashoffset:0}
  .venn .lens{opacity:.9}.venn .c1,.venn .c2{transform:none}
  .fab--wa::before,.fab--wa::after{display:none}

}
@media print{ .hdr,.drawer,#preloader,.ticker,.share{display:none} }

/* ---- very small screens (Galaxy Fold cover, 280-360px) ---- */
@media(max-width:392px){
  :root{--gut:14px}
  .team{grid-template-columns:minmax(0,1fr)}
  .bfoot{flex-wrap:wrap;gap:.6rem}
  .gtoast__in{padding:.8rem .9rem}
  .gtoast__txt strong{font-size:.9rem}
  .btnrow{flex-direction:column;align-items:stretch}
  .btnrow .btn{width:100%;justify-content:center}
  .band-tags{gap:.35rem}
  .modal__in{padding:1.4rem 1.1rem}
  .cinfo__soc span{font-size:.85rem}
  h1,.h1{font-size:clamp(1.7rem,8vw,2.2rem)}
  h2{font-size:clamp(1.35rem,6.4vw,1.8rem)}
}
/* nothing may exceed the viewport at any width */
html,body{max-width:100%;overflow-x:hidden}
img,svg,iframe,video,table{max-width:100%}
pre,code{overflow-x:auto;max-width:100%}
#bioText{white-space:pre-line}

/* ==================================================================
   2.0 — three services, service pages, and the pieces they need.
   Written after everything above so it wins where the two overlap.
================================================================== */

/* ---------------- reading progress ---------------- */
.prog{position:fixed;top:0;left:0;height:2px;width:100%;z-index:940;pointer-events:none;
  transform:scaleX(0);transform-origin:0 50%;background:var(--grad);
  opacity:0;transition:opacity .3s var(--ease)}
.prog.on{opacity:1}

/* ---------------- breadcrumbs ---------------- */
.crumbs{margin-bottom:1.6rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0;padding:0;
  font:500 .68rem/1.5 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.crumbs li{display:flex;align-items:center;gap:.5rem}
.crumbs li + li::before{content:"/";color:var(--line-2);font-weight:400}
.crumbs a{color:var(--muted);transition:color .3s}
.crumbs a:hover{color:var(--accent)}
.crumbs [aria-current]{color:var(--head)}

/* ---------------- service cards ---------------- */
.svcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,24px)}
.svc{position:relative;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  transition:transform .5s var(--ease),border-color .4s,box-shadow .5s var(--ease)}
.svc::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.svc:hover,.svc:focus-within{transform:translateY(-6px);border-color:var(--line-2);box-shadow:var(--shadow)}
.svc:hover::before,.svc:focus-within::before{transform:scaleX(1)}

.svc__img{display:block;position:relative;aspect-ratio:8/5;overflow:hidden;background:var(--bg-2)}
.svc__img img{width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease),filter .6s}
.svc:hover .svc__img img{transform:scale(1.055)}
.svc__img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 42%,color-mix(in srgb,var(--bg) 78%,transparent) 100%)}

.svc__body{padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;flex:1;gap:.2rem}
.svc__no{font:500 .64rem/1 var(--f-mono);letter-spacing:.2em;color:var(--accent);
  display:block;margin-bottom:.9rem}
.svc h3{font-size:clamp(1.2rem,1.35vw,1.45rem);margin:0 0 .55rem;text-wrap:balance}
.svc h3 a{transition:color .3s}
.svc:hover h3 a{color:var(--accent)}
/* the whole card is clickable, without nesting a link inside a link */
.svc h3 a::after{content:"";position:absolute;inset:0;z-index:2}
.svc__line{color:var(--head);font-weight:600;font-size:.98rem;margin:0 0 .7rem;max-width:34ch}
.svc__teaser{color:var(--muted);font-size:.93rem;line-height:1.66;margin:0 0 1.2rem;max-width:44ch}

.svc__items{list-style:none;margin:0 0 1.4rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.svc__items li{font:500 .66rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.46rem .68rem}

.svc__go{margin-top:auto;display:inline-flex;align-items:center;gap:.55rem;
  font:600 .84rem/1 var(--f-body);color:var(--accent)}
.svc__go svg{width:17px;height:17px;transition:transform .4s var(--ease)}
.svc:hover .svc__go svg{transform:translateX(5px)}

.svcs--compact .svc__img{display:none}

/* The longest of the three names is "Cleaning & Fumigation". Sized so it sits
   on one line from the width the cards go three-across, which keeps the three
   summaries on the same baseline without reserving a blank second line. */
@media(min-width:1180px){ .svc h3{white-space:nowrap} }

/* ---------------- service page hero ---------------- */
.shero{position:relative;overflow:hidden;
  padding:calc(76px + clamp(38px,6vw,72px)) 0 clamp(40px,5vw,68px)}
.shero__bg{position:absolute;inset:0;z-index:-1}
.shero__bg img{width:100%;height:100%;object-fit:cover;opacity:.16}
.shero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 74%,transparent),var(--bg) 92%)}
.shero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,60px);align-items:center}
.shero h1{font-size:clamp(2.2rem,5vw,4rem);margin-bottom:.9rem}
.shero .lead{color:var(--head);font-weight:600;max-width:26ch}
.shero__teaser{color:var(--muted);max-width:52ch;margin:1rem 0 1.9rem}
.shero .btnrow{margin-bottom:1.9rem}
.shero__tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.shero__tags li{font:500 .66rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--line-2);border-radius:999px;padding:.5rem .8rem}
.shero__media{aspect-ratio:4/3}

/* ---------------- in-page nav ---------------- */
.subnav{position:sticky;top:76px;z-index:800;border-block:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px) saturate(140%)}
.subnav__in{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;
  padding-block:.55rem;scroll-snap-type:x proximity}
.subnav__in::-webkit-scrollbar{display:none}
.subnav a{flex:0 0 auto;scroll-snap-align:start;padding:.6rem .95rem;border-radius:999px;
  font:500 .78rem/1 var(--f-body);color:var(--muted);white-space:nowrap;
  transition:color .3s,background .3s}
.subnav a:hover{color:var(--head)}
.subnav a.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}

/* ---------------- what a service covers ---------------- */
.cover{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px);
  margin-top:2.4rem}
.cover__i{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,32px);background:var(--card);
  transition:border-color .4s,transform .5s var(--ease)}
.cover__i:hover{border-color:var(--line-2);transform:translateY(-4px)}
.cover__n{font:500 .64rem/1 var(--f-mono);letter-spacing:.2em;color:var(--accent);
  display:block;margin-bottom:1rem}
.cover__i h3{font-size:1.18rem;margin:0 0 .6rem}
.cover__i p{color:var(--muted);font-size:.93rem;line-height:1.68;margin:0}

/* ---------------- what you get ---------------- */
.incl{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,64px);align-items:start}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.2rem}
.ticks li{display:flex;gap:.9rem;align-items:flex-start;padding:1rem 0;
  border-bottom:1px solid var(--line)}
.ticks li:last-child{border-bottom:0}
.ticks svg{width:19px;height:19px;flex-shrink:0;margin-top:.15rem;color:var(--accent)}
.ticks span{color:var(--text);font-size:.98rem;line-height:1.6}

/* ---------------- how it runs ---------------- */
.steps{list-style:none;counter-reset:none;margin:2.6rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}
.steps li{position:relative;padding-top:1.6rem;border-top:2px solid var(--line)}
.steps li::before{content:"";position:absolute;top:-2px;left:0;width:0;height:2px;
  background:var(--grad);transition:width .8s var(--ease) .1s}
.steps li.in::before{width:100%}
.steps b{display:block;font:500 .64rem/1 var(--f-mono);letter-spacing:.2em;color:var(--accent);
  margin-bottom:.85rem}
.steps h3{font-size:1.08rem;margin:0 0 .5rem}
.steps p{color:var(--muted);font-size:.9rem;line-height:1.65;margin:0}

/* ---------------- the other two services ---------------- */
.others{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,20px);margin-top:clamp(24px,3vw,40px)}
.other{display:grid;gap:.35rem;padding:clamp(20px,2.2vw,28px);position:relative;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  transition:border-color .4s,transform .5s var(--ease),background .4s}
.other:hover{border-color:var(--line-2);transform:translateY(-4px)}
.other__k{font:500 .62rem/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.other strong{font:700 1.25rem/1.2 var(--f-display);letter-spacing:-.02em;color:var(--head)}
.other__l{color:var(--muted);font-size:.9rem;line-height:1.6;max-width:36ch}
.other svg{width:19px;height:19px;color:var(--accent);position:absolute;
  right:clamp(20px,2.2vw,28px);top:clamp(20px,2.2vw,28px);
  transition:transform .4s var(--ease)}
.other:hover svg{transform:translateX(5px)}

/* ---------------- contact map ---------------- */
.mapwrap{margin-top:2.6rem}
.map{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  margin-top:0;background:var(--bg-2);line-height:0;min-height:clamp(260px,36vw,420px)}
.map iframe{width:100%;height:clamp(260px,36vw,420px);border:0;display:block;filter:saturate(.9)}
/* Inverting the frame was making street names unreadable in dark mode and
   reading as a broken map. A light map on a dark page is fine. */
[data-theme="dark"] .map iframe{filter:saturate(.9) contrast(1.02)}
.map__fallback{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;
  gap:.9rem;padding:2rem;text-align:center;background:var(--bg-2);line-height:1.6}
.map__fallback svg{width:30px;height:30px;color:var(--accent)}
.map__fallback p{color:var(--muted);margin:0;font-size:.94rem}
.map__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.7rem 1.4rem;margin-top:1rem}
.map__addr{display:flex;align-items:center;gap:.6rem;margin:0;color:var(--head);
  font-size:.94rem;font-weight:600}
.map__addr svg{width:17px;height:17px;color:var(--accent);flex-shrink:0}
.map__acts{display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;
  font:500 .68rem/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.map__acts a{color:var(--accent);border-bottom:1px solid transparent;transition:border-color .3s}
.map__acts a:hover{border-bottom-color:var(--accent)}

/* ---------------- footer ---------------- */
/* Each list reads as a single column of links. Wrapping them into two made
   short labels look like a word cloud. */
.ftr .ftr__menu{display:grid;grid-template-columns:minmax(0,1fr);gap:.7rem}
.ftr__menu li{flex:none;min-width:0}
.ftr .ftr__menu a{display:inline-block;white-space:normal;overflow-wrap:break-word}

/* On a phone the footer stays two columns for as long as the words fit, with
   Quick menu and Services side by side rather than stacked. The logo blurb and
   the contact block get the full width because they need it. */
@media(max-width:1000px){
  .ftr__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.2rem 1.6rem}
  .ftr__brand,.ftr__col--reach{grid-column:1/-1}
  .ftr__col--menu{grid-column:1}
  .ftr__col--svc{grid-column:2}
}
@media(max-width:640px){
  .ftr__grid{gap:1.9rem 1.1rem}
  .ftr ul{gap:.62rem}
  .ftr ul a{font-size:.86rem;line-height:1.45}
  .ftr .ftr__h{font-size:.62rem;margin-bottom:.9rem}
}
@media(max-width:420px){
  .ftr__grid{gap:1.7rem .9rem}
  .ftr__menu a{font-size:.81rem}
}
/* Below this the two columns are narrower than the words in them. */
@media(max-width:339px){
  .ftr__grid{grid-template-columns:minmax(0,1fr)}
  .ftr__col--menu,.ftr__col--svc{grid-column:1}
}

/* ---------------- counters ---------------- */
.hero__meta b{font-variant-numeric:tabular-nums}

/* ---------------- responsive ---------------- */
@media(max-width:1000px){
  .svcs{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Two across leaves the third on its own row. Lay that one out sideways
     rather than stretching a card body across the full width. */
  .svcs .svc:last-child:nth-child(odd){grid-column:1/-1;flex-direction:row}
  .svcs .svc:last-child:nth-child(odd) .svc__img{aspect-ratio:auto;flex:0 0 42%}
  .svcs .svc:last-child:nth-child(odd) .svc__img::after{
    background:linear-gradient(90deg,transparent 55%,color-mix(in srgb,var(--bg) 55%,transparent) 100%)}
  .svcs .svc:last-child:nth-child(odd) .svc__body{flex:1;min-width:0}
  .shero__grid{grid-template-columns:1fr}
  .shero__media{order:-1;aspect-ratio:16/9}
  .incl{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cover{grid-template-columns:1fr}
}
@media(max-width:860px){
  .others{grid-template-columns:1fr}
}
@media(max-width:700px){
  .svcs{grid-template-columns:minmax(0,1fr)}
  .svcs .svc:last-child:nth-child(odd){flex-direction:column}
  .svcs .svc:last-child:nth-child(odd) .svc__img{aspect-ratio:8/5;flex:none}
  .svcs .svc:last-child:nth-child(odd) .svc__img::after{
    background:linear-gradient(180deg,transparent 42%,color-mix(in srgb,var(--bg) 78%,transparent) 100%)}
  .steps{grid-template-columns:1fr;gap:1.6rem}
  .map__bar{flex-direction:column;align-items:flex-start}
}
@media(max-width:420px){
  .svc__body{padding:1.2rem}
  .shero__tags li,.svc__items li{font-size:.6rem}
}

@media(prefers-reduced-motion:reduce){
  .svc:hover,.cover__i:hover,.other:hover{transform:none}
  .svc:hover .svc__img img{transform:none}
  .steps li::before{width:100%;transition:none}
  .prog{display:none}
}

/* ---------------- dropdown for the service pages ---------------- */
/* The primary menu now goes two levels deep so the three service pages sit
   under Services. Opens on hover, and on keyboard focus via :focus-within. */
.nav li{position:relative}
.nav .sub-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:230px;z-index:20;
  display:grid;gap:.1rem;padding:.5rem;margin:0;list-style:none;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surf);
  box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s}
.nav li:hover > .sub-menu,
.nav li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none}
/* bridges the gap under the parent so the pointer can cross into the panel */
.nav .menu-item-has-children::after{content:"";position:absolute;left:0;right:0;
  top:100%;height:10px}
.nav .sub-menu li > a{display:block;padding:.6rem .8rem;border-radius:10px;font-size:.88rem;
  white-space:nowrap;color:var(--text);transition:background .25s,color .25s}
.nav .sub-menu li > a::after{display:none}
.nav .sub-menu li > a:hover{background:var(--surf-2);color:var(--accent)}
.nav .menu-item-has-children > a::before{content:"";position:absolute;right:.28rem;top:50%;
  width:5px;height:5px;margin-top:-4px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.55}
.nav .menu-item-has-children > a{padding-right:1.35rem}

/* drawer: children indented under their parent rather than in a flyout */
.drawer nav .sub-menu{list-style:none;margin:0 0 .4rem;padding:0 0 0 1.6rem;
  border-left:1px solid var(--line)}
.drawer nav .sub-menu li{counter-increment:none}
.drawer nav .sub-menu li > a{font:600 1.02rem/1.3 var(--f-body);letter-spacing:0;
  padding:.55rem 0;border-bottom:0;color:var(--text);opacity:1;transform:none;animation:none}
.drawer nav .sub-menu li > a::before{content:none}
.drawer nav .sub-menu li > a:hover{color:var(--accent)}

/* ---------------- how a service is booked ---------------- */
.eng{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .9rem;margin:2.4rem 0 0;
  padding:1.1rem 1.3rem;max-width:none;
  border:1px solid var(--line);border-left:2px solid var(--accent);
  border-radius:var(--r);background:var(--surf-2);
  color:var(--text);font-size:.96rem;line-height:1.6}
.eng span{font:500 .64rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent)}

/* ==================================================================
   3.0 — photographic backdrops, the copper accent, icon lists, and a
   body size that holds its own against the headings.
================================================================== */

/* ---------------- photographic backdrops ---------------- */
/*
 * A photograph sits behind whole sections rather than a gradient shape. It is
 * pulled down to near-monochrome and tinted into the brand before anything is
 * laid over it, which is what lets an ordinary site photograph carry type
 * without the two fighting. The scale(1.1) is headroom for the parallax drift
 * main.js sets on --drift; with the script absent it simply sits still.
 */
.plate,.hero__bg,.shero__bg{overflow:hidden;pointer-events:none}
.plate{position:absolute;inset:0;z-index:0;border-radius:inherit}
.plate img,.hero__bg img,.shero__bg img{
  width:100%;height:100%;object-fit:cover;
  transform:translate3d(0,var(--drift,0px),0) scale(1.1);
  transition:transform .18s linear}
.plate img{opacity:1;filter:grayscale(.64) saturate(.46) contrast(1.06) brightness(.6)}
.hero__bg img{opacity:1;filter:grayscale(.55) saturate(.5) contrast(1.05) brightness(.5)}
.shero__bg img{opacity:1;filter:grayscale(.6) saturate(.45) contrast(1.05) brightness(.44)}

.plate::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(125% 90% at 50% 38%,transparent 0%,
      color-mix(in srgb,var(--bg) 62%,transparent) 66%,var(--bg) 100%),
    linear-gradient(155deg,color-mix(in srgb,var(--navy) 72%,transparent),
      color-mix(in srgb,var(--bg) 86%,transparent) 72%)}

[data-theme="light"] .plate img{filter:grayscale(.66) saturate(.4) contrast(1.02) brightness(1.06)}
[data-theme="light"] .hero__bg img{filter:grayscale(.6) saturate(.45) contrast(1) brightness(1.1)}
[data-theme="light"] .shero__bg img{filter:grayscale(.62) saturate(.4) contrast(1) brightness(1.12)}
[data-theme="light"] .plate::after{
  background:
    radial-gradient(125% 90% at 50% 38%,color-mix(in srgb,var(--bg) 42%,transparent) 0%,
      color-mix(in srgb,var(--bg) 78%,transparent) 62%,var(--bg) 100%),
    linear-gradient(155deg,color-mix(in srgb,var(--blue) 12%,transparent),
      color-mix(in srgb,var(--bg) 90%,transparent) 70%)}

/* the ambient light in the hero is now a wash over the photograph, not a
   geometric shape sitting on its own */
.hero::before{top:-30%;right:-20%;width:74vw;height:74vw;
  background:radial-gradient(circle,rgba(230,126,34,.13),transparent 64%)}
[data-theme="light"] .hero::before{background:radial-gradient(circle,rgba(230,126,34,.10),transparent 64%)}

.sec--plate{position:relative;overflow:hidden;isolation:isolate;
  background:var(--bg-2);border-block:1px solid var(--line)}
.sec--plate > .wrap{position:relative;z-index:1}
.cta--plate{isolation:isolate}
.cta--plate::before{display:none}
.cta > .plate{position:absolute}

/* ---------------- copper, used sparingly ---------------- */
/* The page the visitor is on. */
.nav li.current-menu-item > a,
.nav li.current_page_item > a,
.nav li.current-menu-parent > a,
.nav a[aria-current="page"]{color:var(--amber-text)}
.nav li.current-menu-item > a::after,
.nav li.current_page_item > a::after,
.nav li.current-menu-parent > a::after,
.nav a[aria-current="page"]::after{background:var(--amber-grad);transform:scaleX(1)}
.nav .sub-menu li.current-menu-item > a{color:var(--amber-text);
  background:color-mix(in srgb,var(--amber-a) 13%,transparent)}
.drawer nav li.current-menu-item > a,
.drawer nav li.current_page_item > a{color:var(--amber-text)}

/* The benefit list, which is the moment someone decides. */
.ticks svg{color:var(--amber-text)}
.ticks li{border-bottom-color:var(--line)}

/* The link out of a service card, and the arrow on the cross-links. */
.svc__go{color:var(--amber-text)}
.svc:hover h3 a{color:var(--amber-text)}
.other:hover svg{color:var(--amber-text)}
.other:hover strong{color:var(--amber-text)}

/* Everything structural stays blue. Nothing else turns warm. */

/* ---------------- icon lists ---------------- */
/*
 * Thin-line marks painted with a mask, so they take their colour from the
 * text and follow the theme. Arrows on ordinary content lists, ticks where
 * the list is a set of benefits.
 */
.prose ul,.aud__card ul,.role__body ul,.band-body ul,ul.is-style-benefits{list-style:none;padding-left:0;margin-left:0}
.prose ul > li,.aud__card ul > li,.role__body ul > li,.band-body ul > li,
ul.is-style-benefits > li{
  position:relative;padding-left:1.95em;margin-bottom:.62em}
.prose ul > li::before,.aud__card ul > li::before,
.role__body ul > li::before,.band-body ul > li::before{
  content:"";position:absolute;left:0;top:.42em;width:1.05em;height:1.05em;
  background-color:var(--accent);
  -webkit-mask:var(--ico-arrow) center/contain no-repeat;
  mask:var(--ico-arrow) center/contain no-repeat}

/* A list of benefits gets the tick, in copper. */
.prose ul.is-benefits > li::before,
.prose ul.is-style-benefits > li::before,
.is-style-benefits > li::before{
  background-color:var(--amber-text);
  -webkit-mask:var(--ico-check) center/contain no-repeat;
  mask:var(--ico-check) center/contain no-repeat}

/* Browsers without mask support keep a mark rather than nothing. */
@supports not ((-webkit-mask:none) or (mask:none)){
  .prose ul,.aud__card ul,.role__body ul,.band-body ul{list-style:disc;padding-left:1.2em}
  .prose ul > li::before,.aud__card ul > li::before,
  .role__body ul > li::before,.band-body ul > li::before{content:none}
  .prose ul > li,.aud__card ul > li,.role__body ul > li,.band-body ul > li{padding-left:0}
}

/* ---------------- text that holds its own ---------------- */
.eyebrow{font-size:.74rem}
.hero__meta div{font-size:.74rem}
.hero__meta b{font-size:clamp(1.6rem,2vw,1.95rem);margin-bottom:.35rem}

.svc__line{font-size:1.06rem;line-height:1.5}
.svc__teaser{font-size:1rem;line-height:1.7;margin-bottom:1.35rem}
.svc__items li{font-size:.7rem;padding:.5rem .74rem}
.svc__go{font-size:.92rem}
.svc__no{font-size:.68rem}

.cover__i{padding:clamp(24px,2.6vw,34px)}
.cover__i h3{font-size:1.26rem;margin-bottom:.7rem}
.cover__i p{font-size:1rem;line-height:1.72}
.cover__n{font-size:.68rem}

.ticks li{padding:1.15rem 0;gap:1rem}
.ticks span{font-size:1.06rem;line-height:1.62}
.ticks svg{width:21px;height:21px;margin-top:.2rem}

.steps li{padding-top:1.75rem}
.steps b{font-size:.68rem;margin-bottom:.95rem}
.steps h3{font-size:1.16rem;margin-bottom:.6rem}
.steps p{font-size:.98rem;line-height:1.68}

.other strong{font-size:1.32rem}
.other__l{font-size:.98rem;line-height:1.62}
.other__k{font-size:.66rem}

.eng{font-size:1.04rem;padding:1.25rem 1.45rem}
.eng span{font-size:.68rem}

.faq summary{font-size:1.08rem;padding:1.3rem 1.45rem}
.faq__a{font-size:1.04rem;line-height:1.72;padding:0 1.45rem 1.5rem}

.aud__card{padding:1.6rem}
.aud__card h3{font-size:1.2rem;margin-bottom:.65rem}
.aud__card ul{font-size:1rem;line-height:1.68}
.aud__note{font-size:1.05rem;line-height:1.68}

.tl__node p{font-size:1rem;line-height:1.68}
.tl__node b{font-size:.75rem}

.adv-list div{padding:1.2rem 0;font-size:1.04rem}
.adv-list b{font-size:.7rem;min-width:30px}

.role__body p{font-size:1.02rem;line-height:1.7}
.cinfo span{font-size:1.08rem}
.cinfo b{font-size:.68rem}

.ftr__brand p{font-size:1rem;line-height:1.7}
.ftr ul a{font-size:.99rem}
.ftr__submsg{font-size:.85rem;line-height:1.6}

.map__addr{font-size:1.02rem}
.crumbs ol{font-size:.7rem}
.subnav a{font-size:.84rem;padding:.65rem 1.05rem}
.shero__tags li,.band-tags i{font-size:.69rem}
.reel__hint{font-size:.69rem}

.prose{font-size:clamp(1.06rem,.35vw + 1.02rem,1.18rem);line-height:1.8}

/* ---------------- reduced motion ---------------- */
@media(prefers-reduced-motion:reduce){
  .btn::before{display:none}
  .btn{--mx:0px !important;--my:0px !important;--lift:0px !important;--sc:1 !important}
  .plate img,.hero__bg img,.shero__bg img{transform:none}
}

/* ---------------- 3.0 corrections ---------------- */

/* Let the browser pick the line breaks in a display heading rather than
   leaving one word stranded on the last line. */
h1,h2,.shero h1,.svc h3{text-wrap:balance}

/* The hero figures are a row of four, not a flex line that drops the last one
   onto a row of its own. Two by two once there is no room for four. */
.hero__meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem 0}
.hero__meta div{flex:none;padding:0 clamp(.8rem,1.8vw,1.5rem)}
.hero__meta div + div::before{content:""}
.hero__meta div:nth-child(4n+1){padding-left:0}
.hero__meta div:nth-child(4n+1)::before{display:none}
@media(max-width:820px){
  .hero__meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__meta div:nth-child(2n+1){padding-left:0}
  .hero__meta div:nth-child(2n+1)::before{display:none}
  .hero__meta div:nth-child(2n)::before{display:block}
}

/* A photograph behind body copy has to lose. These wash it back far enough
   that the text sits at full contrast whatever the picture happens to be. */
.plate::after{
  background:
    radial-gradient(130% 95% at 50% 40%,color-mix(in srgb,var(--bg) 34%,transparent) 0%,
      color-mix(in srgb,var(--bg) 74%,transparent) 58%,var(--bg) 100%),
    linear-gradient(155deg,color-mix(in srgb,var(--navy) 76%,transparent),
      color-mix(in srgb,var(--bg) 90%,transparent) 72%)}
[data-theme="light"] .plate img{filter:grayscale(.72) saturate(.3) contrast(.98) brightness(1.1)}
[data-theme="light"] .plate::after{
  background:
    radial-gradient(130% 95% at 50% 40%,color-mix(in srgb,var(--bg) 74%,transparent) 0%,
      color-mix(in srgb,var(--bg) 90%,transparent) 58%,var(--bg) 100%),
    linear-gradient(155deg,color-mix(in srgb,var(--blue) 9%,transparent),
      color-mix(in srgb,var(--bg) 94%,transparent) 70%)}

/* The closing block centres its text over the middle of the frame, which is
   exactly where the wash above is thinnest. Put it back. */
.cta--plate .plate::after{
  background:
    radial-gradient(72% 84% at 50% 50%,color-mix(in srgb,var(--bg) 84%,transparent) 0%,
      color-mix(in srgb,var(--bg) 62%,transparent) 62%,var(--bg) 100%),
    linear-gradient(155deg,color-mix(in srgb,var(--navy) 70%,transparent),
      color-mix(in srgb,var(--bg) 88%,transparent) 74%)}
[data-theme="light"] .cta--plate .plate::after{
  background:
    radial-gradient(72% 84% at 50% 50%,color-mix(in srgb,var(--bg) 92%,transparent) 0%,
      color-mix(in srgb,var(--bg) 84%,transparent) 62%,var(--bg) 100%),
    linear-gradient(155deg,color-mix(in srgb,var(--blue) 8%,transparent),
      color-mix(in srgb,var(--bg) 95%,transparent) 70%)}

/* ---------------- style preview bar ---------------- */
/* Only ever rendered for a signed-in administrator looking at ?gd_style=… */
.gd-peek{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:9998;
  display:flex;align-items:center;gap:.5rem .9rem;flex-wrap:wrap;justify-content:center;
  max-width:calc(100vw - 24px);padding:.7rem .9rem .7rem 1.05rem;
  border:1px solid var(--line-2);border-radius:999px;background:var(--surf);
  box-shadow:0 22px 50px -24px rgba(0,0,0,.65);
  font:500 .84rem/1.3 var(--f-body);color:var(--text)}
.gd-peek__dot{width:8px;height:8px;border-radius:50%;background:var(--amber-grad);flex-shrink:0;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--amber-a) 22%,transparent)}
.gd-peek__txt b{color:var(--head)}
.gd-peek__go,.gd-peek__x{white-space:nowrap;border-radius:999px;padding:.5rem .95rem;
  font-weight:600;font-size:.8rem;transition:background .3s,color .3s,border-color .3s}
.gd-peek__go{background:var(--amber-grad);color:var(--amber-ink)}
.gd-peek__x{border:1px solid var(--line);color:var(--muted)}
.gd-peek__x:hover{border-color:var(--line-2);color:var(--head)}
@media(max-width:520px){
  .gd-peek{left:8px;right:8px;bottom:12px;transform:none;max-width:none;border-radius:18px}
  .gd-peek__txt{flex:1 1 100%;text-align:center}
  .gd-peek__go,.gd-peek__x{flex:1 1 0}
}
/* the back-to-top button would sit under it */
.gd-style-preview .fab--top{bottom:96px}

/* A long service name must be allowed to wrap once the display face changes. */
[data-style="atelier"] .svc h3,[data-style="kinetic"] .svc h3{white-space:normal;min-height:0}

/* Below this the two buttons cannot share a line without the longer label
   being clipped, so they stack and each takes the full width. */
@media(max-width:430px){
  .hero__cta,.btnrow{flex-direction:column;align-items:stretch;flex-wrap:wrap;gap:.6rem}
  .hero__cta .btn,.btnrow .btn{width:100%;flex:0 0 auto;white-space:normal;
    padding:1rem 1.1rem;font-size:.9rem;justify-content:center}
  [data-style="atelier"] .hero__grid > div:first-child > .hero__cta{align-items:stretch}
  [data-style="atelier"] .hero__cta .btn--ghost{width:100%}
}