/* CTC site — shared styles (all pages). Values copied from reference/front-page.html; do not restyle. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
main [id]{scroll-margin-top:78px}   /* anchor targets (#about, #sectors, #contact) start just below the solid header: 76px + 2px rule */
body{margin:0;background:var(--ctc-white);color:var(--ctc-black);font-family:var(--font-sans);font-size:16px;line-height:25px;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
::selection{background:var(--ctc-blue);color:#fff}
img,video,svg{display:block}
a{color:var(--ctc-blue);text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:700}
p{margin:0}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ctc-black);color:#fff;padding:8px 12px;z-index:100}
.skip:focus{left:8px}

/* ---------- Interaction language (docs/03-motion-spec.md) ---------- */
/* Menu: 2px blue rule draws in from the left, leaves to the right */
.ctc-nav{position:relative;display:inline-block;padding:6px 0;color:#fff;transition:color var(--t-colour) var(--ease)}
.ctc-nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ctc-blue);transform:scaleX(0);transform-origin:right center;transition:transform var(--t-underline) var(--ease)}
.ctc-nav:hover::after,.ctc-nav:focus-visible::after,.ctc-nav[aria-current="page"]::after{transform:scaleX(1);transform-origin:left center}
/* Text link: tint underline at rest, blue underline sweeps in */
.ctc-link{color:var(--ctc-black);padding-bottom:3px;background-image:linear-gradient(var(--ctc-blue),var(--ctc-blue)),linear-gradient(var(--ctc-link-tint),var(--ctc-link-tint));background-repeat:no-repeat;background-size:0% 2px,100% 1px;background-position:right bottom,left bottom;transition:background-size var(--t-underline) var(--ease),color var(--t-colour) var(--ease)}
.ctc-link:hover,.ctc-link:focus-visible{color:var(--ctc-blue);background-size:100% 2px,100% 1px;background-position:left bottom,left bottom}
.ctc-link.on-dark{color:#fff;background-image:linear-gradient(#fff,#fff),linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.45))}
.ctc-link.on-dark:hover,.ctc-link.on-dark:focus-visible{color:#fff}
/* Buttons: a leaning band sweeps in from the left (black over blue) */
.ctc-btn{position:relative;display:inline-block;overflow:hidden;isolation:isolate;padding:16px 26px;border:0;border-radius:0;cursor:pointer;font:700 16px/20px var(--font-sans);text-decoration:none;transition:color var(--t-colour) var(--ease),transform 100ms ease-out}
.ctc-btn::before{content:"";position:absolute;top:0;bottom:0;left:-25%;width:150%;z-index:-1;transform:translateX(-102%) skewX(-23deg);transition:transform var(--t-sweep) var(--ease)}
.ctc-btn:hover::before,.ctc-btn:focus-visible::before{transform:translateX(0) skewX(-23deg)}
.ctc-btn:active{transform:translateY(1px)}
.ctc-btn.primary{background:var(--ctc-blue);color:#fff}
.ctc-btn.primary::before{background:var(--ctc-black)}
.ctc-btn.outline{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #fff}
.ctc-btn.outline::before{background:#fff}
.ctc-btn.outline:hover,.ctc-btn.outline:focus-visible{color:var(--ctc-black)}
.ctc-nav:focus-visible,.ctc-link:focus-visible,.ctc-btn:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--ctc-blue);outline-offset:4px}

/* ---------- Header (fixed; transparent → black band after 120px scroll) ---------- */
.site-header{position:fixed;left:0;right:0;top:0;z-index:20;height:96px;background:rgba(35,31,32,0);transition:height var(--t-sweep) var(--ease),background-color var(--t-sweep) var(--ease)}
.site-header.is-solid{height:76px;background:var(--ctc-black)}
.site-header__inner{height:100%;padding:0 64px;display:flex;align-items:center}
.site-header__row{flex-grow:1;display:flex;align-items:baseline;justify-content:space-between}
/* Header lockup = live-site lockup: symbol 35×40, wordmark 354 wide, 7px gap, wordmark bottom on the menu baseline.
   The two SVGs keep ~2 units of space under the baseline so round letters are not clipped; the negative margins cancel it. */
.logo{display:flex;align-items:flex-end;gap:7px}
.logo__symbol{width:35px;height:42.1px;margin-bottom:-1.2px}
.logo__wordmark{width:354px;height:14.6px;margin-bottom:-1.6px}
.site-nav{display:flex;gap:32px;align-items:baseline;font-size:16px}
.site-nav__cta{white-space:nowrap;max-width:0;padding:9px 0;margin-left:-32px;opacity:0;visibility:hidden;transition:max-width var(--t-sweep) var(--ease),padding var(--t-sweep) var(--ease),margin-left var(--t-sweep) var(--ease),opacity 200ms ease-out,visibility 0s linear var(--t-sweep),color var(--t-colour) var(--ease)}
.site-header.is-solid .site-nav__cta{max-width:240px;padding:9px 16px;margin-left:0;opacity:1;visibility:visible;transition-delay:0s}
.site-header__rule{position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--ctc-blue);transform:scaleX(0);transform-origin:left center;transition:transform var(--t-rule) var(--ease)}
.site-header.is-solid .site-header__rule{transform:scaleX(1)}

.muted{font-size:15px;line-height:23px;color:var(--ctc-text-muted)}

/* Prose (text pages, confirmation): body type, text-link style on Markdown links */
.prose{max-width:760px}
.prose p,.prose li{font-size:16px;line-height:25px}
.prose > * + *{margin-top:16px}
.prose h2{margin-top:48px;padding-top:24px;border-top:1px solid var(--ctc-rule);font-size:22px;line-height:28px}   /* section opener: 1px rule (design system §3) */
.prose h3{margin-top:32px;font-size:17px;line-height:23px}
.prose h2 + *,.prose h3 + *{margin-top:12px}
.prose > :first-child{margin-top:0}
.prose ul,.prose ol{padding-left:24px}
.prose li + li{margin-top:6px}
.prose strong{font-weight:700}
.prose a:not(.ctc-btn){color:var(--ctc-black);padding-bottom:3px;background-image:linear-gradient(var(--ctc-blue),var(--ctc-blue)),linear-gradient(var(--ctc-link-tint),var(--ctc-link-tint));background-repeat:no-repeat;background-size:0% 2px,100% 1px;background-position:right bottom,left bottom;transition:background-size var(--t-underline) var(--ease),color var(--t-colour) var(--ease)}
.prose a:not(.ctc-btn):hover,.prose a:not(.ctc-btn):focus-visible{color:var(--ctc-blue);background-size:100% 2px,100% 1px;background-position:left bottom,left bottom}
.prose a:not(.ctc-btn):focus-visible{outline:2px solid var(--ctc-blue);outline-offset:4px}   /* buttons in prose keep their own padding (404 page) */

/* ---------- Footer ---------- */
.site-footer{min-height:90px;background:var(--ctc-black);padding:20px 64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:13px;color:var(--ctc-text-on-black);text-align:center}
.site-footer nav{display:flex;gap:24px}
.site-footer__company{font-size:12px;line-height:16px}   /* caption token */


@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
}


/* ---------- Mobile menu (≤ 760px) — brief §4: "Menu" button opens a full-screen black panel,
   links in Nexa XBold 28px, blue rule under the current one. Proposal, to review with Flo. ---------- */
.menu-btn{all:unset;display:none;position:relative;padding:6px 0;color:#fff;font:700 16px/20px var(--font-sans);cursor:pointer}
.menu-btn::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ctc-blue);transform:scaleX(0);transform-origin:right center;transition:transform var(--t-underline) var(--ease)}
.menu-btn:hover::after,.menu-btn:focus-visible::after,.menu-btn[aria-expanded="true"]::after{transform:scaleX(1);transform-origin:left center}
.menu-btn:focus-visible{outline:2px solid var(--ctc-blue);outline-offset:4px}
.mobile-menu{position:fixed;inset:0;z-index:19;background:var(--ctc-black);padding:116px 20px 40px;display:flex;flex-direction:column;justify-content:space-between;overflow-y:auto}
.mobile-menu[hidden]{display:none}
.mobile-menu nav{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.mobile-menu__link{position:relative;padding-bottom:6px;color:#fff;font:700 28px/34px var(--font-display)}
.mobile-menu__link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ctc-blue);transform:scaleX(0);transform-origin:right center;transition:transform var(--t-underline) var(--ease)}
.mobile-menu__link:hover::after,.mobile-menu__link:focus-visible::after,.mobile-menu__link[aria-current="page"]::after{transform:scaleX(1);transform-origin:left center}
.mobile-menu__link:focus-visible{outline:2px solid var(--ctc-blue);outline-offset:4px}
.mobile-menu__cta{align-self:stretch;text-align:center;margin-top:40px}
html.menu-open{overflow:hidden}
html.menu-open .site-header{background:var(--ctc-black)}

/* ---------- Responsive (shared) ---------- */
@media (max-width: 1100px){
  .site-header__inner{padding:0 32px}
  .site-nav{gap:20px}
  /* Company name stays visible (Flo, 20 Oct 2026): the lockup at 80%, and the menu links move behind the Menu button */
  .logo{gap:6px}
  .logo__symbol{width:28px;height:auto;margin-bottom:-1px}
  .logo__wordmark{width:283px;height:auto;margin-bottom:-1.3px}
  .site-nav a.ctc-nav,.site-nav__cta{display:none}
  .menu-btn{display:inline-block}
}
@media (max-width: 760px){
  .site-header__inner{padding:0 20px}
  .logo{gap:5px}
  .logo__symbol{width:24px;margin-bottom:-.8px}
  .logo__wordmark{width:min(243px, calc(100vw - 150px));margin-bottom:-1.1px}   /* shrinks on very small phones */
  .site-footer{padding:24px 20px}
  .site-footer nav{flex-wrap:wrap;justify-content:center;gap:8px 24px}
}