/* ============================================================
   Turtle Labs design system

   Ported from brandos.turtlelabs.co.in so the group site and the Studio
   carry the same surface as BrandOS rather than an approximation of it.
   Values here are the ones BrandOS actually ships: the 1240px measure, the
   96px section rhythm, the type scale, the three glow layers and the logo
   filter. Where a number looks oddly specific it is because it was copied
   rather than chosen.

   Loaded before each site's own stylesheet, which holds only the components
   that are genuinely its own.
   ============================================================ */

@import url('/assets/fonts/fonts.css');

:root {
  --ink:246,243,236; --bg-rgb:11,11,12;
  --bg:#0B0B0C; --bg2:#141416; --card:#18181B; --text:#F6F3EC;
  --prose:#DEDAD2; --lede-c:#B8B4AE;
  --muted:#A1A1AA; --faint:#8C8C96;
  --line:rgba(var(--ink),0.12); --line2:rgba(var(--ink),0.08);
  --green:#34C759; --green-ink:#04170B; --greent:#4ADE80;
  --red:#FF6B6B; --orange:#FF8A5C; --amber:#FFB35C; --blue:#60A5FA; --cyan:#67E8F9;

  /* A client logo is usually black on white. Inverting it in the dark theme
     is what stops every mark arriving inside its own white rectangle. */
  --logo-filter: invert(1) grayscale(1) brightness(1.35);
  --header-bg: rgba(11,11,12,0.85);

  /* Venture colours, as tokens rather than fixed hex, because a value that
     reads well on near-black is often unreadable on white. Content names a
     tone and the theme decides the value. */
  --tone-red:#FF6B6B; --tone-orange:#FF8C00; --tone-amber:#FFB35C;
  --tone-green:#4ADE80; --tone-blue:#60A5FA; --tone-cyan:#67E8F9;

  --maxw: 1240px;
  --measure: 720px;
  --gap-section: clamp(72px, 8vw, 128px);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ink:24,24,27; --bg-rgb:243,250,254;
    --bg:#F3FAFE; --bg2:#FFFFFF; --card:#FFFFFF; --text:#18181B;
    --prose:#2E2E36; --lede-c:#43434C;
    --muted:#61616A; --faint:#5A5A64;
    --red:#C80018; --orange:#FF4500; --amber:#E07800; --greent:#00A86B;
    --blue:#0066B2; --cyan:#0092C8;
    --green:#00A86B; --green-ink:#FFFFFF;
    --tone-red:#C10016; --tone-orange:#9A5200; --tone-amber:#8A5200;
    --tone-green:#00754A; --tone-blue:#0057A8; --tone-cyan:#00647F;
    --logo-filter: grayscale(1);
    --header-bg: rgba(243,250,254,0.88);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --ink:24,24,27; --bg-rgb:243,250,254;
  --bg:#F3FAFE; --bg2:#FFFFFF; --card:#FFFFFF; --text:#18181B;
  --prose:#2E2E36; --lede-c:#43434C;
  --muted:#61616A; --faint:#5A5A64;
  --red:#C80018; --orange:#FF4500; --amber:#E07800; --greent:#00A86B;
  --blue:#0066B2; --cyan:#0092C8;
  --green:#00A86B; --green-ink:#FFFFFF;
  --tone-red:#C10016; --tone-orange:#9A5200; --tone-amber:#8A5200;
  --tone-green:#00754A; --tone-blue:#0057A8; --tone-cyan:#00647F;
  --logo-filter: grayscale(1);
  --header-bg: rgba(243,250,254,0.88);
  color-scheme: light;
}
html { color-scheme: dark; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

*, *::before, *::after { box-sizing: border-box; }
input, textarea, select { min-width: 0; max-width: 100%; }

body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px; line-height: 1.6; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}
img { max-width: 100%; height: auto; }

/* The depth line: how far you have gone, in the brand spectrum. Copied from
   BrandOS, where it is driven by the scroll rather than sitting static, so it
   doubles as a reading position. It scales from the left, so with scrolling
   at the top it is a hairline and at the bottom it spans the window. */
body::before {
  content: ''; position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform-origin: 0 50%; z-index: 200; pointer-events: none;
  background: linear-gradient(90deg,#C80018,#FF8C00,#FFA500,#00A86B,#0066B2,#00A3E0);
  box-shadow: 0 1px 10px rgba(0,163,224,.45);
}
@supports (animation-timeline: scroll(root block)) {
  @media (prefers-reduced-motion: no-preference) {
    body::before { animation: tl-depth linear both; animation-timeline: scroll(root block); }
    @keyframes tl-depth { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}

/* The mark settles once, like something coming to rest in water. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .brand-mark { animation: tl-settle 1.1s cubic-bezier(.22,.9,.24,1) both; }
    @keyframes tl-settle { from { transform: translateY(-5px) scale(.94); opacity: 0; }
                           60%  { transform: translateY(1px) scale(1.01); opacity: 1; }
                           to   { transform: none; opacity: 1; } }
  }
}

/* ---- accent bars -------------------------------------------------------
   One shared rule for the coloured edge on a container. It fades to nothing
   across the width rather than sitting as a solid block of colour: with a
   dozen cards on screen, a dozen solid bars is a lot of colour competing for
   the same attention, and the point of the accent is to identify the card,
   not to be the loudest thing on it. Applied through a class so the number
   of containers that carry one can be limited in one place. */

.accent-bar { position: relative; }
.accent-bar::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, var(--bar, var(--greent)), transparent 78%);
  opacity: .85; pointer-events: none;
}

/* ---- the water --------------------------------------------------------
   Three fixed layers behind everything, copied from BrandOS. None of them
   can affect layout or intercept a click.

   Deliberately CSS only. A canvas particle loop would look wonderful and
   cost battery on every view forever, which is a strange thing to ship
   under a carbon badge. */

@media (prefers-reduced-motion: no-preference) {
  .tl-caustic, .tl-deep, .tl-plight {
    position: fixed; inset: 0; pointer-events: none; z-index: 3; contain: strict;
  }

  /* Sunlight through moving water. Two tinted layers drift against each
     other on different periods, so the pattern never visibly repeats. */
  /* The gradients are drawn soft rather than blurred, and the drift moves
     only the transform.

     BrandOS animates background-position here as well as the transform, and
     wears a 26px blur on top. Both force the compositor to repaint a
     full-viewport blended layer on every frame: measured on this markup it
     halved the frame rate while scrolling, 28.6ms per frame against 16.7ms
     with the layer off. Moving a transform is free by comparison, and the
     result is the same light, so this is the one place worth departing from
     the original. */
  /* Still, not drifting.
     
     BrandOS animates this layer, and moving anything on a full-viewport
     mix-blend-mode surface makes the compositor re-blend the whole screen
     every frame. Measured on this page: 126ms per frame with the drift and
     35ms with the same layer held still, on the same machine in the same
     run. That is 8fps against 28, and it is what the reported lag was.
     
     Removing the blur and animating only a transform was not enough, because
     the blending is the expensive part and the animation is what forces it to
     be redone. The light is identical when it is still, so it is still. The
     page keeps its motion where motion costs nothing: the pointer glow moves
     only while the pointer does, and the depth tint is a scroll-linked
     opacity rather than a moving surface. */
  .tl-caustic {
    mix-blend-mode: screen; opacity: .42;
    background:
      radial-gradient(58% 34% at 20% 16%, rgba(0,172,231,.30), transparent 72%),
      radial-gradient(50% 30% at 76% 30%, rgba(0,157,91,.25), transparent 74%),
      radial-gradient(44% 28% at 44% 72%, rgba(0,111,177,.27), transparent 76%);
  }

  /* Descent. Cross-fades in over the scroll, so the light cools from surface
     cyan toward deep blue the further down the page you are. It tints the
     light, never darkens the page, so text contrast is untouched. */
  .tl-deep {
    mix-blend-mode: screen; opacity: 0; will-change: opacity;
    background:
      radial-gradient(60% 36% at 30% 26%, rgba(0,64,140,.36), transparent 74%),
      radial-gradient(52% 32% at 72% 62%, rgba(12,32,92,.32), transparent 76%);
    animation: tl-descend linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes tl-descend { from { opacity: 0; } to { opacity: .55; } }

  /* A torch underwater. Follows the pointer, desktop only. Smaller and
     lighter than a spotlight: the page carries plenty of colour already. */
  @media (hover: hover) and (pointer: fine) {
    .tl-plight {
      mix-blend-mode: screen; opacity: .17;
      background: radial-gradient(130px 130px at var(--tl-mx, -999px) var(--tl-my, -999px),
                  rgba(var(--tl-glow, 0,163,224), .40),
                  rgba(var(--tl-glow, 0,163,224), .14) 45%, transparent 72%);
      transition: opacity .5s ease;
    }
  }
}

/* The light theme is a bright ground, so the same layers have to sit back. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .tl-caustic { opacity: .3; }
  :root:not([data-theme="dark"]) .tl-deep { display: none; }
  :root:not([data-theme="dark"]) .tl-plight { opacity: .12; }
}
:root[data-theme="light"] .tl-caustic { opacity: .3; }
:root[data-theme="light"] .tl-deep { display: none; }
:root[data-theme="light"] .tl-plight { opacity: .12; }

/* ---- measure and rhythm ------------------------------------------------
   BrandOS spaces sections with bottom padding only, at 96px, inside a
   1240px measure. Copied rather than re-invented so the three sites scroll
   at the same pace. */

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
main { display: block; position: relative; z-index: 4; }
/* Bottom-led, as BrandOS is, but with a little above as well: with no top
   padding a heading starts exactly where the previous section's content
   stopped, and dense sections read as jammed together. */
.band { padding: clamp(20px, 2.6vw, 40px) 24px var(--gap-section); }
/* BrandOS opens with padding:96px 24px on the first section and 0 24px 96px
   on the rest, so the first one is not pressed against the hero. */
.hero + .band, .marks-band + .band { padding-top: var(--gap-section); }
.head { padding: clamp(48px, 7vw, 88px) 24px clamp(16px, 2vw, 26px); }
@media (max-width: 640px) { :root { --gap-section: 60px; } }

/* ---- type ---------------------------------------------------------------- */

h1, h2, h3, h4 { font-family: 'Outfit', sans-serif; letter-spacing: -0.03em; line-height: 1.08; }
h1 { font-weight: 900; font-size: clamp(42px, 7vw, 78px); margin: 0 0 22px; }
h2 { font-weight: 800; font-size: clamp(32px, 4.5vw, 50px); margin: 0 0 18px; }
h3 { font-weight: 700; font-size: clamp(20px, 2.4vw, 24px); margin: 0 0 10px; letter-spacing: -0.02em; }
p  { margin: 0 0 16px; color: var(--prose); max-width: var(--measure); }
.lede { font-size: clamp(17px, 2.1vw, 21px); line-height: 1.55; color: var(--lede-c);
        max-width: var(--measure); }
a { color: inherit; }

.eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
           color: var(--faint); margin: 0 0 14px; position: relative; padding-left: 26px; }
.eyebrow::before { content: ''; position: absolute; left: 0; top: .55em; width: 16px; height: 2px;
                   background: var(--accent-line, var(--greent)); }

.rainbow { background: linear-gradient(90deg,#C80018,#FF8C00,#FFA500,#00A86B,#0066B2,#00A3E0);
           -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- bullets --------------------------------------------------------------
   The house list. A paragraph that could be four bullets should be four
   bullets: the objective is a quick overview, not a reading task. */

.bullets { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 10px;
           max-width: var(--measure); }
.bullets li { position: relative; padding-left: 26px; color: var(--prose); font-size: 15.5px;
              line-height: 1.5; }
.bullets li::before { content: ''; position: absolute; left: 4px; top: .58em; width: 8px; height: 8px;
                      border-radius: 50%; background: var(--bullet, var(--greent)); }
.bullets strong { color: var(--text); font-weight: 700; }
.bullets.is-two { grid-template-columns: 1fr; max-width: none; }
@media (min-width: 760px) { .bullets.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 34px; } }

/* ---- buttons ---------------------------------------------------------------- */

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 999px;
       font-weight: 700; font-size: 15px; text-decoration: none; border: 1px solid var(--line);
       color: var(--text); background: transparent; cursor: pointer; font-family: inherit;
       transition: all .25s ease; }
.btn:hover { border-color: rgba(var(--ink),.34); color: var(--text); }
.btn.primary { background: var(--cta, var(--green)); border-color: var(--cta, var(--green));
               color: var(--cta-ink, var(--green-ink)); }
.btn.primary:hover { filter: brightness(1.08); color: var(--cta-ink, var(--green-ink)); }
.herobtns { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }

/* ---- client marks -------------------------------------------------------------
   Inverted in the dark theme, which is what removes the white rectangle a
   black-on-white logo otherwise arrives inside. */

.marks-band { padding: 30px 0; border-block: 1px solid var(--line2); overflow: hidden; }
.marks-track { overflow: hidden; }
.marks { list-style: none; margin: 0; padding: 0; display: flex; align-items: center;
         gap: 40px; width: max-content; animation: tlmarquee 80s linear infinite; }
@keyframes tlmarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marks li { display: flex; align-items: center; flex-shrink: 0; }
.marks img { height: 56px; width: auto; filter: var(--logo-filter); opacity: .72; }
.marks img.is-half { height: 28px; }

/* Motion is the whole point of a marquee, so with it switched off the strip
   becomes what it would otherwise be: a wrapped, centred list. */
@media (prefers-reduced-motion: reduce) {
  .marks { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 18px 40px; }
  .marks li[aria-hidden="true"] { display: none; }
}
@media (max-width: 700px) {
  .marks { gap: 26px; }
  .marks img { height: 38px; }
  .marks img.is-half { height: 22px; }
}

/* On /about the same marks are a grid to be read, not a strip to drift past. */
.marks.is-grid { animation: none; width: auto; flex-wrap: wrap; justify-content: flex-start;
                 gap: 24px 44px; margin-top: 24px; }
.marks.is-grid li[aria-hidden="true"] { display: none; }

/* ---- header ---------------------------------------------------------------------- */

header { position: sticky; top: 0; z-index: 50; background: var(--header-bg);
         backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px;
       padding: 14px 24px; position: relative; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text);
         font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 22px;
         letter-spacing: -0.03em; white-space: nowrap; min-width: 0; }
.brand-mark { display: inline-block; flex-shrink: 0; width: 36px; height: 36px;
              background-image: url('/assets/logo.webp'); background-size: auto 100%;
              background-position: left center; background-repeat: no-repeat; }
.brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
header nav { display: flex; align-items: center; gap: 26px; }
header nav a { color: var(--muted); text-decoration: none; font-size: 14.5px; font-weight: 500;
               transition: color .25s ease; }
header nav a:hover, header nav a.on { color: var(--text); }
header nav a.cta { background: var(--cta, var(--green)); color: var(--cta-ink, var(--green-ink));
                   font-weight: 700; padding: 11px 20px; border-radius: 999px; font-size: 14px; }
header nav a.cta:hover { filter: brightness(1.06); color: var(--cta-ink, var(--green-ink)); }

.burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px;
          flex-direction: column; gap: 5px; }
.burger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }

.themetoggle { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px;
               border-radius: 999px; border: 1px solid var(--line); background: var(--bg2);
               color: var(--muted); cursor: pointer; padding: 0; flex-shrink: 0;
               transition: color .25s ease, border-color .25s ease; }
.themetoggle:hover { color: var(--text); border-color: var(--text); }
.themetoggle svg { position: absolute; width: 17px; height: 17px;
                   transition: opacity .25s ease, transform .25s ease; }
.t-sun { opacity: 0; transform: rotate(-90deg) scale(.6); }
.t-moon { opacity: 1; }
:root[data-theme="light"] .t-sun { opacity: 1; transform: none; }
:root[data-theme="light"] .t-moon { opacity: 0; transform: rotate(90deg) scale(.6); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .t-sun { opacity: 1; transform: none; }
  :root:not([data-theme="dark"]) .t-moon { opacity: 0; transform: rotate(90deg) scale(.6); }
}
@media (prefers-reduced-motion: reduce) { .themetoggle svg { transition: none; transform: none; } }

@media (max-width: 900px) {
  .burger { display: flex; }
  .brand { font-size: 19px; gap: 9px; }
  .brand-mark { width: 32px; height: 32px; }
  header nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
               align-items: stretch; gap: 0; background: var(--bg);
               border-bottom: 1px solid var(--line); padding: 8px 0 18px; display: none; }
  header nav.open { display: flex; }
  header nav a { padding: 14px 24px; font-size: 16px; border-top: 1px solid var(--line2); }
  header nav a.cta { margin: 14px 24px 0; text-align: center; border-top: 0; }
  .themetoggle { position: absolute; top: 12px; right: 64px; }
}
@media (max-width: 430px) {
  .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden;
                clip-path: inset(50%); white-space: nowrap; }
}

/* ---- forms ------------------------------------------------------------------------- */

form label { display: block; margin-bottom: 18px; font-size: 13.5px; font-weight: 600; color: var(--text); }
form .opt { font-weight: 400; color: var(--faint); }
form .row { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 620px) { form .row { grid-template-columns: 1fr 1fr; } }
form input[type=text], form input[type=email], form input:not([type]), form textarea, form select {
  display: block; width: 100%; margin-top: 8px; padding: 14px 16px; font: inherit; font-weight: 400;
  color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 14px; }
form select { min-height: 54px; padding-right: 44px; appearance: none; -webkit-appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) 55%, calc(100% - 16px) 55%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
form select option { background: var(--bg2); color: var(--text); }
form :is(input, textarea, select):focus-visible { outline: 2px solid var(--cta, var(--greent));
  outline-offset: 2px; border-color: var(--cta, var(--greent)); }
form :is(input, textarea, select).bad { border-color: #FF8A8A; }
form textarea { resize: vertical; }
form .check { display: flex; gap: 11px; align-items: flex-start; font-weight: 400;
              font-size: 13.5px; color: var(--muted); margin: 22px 0; }
form .check input { margin-top: 3px; flex-shrink: 0; }
form button[type=submit] { font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
  padding: 14px 30px; border-radius: 999px; border: 1px solid var(--cta, var(--green));
  background: var(--cta, var(--green)); color: var(--cta-ink, var(--green-ink)); }
form button[type=submit]:hover { filter: brightness(1.08); }
form button[disabled] { opacity: .55; cursor: not-allowed; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.formnote { margin: 14px 0 0; font-size: 14px; min-height: 1.2em; }
.formnote.ok { color: var(--greent); }
.formnote.err { color: #FF8A8A; }

/* ---- footer ---------------------------------------------------------------------------- */

footer { position: relative; z-index: 4; margin-top: 40px;
         padding: clamp(40px, 5vw, 68px) 0 34px; }
footer::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; opacity: .55;
  background: linear-gradient(90deg,#C80018,#FF8C00,#FFA500,#00A86B,#0066B2,#00A3E0); }
footer .cols { display: grid; gap: 30px;
               grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
               padding-top: 32px; border-top: 1px solid var(--line2); }
footer h2 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
            margin: 0 0 14px; font-family: 'Inter', sans-serif; font-weight: 700; }
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { margin-bottom: 10px; }
footer a { color: var(--muted); text-decoration: none; font-size: 14.5px; }
footer a:hover { color: var(--text); }
.foot-note { color: var(--faint); font-size: 12.5px; margin-top: 16px; }
footer .fine { display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between;
               margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line2);
               color: var(--faint); font-size: 12.5px; }
.carbon { display: inline-flex; align-items: center; gap: 8px; }
.carbon i { width: 7px; height: 7px; border-radius: 50%; background: var(--greent); flex-shrink: 0; }

.foot-call { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 24px 34px; padding: 44px 28px; margin-bottom: 36px; border-radius: 28px;
  border: 1px solid var(--line2); background: var(--bg2); }
.foot-call > div { flex: 1 1 420px; }
.foot-call strong { display: block; font-family: 'Outfit', sans-serif; font-weight: 800;
  font-size: clamp(26px, 3.6vw, 38px); line-height: 1.12; letter-spacing: -0.03em; margin: 10px 0 12px; }
.foot-call p { color: var(--muted); font-size: 15px; margin: 0; max-width: 52ch; }

/* ---- reveal -------------------------------------------------------------------------------- */

/* Copied from BrandOS, including the three things mine had wrong.

   It starts at 0.15 rather than 0, so a section is always faintly there and
   never reads as a blank page. It finishes at entry 30% rather than cover
   22%, so it has resolved by the time the section is worth reading rather
   than most of the way up the screen. And it sits inside an @supports guard,
   so a browser without scroll-driven animations gets no animation at all
   instead of one that runs on the document timeline. */

@keyframes tlrise { from { opacity: .15; transform: translateY(26px); } to { opacity: 1; transform: none; } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .band, .head, .hero {
      animation: tlrise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 30%;
    }
    /* The first screen is already in view on load, so it must not sit at
       0.15 waiting for a scroll that may never come. */
    .hero { animation-range: cover 0% cover 1%; }
  }
}

/* ---- icons -------------------------------------------------------------
   A drawn mark on a plate tinted with its own colour. Minimal on purpose:
   the tint is 14%, the border 28%, so a grid of four reads as one family
   rather than four competing swatches. */

.ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px;
       flex-shrink: 0; color: var(--ic, var(--greent));
       background: color-mix(in srgb, var(--ic, var(--greent)) 14%, transparent);
       border: 1px solid color-mix(in srgb, var(--ic, var(--greent)) 28%, transparent);
       transition: background .3s ease, border-color .3s ease; }
.ico svg { width: 21px; height: 21px; display: block; }
@supports not (color: color-mix(in srgb, red, blue)) {
  .ico { background: rgba(var(--ink),.05); border-color: var(--line); }
}
@media (hover: hover) {
  .svc:hover .ico, .process li:hover .ico {
    background: color-mix(in srgb, var(--ic, var(--greent)) 22%, transparent);
    border-color: color-mix(in srgb, var(--ic, var(--greent)) 46%, transparent);
  }
}
@media (max-width: 640px) { .ico { width: 40px; height: 40px; border-radius: 12px; }
                            .ico svg { width: 19px; height: 19px; } }

/* A deliberate line break in a heading is for the wide view. Below that the
   heading wraps on its own and the break only makes a short orphan line. */
@media (max-width: 560px) { h1 br, h2 br { display: none; } }