/* ==========================================================================
   Can Did BD
   One page site. Huw Mathias Graphic Design, August 2026.
   Fonts are self hosted from the design system. Fraunces is the 72pt Soft cut.
   ========================================================================== */

@font-face{font-family:'Fraunces';src:url('assets/fonts/Fraunces_72pt_Soft-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('assets/fonts/Fraunces_72pt_Soft-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Fraunces';src:url('assets/fonts/Fraunces_72pt_Soft-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('assets/fonts/HankenGrotesk-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('assets/fonts/HankenGrotesk-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('assets/fonts/HankenGrotesk-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('assets/fonts/HankenGrotesk-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}

:root{
  --teal-900:#16524D; --teal-800:#1D6157; --teal-700:#2E837A;
  --teal-300:#A9D6CE; --teal-200:#B9DDD8; --teal-100:#DCEEEB;
  --charcoal:#1F3136; --paper:#FCFBFF; --white:#FFFFFF;
  --coral:#E06A4E; --coral-dark:#C1502F;
  --sand:#E7C79A; --ocean:#2C6E93; --slate:#57829F;
  /* coral lightened toward the light teal in luminance, so hover reads as a change
     of hue rather than a loss of legibility. Brand coral is only 2.70:1 here. */
  --coral-on-dark:#EFBAAF; --peri:#8C93CC; --aqua:#8FCFC2;
  --peri-deep:#667198; --pale-peri:#F5F5FC; --pale-sand:#FAF7F7; --pale-aqua:#F2F7FA;
  --muted:#5A6A6E; --muted-dark:#A8C4BF;
  --display:'Fraunces',Georgia,serif;
  --text:'Hanken Grotesk',system-ui,sans-serif;
  --max:1280px; --nav-h:74px;
  /* height of the eyebrow plus its rule, so a second column can start level
     with the heading rather than with the eyebrow above it */
  --eyebrow-block:86px;
  /* the visible width of CAN DID in the hero eyebrow. The advance width is 63px,
     but that includes the trailing letter-space after the final D. */
  --rule-w:59px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--text);font-weight:300;font-size:17px;line-height:1.68;
     color:var(--charcoal);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--max);margin:0 auto;padding:0 40px}

/* ---------- type ---------- */
.eyebrow{font-family:var(--text);font-weight:600;font-size:12px;letter-spacing:.267em;
  text-transform:uppercase;color:var(--teal-900);margin-bottom:14px}
.eyebrow.on-dark{color:var(--teal-200)}
.pipe{opacity:.55;padding:0 .1em}
.rule{width:var(--rule-w);height:2px;background:var(--coral-dark);margin-bottom:34px}
.rule.on-dark{background:var(--coral)}
h1,h2,h3{font-family:var(--display);font-weight:400;color:var(--teal-900);
  letter-spacing:-.009em;line-height:1.06}
h1{font-size:64px}
h2{font-size:42px;line-height:1.12}
h3{font-size:21px;line-height:1.25}
.on-dark h1,.on-dark h2,.on-dark h3{color:var(--paper)}
em{font-style:italic}
p{max-width:62ch}
.lead{font-size:17px;line-height:1.7;font-weight:400;color:var(--teal-900)}
.muted{color:var(--muted)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:var(--paper);
  box-shadow:0 1px 0 rgba(31,49,54,.08)}
.nav-in{display:table;width:100%;height:var(--nav-h);max-width:none;margin:0;padding:0 40px}
.nav-logo{display:table-cell;vertical-align:middle;width:147px}
.nav-logo a{display:block;width:147px;height:34px}
.nav-links{display:table-cell;vertical-align:middle;text-align:right;white-space:nowrap}
.nav-cta{display:table-cell;vertical-align:middle;width:1%;white-space:nowrap;padding-left:34px}
.nav-cta .btn{vertical-align:middle}
.nav-logo img{width:147px;height:34px;display:block}
.nav-links a{margin-left:34px;font-size:15px;font-weight:400;text-decoration:none;color:var(--charcoal);
  padding:6px 0;border-bottom:1px solid transparent}
.nav-links a:hover{border-bottom-color:var(--coral-dark)}
.nav-links a.btn{color:var(--paper);border-bottom:1px solid var(--teal-900);
  padding:10px 24px;font-size:14px;font-weight:500;line-height:1.5}
.nav-links a.btn:hover{border-bottom-color:var(--teal-800)}
/* one definition for every button on the site, whether <a> or <button>. Buttons do
   not inherit font-family or font-size, so both are stated explicitly. */
.btn,button.btn{display:inline-block;background:var(--teal-900);color:var(--paper);
  font-family:var(--text);font-weight:500;font-size:14px;line-height:1.5;
  letter-spacing:.01em;padding:10px 24px;text-decoration:none;
  border:1px solid var(--teal-900);cursor:pointer;-webkit-appearance:none;appearance:none}
.btn:hover{background:var(--teal-800);border-color:var(--teal-800)}
/* Brand coral at rest, deeper coral on hover.
   NOTE: white on the brand coral measures 3.31:1. That clears the 3:1 non-text and
   large-text threshold but not the 4.5:1 needed for a label at this size. The hover
   state is 4.71:1 and passes. See the note in the handover. */
.btn-coral,button.btn-coral{background:var(--coral);border-color:var(--coral);color:#fff}
.btn-coral:hover,button.btn-coral:hover{background:var(--coral-dark);border-color:var(--coral-dark)}
/* mobile menu button: hidden on desktop, three bars on small screens */
/* sits beside the CTA inside the same cell, so the two centre against each other */
.nav-toggle{display:none;background:none;border:none;padding:0;cursor:pointer;
  vertical-align:middle;line-height:0;margin-left:16px}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--teal-900);
  margin:0 0 5px auto}
.nav-toggle span:last-child{margin-bottom:0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:100;background:var(--teal-900);color:var(--paper);
  padding:12px 18px;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--coral-dark);outline-offset:3px}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--teal-900);color:var(--paper);overflow:hidden}
/* full bleed, using the same treated asset as the deck's section divider */
.hero-img{position:absolute;top:0;left:0;width:100%;height:100%;
  background:url('assets/img/hero.jpg') center bottom/cover no-repeat}
.hero{min-height:calc(100vh - var(--nav-h))}
.hero-in{z-index:2;position:relative;max-width:var(--max);margin:0 auto;
  padding:150px 40px 130px}
.hero-in>*{max-width:none}
.hero .eyebrow{font-size:10.5px;letter-spacing:.30em;white-space:nowrap}
.hero h1{color:var(--paper);max-width:none;white-space:nowrap}
.hero h1 em,.contact h2 em{color:var(--teal-200)}
.hero p{margin-top:32px;max-width:44ch;color:rgba(252,251,255,.88);font-size:19px;
  line-height:1.5}
.hero .btn{margin-top:44px}
.hero-mark{position:absolute;right:5%;top:-50px;width:940px;height:940px;opacity:.07;z-index:1}

/* ---------- sections ---------- */
section{padding:112px 0;position:relative;overflow:hidden}
section>.wrap{position:relative;z-index:2}
/* the deck's furniture: a teal hairline down the left, and the mark in one fixed
   position at 4% on pale grounds. Both ported from the master at 0.8 scale. */
.hair{position:absolute;left:37px;top:42px;bottom:42px;width:1px;background:var(--teal-200);z-index:1}
.wm{position:absolute;top:77px;left:50%;margin-left:80px;width:608px;height:608px;
  opacity:.045;z-index:0;pointer-events:none}
.wm img{width:100%;height:100%}
.dark .wm{opacity:.05}
.dark .hair{background:var(--teal-700)}
.tinted{background:var(--teal-100)}
.pale-aqua{background:var(--pale-aqua)}
.pale-peri{background:var(--pale-peri)}
.pale-sand{background:var(--pale-sand)}
/* the beige glass frame sits behind the frosted panels */
.sand-image{position:relative;background:var(--pale-sand)}
.sand-image:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;
  background:url('assets/img/track-record-bg.jpg') center/cover no-repeat;z-index:0}
.sand-image>.wrap{position:relative;z-index:2}
.dark{background:var(--teal-900);color:var(--paper)}
.dark p{color:rgba(252,251,255,.85)}
.split{font-size:0}
.split>*{display:inline-block;vertical-align:top;width:48%;font-size:17px}
.split>*+*{margin-left:4%;padding-top:var(--eyebrow-block)}

/* ---------- ecosystem ---------- */
.pillars{margin-top:64px;font-size:0}
.pillar{display:inline-block;vertical-align:top;width:30.66%;font-size:17px}
.pillar+.pillar{margin-left:4%}
.pillar-bar{height:4px;margin-bottom:26px}
.pillar:nth-child(1) .pillar-bar{background:var(--peri)}
.pillar:nth-child(2) .pillar-bar{background:var(--aqua)}
.pillar:nth-child(3) .pillar-bar{background:var(--sand)}
.pillar h3{margin-bottom:14px}
.pillar p{font-size:16px;color:var(--muted)}

.band{position:relative;height:320px;overflow:hidden;background:var(--teal-900)}
.band img{width:100%;height:100%;object-fit:cover}

/* ---------- services ---------- */
.services{margin-top:56px;border-top:1px solid rgba(31,49,54,.14);font-size:0}
.service{display:inline-block;vertical-align:top;width:50%;padding:34px 48px 34px 0;
  border-bottom:1px solid rgba(31,49,54,.14);font-size:17px}
.service:nth-child(even){padding-left:48px;padding-right:0;
  border-left:1px solid rgba(31,49,54,.14)}
.service-n{display:inline-block;vertical-align:top;width:44px;
  font-family:var(--display);font-size:19px;line-height:1.35}
.service:nth-child(1) .service-n{color:var(--teal-700)}
.service:nth-child(2) .service-n{color:var(--ocean)}
.service:nth-child(3) .service-n{color:var(--slate)}
.service:nth-child(4) .service-n{color:var(--peri)}
.service:nth-child(5) .service-n{color:var(--aqua)}
.service:nth-child(6) .service-n{color:var(--coral-dark)}
.service-b{display:inline-block;vertical-align:top;width:calc(100% - 48px)}
.service h3{margin-bottom:8px}
.service p{font-size:15.5px;color:var(--muted);max-width:44ch}

/* ---------- statement ---------- */
.statement{position:relative;background:var(--teal-900);overflow:hidden}
.statement-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.statement-in{position:relative;max-width:var(--max);margin:0 auto;padding:132px 40px}
.glass{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  padding:64px 68px;max-width:820px}
.glass blockquote{font-family:var(--display);font-size:36px;line-height:1.24;
  color:var(--paper);letter-spacing:-.012em}
.glass cite{display:block;margin-top:34px;font-family:var(--text);font-style:normal;
  font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal-200)}

/* ---------- founder ---------- */
.founder{font-size:0}
.founder-photo{display:inline-block;vertical-align:middle;width:36%;position:relative;
  background:var(--teal-200);overflow:hidden;font-size:17px}
.founder-photo img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}
.founder-photo span{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  text-align:center;font-weight:600;font-size:12px;letter-spacing:.18em;color:var(--teal-900)}
.founder-body{display:inline-block;vertical-align:middle;width:58%;margin-left:6%;font-size:17px}
.founder-body h2{margin-bottom:8px}
.founder-role{font-weight:600;font-size:12px;letter-spacing:.267em;text-transform:uppercase;
  color:var(--coral-dark);margin-bottom:30px}

/* ---------- contact ---------- */
.contact{position:relative;background:var(--teal-900);color:var(--paper);overflow:hidden}
.contact-img{position:absolute;left:0;top:0;width:100%;height:100%;
  background:url('assets/img/contact-wide.jpg') center/cover no-repeat}
.contact-in{position:relative;max-width:none;margin:0;padding:72px 40px}
.contact-cols{display:table;width:100%;max-width:1360px;font-size:0}
.contact-intro{display:table-cell;vertical-align:middle;width:34%;font-size:17px;
  padding-right:4%;padding-left:3%}
.contact-intro>*{max-width:520px}
.contact-form{display:table-cell;vertical-align:middle;width:59%;
  max-width:none;font-size:17px;padding:44px 56px 40px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
label{display:block;font-weight:600;font-size:11px;letter-spacing:.267em;
  text-transform:uppercase;color:var(--teal-200);margin-bottom:6px}
input,textarea{width:100%;font-family:var(--text);font-size:16px;font-weight:300;
  color:var(--paper);background:transparent;border:none;
  border-bottom:1px solid rgba(255,255,255,.42);
  padding:10px 0;margin-bottom:22px;border-radius:0}
input:focus,textarea:focus{border-bottom-color:var(--coral);outline:none}
textarea{min-height:84px;resize:vertical}
input::placeholder,textarea::placeholder{color:rgba(252,251,255,.45)}
/* Light 300 thins out against a dark ground, so the standfirst and the contact
   details step up one weight to Regular */
.contact-intro p:not(.eyebrow){font-weight:400}
.contact-intro a{color:var(--paper);text-decoration:none;font-weight:400;
  transition:color .2s ease}
/* underline on hover only, so colour is not the sole signal that these are links */
.contact-intro a:hover,.contact-intro a:focus-visible{color:var(--paper);
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* ---------- footer ---------- */
/* mirrors the nav: same height, same gutter, same logo size, reversed out */
.footer{background:var(--charcoal);padding:0}
.footer-in{max-width:none;margin:0;padding:0 40px;display:table;width:100%;height:74px}
.footer-logo{display:table-cell;vertical-align:middle;width:147px}
.footer-in>*{display:table-cell;vertical-align:middle}

.footer-in p{text-align:right;padding-left:32px}
.footer img{width:147px;height:34px;display:block}
.footer p{font-size:12px;font-weight:400;color:#fff;line-height:1.5}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  h1{font-size:50px} h2{font-size:34px}
  .hero-in{padding:112px 40px 96px}
  .pillars{gap:32px}
  .split,.founder,.contact-cols{gap:48px}
}
@media (max-width:820px){
  body{font-size:16px}
  h1{font-size:40px} h2{font-size:29px} h3{font-size:19px}
  .wrap,.hero-in,.statement-in,.contact-in,.footer-in{padding-left:24px;padding-right:24px}
  .nav-in{padding-left:24px;padding-right:14px}
  section{padding:76px 0}
  .nav-toggle{display:inline-block;vertical-align:middle;margin-left:0;
    padding:15px 0 15px 14px}
  .nav-toggle span{width:20px}
  .nav-links{display:table-cell;vertical-align:middle;text-align:right;width:auto}
  .nav-links a{display:none}
  /* the menu drops below the bar, so sections are reachable on a phone */
  .nav-links.is-open{position:absolute;left:0;right:0;top:100%;display:block;text-align:left;
    max-height:calc(100vh - var(--nav-h));overflow-y:auto;
    background:var(--paper);border-bottom:1px solid rgba(31,49,54,.12);padding:8px 24px 20px;
    box-shadow:0 14px 30px rgba(31,49,54,.10)}
  .nav-links.is-open a{display:block;margin:0;padding:14px 0;font-size:17px;
    border-bottom:1px solid rgba(31,49,54,.08)}
  /* the CTA sits outside the panel, so it stays in the bar at all times */
  .nav-cta{padding-left:0}
  /* the teal hairline reads as a stray rule at this width, so it goes */
  .hair{display:none}
  .nav-cta .btn{padding:8px 18px;font-size:13px}
  .nav-in{height:68px}
  :root{--nav-h:68px}
  .nav-logo{width:118px}
  .nav-logo img{width:118px;height:27px}
  .split>*,.pillar,.founder-photo,.founder-body,.contact-intro,.contact-form{
    display:block;width:100%;margin-left:0;padding-top:0}
  .split>*+*,.pillar+.pillar,.founder-body,.contact-form{margin-top:40px}
  .founder-photo{max-width:340px}
  .service{display:block;width:100%;padding:26px 0}
  .service:nth-child(even){padding-left:0;border-left:none}
  .footer-in,.footer-in>*{display:block;width:auto;height:auto}
  .footer-in{padding-top:26px;padding-bottom:26px}
  .footer-logo{width:auto}
  .footer-in p{text-align:left;padding-left:0;margin-top:16px;font-size:11.5px;line-height:1.55}
  .glass{padding:38px 30px}
  .glass blockquote{font-size:25px}

  .hero-mark{width:280px;right:-70px;bottom:-80px}
  .band{height:170px}
  .band img{transform:scale(1.7);transform-origin:48% 50%}
  .band-alt img{transform:scale(1.15);transform-origin:34% 50%}
}

/* ---------- track record ---------- */
/* frosted glass panels on a pale sand ground, each identified by a coloured rule
   under its header rather than by a solid fill. Ready to sit over a photograph. */
/* without a real backdrop blur the panel would be a flat window onto the image,
   so browsers that lack it get an opaque veil instead */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  }

/* the card is a table cell, so its height is set by the tallest in the row. The
   inner column fills that height and the outcome is pushed to the bottom, which
   lands it at the same level across the row whatever the copy above it runs to. */

/* the honeypot: hidden from people, visible to bots that fill everything in */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* short pages such as the thank you page: hold the footer at the foot of the
   window rather than leaving it floating mid-screen */
body{display:flex;flex-direction:column;min-height:100vh}
main{flex:1 0 auto}
.footer{flex-shrink:0}

/* ---------- legal pages ---------- */
.legal{padding:112px 0 96px;position:relative;overflow:hidden;background:var(--paper)}
.legal .wrap{max-width:none;padding:0 40px 0 96px}
.legal-head{max-width:none;margin-bottom:56px}
.legal h1{font-size:52px;color:var(--teal-900);letter-spacing:-.009em;line-height:1.06}
.legal h1 em{color:var(--teal-700)}
.legal-body{max-width:none}
.legal-body h2{font-size:27px;color:var(--teal-900);margin:52px 0 18px;line-height:1.2}
.legal-body h3{font-size:17px;color:var(--teal-900);margin:30px 0 10px;
  font-family:var(--text);font-weight:600;letter-spacing:.02em}
.legal-body p{font-size:17px;line-height:1.72;font-weight:400;color:var(--charcoal);
  margin-bottom:16px;max-width:92ch}
.legal-body .lead{font-size:19px;line-height:1.65;color:var(--teal-900);margin-bottom:8px}
.legal-body ul{list-style:none;margin:0 0 20px;padding:0}
.legal-body li{position:relative;padding-left:22px;font-size:17px;line-height:1.72;
  color:var(--charcoal);margin-bottom:9px;max-width:92ch}
.legal-body li:before{content:"";position:absolute;left:0;top:13px;width:9px;height:1.5px;
  background:var(--coral-dark)}
.legal-body a:not(.btn){color:var(--teal-900);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.legal-body a:not(.btn):hover{color:var(--coral-dark)}
.legal-address{line-height:1.55}
.legal-updated{margin-top:44px;padding-top:22px;border-top:1px solid rgba(31,49,54,.12);
  font-size:14px!important;color:var(--muted)}

/* ---------- track record carousel ---------- */
.tr-carousel{margin-top:52px}
/* every slide sits in the same grid cell, so the stage is as tall as the tallest
   and the outcome band lands in the same place on each */
.tr-stage{display:grid}
.tr-slide{grid-area:1/1;opacity:0;visibility:hidden;
  transition:opacity .5s ease, visibility .5s;
  background:rgba(248,250,255,.16);border:1px solid rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(22px) brightness(1.04) saturate(88%);
  backdrop-filter:blur(22px) brightness(1.04) saturate(88%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 10px 34px rgba(31,49,54,.07)}
.tr-slide.is-active{opacity:1;visibility:visible}
.tr-slide[hidden]{display:block}

/* the content column is centred in the card rather than hugging the left edge */
.tr-inner{max-width:none;margin:0;padding:48px 46px 46px;height:100%;
  display:flex;flex-direction:column}
.tr-inner h3{color:var(--teal-900);margin:0 0 26px;font-size:25px}
.tr-rule{height:1.5px;width:var(--rule-w);margin-bottom:28px}
.tr-inner p{font-size:16px;line-height:1.7;font-weight:400;color:var(--charcoal);
  max-width:none;margin-bottom:16px}

/* the outcome is pinned to the foot of the card, so it holds the same position
   whichever case study is showing */
.tr-outcome{margin-top:auto;padding:22px 28px;position:relative;min-height:136px;
  box-sizing:border-box}
.tr-inner > p:last-of-type{margin-bottom:38px}
.tr-outcome:before{content:"";position:absolute;left:0;top:0;bottom:0;width:1.5px}
.tr-outcome-label{font-family:var(--text);font-size:11px;font-weight:600;
  letter-spacing:.267em;text-transform:uppercase;margin:0 0 10px!important}
.tr-outcome-text{font-size:16px;line-height:1.7;font-weight:500;margin:0!important}

/* one colour theme per case study, carried by the rule, the bar and the band */
.tr-slide:nth-child(1) .tr-rule{background:var(--teal-900)}
.tr-slide:nth-child(1) .tr-outcome{background:rgba(22,82,77,.12)}
.tr-slide:nth-child(1) .tr-outcome:before{background:var(--teal-900)}
.tr-slide:nth-child(1) .tr-outcome-label,
.tr-slide:nth-child(1) .tr-outcome-text{color:var(--rule-1-text)}

.tr-slide:nth-child(2) .tr-rule{background:var(--ocean)}
.tr-slide:nth-child(2) .tr-outcome{background:rgba(44,110,147,.12)}
.tr-slide:nth-child(2) .tr-outcome:before{background:var(--ocean)}
.tr-slide:nth-child(2) .tr-outcome-label,
.tr-slide:nth-child(2) .tr-outcome-text{color:var(--rule-2-text)}

.tr-slide:nth-child(3) .tr-rule{background:var(--peri-deep)}
.tr-slide:nth-child(3) .tr-outcome{background:rgba(102,113,152,.12)}
.tr-slide:nth-child(3) .tr-outcome:before{background:var(--peri-deep)}
.tr-slide:nth-child(3) .tr-outcome-label,
.tr-slide:nth-child(3) .tr-outcome-text{color:var(--rule-3-text)}

.tr-slide:nth-child(4) .tr-rule{background:var(--coral-dark)}
.tr-slide:nth-child(4) .tr-outcome{background:rgba(193,80,47,.10)}
.tr-slide:nth-child(4) .tr-outcome:before{background:var(--coral-dark)}
.tr-slide:nth-child(4) .tr-outcome-label,
.tr-slide:nth-child(4) .tr-outcome-text{color:var(--rule-4-text)}

/* holds a word pair on one line. Released below 820px, where the narrower measure
   needs every break it can get. */
.keep{white-space:nowrap}

.tr-dots{display:flex;justify-content:center;gap:14px;margin-top:34px}
.tr-dot{width:9px;height:9px;padding:0;border:1px solid var(--teal-900);
  background:transparent;border-radius:50%;cursor:pointer;
  transition:background .25s ease,transform .25s ease}
.tr-dot.is-active{background:var(--teal-900);transform:scale(1.25)}
.tr-dot:hover{background:var(--teal-700);border-color:var(--teal-700)}
.tr-dot:focus-visible{outline:2px solid var(--coral-dark);outline-offset:3px}

/* ---------- services, question led ---------- */
.service-q{list-style:none;margin-top:12px}
.service-q li{position:relative;padding-left:20px;font-size:15.5px;line-height:1.6;
  color:var(--charcoal);font-weight:400;font-style:italic;margin-bottom:8px}
.service-q li:before{content:"";position:absolute;left:0;top:11px;width:9px;height:1.5px;
  background:var(--coral-dark)}

/* ---------- testimonial slot ---------- */
.tslot{border:1px dashed rgba(31,49,54,.28);padding:44px 40px;margin-top:64px;text-align:center}
.tslot p{max-width:none;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;color:var(--muted)}
.tslot.on-dark{border-color:rgba(252,251,255,.34)}
.tslot.on-dark p{color:var(--teal-200)}

@media (max-width:820px){
  /* the four cards become direct children of a single column grid, and 1fr rows
     size to the tallest, so every card matches without a fixed height */
                    .hero-in{padding:120px 24px 100px}
  .hero h1,.hero p{max-width:none;white-space:normal}
  .hero .eyebrow{white-space:normal}
          .hero{min-height:0}
  }

/* ==========================================================================
   Entrance motion
   Fade in with a 16px rise, 600ms ease-out, triggered once. Same values as the
   presentation system, so the two behave alike.

   The hidden state is scoped to html.js, which the script adds on load. Without
   JavaScript nothing is ever hidden, so the page degrades to fully visible.
   ========================================================================== */

.js .reveal{opacity:0;transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1)}
.js .reveal.is-in{opacity:1;transform:none}

/* a light stagger so a group arrives in sequence rather than all at once */
.js .reveal[data-d="1"]{transition-delay:.08s}
.js .reveal[data-d="2"]{transition-delay:.16s}
.js .reveal[data-d="3"]{transition-delay:.24s}
.js .reveal[data-d="4"]{transition-delay:.32s}

/* the hero is above the fold, so it animates on load rather than on scroll */
.js .hero .reveal{transform:translateY(20px)}

@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
}

/* ==========================================================================
   Mobile overrides that must come last, so they win on source order over the
   component rules defined above.
   ========================================================================== */
@media (max-width: 820px){

  /* the carousel card carries its own padding on mobile, since the centred
     content column collapses to full width here */
  .tr-carousel{margin-top:34px}
  .tr-inner{max-width:none;padding:30px 28px 33px}
  .tr-inner h3{font-size:21px;margin-bottom:20px}
  .tr-rule{margin-bottom:22px}
  .tr-inner p{font-size:15.5px;margin-bottom:14px}
  .tr-inner > p:last-of-type{margin-bottom:26px}
  .tr-outcome{padding:18px 20px;min-height:0}
  .tr-outcome-text{font-size:15.5px}
  .tr-dots{margin-top:26px}
  /* the frosted form panel was carrying desktop padding on a narrow screen */
  .contact-form{padding:28px 22px 26px}
  .keep{white-space:normal}
  .nav-logo img{position:relative;top:3px}
  /* the contact image stays: it is the section background, not a side panel */
  .contact-img{display:block}
  /* logos matched to the CTA button height. The anchor must grow with the image,
     otherwise max-width:100% squeezes the width and distorts the lockup. */
  .nav-logo{width:164px}
  .nav-logo a{width:164px;height:38px}
  .nav-logo img{width:164px;height:38px;top:0}
  .footer img{width:164px;height:38px}
  .footer-logo{width:164px}
  .legal{padding:56px 0 64px}
  .legal h1{font-size:36px}
  .legal-head{margin-bottom:36px}
  .legal-body h2{font-size:22px;margin:40px 0 14px}
  .legal-body p,.legal-body li{font-size:16px}
  .legal-body .lead{font-size:17.5px}
  .legal .wrap{padding:0 24px}
  .legal .hair{display:none}
  .legal .wrap{padding:0 24px}
}