/* =====================================================================================================
   SELF-HOSTED FONTS (29 Sept 2026, SEO audit item A.6). build.py prepends this to the versioned stylesheet
   and strips the Google Fonts <link>s from every page's helmet, so the design canvas keeps using Google Fonts
   and the live site serves these four files from /assets/fonts/ (Fontsource 5.3.0 builds of the same Google
   variable fonts: Quicksand wght 300–700, JetBrains Mono wght 100–800; latin + latin-ext subsets, same
   unicode-range split as Google's CSS, so the same characters are covered as before).

   The "Fallback" faces are the LOADING FRAME ONLY: a local system font stretched with size-adjust /
   ascent-override / descent-override to Quicksand's (or JetBrains Mono's) widths and line heights, so that
   when the real font swaps in nothing moves. Numbers from capsize (xWidthAvg, latin subset):
     Quicksand 500: 473/1000 · Quicksand 700: 489/1000 · JetBrains Mono: 600/1000 (all weights)
     Arial & Helvetica 913/2048 · Roboto 911/2048 · Courier New & Roboto Mono 1229/2048 · Menlo 1233/2048
   Each real face lists Google's own copy of the same file (v37 / v24, captured 29 Sept 2026) as a second src, so if the
   Wix host ever fails to serve /assets/fonts/ the browser silently falls back to Google Fonts instead of to Arial.
   Two weight ranges per family because Quicksand Bold is 3.4% wider than Quicksand Medium; each fallback
   face covers 100–900 in one src so the browser never synthesises bold on top of the adjusted widths.
   ===================================================================================================== */
@font-face{font-family:'Quicksand';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/quicksand-latin-wght-normal.woff2) format('woff2'),url(https://fonts.gstatic.com/s/quicksand/v37/6xKtdSZaM9iE8KbpRA_hK1QN.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}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/quicksand-latin-ext-wght-normal.woff2) format('woff2'),url(https://fonts.gstatic.com/s/quicksand/v37/6xKtdSZaM9iE8KbpRA_hJVQNcOM.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2'),url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.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}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format('woff2'),url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* loading-frame fallbacks: Windows/macOS/iOS (Arial; Liberation Sans and Arimo are its metric twins on Linux/ChromeOS), macOS/iOS (Helvetica),
   Android (Roboto), Linux lab machines such as PageSpeed Insights (DejaVu Sans; 1041/2048) */
@font-face{font-family:'Quicksand Fallback';font-weight:100 549;src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('Arimo');size-adjust:106.101%;ascent-override:94.25%;descent-override:23.562%;line-gap-override:0%}
@font-face{font-family:'Quicksand Fallback';font-weight:550 900;src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('Arimo');size-adjust:109.69%;ascent-override:91.166%;descent-override:22.791%;line-gap-override:0%}
@font-face{font-family:'Quicksand Fallback H';font-weight:100 549;src:local('Helvetica Neue'),local('Helvetica');size-adjust:106.101%;ascent-override:94.25%;descent-override:23.562%;line-gap-override:0%}
@font-face{font-family:'Quicksand Fallback H';font-weight:550 900;src:local('Helvetica Neue'),local('Helvetica');size-adjust:109.69%;ascent-override:91.166%;descent-override:22.791%;line-gap-override:0%}
@font-face{font-family:'Quicksand Fallback R';font-weight:100 549;src:local('Roboto');size-adjust:106.334%;ascent-override:94.043%;descent-override:23.511%;line-gap-override:0%}
@font-face{font-family:'Quicksand Fallback R';font-weight:550 900;src:local('Roboto');size-adjust:109.931%;ascent-override:90.966%;descent-override:22.742%;line-gap-override:0%}
@font-face{font-family:'Quicksand Fallback D';font-weight:100 549;src:local('DejaVu Sans');size-adjust:93.055%;ascent-override:107.463%;descent-override:26.866%;line-gap-override:0%}
@font-face{font-family:'Quicksand Fallback D';font-weight:550 900;src:local('DejaVu Sans');size-adjust:96.203%;ascent-override:103.947%;descent-override:25.987%;line-gap-override:0%}
@font-face{font-family:'JetBrains Mono Fallback';font-weight:100 900;src:local('Menlo'),local('DejaVu Sans Mono');size-adjust:99.659%;ascent-override:102.349%;descent-override:30.103%;line-gap-override:0%}
@font-face{font-family:'JetBrains Mono Fallback C';font-weight:100 900;src:local('Courier New'),local('CourierNewPSMT'),local('Liberation Mono'),local('Cousine');size-adjust:99.984%;ascent-override:102.017%;descent-override:30.005%;line-gap-override:0%}
@font-face{font-family:'JetBrains Mono Fallback R';font-weight:100 900;src:local('Roboto Mono');size-adjust:99.984%;ascent-override:102.017%;descent-override:30.005%;line-gap-override:0%}

/* Serram Creative — site system. Built from the Instagram launch (Sept 2026). */
:root{
  --navy:#2E3D64; --navy-deep:#243152; --ink:#1C2644;
  --cream:#E2DBD6; --paper:#EDE8E3; --white:#F8F5F2;
  --cyan:#00C2C7; --cyan-deep:#00868A;
  --muted:#4F5A7A; --muted-on-navy:#B7BED3;
  --line:rgba(46,61,100,.16); --line-on-navy:rgba(226,219,214,.14);
  --display:'Quicksand','Quicksand Fallback','Quicksand Fallback H','Quicksand Fallback R','Quicksand Fallback D',ui-rounded,system-ui,sans-serif;
  --body:'Quicksand','Quicksand Fallback','Quicksand Fallback H','Quicksand Fallback R','Quicksand Fallback D',ui-rounded,system-ui,sans-serif;
  --mono:'JetBrains Mono','JetBrains Mono Fallback','JetBrains Mono Fallback C','JetBrains Mono Fallback R',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--navy);font-family:var(--body);font-weight:500;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.page{position:relative;overflow:hidden;background:var(--cream);color:var(--navy);font-family:var(--body)}

/* ---------- type ---------- */
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.mono-s{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.d1{font-family:var(--display);font-weight:700;font-size:112px;line-height:.94;letter-spacing:-.035em;margin:0}
.d2{font-family:var(--display);font-weight:700;font-size:80px;line-height:.98;letter-spacing:-.03em;margin:0}
.d3{font-family:var(--display);font-weight:700;font-size:56px;line-height:1.02;letter-spacing:-.025em;margin:0}
.d4{font-family:var(--display);font-weight:700;font-size:34px;line-height:1.1;letter-spacing:-.015em;margin:0}
.light{font-weight:400}
.cy{color:var(--cyan)}
.lead{font-size:22px;line-height:1.5;font-weight:500;margin:0}
.body{font-size:17px;line-height:1.65;font-weight:500;margin:0}
.muted{color:var(--muted)}
.on-navy .muted,.muted-n{color:var(--muted-on-navy)}

/* ---------- surfaces ---------- */
.navy{background:var(--navy);color:var(--cream)}
.deep{background:var(--navy-deep);color:var(--cream)}
.paper{background:var(--paper)}
.cyanbg{background:var(--cyan);color:var(--ink)}

/* the faint column grid from the IG posts */
.cols{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to right,var(--line) 1px,transparent 1px);
  background-size:calc((100% - 160px)/6) 100%;background-position:80px 0;background-repeat:repeat-x}
.navy .cols,.deep .cols{background-image:linear-gradient(to right,var(--line-on-navy) 1px,transparent 1px)}
.cols::after{content:"";position:absolute;top:0;bottom:0;right:80px;width:1px;background:var(--line)}
.navy .cols::after,.deep .cols::after{background:var(--line-on-navy)}

/* crop marks */
.crop{position:absolute;pointer-events:none;width:22px;height:22px;border-color:currentColor;border-style:solid;border-width:0;opacity:.7}
.crop.tl{top:28px;left:28px;border-top-width:1.5px;border-left-width:1.5px}
.crop.tr{top:28px;right:28px;border-top-width:1.5px;border-right-width:1.5px}
.crop.bl{bottom:28px;left:28px;border-bottom-width:1.5px;border-left-width:1.5px}
.crop.br{bottom:28px;right:28px;border-bottom-width:1.5px;border-right-width:1.5px}

/* meta row */
.meta{display:flex;justify-content:space-between;align-items:center}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cyan);margin-right:12px;vertical-align:middle}

/* selection box with handles */
.sel{position:absolute;border:1.5px solid var(--cyan);pointer-events:none}
/* decorative overlays never catch clicks (28 Sept 2026: .sel covered the Contact form) */
.sel i,svg.cursor,.caret{pointer-events:none}
.sel i{position:absolute;width:11px;height:11px;background:var(--white);border:1.5px solid var(--navy)}
.sel i:nth-child(1){left:-6px;top:-6px}.sel i:nth-child(2){left:calc(50% - 6px);top:-6px}.sel i:nth-child(3){right:-6px;top:-6px}
.sel i:nth-child(4){left:-6px;top:calc(50% - 6px)}.sel i:nth-child(5){right:-6px;top:calc(50% - 6px)}
.sel i:nth-child(6){left:-6px;bottom:-6px}.sel i:nth-child(7){left:calc(50% - 6px);bottom:-6px}.sel i:nth-child(8){right:-6px;bottom:-6px}
.navy .sel i,.deep .sel i{background:var(--navy);border-color:var(--cyan)}
.tag{display:inline-block;background:var(--cyan);color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.12em;padding:5px 9px;font-weight:600}

/* fig annotation */
.fig{display:flex;gap:14px;align-items:flex-start}
.fig .stem{width:1.5px;background:var(--navy);position:relative}
.fig .stem::after{content:"";position:absolute;bottom:-5px;left:-4.5px;width:10px;height:10px;border-radius:50%;background:var(--navy)}
.navy .fig .stem,.deep .fig .stem{background:var(--cream)}
.navy .fig .stem::after,.deep .fig .stem::after{background:var(--cyan)}

/* progress segments (01 — TEASE / 02 — INTRODUCE / 03 — EXPLAIN) */
.segs{display:grid;gap:14px}
.seg{border-top:3px solid var(--line);padding-top:12px}
.seg.on{border-top-color:var(--cyan)}
.navy .seg,.deep .seg{border-top-color:rgba(226,219,214,.22)}
.navy .seg.on,.deep .seg.on{border-top-color:var(--cyan)}

/* ---------- buttons & links ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;flex-shrink:0;height:56px;padding:0 26px;border-radius:999px;font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.005em;transition:transform .2s ease,background .2s ease,color .2s ease;cursor:pointer;border:0}
.btn-cyan{background:var(--cyan);color:var(--ink)}
.btn-cyan:hover{background:var(--navy);color:var(--cream)}
.navy .btn-cyan:hover,.deep .btn-cyan:hover{background:var(--cream);color:var(--navy)}
.btn-line{border:1.5px solid currentColor;background:transparent}
.btn-line:hover{background:var(--navy);color:var(--cream)}
.navy .btn-line:hover,.deep .btn-line:hover{background:var(--cream);color:var(--navy)}
.btn .arr{font-family:var(--mono);font-weight:500}
.ulink{border-bottom:1.5px solid var(--cyan);padding-bottom:2px;font-weight:700}
.ulink:hover{color:var(--cyan)}

/* ---------- header ---------- */
.hdr{position:relative;z-index:5;height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 80px;border-bottom:1px solid var(--line)}
.navy .hdr,.deep .hdr,.hdr.on-navy{border-bottom-color:var(--line-on-navy)}
.brand{display:flex;align-items:center;gap:14px}
.brand img{height:30px;width:auto}
/* nav items are real buttons: outlined pills, filled navy on hover and on the current page */
.nav{display:flex;gap:8px;align-items:center;padding:6px;border-radius:999px;background:rgba(46,61,100,.06)}
.nav a{font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:-.005em;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;border:1.5px solid rgba(46,61,100,.22);background:var(--white);color:var(--navy);white-space:nowrap;transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}
.nav a:hover{background:var(--navy);border-color:var(--navy);color:var(--cream);transform:translateY(-1px)}
.nav a.cur{background:var(--navy);border-color:var(--navy);color:var(--cream)}
.nav a.cur::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan)}
.hdr-r{display:flex;align-items:center;gap:22px}
.lang{font-family:var(--mono);font-size:12px;letter-spacing:.14em;border:1.5px solid currentColor;border-radius:999px;padding:7px 12px}
.lang:hover{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}
.hdr .btn{height:46px;font-size:15px;padding:0 20px}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.field input,.field textarea,.field select{font-family:var(--body);font-weight:600;font-size:18px;color:var(--navy);background:transparent;border:0;border-bottom:1.5px solid var(--navy);padding:10px 0 12px;outline:none;border-radius:0}
.field textarea{resize:none;height:92px}
.field input:focus,.field textarea:focus{border-bottom-color:var(--cyan)}
.navy .field input,.navy .field textarea,.deep .field input,.deep .field textarea{color:var(--cream);border-bottom-color:rgba(226,219,214,.5)}
.field input::placeholder,.field textarea::placeholder{color:rgba(46,61,100,.45)}
.navy .field input::placeholder,.navy .field textarea::placeholder,.deep .field input::placeholder,.deep .field textarea::placeholder{color:rgba(226,219,214,.4)}

/* ---------- browser window (IG post 3) ---------- */
.win{background:var(--cream);border-radius:14px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(12,18,40,.55);color:var(--navy)}
.win-bar{height:46px;display:flex;align-items:center;gap:18px;padding:0 18px;background:#D6CEC8}
.win-dots{display:flex;gap:7px}.win-dots b{width:11px;height:11px;border-radius:50%;background:#A9A2A0}
.win-url{flex:1;height:26px;border-radius:999px;background:var(--cream);font-family:var(--mono);font-size:12px;display:flex;align-items:center;padding:0 14px;color:var(--muted)}
.row{display:grid;grid-template-columns:64px 1fr 40px;align-items:center;padding:22px 30px;border-top:1px solid var(--line);transition:background .18s ease}
.row:first-of-type{border-top:0}
.row .n{font-family:var(--mono);font-size:13px;color:var(--muted)}
.row .t{font-family:var(--display);font-weight:600;font-size:30px;letter-spacing:-.01em;line-height:1.1}
.row .s{font-size:15px;color:var(--muted);margin-top:4px}
.row .a{font-family:var(--mono);font-size:22px;justify-self:end;transition:transform .18s ease}
.row:hover,.row.hot{background:var(--cyan)}
.row:hover .t,.row.hot .t{font-weight:700}
.row:hover .n,.row:hover .s,.row.hot .n,.row.hot .s{color:var(--ink)}
.row:hover .a,.row.hot .a{transform:rotate(-45deg)}

/* ---------- marquee ---------- */
.marq{overflow:hidden;white-space:nowrap}
.marq-in{display:inline-flex;gap:56px;animation:marq 38s linear infinite;padding-right:56px}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- animated bits ---------- */
@keyframes render{0%{width:4%}60%{width:78%}100%{width:100%}}
@keyframes blink{50%{opacity:0}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,194,199,.5)}50%{box-shadow:0 0 0 10px rgba(0,194,199,0)}}
@keyframes drawbox{from{clip-path:inset(0 100% 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.bar{height:3px;background:rgba(46,61,100,.18);position:relative;overflow:hidden}
.bar b{position:absolute;left:0;top:0;bottom:0;background:var(--cyan);animation:render 4.5s cubic-bezier(.6,.1,.2,1) infinite alternate}
.caret{display:inline-block;width:.08em;height:.82em;background:var(--cyan);margin-left:.06em;vertical-align:-.04em;animation:blink 1s steps(1) infinite}
.live{width:9px;height:9px;border-radius:50%;background:var(--cyan);animation:pulse 2s infinite;display:inline-block}

/* ---------- footer ---------- */
.ftr{position:relative;background:var(--navy-deep);color:var(--cream);padding:76px 80px 40px}
.ftr a:hover{color:var(--cyan)}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px}
.ftr h4,.ftr h2{margin:0 0 18px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-on-navy);font-weight:500}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:17px;font-weight:600}
.social{display:flex;align-items:center;gap:10px;margin-top:26px}
.social .mono-s{margin-right:4px}
.social a{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(226,219,214,.35);display:grid;place-items:center;color:var(--cream);transition:background .18s,border-color .18s,color .18s}
.social a:hover{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}
.ftr-base{margin-top:60px;padding-top:24px;border-top:1px solid var(--line-on-navy);display:flex;justify-content:space-between}

/* ---------- misc ---------- */
.hr{height:1px;background:var(--line)}
.navy .hr,.deep .hr{background:var(--line-on-navy)}
.chip{display:inline-flex;align-items:center;gap:8px;border:1.5px solid currentColor;border-radius:999px;padding:7px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
details summary{list-style:none;cursor:pointer}
details summary::-webkit-details-marker{display:none}
.faq{border-top:1px solid var(--line)}
.faq summary{display:grid;grid-template-columns:72px 1fr 40px;align-items:center;padding:28px 0;font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.01em}
.faq summary .pm{font-family:var(--mono);font-size:24px;justify-self:end;transition:transform .2s}
.faq[open] summary .pm{transform:rotate(45deg);color:var(--cyan)}
.faq .ans{padding:0 40px 30px 72px;font-size:18px;line-height:1.65;max-width:900px}
.navy .faq,.deep .faq{border-top-color:var(--line-on-navy)}


/* 1101–1439: laptops (1280, 1366…) see the 1440 design scaled to fit, so nothing reflows or scrolls sideways */
@media (min-width:1101px) and (max-width:1439px){.page{zoom:.97}}
@media (min-width:1101px) and (max-width:1399px){.page{zoom:.944}}
@media (min-width:1101px) and (max-width:1359px){.page{zoom:.917}}
@media (min-width:1101px) and (max-width:1319px){.page{zoom:.889}}
@media (min-width:1101px) and (max-width:1279px){.page{zoom:.861}}
@media (min-width:1101px) and (max-width:1239px){.page{zoom:.833}}
@media (min-width:1101px) and (max-width:1199px){.page{zoom:.806}}
@media (min-width:1101px) and (max-width:1159px){.page{zoom:.778}}
@media (min-width:1101px) and (max-width:1119px){.page{zoom:.764}}
/* ≤1100: the header gets two rows — brand + actions on top, the nav pills underneath — so nothing collides */
@media (max-width:1100px){
  .hdr{height:auto!important;flex-wrap:wrap;row-gap:12px;padding-top:14px!important;padding-bottom:14px!important}
  .hdr .nav{order:3;width:100%;justify-content:safe center;overflow-x:auto}
  .hdr .brand,.hdr .hdr-r{flex:none}
}
/* ≤1100: four-up grids become two-up; long buttons never break inside the pill */
@media (max-width:1100px){
  .page [style*="repeat(4, minmax(0, 1fr))"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* =========================================================
   RESPONSIVE — the artboards are drawn at 1440; the live site
   must reflow. Everything below only applies under 1100px.
   ========================================================= */
@media (max-width:1100px){
  .page{width:100%!important;height:auto!important}
  .page section,.page footer,.page header,.ftr,.hdr{padding-left:32px!important;padding-right:32px!important}
  .cols{background-size:calc((100% - 64px)/4) 100%;background-position:32px 0}
  .cols::after{right:32px}
  .nav{gap:4px;padding:4px}
  .nav a{font-size:13px;height:38px;padding:0 12px}
  .hdr-r .mono{display:none}
  .d1{font-size:clamp(48px,8.4vw,96px)!important}
  .d2{font-size:clamp(42px,7vw,72px)!important}
  .d3{font-size:clamp(34px,5.4vw,52px)!important}
}
@media (max-width:820px){
  .page section,.page footer,.ftr{padding-top:72px!important;padding-bottom:72px!important}
  .page section,.page footer,.page header,.ftr,.hdr{padding-left:20px!important;padding-right:20px!important}
  .cols{background-size:calc((100% - 40px)/2) 100%;background-position:20px 0}
  .cols::after{right:20px}
  .crop.tl,.crop.tr{top:14px}.crop.bl,.crop.br{bottom:14px}
  .crop.tl,.crop.bl{left:8px}.crop.tr,.crop.br{right:8px}
  /* header: brand + quote button only; nav becomes a scroller row */
  .hdr{height:auto!important;flex-wrap:wrap;gap:12px;padding-top:14px!important;padding-bottom:12px!important}
  .hdr .brand img+img{height:14px!important}
  .nav{order:3;width:100%;overflow-x:auto;gap:6px;padding:4px;-webkit-overflow-scrolling:touch;border-radius:999px;justify-content:flex-start!important}
  .nav a{font-size:14px;flex:none}
  .hdr-r{gap:10px}
  .hdr-r .mono{display:none}
  .hdr .btn{height:44px;font-size:14px;padding:0 16px}
  .nav a{height:44px;padding:0 16px}
  .ftr [style*="text-align: right"]{text-align:left!important}
  .ftr ul{gap:2px}
  .ftr ul a{display:inline-block;padding:9px 0}
  /* every multi-column layout collapses to one column */
  .page [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:none!important}
  .page [style*="grid-row: span"],.page [style*="grid-column"]{grid-row:auto!important;grid-column:auto!important}
  .page [style*="display: flex"][style*="justify-content: space-between"]{flex-wrap:wrap;gap:24px}
  .page [style*="width: 1"][style*="px"]:not(img):not(.sel):not(i),.page [style*="max-width"]{max-width:100%!important}
  .page [style*="position: sticky"]{position:relative!important;top:auto!important}
  .page img{max-width:100%;height:auto}
  .ftr-grid{grid-template-columns:1fr 1fr!important;gap:32px}
  .ftr-base{flex-direction:column;gap:10px}
  .d1{font-size:clamp(40px,11.5vw,64px)!important;line-height:1!important}
  .d2{font-size:clamp(36px,10vw,56px)!important}
  .d3{font-size:clamp(30px,8.4vw,44px)!important}
  .d4{font-size:24px!important}
  .lead{font-size:19px}
  .row{grid-template-columns:40px 1fr 28px!important;padding:18px 18px}
  .row .t{font-size:22px}
  .faq summary{grid-template-columns:44px 1fr 28px;font-size:20px;padding:22px 0}
  .faq .ans{padding:0 0 24px 44px;font-size:16px}
  .btn{height:52px}
  .meta{flex-wrap:wrap;gap:6px 16px}
  .marq-in{font-size:30px!important}
}

/* SEO kicker: the keyword H1 sits small above the display headline */
.kicker{margin:0;font-family:var(--mono);font-size:13px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;font-weight:600;display:flex;align-items:center;gap:12px}
.kicker::before{content:"";width:28px;height:1.5px;background:var(--cyan);flex:none}

/* =========================================================
   MOTION (live site only). build.py adds MOTION_JS, which puts
   class "mo" on <html> (never with prefers-reduced-motion).
   Without it (design canvas, no JS, reduced motion) every
   element below shows its final, static state.
   ========================================================= */
@property --f{syntax:'<percentage>';inherits:false;initial-value:0%}
@property --p{syntax:'<percentage>';inherits:false;initial-value:0%}

/* ---- scroll HUD (shared: How we work + Services) ---- */
.shud{position:fixed;right:24px;bottom:24px;z-index:60;display:flex;align-items:center;gap:12px;height:52px;padding:0 20px 0 18px;border-radius:999px;background:rgba(36,49,82,.94);color:var(--cream);border:1px solid rgba(226,219,214,.18);box-shadow:0 18px 40px -18px rgba(12,18,40,.6);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;pointer-events:none;opacity:0;transform:translateY(18px);transition:opacity .35s ease,transform .35s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.shud.show.awake{opacity:1;transform:none}
.shud .live{flex:none}
.shud-n{font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:-.03em;text-transform:none;color:var(--cream);font-variant-numeric:tabular-nums;min-width:2.1ch;text-align:right}
.shud-u{color:var(--cyan);margin-left:-9px}
.shud-name{font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:-.005em;text-transform:none;white-space:nowrap}
.shud-bar{position:relative;width:120px;height:4px;border-radius:2px;background:rgba(226,219,214,.18);overflow:hidden}
.shud-bar i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--cyan);transform-origin:left;transform:scaleX(var(--v,0))}
.shud-bar b{position:absolute;top:-1px;bottom:-1px;width:2px;background:rgba(36,49,82,.9)}
.shud-segs{display:flex;gap:4px}
.shud-segs i{width:14px;height:4px;border-radius:2px;background:rgba(226,219,214,.22);transition:background .25s}
.shud-segs i.on{background:var(--cyan)}
.shud.done .live{animation:none;background:var(--cyan)}
@media (max-width:820px){
  .shud{right:auto;left:50%;bottom:14px;height:46px;gap:10px;padding:0 16px 0 14px;transform:translate(-50%,18px);max-width:calc(100% - 28px)}
  .shud.show.awake{transform:translate(-50%,0)}
  .shud-n{font-size:20px}
  .shud-bar{width:72px}
  .shud-stage,.shud-name{display:none}
}

/* ---- How we work: the render ---- */
/* the rail draws itself in cyan as you scroll down each stage */
html.mo .band:not(.s4) .rail::after{content:"";position:absolute;left:-2px;top:0;width:2px;height:100%;background:var(--cyan);transform-origin:top;transform:scaleY(var(--rp,0))}
/* nodes: the pie fills to the stage's percent */
html.mo .band .node{transition:--p 1.2s cubic-bezier(.2,.7,.2,1) .15s,transform .5s cubic-bezier(.3,1.6,.5,1)}
html.mo .band.s1 .node{background:conic-gradient(#00C2C7 0 var(--p),#E2DBD6 var(--p) 100%)}
html.mo .band.s2 .node,html.mo .band.s3 .node{background:conic-gradient(#00C2C7 0 var(--p),#EDE8E3 var(--p) 100%)}
html.mo .band.s1.in .node{--p:25%}html.mo .band.s2.in .node{--p:50%}html.mo .band.s3.in .node{--p:75%}
html.mo .band.s4 .node{transform:scale(.4);opacity:0;transition:transform .6s cubic-bezier(.3,1.6,.5,1) .9s,opacity .3s ease .9s}
html.mo .band.s4.in .node{transform:none;opacity:1}
/* the big numbers fill up to their own percent, with a cyan scan line at the level */
html.mo .band .pct{--lv:calc(var(--f) * .74 + 13%);color:transparent;-webkit-text-stroke:1.5px #2E3D64;background-image:linear-gradient(to top,#2E3D64 0 var(--lv),#00C2C7 var(--lv) calc(var(--lv) + 4%),transparent calc(var(--lv) + 4%));-webkit-background-clip:text;background-clip:text;transition:--f 1.5s cubic-bezier(.2,.7,.2,1) .1s}
html.mo .band.s0 .pct{-webkit-text-stroke-color:rgba(46,61,100,.55);background-image:none}
html.mo .band.s4 .pct{-webkit-text-stroke-color:#E2DBD6;background-image:linear-gradient(to top,#E2DBD6 0 var(--lv),#00C2C7 var(--lv) calc(var(--lv) + 4%),transparent calc(var(--lv) + 4%))}
html.mo .band.s4.in .pct{--f:104%}
html.mo .band.s1.in .pct{--f:25%}html.mo .band.s2.in .pct{--f:50%}html.mo .band.s3.in .pct{--f:75%}
html.mo .band .pct small{-webkit-text-stroke:0;color:#00C2C7}
/* the artboards build themselves: boxes appear one by one, then the extras */
html.mo .band .vis > *,html.mo .band .ab .e,html.mo .band .blank li{transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1),clip-path .6s cubic-bezier(.6,.1,.2,1);transition-delay:calc(var(--i,0) * 55ms + 200ms)}
html.mo .band:not(.in) .vis > *{opacity:0;transform:translateY(18px)}
html.mo .band:not(.in) .ab .e{opacity:0;transform:scale(.94)}
html.mo .band.s1:not(.in) .ab .e{clip-path:inset(0 100% 100% 0)}
html.mo .band.s1 .ab .e{clip-path:inset(0 0 0 0)}
html.mo .band:not(.in) .blank li{opacity:0;transform:translateX(-10px)}
html.mo .band .vis > .quote,html.mo .band .vis > .ph,html.mo .band .vis > .rep{transition-delay:.85s}
html.mo .band .vis > .ping,html.mo .band .vis > .wire{transition-delay:calc(var(--i,0) * 160ms + 1.1s)}
html.mo .band:not(.in) .vis > .ping{transform:scale(.6)}
html.mo .band .stg > *:not(.node):not(.pct){transition:opacity .6s ease .1s,transform .7s cubic-bezier(.2,.7,.2,1) .1s}
html.mo .band:not(.in) .stg > *:not(.node):not(.pct){opacity:0;transform:translateY(16px)}

/* ---- Services: 01 → 06 ---- */
.odo{display:inline-block;height:1em;overflow:hidden;vertical-align:top;margin:-.11em 0}
.odo > span{display:block;transition:transform 1.1s cubic-bezier(.2,.8,.2,1) .15s}
.odo > span > span{display:block;height:1em;line-height:1em}
html.mo .ix .ixw{display:inline-block;transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
html.mo .ix:not(.in) .ixw{opacity:0;transform:translateY(30px)}
html.mo .ix .ix-name .tag.nofit{display:none}
html.mo .ix .ix-name .nm{display:inline;transition:opacity .7s ease .12s}
html.mo .ix:not(.in) .ix-name .nm{opacity:0}
html.mo .ix .ix-name{transition:transform .8s cubic-bezier(.2,.7,.2,1) .1s}
html.mo .ix:not(.in) .ix-name{transform:translateY(26px)}
/* the selection box follows you: it draws itself around the service you're reading */
html.mo .ix .ix-name .sel{opacity:1;clip-path:inset(0 100% 100% 0);transition:clip-path .7s cubic-bezier(.6,.1,.2,1)}
html.mo .ix .ix-name.hot .sel,html.mo .ix:hover .ix-name .sel{clip-path:inset(-12px -12px -12px -12px)}
html.mo .ix .ix-name .sel i{transform:scale(0);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
html.mo .ix .ix-name.hot .sel i,html.mo .ix:hover .ix-name .sel i{transform:none;transition-delay:.55s}
html.mo .ix .ix-name .tag{transition:opacity .3s ease .6s}
html.mo .ix .ix-body > *{transition:opacity .7s ease .25s,transform .8s cubic-bezier(.2,.7,.2,1) .25s}
html.mo .ix:not(.in) .ix-body > *{opacity:0;transform:translateY(22px)}
html.mo .ix .spec li{transition:opacity .45s ease,transform .5s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 70ms + .45s)}
html.mo .ix:not(.in) .spec li{opacity:0;transform:translateX(-12px)}
@media (max-width:1100px){html.mo .ix .ix-name .tag.mo-tag{display:none}}
@media (max-width:820px){html.mo .ix .ix-name .tag{display:none}}
/* replay reset: snap back instantly while off screen; mo-init does the same for the first frame after load */
html.mo-init *,html.mo-init *::before,html.mo-init *::after{transition:none!important}
html.mo .rst,html.mo .rst *{transition:none!important}
@media (prefers-reduced-motion:reduce){.shud{display:none}}
html.mo .band .pct{transition:--f 1.5s cubic-bezier(.2,.7,.2,1) .1s,opacity .35s ease}
html.mo .band:not(.in):not(.s0) .pct{opacity:0}

/* ---- proof moments (motion.js tags these with data-mo) ---- */
/* Services checklist: rows tick off one by one, then "All six." gets selected */
html.mo [data-mo=xref] .xref a{background-image:linear-gradient(#00C2C7,#00C2C7);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:opacity .45s ease,background-size .6s cubic-bezier(.6,.1,.2,1);transition-delay:calc(var(--i,0) * 190ms + 250ms)}
html.mo [data-mo=xref].in .xref a{background-size:100% 1px}
html.mo [data-mo=xref]:not(.in) .xref a{opacity:.32}
html.mo [data-mo=xref] .xref .ck{display:inline-block;transition:transform .45s cubic-bezier(.3,1.8,.5,1),opacity .2s ease;transition-delay:calc(var(--i,0) * 190ms + 380ms)}
html.mo [data-mo=xref]:not(.in) .xref .ck{transform:scale(0) rotate(-40deg);opacity:0}
html.mo [data-mo=xref] h2 .cy{position:relative;display:inline-block}
html.mo [data-mo=xref] .mo-sel{inset:4px -14px -8px -12px;clip-path:inset(-12px -12px -12px -12px);transition:clip-path .7s cubic-bezier(.6,.1,.2,1) 1.55s}
html.mo [data-mo=xref]:not(.in) .mo-sel{clip-path:inset(0 100% 100% 0)}
html.mo [data-mo=xref] .mo-sel i{transition:transform .3s cubic-bezier(.3,1.6,.5,1) 2.15s}
html.mo [data-mo=xref]:not(.in) .mo-sel i{transform:scale(0)}
html.mo [data-mo=xref] .seg{transition:border-top-color .5s ease .6s}
html.mo [data-mo=xref]:not(.in) .seg.on{border-top-color:rgba(226,219,214,.22)}
/* RoofTech numbers: dimension lines, ticks and bars draw in; the stamp lands last */
html.mo [data-mo=nrow] .draw .dim,html.mo [data-mo=nrow] .ticks,html.mo [data-mo=nrow] .fill,html.mo [data-mo=nrow] .hatch{clip-path:inset(-30px -30px -30px -10px);transition:clip-path 1.1s cubic-bezier(.6,.1,.2,1) .2s}
html.mo [data-mo=nrow] .ticks,html.mo [data-mo=nrow] .fill,html.mo [data-mo=nrow] .hatch{clip-path:inset(0 0 0 0);transition-delay:.45s}
html.mo [data-mo=nrow]:not(.in) .draw .dim{clip-path:inset(-30px 100% -30px -10px)}
html.mo [data-mo=nrow]:not(.in) .ticks,html.mo [data-mo=nrow]:not(.in) .fill,html.mo [data-mo=nrow]:not(.in) .hatch{clip-path:inset(0 100% 0 0)}
html.mo [data-mo=nrow] .draw .lbl{transition:opacity .5s ease 1.1s}
html.mo [data-mo=nrow]:not(.in) .draw .lbl{opacity:0}
html.mo [data-mo=nrow] .stamp{transition:opacity .15s ease 1.5s,transform .35s cubic-bezier(.3,1.6,.5,1) 1.5s}
html.mo [data-mo=nrow]:not(.in) .stamp{opacity:0;transform:rotate(-7deg) scale(1.7)}
/* Caso RoofTech: evidence cards drop onto their pins, then the dates stamp (on phones --i is reset so each card plays right away) */
@media (max-width:820px){html.mo .ev-w[data-mo=ev]{--i:0!important}}
html.mo .ev-w[data-mo=ev]{transition:opacity .45s ease,transform .7s cubic-bezier(.3,1.35,.5,1);transition-delay:calc(var(--i,0) * 170ms + 100ms)}
html.mo .ev-w[data-mo=ev]:not(.in){opacity:0;transform:translateY(-46px)}
html.mo [data-mo=ev] .ev .dt{transition:opacity .15s ease,transform .35s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--i,0) * 170ms + 700ms)}
html.mo [data-mo=ev]:not(.in) .ev .dt{opacity:0;transform:scale(1.6) rotate(-4deg)}
/* Web design: the timeline bars fill left to right, stage by stage */
html.mo [data-mo=gantt] .g-bar{clip-path:inset(0 0 0 0 round 999px);transition:clip-path .75s cubic-bezier(.6,.1,.2,1);transition-delay:calc(var(--i,0) * 260ms + 200ms)}
html.mo [data-mo=gantt]:not(.in) .g-bar{clip-path:inset(0 100% 0 0 round 999px)}
/* RoofTech row 05, Google Verified: licence → insurance → background check tick off along the line, then the title lights up */
html.mo [data-mo=nrow] .chk > *{transition:opacity .35s ease,transform .45s cubic-bezier(.3,1.7,.5,1)}
html.mo [data-mo=nrow] .chk > :nth-child(1){transition-delay:.3s}html.mo [data-mo=nrow] .chk > :nth-child(2){transition-delay:.62s}
html.mo [data-mo=nrow] .chk > :nth-child(3){transition-delay:.95s}html.mo [data-mo=nrow] .chk > :nth-child(4){transition-delay:1.27s}
html.mo [data-mo=nrow] .chk > :nth-child(5){transition-delay:1.6s}
html.mo [data-mo=nrow]:not(.in) .chk .c{opacity:.3}
html.mo [data-mo=nrow] .chk .c i{transition:transform .45s cubic-bezier(.3,1.8,.5,1),background .3s ease;transition-delay:inherit}
html.mo [data-mo=nrow]:not(.in) .chk .c i{transform:scale(.55)}
html.mo [data-mo=nrow] .chk .c i::after{transition:opacity .2s ease,transform .3s cubic-bezier(.3,1.8,.5,1);transition-delay:inherit}
html.mo [data-mo=nrow]:not(.in) .chk .c i::after{opacity:0;transform:rotate(45deg) scale(.2)}
html.mo [data-mo=nrow] .chk .ln{transform-origin:left;transition:transform .4s cubic-bezier(.6,.1,.2,1)}
html.mo [data-mo=nrow] .chk > .ln:nth-child(2){transition-delay:.62s}html.mo [data-mo=nrow] .chk > .ln:nth-child(4){transition-delay:1.27s}
html.mo [data-mo=nrow]:not(.in) .chk .ln{transform:scaleX(0)}
html.mo [data-mo=nrow]:has(.chk) .big{transition:opacity .5s ease 1.85s,color .5s ease 1.85s}
html.mo [data-mo=nrow]:has(.chk):not(.in) .big{opacity:.35}

/* =========================================================
   HEADER TAP-TO-CALL (English pages, 29 Sept 2026): the phone number text (.hdr-r .mono) hides under 1100px,
   so a round phone icon takes its place there. The Spanish pages already carry .tel-ico at every width.
   ========================================================= */
.tel-ico{width:44px;height:44px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;flex:none}
.tel-ico svg{width:18px;height:18px}
.tel-ico:hover{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}
.hdr-r .tel-sm{display:none}
@media (max-width:1100px){.hdr-r .tel-sm{display:grid}}
/* PHONES (29 Sept 2026, Option A): under 480px the English header shows the RR mark only, so ES + phone + Get a quote
   fit beside it on one row (two header rows on every phone). Spanish keeps the wordmark: its WhatsApp button is too
   wide to share the row either way, so hiding the wordmark there would gain nothing. */
@media (max-width:480px){html[lang="en"] .hdr .brand img+img{display:none}}
/* FOOTER (29 Sept 2026): the Follow icons sit in their own centered row under the columns; on phones the Contact column
   moves up beside Studio so the two link columns (Explore, Services) sit side by side and the grid stays even. */
.ftr-follow{justify-content:center;margin-top:56px}
@media (max-width:820px){.ftr-grid > div:nth-child(2){order:3}.ftr-grid > div:nth-child(3){order:4}.ftr-grid > div:nth-child(4){order:2}.ftr-follow{margin-top:44px}}
/* WHERE WE WORK (29 Sept 2026, audit #9): county-led town strip on /, /services and /contactus */
.where{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1.7;max-width:640px}
.where .wl{color:var(--navy);font-weight:600;margin-right:18px;white-space:nowrap}
.where b{font-weight:600;color:var(--navy)}
.where > b ~ *::before{content:"·";margin:0 9px;color:var(--cyan-deep)}
.where > *{white-space:nowrap}