/* =====================================================================================================
   Bitsy v3: the "tiles" design layer. Loaded after site.css on every page.
   Idea: the logo is a stack of tilted colour tiles, the way a video wall is assembled from modules.
   Colour is used in big flat shapes (orange, red, teal, yellow) on a navy ink and a cool paper white.
   Part 1 = global (type, buttons, header, footer, motion helpers). Part 2 = home page (body.home-v3).
   ===================================================================================================== */
@font-face{font-family:'Outfit';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/outfit-latin-ext-var.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/outfit-latin-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#0c1730;--ink-2:#13224a;--ink-3:#1d3068;
  --paper:#f5f7fb;--paper-2:#eaeef6;
  --t-orange:#eb6b22;--t-red:#e31b3f;--t-teal:#00aeb5;--t-yellow:#fddb00;
  --font-heading:'Outfit','Lato',system-ui,sans-serif;
  --font-heading-weight:600;
  /* Type weights (15 Oct 2026, management found the type too bold). Headings h1 to h4 read --font-heading-weight; display sizes use --w-display. Was 800 everywhere.
     Change these three numbers to make the whole site lighter or heavier. */
  --w-display:500;--w-title:600;--w-label:700;
  --ease:cubic-bezier(.2,.7,.2,1);
  --radius-xl:36px;
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
h1,h2,h3,h4,.h1,.h2,.h3{letter-spacing:-.03em}

/* ---- the four-tile mark, used as a bullet and a divider -------------------------------------- */
.tm{display:inline-grid;grid-template-columns:repeat(2,8px);grid-template-rows:repeat(2,8px);gap:2px;vertical-align:middle;flex:none}
.tm i{display:block;border-radius:2.5px;transform:rotate(var(--r,0deg))}
.tm i:nth-child(1){background:var(--t-orange);--r:-6deg}.tm i:nth-child(2){background:var(--t-red);--r:5deg}
.tm i:nth-child(3){background:var(--t-teal);--r:4deg}.tm i:nth-child(4){background:var(--t-yellow);--r:-5deg}

/* ---- scroll reveal (classes added by assets/js/motion.js) ---------------------------------- */
.js .rv{opacity:0;transform:translate3d(0,34px,0);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
.js .rv[data-reveal=fade]{transform:none}
.js .rv[data-reveal=scale]{transform:scale(.94)}
.js .rv[data-reveal=left]{transform:translate3d(-44px,0,0)}
.js .rv[data-reveal=right]{transform:translate3d(44px,0,0)}
.js .rv.in{opacity:1;transform:none}
/* split headlines: hidden until the script has wrapped the words, with a safety net if the script never runs */
.js [data-split]:not(.is-split){visibility:hidden;animation:unhide 0s 2.4s forwards}
@keyframes unhide{to{visibility:visible}}
[data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .12em .12em .04em;margin:-.08em -.12em -.12em -.04em}
[data-split] .wi{display:inline-block;transform:translate3d(0,112%,0);transition:transform 1s var(--ease);transition-delay:calc(var(--i,0) * 70ms + 120ms)}
[data-split].is-split .wi{transform:none}
.mk{position:relative;display:inline-block;z-index:0}
.mk::before{content:"";position:absolute;left:-.07em;right:-.07em;top:.1em;bottom:.0em;background:var(--t-yellow);border-radius:.16em;transform:rotate(-1.4deg) scaleX(0);transform-origin:left center;transition:transform .9s var(--ease) .85s;z-index:-1}
.is-split .mk::before{transform:rotate(-1.4deg) scaleX(1)}
.static-scene .mk::before,.rm .mk::before{transform:rotate(-1.4deg) scaleX(1);transition:none}
@media (prefers-reduced-motion:reduce){[data-split] .wi{transform:none;transition:none}.mk::before{transform:rotate(-1.4deg) scaleX(1);transition:none}.js .rv{opacity:1;transform:none;transition:none}}

/* ---- buttons ---------------------------------------------------------------------------------- */
.btn{font-family:var(--font-heading);font-weight:var(--w-title);letter-spacing:-.005em}
.btn-lg{padding:16px 28px;font-size:17px;min-height:56px;border-radius:999px}
.btn-primary{position:relative;overflow:hidden;border-radius:999px;font-weight:var(--w-title)}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.34) 50%,transparent 65%);transform:translateX(-130%);transition:transform .75s var(--ease);pointer-events:none}
.btn-primary:hover::after{transform:translateX(130%)}
.btn-line{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:2px solid currentColor;border-radius:999px;background:transparent;color:var(--ink);font-weight:var(--w-title);transition:background-color .2s ease,color .2s ease,transform .2s ease}
.btn-line:hover{background:var(--ink);color:#fff;text-decoration:none;transform:translateY(-2px)}
.btn-line svg{transition:transform .25s var(--ease)}
.btn-line:hover svg{transform:translateX(4px)}
.on-dark .btn-line,.btn-line.on-dark{color:#fff}
.on-dark .btn-line:hover,.btn-line.on-dark:hover{background:#fff;color:var(--ink)}

/* ---- header: lighter, rounder, same structure ----------------------------------------------- */
.hdr{background:rgba(255,255,255,.97);backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);border-bottom:1px solid rgba(12,23,48,.07);transition:box-shadow .3s ease}
.hdr.scrolled{box-shadow:0 10px 40px -18px rgba(12,23,48,.35)}
.mainnav > a,.hasmega > a{font-family:var(--font-heading);font-weight:var(--w-title);font-size:16px;letter-spacing:-.005em;color:var(--ink)}

/* ---- footer: ink with a tile edge ------------------------------------------------------------- */
.ftr{position:relative;overflow:hidden;background:linear-gradient(90deg,var(--t-orange) 0 25%,var(--t-red) 25% 50%,var(--t-teal) 50% 75%,var(--t-yellow) 75%) top / 100% 6px no-repeat,var(--ink)}

/* =====================================================================================================
   PART 2: HOME PAGE
   ===================================================================================================== */
.home-v3{background:var(--paper);color:var(--ink)}
.home-v3 main{overflow:clip}
.home-v3 .wrap{max-width:var(--page-max)}
.home-v3 .h2{font-size:var(--h2-size,clamp(32px,4.4vw,62px));line-height:.98;letter-spacing:-.03em;font-weight:var(--w-display);color:var(--ink)}
.home-v3 .lede{font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:#3d4a66}
.sechead{max-width:900px}
.sechead .lede{margin-top:20px;max-width:40em}
.sechead.on-dark .h2{color:#fff}
.sechead.on-dark .lede{color:#c6d0e8}

/* ---------------------------------------- 1. HERO ---------------------------------------------- */
.hx{position:relative;overflow:hidden;background:var(--paper);padding:clamp(36px,6vh,84px) 0 clamp(70px,10vh,120px);min-height:calc(100svh - 79px);display:flex;align-items:center}
.hx-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.tl{position:absolute;display:block;width:var(--w,12vw);aspect-ratio:var(--ar,1.25);--r:0deg;transform:rotate(var(--r));will-change:transform}
.tl i{display:block;width:100%;height:100%;border-radius:22%/18%;background:var(--c);animation:tileIn 1.2s var(--ease) both;animation-delay:var(--dl,0s);translate:calc(var(--px,0) * var(--k,14) * 1px) calc(var(--py,0) * var(--k,14) * 1px);transition:translate .6s var(--ease)}
.tl-a{--k:-22}.tl-b{--k:18}.tl-c{--k:-12}.tl-d{--k:26}.tl-e{--k:-30}.tl-f{--k:16}
@keyframes tileIn{from{opacity:0;transform:translate3d(var(--fx,60px),var(--fy,80px),0) rotate(calc(var(--r) * -3)) scale(.55)}to{opacity:1;transform:none}}
.tl-a{--c:var(--t-orange);--w:min(21vw,310px);--ar:1.15;--r:9deg;right:5.5%;top:6%;--dl:.15s}
.tl-b{--c:var(--t-teal);--w:min(17vw,250px);--ar:1.3;--r:-7deg;right:-3.5%;bottom:9%;--dl:.3s;--fx:90px;--fy:40px}
.tl-c{--c:var(--t-red);--w:min(10vw,150px);--ar:1.45;--r:11deg;right:31%;bottom:-9%;--dl:.45s;--fy:110px}
.tl-d{--c:var(--t-yellow);--w:min(7vw,104px);--ar:.85;--r:-9deg;left:-3%;top:44%;--dl:.55s;--fx:-60px}
.tl-e{--c:var(--t-teal);--w:min(5.5vw,84px);--ar:1;--r:7deg;left:47%;top:5%;--dl:.7s;--fy:-70px}
.tl-f{--c:var(--ink);--w:min(6.5vw,96px);--ar:1.2;--r:-5deg;left:41%;bottom:-8%;--dl:.8s;--fy:70px}
.hx-grid{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(36px,5vw,84px);align-items:center}
.hx-pill{display:inline-flex;align-items:center;gap:10px;padding:8px 18px 8px 12px;border-radius:999px;background:#fff;box-shadow:0 8px 28px -14px rgba(12,23,48,.4),0 0 0 1px rgba(12,23,48,.06);font-family:var(--font-heading);font-weight:var(--w-title);font-size:15px;color:var(--ink)}
/* Hero type (15 Oct 2026): management found ExtraBold 800 too heavy, so the hero headline, stats and form title are Outfit 500-600 and a step smaller. Was: 800, clamp(46px,7.4vw,118px), -.045em, line-height .93 */
/* Two lines: "Your Vision." / "Our AV Expertise." (data-break="2" in index.php). The longer line is 7.4 times the font size wide, so the size is also capped at 13.3 percent of the text column (cqi) and the line always fits. */
.hx-copy{container-type:inline-size}
.hx-title{margin:22px 0 22px;font-size:min(clamp(42px,6.3vw,100px),13.3cqi);line-height:1;letter-spacing:-.035em;font-weight:500;color:var(--ink);text-wrap:balance}
.hx-lede{font-size:clamp(18px,1.55vw,22px);max-width:30em;color:#33415f}
.hx-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hx-stats{list-style:none;display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:clamp(18px,3vw,46px);margin-top:44px;padding-top:26px;border-top:2px solid rgba(12,23,48,.12)}
.hx-stats li{position:relative}
.hx-stats li::before{content:"";position:absolute;left:0;top:-29px;width:34px;height:4px;border-radius:4px;background:var(--k,var(--t-orange))}
.hx-stats li:nth-child(2){--k:var(--t-red)}.hx-stats li:nth-child(3){--k:var(--t-teal)}.hx-stats li:nth-child(4){--k:var(--t-yellow)}
.hx-stats b{display:block;font:600 clamp(30px,3.3vw,48px)/1 var(--font-heading);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.hx-stats span{display:block;margin-top:6px;font-size:14px;font-weight:700;color:#46557a}

/* the form sits in a white card whose corners peek out as tiles */
body.home-v3 .hx .formwrap{position:relative;top:0}
body.home-v3 .hx .formcard{position:relative;overflow:visible;background:#fff;border:0;border-radius:30px;box-shadow:0 40px 90px -36px rgba(12,23,48,.55),0 0 0 1px rgba(12,23,48,.05);animation:cardIn .9s var(--ease) .5s both}
body.home-v3 .hx .formwrap::before,body.home-v3 .hx .formwrap::after{content:"";position:absolute;z-index:-1;border-radius:22%/18%}
body.home-v3 .hx .formwrap::before{width:104px;height:90px;left:-24px;top:-22px;background:var(--t-orange);transform:rotate(-9deg)}
body.home-v3 .hx .formwrap::after{width:128px;height:96px;right:-26px;bottom:-26px;background:var(--t-teal);transform:rotate(8deg)}
body.home-v3 .hx .formcard-hd{background:none;padding:26px 30px 0;border-radius:0}
body.home-v3 .hx .formcard-hd h2{font-size:clamp(24px,2.2vw,31px);font-weight:600;color:var(--ink);letter-spacing:-.025em;text-align:left}
body.home-v3 .hx .formcard form{padding:18px 30px 28px;gap:14px}
body.home-v3 .hx .field label{font-family:var(--font-heading);font-size:14.5px;font-weight:var(--w-title);color:var(--ink)}
body.home-v3 .hx .input,body.home-v3 .hx .cselect-btn{background-color:var(--paper);border:2px solid transparent;border-radius:14px;color:var(--ink);box-shadow:none;min-height:50px}
body.home-v3 .hx .input:hover,body.home-v3 .hx .cselect-btn:hover{border-color:rgba(12,23,48,.18)}
body.home-v3 .hx .input:focus,body.home-v3 .hx .input:focus-visible,body.home-v3 .hx .cselect.open .cselect-btn{background:#fff;border-color:var(--ink);box-shadow:0 0 0 4px rgba(0,174,181,.22);outline:0}
body.home-v3 .hx .input::placeholder{color:#5a6785}
body.home-v3 .hx .phonefield .cc{color:var(--ink);font-weight:var(--w-title)}
body.home-v3 .hx .cselect-btn .cselect-txt{color:var(--ink)}
body.home-v3 .hx .cselect-btn.is-placeholder .cselect-txt{color:#5a6785}
body.home-v3 .hx .privacy{color:#46557a}
@media (max-width:1100px){.hx{min-height:0;display:block;padding-top:28px}.hx-grid{grid-template-columns:1fr;gap:44px}.hx-stats{grid-template-columns:repeat(2,auto);gap:28px 40px}.hx-stats li::before{display:none}.tl-a{right:-4%;top:2%}.tl-c,.tl-f,.tl-e{display:none}}
@media (max-width:767px){.hx-title{font-size:min(clamp(38px,11.5vw,48px),13.3cqi)}.hx-cta .btn{flex:1 1 auto}.hx-stats{gap:24px 30px}.tl-d{display:none}.tl-a{--w:34vw}.tl-b{--w:30vw;bottom:36%}}

/* ---------------------------------------- 2. CLIENTS ----------------------------------------- */
.home-v3 .credstrip{position:relative;z-index:3;background:#fff;margin:0;padding:34px 0 40px;border-block:1px solid rgba(12,23,48,.08)}

/* ---------------------------------------- 3. SHOWREEL ---------------------------------------- */
/* Base (no JavaScript, phones, reduced motion): a plain framed video. The scroll scene below only exists when motion.js runs. */
.reel{position:relative;background:var(--paper);padding:clamp(56px,8vw,110px) 0}
.reel-stick{display:grid;place-items:center;gap:30px}
.reel-head{text-align:center;padding:0 20px}
.reel-head .h2{font-size:var(--h2-size,clamp(32px,4.4vw,62px))}
.reel-screen{position:relative;width:min(1240px,calc(100% - 32px));aspect-ratio:16/9;border-radius:32px;overflow:hidden;background:var(--ink);box-shadow:0 60px 120px -50px rgba(12,23,48,.6)}
.reel-screen video,.reel-screen > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,23,48,0) 55%,rgba(12,23,48,.7));pointer-events:none}
.reel-chips{position:absolute;z-index:2;left:clamp(14px,3vw,40px);right:clamp(14px,3vw,40px);bottom:clamp(14px,3vw,36px);display:flex;flex-wrap:wrap;gap:10px}
.reel-chips span{padding:9px 16px;border-radius:999px;font:var(--w-title) clamp(13px,1.3vw,17px)/1 var(--font-heading);color:var(--ink);background:var(--c,#fff)}
.reel-chips span:nth-child(1){--c:var(--t-yellow)}.reel-chips span:nth-child(2){--c:#fff}.reel-chips span:nth-child(3){--c:var(--t-teal)}.reel-chips span:nth-child(4){--c:var(--t-orange)}
@media (min-width:768px){
  .js .reel{height:210svh;padding:0}
  .js .reel-stick{position:sticky;top:0;height:100svh;overflow:hidden;gap:0}
  .js .reel-head{position:absolute;left:50%;top:clamp(86px,12vh,132px);transform:translateX(-50%);z-index:3;width:min(92vw,900px);padding:0;opacity:calc(1 - var(--p,0) * 2.4)}
  .js .reel-screen{--s:calc(.58 + .42 * var(--p,0));width:min(1240px,92vw);max-height:78svh;border-radius:calc(44px / var(--s));transform:scale(var(--s));margin-top:clamp(0px,7vh,70px);will-change:transform}
  .js .reel-chips{opacity:calc((var(--p,0) - .55) * 3)}
  .js .reel.static-scene{height:auto;padding:clamp(56px,8vw,110px) 0}
  .js .reel.static-scene .reel-stick{position:relative;height:auto;overflow:visible;gap:30px}
  .js .reel.static-scene .reel-head{position:static;transform:none;opacity:1;padding:0 20px}
  .js .reel.static-scene .reel-screen{--s:1;transform:none;border-radius:32px;max-height:none;margin-top:0;width:min(1240px,calc(100% - 32px))}
  .js .reel.static-scene .reel-chips{opacity:1}
}

/* ---------------------------------------- 4. STORY (pinned, navy stage) ------------------------ */
.story{position:relative;background:var(--ink);color:#fff;border-radius:36px 36px 0 0;margin-top:-1px}
.story-pin{position:relative;padding:72px 0 56px;overflow:hidden}
.story-pin::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 520px at 85% 20%,rgba(0,174,181,.22),transparent 60%),radial-gradient(700px 480px at 5% 90%,rgba(235,107,34,.18),transparent 60%);pointer-events:none}
.story-pin > .wrap{position:relative;z-index:2;width:100%}
.story-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.story-top .h2{font-size:var(--h2-size,clamp(32px,4.4vw,62px));color:#fff;max-width:14em}
.story-dots{display:none}
.story-slides{margin-top:34px}
.story-slide{display:grid;grid-template-columns:1fr;gap:28px;margin-bottom:56px;align-items:center}
.story-fig{order:-1;position:relative;aspect-ratio:16/10;width:100%;justify-self:stretch}
.story-copy h3{font-size:clamp(30px,3.8vw,56px);line-height:1;letter-spacing:-.03em;font-weight:var(--w-display);color:#fff;margin-bottom:16px}
.story-copy .apps{font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:#c6d0e8;max-width:30em;margin-bottom:22px}
.story-copy ul{list-style:none;display:grid;gap:11px;margin-bottom:30px}
.story-copy li{display:flex;gap:12px;align-items:flex-start;font-size:clamp(16px,1.3vw,18px);font-weight:600;color:#fff;line-height:1.4}
.story-copy li::before{content:"";flex:none;width:12px;height:12px;border-radius:4px;margin-top:6px;background:var(--c,var(--t-orange));transform:rotate(-6deg)}
.story-copy .acts{display:flex;flex-wrap:wrap;gap:12px}
.story-fig::before{content:"";position:absolute;inset:6% -3% -6% 7%;background:var(--c,var(--t-orange));border-radius:30px;transform:rotate(3deg)}
.story-fig img{position:relative;width:100%;height:100%;object-fit:cover;border-radius:30px;box-shadow:0 40px 90px -30px rgba(0,0,0,.65)}
.story-slide:nth-child(4n+1){--c:var(--t-orange)}.story-slide:nth-child(4n+2){--c:var(--t-teal)}.story-slide:nth-child(4n+3){--c:var(--t-red)}.story-slide:nth-child(4n){--c:var(--t-yellow)}
.story .btn-primary{color:#fff}
@media (min-width:901px){
  .js .story{height:calc(var(--n,6) * 92svh + 18svh);border-radius:56px 56px 0 0}
  .js .story-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;padding:clamp(86px,11vh,112px) 0 0}
  .js .story-dots{display:flex;gap:8px;align-items:center;padding-bottom:12px}
  .js .story-dots i{display:block;width:14px;height:14px;border-radius:5px;background:rgba(255,255,255,.18);transition:width .5s var(--ease),background-color .4s ease}
  .js .story-dots i:nth-child(4n+1).on{background:var(--t-orange)}.js .story-dots i:nth-child(4n+2).on{background:var(--t-red)}.js .story-dots i:nth-child(4n+3).on{background:var(--t-teal)}.js .story-dots i:nth-child(4n).on{background:var(--t-yellow)}
  .js .story-dots i.cur{width:44px}
  .js .story-slides{position:relative;flex:1;margin-top:clamp(8px,2vh,24px);margin-bottom:clamp(18px,3vh,40px)}
  .js .story-slide{position:absolute;inset:0 var(--page-pad);grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,4.5vw,84px);margin:0;opacity:0;visibility:hidden;transform:translate3d(0,40px,0);transition:opacity .6s ease,transform .8s var(--ease),visibility 0s .6s}
  .js .story-slide.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease .1s,transform .8s var(--ease) .1s,visibility 0s}
  .js .story-slide.is-past{transform:translate3d(0,-40px,0)}
  .js .story-fig{order:0;aspect-ratio:4/3;max-height:100%;justify-self:end}
  .js .story-fig::before{transition:transform .9s var(--ease)}
  .js .story-fig img{transform:rotate(-1.6deg) scale(.96);transition:transform 1.1s var(--ease)}
  .js .story-slide.is-active .story-fig img{transform:none}
  .js .story-slide.is-active .story-fig::before{transform:rotate(-2.4deg)}
  .js .story.static-scene{height:auto;border-radius:36px 36px 0 0}
  .js .story.static-scene .story-pin{position:relative;height:auto;overflow:hidden;display:block;padding:72px 0 56px}
  .js .story.static-scene .story-dots{display:none}
  .js .story.static-scene .story-slides{position:static;margin-top:34px}
  .js .story.static-scene .story-slide{position:relative;inset:auto;opacity:1;visibility:visible;transform:none;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);margin-bottom:64px;transition:none}
  .js .story.static-scene .story-fig{order:0;aspect-ratio:4/3}
  .js .story.static-scene .story-fig img{transform:none;transition:none}
}

/* ---------------------------------------- 5. SOLUTIONS BENTO ------------------------------------- */
.sol{padding:clamp(72px,10vw,150px) 0 clamp(54px,7vw,100px);background:var(--paper)}
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(200px,17.5vw,260px);gap:16px;margin-top:clamp(36px,5vw,64px)}
.bento .bt:nth-child(6n+1),.bento .bt:nth-child(6n+6){grid-column:span 2}
.bt{--c:var(--t-teal);position:relative;display:block;isolation:isolate;overflow:hidden;border-radius:28px;color:#fff;background:var(--ink);text-decoration:none;transform:translateZ(0);transition:transform .5s var(--ease),border-radius .5s var(--ease)}
.bt[data-g=displays]{--c:var(--t-orange)}.bt[data-g=kiosks]{--c:var(--t-red)}.bt[data-g=rooms]{--c:var(--t-teal)}
.bt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.02);transition:transform 1.1s var(--ease)}
.bt::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,23,48,.05) 20%,rgba(12,23,48,.88) 100%);transition:opacity .5s ease}
.bt::after{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(260px 260px at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--c) 55%,transparent),transparent 70%);opacity:0;transition:opacity .4s ease;mix-blend-mode:soft-light;pointer-events:none}
.bt:hover{transform:translateY(-6px);border-radius:40px 20px 40px 20px;text-decoration:none;color:#fff}
.bt:hover img{transform:scale(1.1)}
.bt:hover::after{opacity:1}
.bt-in{position:absolute;inset:auto 0 0 0;padding:22px 24px 24px;display:flex;flex-direction:column;gap:6px}
.bt-g{align-self:flex-start;padding:5px 12px;border-radius:999px;background:var(--c);color:var(--ink);font:var(--w-label) 12px/1 var(--font-heading);letter-spacing:.02em}
.bt-t{font:var(--w-title) clamp(20px,2vw,28px)/1.05 var(--font-heading);letter-spacing:-.025em}
.bt-go{position:absolute;right:20px;top:20px;width:46px;height:46px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;transform:scale(.6) rotate(-30deg);opacity:0;transition:transform .5s var(--ease),opacity .3s ease}
.bt:hover .bt-go,.bt:focus-visible .bt-go{transform:none;opacity:1}
.bt:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.sol-foot{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
@media (max-width:1000px){.bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(180px,30vw,240px)}.bento .bt:nth-child(6n+1),.bento .bt:nth-child(6n+6){grid-column:auto}.bento .bt:nth-child(5n+1){grid-column:span 2}}
@media (max-width:560px){.bento{grid-template-columns:1fr;grid-auto-rows:210px}.bento .bt:nth-child(5n+1){grid-column:auto}.bt-go{opacity:1;transform:none;width:40px;height:40px}}

/* alliances scroller sits on the paper, between the bento and the process band */
.home-v3 .alliancesec{padding:6px 0 clamp(60px,8vw,110px);background:var(--paper)}

/* ---------------------------------------- 6. PROCESS (teal band) --------------------------------- */
.proc{position:relative;background:var(--t-teal);color:var(--ink);padding:clamp(80px,11vw,160px) 0 clamp(80px,11vw,150px);border-radius:56px 56px 0 0;overflow:hidden}
.proc .h2{color:var(--ink)}
.proc .lede{color:#073b40}
.proc-grid{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:clamp(44px,6vw,84px);list-style:none}
.proc-line{position:absolute;left:0;right:0;top:-26px;height:6px;border-radius:6px;background:rgba(12,23,48,.16);overflow:hidden}
.proc-line::after{content:"";position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(1)}
.js .proc-line::after{transform:scaleX(var(--p,0))}
.js .proc.static-scene .proc-line::after{transform:scaleX(1)}
.proc-step{--k:0;position:relative;background:#fff;border-radius:28px;padding:30px 28px 32px;box-shadow:0 30px 60px -34px rgba(7,59,64,.7);}
.proc-step:nth-child(2){--k:1}.proc-step:nth-child(3){--k:2}.proc-step:nth-child(4){--k:3}
.proc-ic{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:var(--c,var(--t-orange));color:var(--ink);margin-bottom:22px;transform:rotate(-6deg)}
.proc-step:nth-child(2) .proc-ic{--c:var(--t-red);color:#fff;transform:rotate(5deg)}.proc-step:nth-child(3) .proc-ic{--c:var(--t-yellow);transform:rotate(-4deg)}.proc-step:nth-child(4) .proc-ic{--c:var(--ink);color:#fff;transform:rotate(6deg)}
.proc-step h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.03em;margin-bottom:10px;color:var(--ink)}
.proc-step p{font-size:16.5px;line-height:1.55;color:#33415f}
.proc .btn-primary{margin-top:44px}
@media (max-width:1000px){.proc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.proc-line{display:none}}
@media (max-width:600px){.proc-grid{grid-template-columns:1fr}.proc{border-radius:36px 36px 0 0}}

/* ---------------------------------------- 7. WHY (white) ------------------------------------------ */
.why{padding:clamp(80px,10vw,150px) 0;background:#fff}
.why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(40px,5vw,70px)}
.why-card{--k:var(--t-orange);position:relative;overflow:hidden;border-radius:32px;padding:clamp(28px,3vw,44px);background:var(--paper);min-height:340px;display:flex;flex-direction:column;transition:transform .5s var(--ease)}
.why-card:nth-child(2){--k:var(--t-teal)}.why-card:nth-child(3){--k:var(--t-yellow)}
.why-card::before{content:"";position:absolute;right:-34px;top:-34px;width:150px;height:130px;border-radius:26px;background:var(--k);transform:rotate(14deg);transition:transform .7s var(--ease)}
.why-card::after{content:"";position:absolute;inset:0;background:radial-gradient(360px 260px at var(--mx,70%) var(--my,0%),color-mix(in srgb,var(--k) 22%,transparent),transparent 70%);opacity:0;transition:opacity .4s ease;pointer-events:none}
.why-card:hover{transform:translateY(-6px)}
.why-card:hover::before{transform:rotate(4deg) scale(1.12)}
.why-card:hover::after{opacity:1}
.why-card b{position:relative;display:block;font:var(--w-display) clamp(56px,7vw,100px)/.9 var(--font-heading);letter-spacing:-.05em;color:var(--ink);margin-bottom:auto;padding-bottom:36px}
.why-card h3{position:relative;font-size:clamp(22px,2vw,28px);letter-spacing:-.03em;margin-bottom:10px;color:var(--ink)}
.why-card p{position:relative;font-size:16.5px;line-height:1.55;color:#3d4a66}
.certs-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:clamp(36px,4vw,56px);padding-top:30px;border-top:2px solid rgba(12,23,48,.1)}
.certs-row p{font:var(--w-title) 17px/1.3 var(--font-heading);color:var(--ink)}
.certs-row img{height:62px;width:auto;padding:8px 14px;border-radius:16px;background:#fff;border:1.5px solid rgba(12,23,48,.1)}
@media (max-width:900px){.why-grid{grid-template-columns:1fr}.why-card{min-height:0}.why-card b{margin-bottom:12px;padding-bottom:0}}

/* ---------------------------------------- 8. INDUSTRIES ----------------------------------------- */
.home-v3 .indsec{padding:clamp(72px,9vw,130px) 0;background:var(--paper)}
.home-v3 .indsec .kicker{display:none}
.home-v3 .indtabs-list [role=tab]{font-family:var(--font-heading);font-size:20px;border-radius:20px}
.home-v3 .indtabs-list [role=tab][aria-selected=true]{background:var(--ink)}
.home-v3 .indpanel{border:0;border-radius:32px;box-shadow:0 40px 80px -40px rgba(12,23,48,.4)}
.home-v3 .indpanel img{border-radius:0}
.home-v3 .indpanel-copy h3{font-size:clamp(28px,3vw,42px);letter-spacing:-.04em}

/* ---------------------------------------- 9. QUOTES (navy) ---------------------------------------- */
.home-v3 .quotesec{background:var(--ink);padding:clamp(80px,10vw,150px) 0 calc(clamp(80px,10vw,150px) + 56px);position:relative;overflow:hidden;border-radius:56px 56px 0 0}
.home-v3 .quotesec::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 480px at 90% 0%,rgba(253,219,0,.14),transparent 60%),radial-gradient(700px 500px at 0% 100%,rgba(0,174,181,.18),transparent 60%);pointer-events:none}
.home-v3 .quotesec .wrap{position:relative}
.home-v3 .quotesec h2,.home-v3 .quotesec .h2{color:#fff;font-size:var(--h2-size,clamp(32px,4.4vw,62px));text-align:left;margin-bottom:clamp(30px,4vw,56px)}
.home-v3 .quotesec .quotes{gap:20px}
.home-v3 .quotesec blockquote{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:30px;box-shadow:none;color:#fff;backdrop-filter:blur(6px)}
.home-v3 .quotesec blockquote p{color:#e8eefc;font-size:18px;line-height:1.6}
.home-v3 .quotesec blockquote footer b{color:#fff}
.home-v3 .quotesec blockquote footer span{color:#aebbdb}
.home-v3 .quotesec .stars{color:var(--t-yellow)}
.home-v3 .quotesec blockquote::before{color:var(--t-orange);opacity:.5}

/* ---------------------------------------- 10. PAPER ZONE: about, guide, FAQ --------------------------- */
.paper{position:relative;background:#fff;border-radius:56px 56px 0 0;margin-top:-56px;z-index:2;padding:20px 0 56px}
.paper .sec{background:transparent}
@media (max-width:767px){.paper{border-radius:36px 36px 0 0;margin-top:-36px}}

/* ---------------------------------------- 11. FINAL CTA (orange band) ---------------------------------- */
.home-v3 .talksec{position:relative;z-index:3;margin-top:-56px;padding:clamp(60px,8vw,110px) 0 clamp(70px,9vw,130px);background:linear-gradient(135deg,#bf3a1d 0%,#d2431f 55%,#e0562a 100%);border-radius:56px 56px 0 0;overflow:hidden}
.home-v3 .talksec::before{content:"";position:absolute;right:-8%;top:-20%;width:46vw;height:30vw;border-radius:4vw;background:var(--t-yellow);opacity:.95;transform:rotate(14deg)}
.home-v3 .talksec::after{content:"";position:absolute;left:-6%;bottom:-24%;width:30vw;height:20vw;border-radius:3vw;background:var(--ink);transform:rotate(-9deg)}
.home-v3 .talkband{position:relative;z-index:2;background:none;box-shadow:none;border:0;padding:0}
.home-v3 .talkcopy .kicker{background:#fff;border:0;color:var(--ink)}
.home-v3 .talkcopy .h2{color:#fff;font-size:clamp(40px,5.6vw,84px)}
.home-v3 .talkcopy .lede{color:#fff}
.home-v3 .talkpts li{color:#fff}
.home-v3 .talkform{border-radius:30px;box-shadow:0 50px 100px -40px rgba(12,23,48,.8)}
@media (max-width:767px){.home-v3 .talksec{border-radius:36px 36px 0 0}}
.home-v3 .ftr{margin-top:0}

/* floating "What is CTS?" preview waits until the hero has scrolled away (assets/js/motion.js sets html.in-hero) */
.in-hero .ctsfloat{opacity:0;transform:translate3d(0,24px,0);pointer-events:none}
.ctsfloat{transition:opacity .5s ease,transform .6s var(--ease)}

/* header stays solid white on every background (it sits over navy, teal and orange bands) */
.hdr,.hdr.scrolled{background:rgba(255,255,255,.97)}

/* "What is CTS?" preview: a compact round thumbnail at every width, the caption slides out on hover or focus.
   (The full card used to cover the call-to-action buttons on the left of the page.) */
.ctsfloat{width:auto;left:22px;bottom:22px;background:transparent;border:0;box-shadow:none;border-radius:999px;overflow:visible}
.ctsfloat-btn{position:relative;overflow:visible;width:68px;height:68px;border:3px solid #fff;border-radius:999px;box-shadow:0 10px 28px rgba(8,15,30,.4)}
.ctsfloat-img{position:absolute;inset:0;aspect-ratio:auto;border-radius:999px;overflow:hidden}
.ctsfloat-img img{width:100%;height:100%}
.ctsfloat .ctsplay{width:30px;height:30px;box-shadow:none}
.ctsfloat-cap{position:absolute;left:80px;top:50%;display:block;padding:9px 16px;border-radius:999px;background:#fff;box-shadow:0 10px 28px rgba(8,15,30,.3);white-space:nowrap;opacity:0;pointer-events:none;transform:translate3d(-8px,-50%,0);transition:opacity .25s ease,transform .35s var(--ease)}
.ctsfloat-cap b{font-size:14px}.ctsfloat-cap span{margin:0}
.ctsfloat:hover .ctsfloat-cap,.ctsfloat-btn:focus-visible .ctsfloat-cap{opacity:1;transform:translate3d(0,-50%,0)}
.ctsfloat-btn::after{content:"";position:absolute;inset:-9px;border-radius:999px;border:2px solid var(--t-orange);opacity:0;animation:ringPulse 3.2s ease-out 2s infinite;pointer-events:none}
@keyframes ringPulse{0%{opacity:.8;transform:scale(.88)}70%,100%{opacity:0;transform:scale(1.18)}}
@media (prefers-reduced-motion:reduce){.ctsfloat-btn::after{animation:none}}
.ctsfloat-x{top:-8px;right:-8px}
@media (max-width:767px){.ctsfloat{left:12px;bottom:92px}.ctsfloat-btn{width:62px;height:62px}.ctsfloat-cap{display:none}}

/* =====================================================================================================
   PART 3: INNER PAGES (offering pages, about, clients, gallery, blog, contact)
   Same family as the home page: tiles, marker headline, white form card with tile corners, Outfit type.
   ===================================================================================================== */
.pagehero.banner{--hero-overlay:linear-gradient(100deg,rgba(12,23,48,.95) 0%,rgba(12,23,48,.86) 46%,rgba(12,23,48,.58) 100%);padding:clamp(40px,6vh,76px) 0 clamp(56px,8vh,96px);border-bottom:0;overflow:hidden}
.pagehero.banner::before,.pagehero.banner::after{content:"";position:absolute;z-index:0;border-radius:22%/18%;pointer-events:none}
.pagehero.banner::before{width:min(24vw,340px);aspect-ratio:1.2;right:-3%;top:-6%;background:var(--t-orange);transform:rotate(11deg)}
.pagehero.banner::after{width:min(13vw,190px);aspect-ratio:1.3;left:-3.5%;bottom:-17%;background:var(--t-teal);transform:rotate(-8deg)}
.pagehero.banner .pagehero-in{position:relative;z-index:2;gap:clamp(32px,5vw,76px)}
.pagehero.banner h1{font-size:clamp(36px,4.8vw,72px);line-height:1;letter-spacing:-.035em;font-weight:var(--w-display);color:#fff;margin-bottom:20px;text-wrap:balance}
.pagehero.banner .lede{font-size:clamp(17px,1.5vw,21px);color:#d6def0;max-width:34em}
.pagehero.banner .crumbs{display:inline-flex;flex-wrap:wrap;gap:4px 6px;margin-bottom:22px;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.1);font-size:14px;font-weight:700;color:#fff;backdrop-filter:blur(6px)}
.pagehero.banner .crumbs a{color:#fff}
.pagehero.banner .acts .btn{min-height:54px;padding:14px 26px;font-size:16.5px;border-radius:999px}
.pagehero.banner .acts .btn-secondary{background:#fff;color:var(--ink);border:0}
.pagehero.banner .herostats{display:flex;flex-wrap:wrap;gap:20px clamp(22px,3vw,44px);margin-top:36px;padding-top:24px;border-top:2px solid rgba(255,255,255,.18)}
.pagehero.banner .herostats b{display:block;font:var(--w-title) clamp(28px,3vw,42px)/1 var(--font-heading);letter-spacing:-.03em;color:#fff}
.pagehero.banner .herostats span{display:block;margin-top:6px;font-size:14px;font-weight:700;color:#bfcbe6}
/* the form: a white card whose corners peek out as tiles */
body .pagehero.banner .formwrap{position:relative}
body .pagehero.banner .formwrap::before,body .pagehero.banner .formwrap::after{content:"";position:absolute;z-index:-1;border-radius:22%/18%}
body .pagehero.banner .formwrap::before{width:100px;height:88px;left:-22px;top:-22px;background:var(--t-yellow);transform:rotate(-9deg)}
body .pagehero.banner .formwrap::after{width:124px;height:94px;right:-24px;bottom:-24px;background:var(--t-red);transform:rotate(8deg)}
body .pagehero.banner .formcard{background:#fff;border:0;border-radius:30px;box-shadow:0 40px 90px -36px rgba(0,0,0,.7);backdrop-filter:none;-webkit-backdrop-filter:none}
body .pagehero.banner .formcard-hd{background:none;padding:26px 30px 0}
body .pagehero.banner .formcard-hd h2{font-size:clamp(25px,2.2vw,32px);color:var(--ink);text-align:left}
body .pagehero.banner .formcard form{padding:16px 30px 28px;gap:14px}
body .pagehero.banner .formcard .field label{font-family:var(--font-heading);font-size:14.5px;font-weight:var(--w-title);color:var(--ink)}
body .pagehero.banner .formcard .input,body .pagehero.banner .formcard .cselect-btn{background-color:var(--paper);border:2px solid transparent;border-radius:14px;color:var(--ink);box-shadow:none;min-height:50px}
body .pagehero.banner .formcard .input:hover,body .pagehero.banner .formcard .cselect-btn:hover{border-color:rgba(12,23,48,.18)}
body .pagehero.banner .formcard .input:focus,body .pagehero.banner .formcard .input:focus-visible,body .pagehero.banner .formcard .cselect.open .cselect-btn{background-color:#fff;border-color:var(--ink);box-shadow:0 0 0 4px rgba(0,174,181,.22);outline:0}
body .pagehero.banner .formcard .input::placeholder{color:#5a6785}
body .pagehero.banner .formcard .phonefield .cc{color:var(--ink);font-weight:var(--w-title)}
body .pagehero.banner .formcard .cselect-btn .cselect-txt{color:var(--ink)}
body .pagehero.banner .formcard .cselect-btn.is-placeholder .cselect-txt{color:#5a6785}
body .pagehero.banner .formcard .privacy{color:#46557a}
@media (max-width:1100px){.pagehero.banner::before{width:34vw;top:-3%}.pagehero.banner::after{display:none}}

/* headings and long copy */
.sec > .wrap > .h2,.sec .h2{letter-spacing:-.04em}
.sec .split>.washed{box-shadow:14px 14px 0 -1px var(--t-teal),0 30px 60px -30px rgba(12,23,48,.4)!important}
.sec .split:nth-of-type(even)>.washed{box-shadow:14px 14px 0 -1px var(--t-orange),0 30px 60px -30px rgba(12,23,48,.4)!important}
.faqs details{border-radius:22px}
.faqs summary{font-family:var(--font-heading);font-weight:var(--w-title)}
.glance h3{font-family:var(--font-heading);font-weight:var(--w-label)}
.glance .chips li{font-family:var(--font-heading);font-weight:600}

/* cards: the same tile-colour edge on hover everywhere */
.card:hover,.stepcard:hover{border-color:var(--t-teal)}
.js .pagehero.banner h1:not(.is-split){visibility:hidden;animation:unhide 0s 2.4s forwards}
.pagehero.banner h1 .wi{color:inherit}
.pagehero.banner h1 .mk{color:#fff}
.pagehero.banner h1.is-split .mk{color:var(--ink);transition:color .3s ease 1.25s}
@media (prefers-reduced-motion:reduce){.pagehero.banner h1.is-split .mk{transition:none}}

/* reduced motion: every scene is still, nothing slides, fades or loops */
@media (prefers-reduced-motion:reduce){
  .tl i{animation:none}
  .btn-primary::after{display:none}
  .btn-line,.btn-line svg,.bt,.bt img,.bt::after,.bt-go,.why-card,.why-card::before,.why-card::after,.proc-step{transition:none}
  body.home-v3 .hx .formcard{animation:none}
  .js .story-slide,.js .story-slide.is-active,.story-fig img,.story-fig::before,.story-dots i{transition:none}
  .ctsfloat,.ctsfloat-cap{transition:none}
}

/* pause controls (showreel and logo scrollers) */
.media-toggle,.bs-pause{display:grid;place-items:center;border:0;cursor:pointer;color:var(--ink);background:#fff;box-shadow:0 8px 24px -8px rgba(12,23,48,.5);transition:transform .2s ease,background-color .2s ease}
.media-toggle{position:absolute;z-index:3;right:clamp(14px,2.4vw,28px);top:clamp(14px,2.4vw,28px);width:48px;height:48px;border-radius:50%}
.bs-pause{position:absolute;right:calc(max(0px,(100% - var(--page-max)) / 2) + var(--page-pad));top:-6px;width:36px;height:36px;border-radius:50%}
.brandscroll{position:relative}
.media-toggle:hover,.bs-pause:hover{transform:scale(1.08);background:var(--t-yellow)}
.media-toggle:focus-visible,.bs-pause:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.media-toggle .ic-play,.bs-pause .ic-play{display:none}
.media-toggle[aria-pressed=true] .ic-play,.bs-pause[aria-pressed=true] .ic-play{display:block}
.media-toggle[aria-pressed=true] .ic-pause,.bs-pause[aria-pressed=true] .ic-pause{display:none}
.brandscroll.paused .brandtrack{animation-play-state:paused}
@media (max-width:640px){.bs-pause{display:none}}

/* =====================================================================================================
   PART 4: ONE SECTION KIT for the lower half of the home page and every inner page
   Same heading scale, same tile bar, same rhythm, same bands. (Replaces the older per-section sizes.)
   ===================================================================================================== */
:root{--h2-size:clamp(32px,4.4vw,62px)}
main > section:nth-of-type(4n+1),.paper > section:nth-of-type(4n+1){--tc:var(--t-orange)}
main > section:nth-of-type(4n+2),.paper > section:nth-of-type(4n+2){--tc:var(--t-teal)}
main > section:nth-of-type(4n+3),.paper > section:nth-of-type(4n+3){--tc:var(--t-red)}
main > section:nth-of-type(4n),.paper > section:nth-of-type(4n){--tc:var(--t-yellow)}

/* 1. headings: one scale, one weight, a small tilted colour tile above, left aligned */
#main section.sec h2.h2,#main section.longread .lr-article h2{font-family:var(--font-heading)!important;font-size:var(--h2-size)!important;line-height:1.04!important;letter-spacing:-.03em!important;font-weight:var(--w-display);color:var(--ink);margin:0 0 24px!important;padding:0!important;text-wrap:balance;text-align:left}
#main section.longread .lr-article h2.h2{font-size:clamp(30px,3.7vw,52px)!important}
#main section.sec h2.h2::before,#main section.longread .lr-article h2::before{content:"";display:block;width:60px;height:10px;margin-bottom:22px;border-radius:6px;background:var(--tc,var(--t-orange));transform:rotate(-3deg)}
#main section.sec h2.h2::after,#main section.longread .lr-article h2::after{content:none!important;display:none!important}
#main .sec > .wrap > .kicker{display:none}
#main section.sec .lede,#main .sechead .lede{font-size:clamp(17px,1.45vw,20px);line-height:1.6;color:#3d4a66}
#main section.sec .prose p,#main .lr-article .prose p{font-size:clamp(16.5px,1.25vw,18px);line-height:1.75;color:#3d4a66}
#main section.sec .prose h3{font-family:var(--font-heading);font-size:clamp(22px,2vw,28px);letter-spacing:-.03em;color:var(--ink)}

/* 2. rhythm and backgrounds */
body:not(.home-v3) #main > section.sec{padding:clamp(60px,7.5vw,112px) 0;margin-top:0}
body:not(.home-v3) #main > section.sec:nth-of-type(even){background:#fff}
.paper > section.sec{padding:clamp(56px,7vw,104px) 0}
.paper .aboutsec{padding-top:clamp(40px,5vw,72px)}

/* 3. quotes: navy band, monogram tiles, staggered columns (home and inner pages) */
#main section.sec:has(> .wrap > .quotes){position:relative;overflow:hidden;background:var(--ink)!important;color:#fff;border-radius:56px 56px 0 0}
#main section.sec:has(> .wrap > .quotes)::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 480px at 92% 0%,rgba(253,219,0,.14),transparent 60%),radial-gradient(700px 500px at 0% 100%,rgba(0,174,181,.18),transparent 60%);pointer-events:none}
#main section.sec:has(> .wrap > .quotes) > .wrap{position:relative}
#main section.sec:has(> .wrap > .quotes) h2.h2{color:#fff}
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
.quotes blockquote{position:relative;display:flex;flex-direction:column;margin:0;padding:clamp(26px,2.6vw,38px);border-radius:32px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);box-shadow:none;color:#fff;transition:transform .5s var(--ease),background-color .3s ease}
.quotes blockquote:nth-child(even){margin-top:clamp(0px,3.4vw,52px)}
.quotes blockquote:hover{transform:translateY(-6px) rotate(-.35deg);background:rgba(255,255,255,.09)}
.quotes blockquote::before{content:"\201C";position:absolute;right:26px;top:6px;font:var(--w-title) 110px/1 var(--font-heading);background:none;-webkit-text-fill-color:currentColor;color:var(--c,var(--t-orange));opacity:.9}
.quotes blockquote:nth-child(4n+1){--c:var(--t-orange)}.quotes blockquote:nth-child(4n+2){--c:var(--t-teal)}.quotes blockquote:nth-child(4n+3){--c:var(--t-red)}.quotes blockquote:nth-child(4n){--c:var(--t-yellow)}
.quotes .stars{color:var(--t-yellow);margin-bottom:16px}
.quotes blockquote p{font-size:clamp(17px,1.35vw,20px);line-height:1.65;color:#eaf0fd;margin:0 0 26px;flex:1}
.quotes blockquote footer{display:flex;align-items:center;gap:16px;margin-top:auto;padding-top:20px;border-top:1px solid rgba(255,255,255,.16)}
.quotes .mono{flex:none;display:grid;place-items:center;width:54px;height:54px;border-radius:17px;background:var(--c,var(--t-orange));color:var(--ink);font:var(--w-title) 19px/1 var(--font-heading);letter-spacing:-.02em;transform:rotate(-6deg)}
.quotes .who{display:grid;gap:3px;min-width:0}
.quotes blockquote footer b{font:var(--w-title) 17px/1.2 var(--font-heading);color:#fff}
.quotes blockquote footer span{font-size:14.5px;line-height:1.4;color:#b9c6e3}
@media (max-width:900px){.quotes{grid-template-columns:1fr}.quotes blockquote:nth-child(even){margin-top:0}#main section.sec:has(> .wrap > .quotes){border-radius:36px 36px 0 0}}

/* 4. FAQ: navy help card on the left, big answer rows with a coloured plus tile on the right */
#main section.sec:has(.faqs) .split.narrow-left{grid-template-columns:minmax(0,.82fr) minmax(0,1.3fr);gap:clamp(28px,4vw,64px);align-items:start}
#main section.sec:has(.faqs) .split.narrow-left > div:first-child{position:sticky;top:112px;padding:clamp(28px,3vw,44px);border-radius:34px;background:var(--ink);border:0;box-shadow:0 40px 70px -40px rgba(12,23,48,.7);overflow:hidden}
#main section.sec:has(.faqs) .split.narrow-left > div:first-child::after{content:"";position:absolute;right:-30px;bottom:-30px;width:130px;height:104px;border-radius:26px;background:var(--t-yellow);transform:rotate(12deg);z-index:0}
#main section.sec:has(.faqs) .split.narrow-left > div:first-child > *{position:relative;z-index:1}
#main section.sec:has(.faqs) .split.narrow-left > div:first-child h2.h2{color:#fff;font-size:clamp(28px,3.2vw,46px)!important}
#main section.sec:has(.faqs) .split.narrow-left > div:first-child .lede{color:#c6d0e8}
#main section.sec:has(.faqs) .split.narrow-left > div:first-child .btn-secondary{background:#fff;color:var(--ink);border:0;border-radius:999px;font-weight:var(--w-title)}
#main section.sec:has(.faqs) .split.narrow-left > div:first-child::before{display:none}
.faqs{display:grid;gap:14px}
.faqs details{background:#fff;border:2px solid transparent;border-radius:24px;padding:0;box-shadow:0 1px 0 rgba(12,23,48,.06),0 14px 30px -26px rgba(12,23,48,.5);transition:border-color .25s ease,box-shadow .3s ease}
.faqs details[open]{border-color:var(--ink);box-shadow:0 34px 56px -36px rgba(12,23,48,.55)}
.faqs summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 26px;cursor:pointer;list-style:none;font:var(--w-title) clamp(17px,1.35vw,20px)/1.3 var(--font-heading);letter-spacing:-.015em;color:var(--ink)}
.faqs summary::before{content:none!important;display:none!important}
.faqs summary::after{content:"+";float:none;flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:var(--fc,var(--t-orange));color:var(--ink);font:var(--w-title) 26px/1 var(--font-heading);transform:rotate(-6deg);transition:transform .4s var(--ease)}
.faqs details[open] summary::after{content:"+";transform:rotate(45deg)}
.faqs details:nth-child(4n+2){--fc:var(--t-teal)}.faqs details:nth-child(4n+3){--fc:var(--t-red)}.faqs details:nth-child(4n){--fc:var(--t-yellow)}
.faqs details:nth-child(4n+3) summary::after{color:#fff}
.faqs details p{margin:0;padding:0 26px 24px;font-size:clamp(16px,1.2vw,17.5px);line-height:1.7;color:#3d4a66}
.faqs summary:focus-visible{outline:3px solid var(--t-teal);outline-offset:-3px;border-radius:22px}
@media (max-width:900px){#main section.sec:has(.faqs) .split.narrow-left{grid-template-columns:1fr}#main section.sec:has(.faqs) .split.narrow-left > div:first-child{position:relative;top:0}}
@media (prefers-reduced-motion:reduce){.faqs summary::after,.quotes blockquote{transition:none}}

/* 5. split sections: copy and picture with room to breathe */
#main section.sec .split{gap:clamp(36px,5vw,84px)}
#main section.sec .split > .washed{border-radius:32px!important}

/* 6. questionnaire strip and closing call to action */
#main .ctaband{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;padding:clamp(30px,4vw,56px);border-radius:36px;background:var(--ink);color:#fff;box-shadow:none}
#main .ctaband::after{content:"";position:absolute;right:-34px;top:-40px;width:170px;height:130px;border-radius:30px;background:var(--t-yellow);transform:rotate(14deg)}
#main .ctaband > *{position:relative;z-index:1}
#main .ctaband h2{font-family:var(--font-heading);font-size:clamp(24px,2.7vw,38px);line-height:1.1;letter-spacing:-.03em;font-weight:var(--w-display);color:#fff;max-width:20em;margin:0}
#main .ctaband .acts{display:flex;flex-wrap:wrap;gap:12px}
#main .ctaband .btn{min-height:52px;padding:13px 26px;border-radius:999px;font-size:16.5px}
#main .ctaband .btn-ink{background:var(--t-yellow);color:var(--ink)}
#main .ctaband .btn-cream{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.7)}
#main .ctaband .btn-cream:hover{background:#fff;color:var(--ink)}
#main .finalcta{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(26px,4vw,64px);align-items:center;padding:clamp(28px,4vw,60px);border-radius:44px;background:linear-gradient(135deg,#bf3a1d 0%,#d2431f 55%,#e0562a 100%);color:#fff}
#main .finalcta::before{content:"";position:absolute;right:-5%;top:-26%;width:34%;aspect-ratio:1.3;border-radius:28px;background:var(--t-yellow);transform:rotate(14deg)}
#main .finalcta::after{content:"";position:absolute;left:-4%;bottom:-24%;width:22%;aspect-ratio:1.3;border-radius:26px;background:var(--ink);transform:rotate(-9deg)}
#main .finalcta > *{position:relative;z-index:1}
#main .finalcta-shot .washed{border-radius:30px;overflow:hidden;transform:rotate(-2.2deg);box-shadow:0 40px 80px -30px rgba(0,0,0,.6);filter:none}
#main .finalcta h2{font-family:var(--font-heading);font-size:clamp(30px,3.8vw,56px);line-height:1.02;letter-spacing:-.03em;font-weight:var(--w-display);color:#fff;margin:0 0 16px}
#main .finalcta p{font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:#fff;margin:0 0 24px;max-width:30em}
#main .finalcta .acts{display:flex;flex-wrap:wrap;gap:12px}
#main .finalcta .btn{min-height:54px;padding:14px 28px;border-radius:999px;font-size:17px}
#main .finalcta .btn-primary{background:var(--ink);color:#fff}
#main .finalcta .btn-sage{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.75)}
#main .finalcta .btn-sage:hover{background:#fff;color:var(--ink)}
@media (max-width:900px){#main .finalcta{grid-template-columns:1fr;border-radius:32px}}

/* 7. cards and picture grids */
#main section.sec .cards .card,#main section.sec .grid3 > .card{border-radius:28px}
#main section.sec .cards .card h3,#main section.sec .cardbody h3{font-family:var(--font-heading);letter-spacing:-.03em}
#main section.sec .grid3 .washed,#main section.sec .gallery-masonry .washed{border-radius:24px;overflow:hidden}
#main section.sec .grid3 .washed img{transition:transform .8s var(--ease)}
#main section.sec .grid3 .washed:hover img{transform:scale(1.06)}

/* 8. HOME: industries as a layered composition (tab list, photo on a tilted tile, copy card overlapping it) */
.home-v3 .indsec{padding:clamp(72px,9vw,130px) 0}
.home-v3 .indtabs{grid-template-columns:minmax(260px,.62fr) minmax(0,2fr);gap:clamp(28px,4vw,64px);margin-top:clamp(28px,4vw,48px)}
.home-v3 .indtabs-list{gap:8px}
.home-v3 .indtabs-list [role=tab]{justify-content:flex-start;gap:14px;padding:18px 22px;font:var(--w-title) clamp(18px,1.5vw,22px)/1.2 var(--font-heading);letter-spacing:-.02em;border-radius:22px;color:var(--ink)}
.home-v3 .indtabs-list [role=tab]::before{content:"";flex:none;width:16px;height:16px;border-radius:5px;background:var(--tcol,var(--t-orange));transform:rotate(-8deg);transition:transform .4s var(--ease)}
.home-v3 .indtabs-list [role=tab]::after{margin-left:auto}
.home-v3 .indtabs-list [role=tab]:nth-child(5n+1){--tcol:var(--t-orange)}.home-v3 .indtabs-list [role=tab]:nth-child(5n+2){--tcol:var(--t-teal)}.home-v3 .indtabs-list [role=tab]:nth-child(5n+3){--tcol:var(--t-red)}.home-v3 .indtabs-list [role=tab]:nth-child(5n+4){--tcol:var(--t-yellow)}.home-v3 .indtabs-list [role=tab]:nth-child(5n){--tcol:var(--ink-3)}
.home-v3 .indtabs-list [role=tab][aria-selected=true]{background:var(--ink);color:#fff}
.home-v3 .indtabs-list [role=tab][aria-selected=true]::before{transform:rotate(8deg) scale(1.25)}
.home-v3 .indpanel{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;overflow:visible;background:none;border:0;box-shadow:none;border-radius:0}
.home-v3 .indpanel::before{content:"";position:absolute;z-index:-1;left:-2%;top:7%;width:62%;height:96%;border-radius:36px;background:var(--pc,var(--t-teal));transform:rotate(-2.4deg)}
.home-v3 .indpanel[hidden]{display:none}
.home-v3 .indpanel:not([hidden]){animation:panelIn .7s var(--ease) both}
@keyframes panelIn{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}
.home-v3 .indpanel img{width:100%;height:100%;min-height:440px;object-fit:cover;border-radius:34px;box-shadow:0 40px 80px -34px rgba(12,23,48,.6)}
.home-v3 .indpanel-copy{position:relative;margin:36px 0 36px -64px;padding:clamp(28px,3vw,44px);border-radius:32px;background:#fff;box-shadow:0 40px 80px -40px rgba(12,23,48,.5)}
.home-v3 .indpanel-copy h3{font-size:clamp(30px,3.4vw,52px);line-height:1;letter-spacing:-.04em;margin-bottom:14px;color:var(--ink)}
.home-v3 .indpanel-copy > p{font-size:clamp(16.5px,1.3vw,19px);line-height:1.6;color:#3d4a66}
.home-v3 .indpanel-copy .indlinks-title{margin-top:24px;padding-top:0}
.home-v3 .indlinks{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.home-v3 .indlinks li{border:0}
.home-v3 .indlinks a{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border:2px solid var(--ink);border-radius:999px;font:var(--w-title) 16px/1 var(--font-heading);color:var(--ink);background:#fff;transition:background-color .2s ease,color .2s ease,transform .25s var(--ease)}
.home-v3 .indlinks a::after{content:"\2192";color:inherit}
.home-v3 .indlinks a:hover{background:var(--ink);color:#fff;transform:translateY(-2px);text-decoration:none}
.home-v3 .indlinks li:last-child a{border-bottom:2px solid var(--ink)}
.home-v3 .indpanel:nth-of-type(5n+1){--pc:var(--t-orange)}.home-v3 .indpanel:nth-of-type(5n+2){--pc:var(--t-teal)}.home-v3 .indpanel:nth-of-type(5n+3){--pc:var(--t-red)}.home-v3 .indpanel:nth-of-type(5n+4){--pc:var(--t-yellow)}.home-v3 .indpanel:nth-of-type(5n){--pc:var(--ink-3)}
@media (max-width:1000px){.home-v3 .indtabs{grid-template-columns:1fr}.home-v3 .indtabs-list [role=tab]{padding:12px 18px;font-size:16px;border-radius:999px}.home-v3 .indtabs-list [role=tab]::before{width:12px;height:12px}.home-v3 .indpanel{grid-template-columns:1fr}.home-v3 .indpanel img{min-height:280px}.home-v3 .indpanel-copy{margin:-48px 14px 0}.home-v3 .indpanel::before{height:70%}}
@media (prefers-reduced-motion:reduce){.home-v3 .indpanel:not([hidden]){animation:none}.home-v3 .indlinks a{transition:none}}

/* 9. HOME: About, certificates and the booklet card */
.aboutsec .split{align-items:start}
.aboutsec .washed{box-shadow:16px 16px 0 -1px var(--t-yellow),0 36px 70px -34px rgba(12,23,48,.5)!important;border-radius:34px!important}
.aboutsec .card{border:0;border-radius:30px;background:var(--ink);color:#fff;box-shadow:0 36px 70px -40px rgba(12,23,48,.7)}
.aboutsec .card .mini{color:var(--t-yellow);font-family:var(--font-heading)}
.aboutsec .card .dots li{color:#fff;font-weight:600}
.aboutsec .card .dots li::before{border-radius:4px;background:var(--t-orange);transform:rotate(-6deg)}
.aboutsec .card .dots li:nth-child(4n+2)::before{background:var(--t-teal)}.aboutsec .card .dots li:nth-child(4n+3)::before{background:var(--t-red)}.aboutsec .card .dots li:nth-child(4n)::before{background:var(--t-yellow)}
.aboutsec .factgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0}
.aboutsec .factgrid > div{padding:20px 18px;border-radius:22px;background:var(--paper)}
.aboutsec .factgrid b{display:block;font:var(--w-title) clamp(30px,3vw,44px)/1 var(--font-heading);letter-spacing:-.03em;color:var(--ink)}
.aboutsec .factgrid span{display:block;margin-top:6px;font-size:14px;font-weight:700;color:#46557a}
.aboutsec .credrow .mini{font-family:var(--font-heading);color:var(--ink)}
.aboutsec .credlogos img{border-radius:16px;border:1.5px solid rgba(12,23,48,.1);padding:8px 14px;background:#fff}
.magnet{position:relative;overflow:visible;border:0;border-radius:44px;background:linear-gradient(135deg,var(--ink) 0%,var(--ink-3) 100%);box-shadow:0 50px 90px -50px rgba(12,23,48,.8)}
.magnet::before{content:"";position:absolute;right:-24px;top:-26px;width:150px;height:118px;border-radius:28px;background:var(--t-yellow);transform:rotate(12deg);z-index:0}
.magnet > *{position:relative;z-index:1}
.magnet-cover img{transform:rotate(-5deg) scale(1.04);box-shadow:0 34px 60px -24px rgba(0,0,0,.7)}
.magnet h2{font-family:var(--font-heading);font-size:clamp(26px,3vw,43px);line-height:1.06;letter-spacing:-.03em;font-weight:var(--w-display);color:#fff}
.magnet h2 em{font-style:normal;color:var(--t-yellow)}
.magnet h2::before{content:none!important}

/* ---- PART 5: final CTA contrast + tile placement (beats the #main kit rules) ---- */
#main section.talksec h2.h2{color:#fff!important}
#main section.talksec h2.h2::before{background:#fff!important}
#main section.talksec .talkcopy .lede,#main section.talksec .talkcopy p{color:rgba(255,255,255,.94)!important}
.home-v3 .talksec::after{left:-8%;bottom:-36%;width:26vw;height:16vw}
#main section.talksec .talkcopy .kicker{color:var(--ink)!important;background:#fff}
#main section.talksec h2.h2::before{display:none!important}
@media (min-width:901px){#main section.sec .split > .washed{position:sticky;top:112px;align-self:start}}
@media (min-width:901px){#main .ctaband{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,300px);gap:24px clamp(32px,5vw,72px)}#main .ctaband .acts{flex-direction:column;flex-wrap:nowrap}#main .ctaband .acts .btn{width:100%;justify-content:center;text-align:center}}
#main .ctaband h2 + p,#main .ctaband h2 ~ p{margin:14px 0 0;max-width:34em;color:#d3dbee;line-height:1.55}
/* group headings that are h2.h3 (clients sectors) carry the same tile marker, smaller scale */
#main section.sec h2.h3{font-family:var(--font-heading)!important;font-weight:var(--w-title);font-size:clamp(24px,2.7vw,38px)!important;line-height:1.1!important;letter-spacing:-.035em;color:var(--ink);display:flex;align-items:center;gap:16px;margin:0 0 8px!important;text-wrap:balance}
#main section.sec h2.h3::before{content:"";flex:none;width:28px;height:28px;border-radius:9px;background:var(--tc,var(--t-orange));transform:rotate(-8deg)}
@media (max-width:900px){#main .ctaband::after{width:88px;height:68px;right:-22px;top:-26px;border-radius:20px}#main .ctaband .acts{width:100%}#main .ctaband .acts .btn{flex:1 1 100%;justify-content:center;text-align:center}}
#main > section:has(> .wrap > .ctaband){padding-bottom:clamp(48px,6vw,88px)}
/* contrast fixes found in the scan */
#main section.proc .lede{color:var(--ink)!important}
.quotes blockquote .mono{color:var(--ink)!important}
.quotes blockquote:nth-child(4n+3) .mono{color:#fff!important}
.bt[data-g=kiosks] .bt-g{color:#fff}
#main .ctaband::after{background:var(--t-orange)}

/* ---- PART 6: feedback round (13 Oct) ---- */
/* inner-page hero: site.css makes .formwrap sticky with top:92px; v3 sets it relative, which pushed the card 92px down and past the hero edge */
body .pagehero.banner .formwrap{position:relative;top:0}

/* phone field: the +91 prefix lives inside one pill with the number, same look as the other fields */
body .formcard .phonefield{display:flex;align-items:center;gap:0;min-height:50px;border:2px solid transparent;border-bottom:2px solid transparent;border-radius:14px;background:var(--paper);transition:border-color .2s,box-shadow .2s,background-color .2s}
body .formcard .phonefield:hover{border-color:rgba(12,23,48,.18)}
body .formcard .phonefield:focus-within{background:#fff;border-color:var(--ink);box-shadow:0 0 0 4px rgba(0,174,181,.22)}
body .formcard .phonefield .cc{align-self:stretch;display:flex;align-items:center;padding:0 14px 0 16px;background:linear-gradient(rgba(12,23,48,.14),rgba(12,23,48,.14)) right center/2px 56% no-repeat;color:var(--ink);font:var(--w-title) 15px/1 var(--font-heading)}
body .formcard .phonefield .input{flex:1;min-width:0;min-height:46px;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0 12px 12px 0;padding:0 16px 0 14px!important}
body .formcard .phonefield .input:hover,body .formcard .phonefield .input:focus,body .formcard .phonefield .input:focus-visible{background:transparent!important;border:0!important;box-shadow:none!important;outline:0}

/* primary buttons: the brighter orange gradient is back (deep end keeps white text near 4.5:1, bright tail sits at the far edge) */
:root{--cta-from:#cf3418;--cta-mid:#d9421a;--cta-to:#f26a28}
.btn-primary,body:has(.hero-video) .btn-primary{background:linear-gradient(120deg,var(--cta-from) 0%,var(--cta-mid) 50%,var(--cta-to) 100%);box-shadow:0 12px 26px -10px rgba(226,73,28,.75),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(0,0,0,.1)}
.btn-primary:hover,body:has(.hero-video) .btn-primary:hover{background:linear-gradient(120deg,#c22f15 0%,#e24a1c 50%,#ff7a3c 100%);box-shadow:0 16px 32px -10px rgba(226,73,28,.85),inset 0 1px 0 rgba(255,255,255,.34),inset 0 -2px 0 rgba(0,0,0,.1)}

/* about: stats and certificates sit in the right column under the Why us card */
.aboutsec .factgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0 0}
.aboutsec .factgrid > div{padding:16px 18px;border-radius:20px}
.aboutsec .factgrid b{font-size:clamp(24px,2.2vw,32px)}
.aboutsec .factgrid span{font-size:13.5px}
.aboutsec .credrow{margin-top:22px;padding-top:20px;border-top:2px solid rgba(12,23,48,.1)}
/* counters a notch smaller (home hero, inner heroes) */
.hx-stats b{font-size:clamp(26px,2.6vw,38px)}
.pagehero.banner .herostats b{font-size:clamp(24px,2.4vw,34px)}
/* chat nudge: brighter, with a soft ring so it is noticed */
.botbubble{background:#ffdc2e;box-shadow:0 10px 26px rgba(255,199,0,.6),0 0 0 3px #fff;animation:bubbleBob 2.2s ease-in-out infinite,bubbleRing 2.6s ease-out infinite}
.botbubble::after{background:#ffdc2e}
@keyframes bubbleRing{0%{box-shadow:0 10px 26px rgba(255,199,0,.6),0 0 0 3px #fff,0 0 0 3px rgba(255,220,46,.7)}70%,100%{box-shadow:0 10px 26px rgba(255,199,0,.6),0 0 0 3px #fff,0 0 0 18px rgba(255,220,46,0)}}
@media (prefers-reduced-motion:reduce){.botbubble{animation:none}}
.sechead{max-width:1100px}
.sechead .h2,.home-v3 section h2.h2{text-wrap:balance}
.why-card b{font-size:clamp(52px,6vw,88px)}
body .formcard .phonefield .input{height:46px;padding-top:0!important;padding-bottom:0!important}
body .formcard .phonefield .input{min-height:46px!important}
.proc-grid{padding:0;margin-left:0;margin-right:0}

/* ---- PART 7: secondary buttons, blog cards, video captions ---- */
#main .sec .btn-secondary{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:50px;padding:8px 9px 8px 22px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink)!important;font:var(--w-title) 15.5px/1 var(--font-heading)!important;letter-spacing:-.01em;text-decoration:none;box-shadow:4px 4px 0 var(--tc,var(--t-orange));transition:transform .28s var(--ease),box-shadow .28s var(--ease),background-color .25s}
#main .sec .btn-secondary::after{content:"";flex:none;width:32px;height:32px;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/15px no-repeat;transition:transform .35s var(--ease),background-color .25s}
#main .sec .btn-secondary:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--tc,var(--t-orange));background:#fff;color:var(--ink)!important}
#main .sec .btn-secondary:hover::after{transform:translateX(3px);background-color:var(--t-orange)}
#main .sec .btn-secondary:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--tc,var(--t-orange))}
#main .sec .pagination .btn-secondary{min-height:44px;padding:10px 18px;gap:0;box-shadow:none;font-size:15px!important}
#main .sec .pagination .btn-secondary::after{display:none}
#main .sec .pagination .btn-secondary:hover{transform:none;box-shadow:none;background:var(--ink);color:#fff!important}

#main .sec:has(> .wrap > .grid3 > .postcard){background:var(--paper)}
.postcard{--pc:var(--t-orange);position:relative;overflow:hidden;border:0!important;border-radius:30px!important;background:#fff!important;padding:34px 32px 30px!important;gap:14px!important;box-shadow:0 1px 0 rgba(12,23,48,.04),0 24px 50px -34px rgba(12,23,48,.45)!important;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.postcard:nth-child(4n+2){--pc:var(--t-teal)}.postcard:nth-child(4n+3){--pc:var(--t-red)}.postcard:nth-child(4n){--pc:var(--t-yellow)}
.postcard::before{content:"";position:absolute;right:-28px;top:-32px;width:104px;height:88px;border-radius:22px;background:var(--pc);transform:rotate(14deg);transition:transform .6s var(--ease)}
.postcard::after{content:"";position:absolute;left:0;bottom:0;height:6px;width:0;background:var(--pc);transition:width .5s var(--ease)}
.postcard:hover{transform:translateY(-6px);box-shadow:0 1px 0 rgba(12,23,48,.04),0 34px 60px -32px rgba(12,23,48,.55)!important}
.postcard:hover::before{transform:rotate(4deg) scale(1.1)}
.postcard:hover::after{width:100%}
.postcard > *{position:relative;z-index:1}
.postcard .mini{align-self:flex-start;max-width:calc(100% - 70px);padding:7px 12px;border-radius:999px;background:color-mix(in srgb,var(--pc) 24%,#fff);font:var(--w-label) 11.5px/1.2 var(--font-heading)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)!important}
.postcard .mini a{color:inherit!important}
.postcard .h3{font:var(--w-title) clamp(22px,1.7vw,26px)/1.12 var(--font-heading)!important;letter-spacing:-.025em;color:var(--ink);margin:6px 0 0}
.postcard .apps{font-size:15.5px;line-height:1.6;color:#46557a;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.postcard .btn-secondary{margin-top:12px!important}

.ytlite figcaption{padding:16px 18px 18px;font:var(--w-title) 15px/1.4 var(--font-heading);letter-spacing:.02em;text-wrap:balance;background:var(--ink)}
.postcard .btn-secondary{--tc:var(--pc)}
#main .sec .videogrid + p{margin-top:38px!important}

/* ---- PART 8: offerings page (our-services.php) ---- */
.svc-intro{max-width:40em;margin:0 0 30px;font-size:clamp(17px,1.45vw,20px);line-height:1.6;color:#3d4a66}
.svcbar{position:sticky;top:96px;z-index:5;display:none;flex-wrap:wrap;gap:6px;width:fit-content;max-width:100%;margin:0 0 36px;padding:8px;border-radius:999px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);box-shadow:0 14px 40px -22px rgba(12,23,48,.5),0 0 0 1px rgba(12,23,48,.07)}
.js .svcbar{display:flex}
.svcbar button{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 18px;border-radius:999px;background:transparent;color:var(--ink);font:var(--w-title) 15px/1 var(--font-heading);transition:background-color .25s,color .25s}
.svcbar button span{display:grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:rgba(12,23,48,.08);font-size:12.5px}
.svcbar button:hover{background:rgba(12,23,48,.07)}
.svcbar button.on{background:var(--ink);color:#fff}
.svcbar button.on span{background:var(--t-yellow);color:var(--ink)}
.svcbar button:focus-visible{outline:3px solid var(--t-teal);outline-offset:2px}
.svcgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;align-items:stretch}
.svc{--c:var(--t-orange);position:relative;display:flex;flex-direction:column;border-radius:32px;background:#fff;overflow:hidden;box-shadow:0 1px 0 rgba(12,23,48,.05),0 26px 56px -38px rgba(12,23,48,.5);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.svc[data-g=rooms]{--c:var(--t-teal)}.svc[data-g=kiosks]{--c:var(--t-red)}
.svc[hidden]{display:none}
.svc:hover{transform:translateY(-8px);box-shadow:0 1px 0 rgba(12,23,48,.05),0 40px 70px -36px rgba(12,23,48,.6)}
.svc-img{position:relative;display:block;aspect-ratio:16/11;overflow:hidden;background:var(--ink)}
.svc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.svc:hover .svc-img img{transform:scale(1.06)}
.svc-img::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(12,23,48,0) 45%,rgba(12,23,48,.62) 100%)}
.svc-img::after{content:"";position:absolute;right:-26px;top:-30px;z-index:2;width:110px;height:92px;border-radius:24px;background:var(--c);transform:rotate(14deg);transition:transform .6s var(--ease)}
.svc:hover .svc-img::after{transform:rotate(4deg) scale(1.12)}
.svc-g{position:absolute;left:18px;top:18px;z-index:3;display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;background:#fff;color:var(--ink);font:var(--w-label) 12px/1 var(--font-heading);letter-spacing:.08em;text-transform:uppercase}
.svc-g::before{content:"";width:9px;height:9px;margin-right:8px;border-radius:3px;background:var(--c);transform:rotate(-8deg)}
.svc-n{position:absolute;left:20px;bottom:10px;z-index:3;font:var(--w-title) 54px/1 var(--font-heading);letter-spacing:-.04em;color:#fff}
.svc-body{display:flex;flex-direction:column;flex:1;padding:26px 28px 28px}
.svc-body h3{font:var(--w-title) clamp(24px,1.9vw,28px)/1.08 var(--font-heading);letter-spacing:-.025em;color:var(--ink);margin:0 0 6px}
.svc-lbl{margin:16px 0 6px;font:var(--w-label) 12px/1.2 var(--font-heading);letter-spacing:.12em;text-transform:uppercase;color:#46557a}
.svc-apps{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink);font-weight:600}
.svc-list{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:9px}
.svc-list li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.4;color:#3d4a66}
.svc-list li::before{content:"";position:absolute;left:0;top:.42em;width:10px;height:10px;border-radius:3px;background:var(--c);transform:rotate(-8deg)}
.svc-body .btn-secondary{margin-top:auto;align-self:flex-start}
.svc-body .svc-list + .btn-secondary{margin-top:auto}
.svcpromos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.svcpromo{border-radius:26px;background:#fff;overflow:hidden;box-shadow:0 1px 0 rgba(12,23,48,.05),0 22px 46px -34px rgba(12,23,48,.5);transition:transform .4s var(--ease)}
.svcpromo:hover{transform:translateY(-5px)}
.svcpromo-img{aspect-ratio:4/3;padding:16px;display:grid;place-items:center}
.svcpromo-img img{width:100%;height:100%;object-fit:contain;display:block}
@media (max-width:1000px){.svcgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.svcpromos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.svcgrid{grid-template-columns:1fr}.svcbar{top:80px;border-radius:26px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.svcbar::-webkit-scrollbar{display:none}.svcbar button{flex:none;white-space:nowrap}.svcpromos{gap:12px}.svc-body{padding:22px 22px 24px}}
#main .ctaband:has(.btn-primary)::after{background:var(--t-yellow)}

/* certificate logos: on phones the label sits on its own line and the three logos share one even row */
@media (max-width:640px){
  .certs-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .certs-row p{grid-column:1/-1}
  .certs-row img{width:100%;height:66px;padding:8px 10px;object-fit:contain}
  .credlogos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .credlogos img{width:100%;height:60px;padding:8px 10px;object-fit:contain}
}
@media (max-width:640px){.ftr .certs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.ftr .certs img{width:100%;height:58px;padding:6px 8px;object-fit:contain}}
@media (max-width:1100px){.longread-toc ol{padding:0;margin:0}}

/* =====================================================================================================
   PART 9: ONE WEIGHT SCALE (15 Oct 2026). Management found the type too bold.
   h1 to h4 read --font-heading-weight (600). Display headings (home and section H2, inner-page H1, big numerals)
   use --w-display (500). Buttons, nav, form labels, card titles and counters use --w-title (600). Tiny uppercase
   labels use --w-label (700). The three numbers live in :root at the top of this file.
   Safety nets so older rules cannot bring the heavy look back: Outfit is capped at 700 in its @font-face (top of this
   file) and Lato Black is no longer loaded (assets/styles.css), so a leftover font-weight of 800 or 900 in site.css
   renders as 700 at most. The rules below cover what site.css and the pages still ask for in their own words.
   ===================================================================================================== */
[style*="font-weight:800"],[style*="font-weight:700"]{font-weight:var(--w-title)!important} /* inline weights on buttons in the page files */
#main .btn,#main .btn-primary,#main .btn-secondary,.mobbar .btn,.cta-big,.ctsbtn{font-weight:var(--w-title)}
.faqsec .faqs summary{font-weight:var(--w-title)} /* site.css sets 700 with a two-class selector */

/* home hero video and its pause button (22 Oct 2026): only the dark home page shows them, see assets/css/dark.css */
.hx-video,.hx-toggle{display:none}