/* ==========================================================================
   Skanli / site.css
   The shared design system for every page. Owner: foundation builder.
   Page builders: never edit this file. Put page-only styles in your own file
   (for example assets/css/work.css) and note any shared need in SYSTEM.md.

    1  Tokens                      9  Cards: project, product, client,
    2  Base and reset                 service, step
    3  Layout: container, grid    10  Figure plate, caption, stage rail,
    4  Type                           media placeholder
    5  Header and phone menu      11  Forms
    6  Footer                     12  Call-to-action band
    7  Buttons and links          13  Utilities
    8  Chips, badges, tags,       14  Motion: smooth scroll, scroll
       section head, page head        lock, reveals, logo draw,
                                      reduced motion
   ========================================================================== */

/* 1 ─ Tokens ───────────────────────────────────────────────────────────── */
/* Fonts: self-hosted in assets/fonts (SIL Open Font License 1.1, see its
   README). Latin and Latin Extended only; each file loads only when a page
   uses its characters. */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:300 400;font-display:swap;src:url("../fonts/newsreader-300-400-latin.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:"Newsreader";font-style:normal;font-weight:300 400;font-display:swap;src:url("../fonts/newsreader-300-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/newsreader-italic-400-latin.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:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/newsreader-italic-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400 600;font-display:swap;src:url("../fonts/inter-tight-var-latin.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:"Inter Tight";font-style:normal;font-weight:400 600;font-display:swap;src:url("../fonts/inter-tight-var-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-400-latin.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:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-500-latin.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:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}

:root{
  /* Surfaces */
  --bone:#F4F1EA;        /* page base */
  --paper:#FFFFFF;       /* cards, fields, tags */
  --canvas:#EAE6DC;      /* figure plates, the build canvas */
  --canvas-2:#E3DED2;    /* qualifier chips */
  /* Ink (a neutral near-black green) */
  --ink:#111814;         /* text, primary fill, focus ring. 15.99:1 on Bone, 18.03:1 on Paper */
  --ink-2:#3B4842;       /* Graphite: secondary text, icons. 8.49:1 on Bone */
  --ink-3:#5E6862;       /* Stone: captions, meta. 5.13:1 on Bone, 4.64:1 on Canvas */
  /* Lines */
  --rule:#D6D1C5;        /* hairlines (decorative) */
  --rule-2:#C9C3B5;      /* chip outlines (decorative) */
  --field:#7D837C;       /* field and checkbox borders. 3.88:1 on Paper, 3.44:1 on Bone */
  --mark:#A69F90;        /* crop marks (decorative) */
  /* The one highlight: a fill only. Never text, never a thin line on a light surface. */
  --lime:#C6F432;
  /* Dark surfaces */
  --moss:#1C2621;        /* raised surface on Ink */
  --on-dark:#F4F1EA;     /* text on Ink. 15.99:1 */
  --on-dark-2:#A3B0A8;   /* secondary text on Ink. 8.01:1 */
  --rule-dark:#2C3832;   /* hairlines on Ink (decorative) */
  --mint:#9EDBB8;        /* code strings on Ink */
  --brick:#B3261E;       /* errors only. 6.54:1 on Paper, 5.79:1 on Bone */

  /* Roles: components use these, and .on-dark re-points them */
  --text:var(--ink);
  --text-2:var(--ink-2);
  --text-3:var(--ink-3);
  --line:var(--rule);
  --line-strong:var(--ink);
  --surface:var(--bone);
  --focus:var(--ink);

  /* Type families. Newsreader is for display sizes only (24 px and up). */
  --font-serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --font-sans:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  /* Type scale */
  --fs-h1:clamp(2.75rem,1.6rem + 4.2vw,5.5rem);         /* 44 to 88, serif 400 */
  --fs-h2:clamp(2rem,1.45rem + 2.1vw,3.5rem);           /* 32 to 56, serif 400 */
  --fs-h3:clamp(1.5rem,1.3rem + .75vw,2rem);            /* 24 to 32, serif 400 */
  --fs-h4:1.25rem;                                      /* 20, sans 600 */
  --fs-lede:clamp(1.0625rem,.96rem + .42vw,1.3125rem);  /* 17 to 21, sans 400 */
  --fs-body:1.0625rem;                                  /* 17 (16 on phone) */
  --fs-small:.875rem;                                   /* 14 */
  --fs-label:.75rem;                                    /* 12 mono caps (11 on phone) */
  --fs-micro:.6875rem;                                  /* 11 mono */
  --lh-tight:1.04;
  --lh-heading:1.1;
  --lh-snug:1.35;
  --lh-body:1.6;

  /* Space (4 and 8 based) */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;  --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;  --space-10:128px;
  --section-pad:112px;

  /* Grid */
  --maxw:1440px;
  --margin:48px;
  --gutter:24px;
  --header-h:72px;

  /* Shape: controls are square; radii are for device drawings and media only */
  --radius-0:0;
  --radius-1:2px;
  --radius-2:6px;
  --radius-3:12px;
  --radius-pill:999px;

  /* Shadows: plain box-shadow on static layers only. No filter, no backdrop-filter. */
  --shadow-1:0 1px 2px rgb(17 24 20 / .06),0 8px 16px -10px rgb(17 24 20 / .18);
  --shadow-2:0 2px 4px rgb(17 24 20 / .05),0 18px 32px -16px rgb(17 24 20 / .24);
  --shadow-3:0 2px 4px rgb(17 24 20 / .08),0 24px 40px -18px rgb(17 24 20 / .34);

  /* Motion: things are built, never floated in */
  --ease-arrive:cubic-bezier(.16,1,.3,1);
  --ease-snap:cubic-bezier(.7,0,.2,1);
  --dur-1:160ms;
  --dur-2:240ms;
  --dur-3:480ms;

  /* Layers */
  --z-raised:2;
  --z-header:40;
  --z-menu:45;
  --z-skip:100;
}
@media (max-width:1099px){ :root{ --margin:32px; --section-pad:96px; } }
@media (max-width:899px){ :root{ --gutter:20px; --section-pad:88px; } }
@media (max-width:699px){
  :root{ --margin:20px; --gutter:16px; --header-h:64px; --section-pad:64px; --fs-body:1rem; --fs-label:.6875rem; }
}

/* Dark context: set on a section (or use .section--ink). Components follow the roles. */
.on-dark{
  --text:var(--on-dark);
  --text-2:var(--on-dark-2);
  --text-3:var(--on-dark-2);
  --line:var(--rule-dark);
  --line-strong:var(--on-dark);
  --surface:var(--ink);
  --focus:var(--lime);
  background:var(--ink);
  color:var(--on-dark);
}

/* 2 ─ Base and reset ───────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
/* The header is sticky (section 5): anchor jumps, focus scrolling and Lenis all stop below it */
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 1px);scrollbar-gutter:stable;
}
:is(h1,h2,h3,h4)[id]{scroll-margin-top:24px}
body{
  margin:0;min-height:100vh;background:var(--bone);color:var(--text);
  font:400 var(--fs-body)/var(--lh-body) var(--font-sans);letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,fieldset,legend{margin:0}
h1{font:400 var(--fs-h1)/1 var(--font-serif);letter-spacing:-.03em}
h2{font:400 var(--fs-h2)/1.06 var(--font-serif);letter-spacing:-.022em}
h3{font:400 var(--fs-h3)/1.15 var(--font-serif);letter-spacing:-.015em}
h4{font:600 var(--fs-h4)/1.3 var(--font-sans);letter-spacing:-.01em}
h5,h6{font:600 1rem/1.4 var(--font-sans)}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
em{font-style:italic}
strong,b{font-weight:600}
a{color:inherit;text-decoration:none}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
:where(ul[class],ol[class]){list-style:none;margin:0;padding:0}
fieldset{padding:0;border:0;min-width:0}
legend{padding:0}
table{border-collapse:collapse}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
:focus:not(:focus-visible){outline:none}
::selection{background:var(--lime);color:var(--ink)}
[hidden]{display:none !important}
main:focus{outline:none}

.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{
  position:absolute;left:var(--margin);top:12px;z-index:var(--z-skip);
  display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  background:var(--ink);color:var(--bone);font:500 15px/1.2 var(--font-sans);
  transform:translateY(-160%);transition:transform var(--dur-2) var(--ease-arrive);
}
.skip-link:focus{transform:none;outline:2px solid var(--lime);outline-offset:2px}

/* 3 ─ Layout ───────────────────────────────────────────────────────────── */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--margin)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
@media (max-width:699px){ .grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
/* Span and start helpers. Combine them: class="start-5 span-8". On phone they all go full width. */
.span-2{grid-column-end:span 2}  .span-3{grid-column-end:span 3}  .span-4{grid-column-end:span 4}
.span-5{grid-column-end:span 5}  .span-6{grid-column-end:span 6}  .span-7{grid-column-end:span 7}
.span-8{grid-column-end:span 8}  .span-9{grid-column-end:span 9}  .span-10{grid-column-end:span 10}
.span-12,.span-full{grid-column:1 / -1}
.start-1{grid-column-start:1} .start-2{grid-column-start:2} .start-3{grid-column-start:3} .start-4{grid-column-start:4}
.start-5{grid-column-start:5} .start-6{grid-column-start:6} .start-7{grid-column-start:7} .start-8{grid-column-start:8}
.start-9{grid-column-start:9}
@media (max-width:699px){ .grid > [class*="span-"],.grid > [class*="start-"]{grid-column:1 / -1} }

.section{padding-block:var(--section-pad)}
.section--paper{--surface:var(--paper);--surface-hover:var(--bone);background:var(--paper)}
.section--canvas{background:var(--canvas)}
.section--ink{
  --text:var(--on-dark);--text-2:var(--on-dark-2);--text-3:var(--on-dark-2);
  --line:var(--rule-dark);--line-strong:var(--on-dark);--surface:var(--ink);--focus:var(--lime);
  background:var(--ink);color:var(--on-dark);
}
.section--flush-top{padding-top:0}
.section--tight{padding-block:calc(var(--section-pad) * .6)}
/* Vertical rhythm for a stack of blocks: set --flow to change the gap */
.flow > * + *{margin-top:var(--flow,1em)}

/* 4 ─ Type ─────────────────────────────────────────────────────────────── */
.h1{font:400 var(--fs-h1)/1 var(--font-serif);letter-spacing:-.03em}
.h2{font:400 var(--fs-h2)/1.06 var(--font-serif);letter-spacing:-.022em}
.h3{font:400 var(--fs-h3)/1.15 var(--font-serif);letter-spacing:-.015em}
.h4{font:600 var(--fs-h4)/1.3 var(--font-sans);letter-spacing:-.01em}
.lede{font-size:var(--fs-lede);line-height:1.5;letter-spacing:-.01em;color:var(--text-2)}
.body-text{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-2)}
.small{font-size:var(--fs-small);line-height:1.45}
.label{font:500 var(--fs-label)/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.label--ink{color:var(--text)}
.mono{font-family:var(--font-mono)}
.num{font-family:var(--font-mono);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.eyebrow{
  display:flex;align-items:center;gap:14px;
  font:500 var(--fs-label)/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);
}
.eyebrow::before{content:"";flex:none;width:32px;height:1px;background:var(--line-strong)}
/* The block cursor at the end of a display heading. Blinks three times, then holds. */
.caret{
  display:inline-block;width:.34em;height:.68em;margin-left:.07em;vertical-align:-.01em;
  background:var(--lime);animation:caret-blink 1.06s steps(1,end) .6s 3;
}
@keyframes caret-blink{50%{opacity:0}}
/* Long-form copy (case studies, legal pages) */
.prose{max-width:66ch;color:var(--text-2)}
.prose > * + *{margin-top:1em}
.prose h2,.prose h3{color:var(--text);margin-top:1.6em}
.prose h2{font-size:var(--fs-h3);line-height:1.15}
.prose h3{font:600 var(--fs-h4)/1.3 var(--font-sans);letter-spacing:-.01em}
.prose ul{padding-left:1.1em;list-style:square}
.prose li + li{margin-top:.4em}
.prose li::marker{color:var(--text-3)}
.prose a,.text-link{
  color:var(--text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;
  transition:background-color var(--dur-1) linear,color var(--dur-1) linear;
}
.prose a:hover,.text-link:hover{background:var(--lime);color:var(--ink);text-decoration-color:transparent}

/* 5 ─ Header and phone menu ────────────────────────────────────────────── */
/* Sticky on every page, light and quiet. Once the page has scrolled (site.js adds .is-scrolled) a
   soft shadow lifts it off the content. Same height and border either way, so nothing shifts. */
.site-header{
  position:sticky;top:0;z-index:var(--z-header);background:var(--bone);border-bottom:1px solid var(--rule);
  transition:box-shadow var(--dur-3) var(--ease-arrive);
}
.site-header.is-scrolled{box-shadow:0 16px 28px -26px rgb(17 24 20 / .5)}
/* Focus inside the header never scrolls the page. The header is always on screen, but it sits in
   the html scroll-padding band, so Chrome and Safari would scroll up to "reveal" a focused link
   (Chrome by about half a screen). Shifting the target box below the band keeps the page still. */
.site-header *{scroll-margin:-80px 0 80px}
.site-header__bar{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);
  align-items:center;height:var(--header-h);
}
.brand{grid-column:1 / span 3;justify-self:start;display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}
.logo{display:block;width:auto;height:26px;fill:currentColor}
.logo__cursor{fill:var(--logo-cursor,currentColor)}
.site-nav{grid-column:5 / span 5}
.site-nav__list{display:flex;align-items:center;gap:36px}
.site-nav__link{
  position:relative;display:inline-flex;align-items:center;min-height:44px;
  font:500 15px/20px var(--font-sans);letter-spacing:-.005em;color:var(--ink);
}
.site-nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur-3) var(--ease-arrive);
}
.site-nav__link:hover::after,.site-nav__link[aria-current]::after{transform:scaleX(1)}
.site-nav__num{display:none}
.site-header__actions{grid-column:10 / span 3;justify-self:end;display:flex;align-items:center;gap:8px}
.menu-toggle{
  display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
  background:transparent;border:1px solid var(--ink);border-radius:0;color:var(--ink);
}
.menu-toggle svg{width:22px;height:22px;overflow:visible}
.menu-toggle path{fill:none;stroke:currentColor;stroke-width:1.6;transform-origin:12px 12px;transition:transform var(--dur-2) var(--ease-snap)}
.menu-toggle[aria-expanded="true"] .menu-toggle__top{transform:translateY(3px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-toggle__bottom{transform:translateY(-3px) rotate(-45deg)}
.menu-toggle:hover{background:var(--ink);color:var(--bone)}

@media (max-width:1099px){ .site-nav__list{gap:24px} }
@media (max-width:899px){
  .brand{grid-column:1 / span 6}
  .site-header__actions{grid-column:7 / span 6}
  .menu-toggle{display:inline-flex}
  .site-nav{
    position:absolute;top:100%;left:0;right:0;z-index:var(--z-menu);display:none;
    padding:4px var(--margin) 28px;background:var(--bone);border-top:1px solid var(--rule);border-bottom:1px solid var(--ink);
    box-shadow:0 28px 40px -28px rgb(17 24 20 / .28);
  }
  .site-header.is-open .site-nav{display:block}
  .site-nav__list{flex-direction:column;align-items:stretch;gap:0;max-width:var(--maxw);margin-inline:auto}
  .site-nav__list > li + li{border-top:1px solid var(--rule)}
  .site-nav__link{display:flex;align-items:baseline;gap:16px;min-height:60px;padding:16px 0;font-size:22px;line-height:28px;letter-spacing:-.015em}
  .site-nav__link::after{display:none}
  .site-nav__link[aria-current]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
  .site-nav__num{display:inline;font:500 var(--fs-micro)/28px var(--font-mono);letter-spacing:.08em;color:var(--ink-3)}
}
@media (max-width:699px){
  .site-header__bar{grid-template-columns:repeat(4,minmax(0,1fr))}
  .brand,.site-header__actions{grid-column:span 2}
  .logo{height:24px}
  .site-header__actions .btn--sm{padding:0 14px;font-size:14px}
}

/* 6 ─ Footer ───────────────────────────────────────────────────────────── */
.site-footer{
  --text:var(--on-dark);--text-2:var(--on-dark-2);--text-3:var(--on-dark-2);
  --line:var(--rule-dark);--line-strong:var(--on-dark);--focus:var(--lime);--logo-cursor:var(--lime);
  background:var(--ink);color:var(--on-dark);padding:80px 0 36px;
}
.site-footer__top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:48px}
.site-footer__brand{grid-column:1 / span 4}
.site-footer__brand .brand{color:var(--on-dark)}
.site-footer__brand .logo{height:34px}
.site-footer__tagline{margin-top:24px;max-width:34ch;font-size:15px;line-height:1.55;color:var(--on-dark-2)}
.site-footer__social{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:20px;
  font:500 15px/1.3 var(--font-sans);color:var(--on-dark);
}
.site-footer__social svg{width:20px;height:20px;flex:none}
.site-footer__social span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--rule-dark)}
.site-footer__social:hover span{text-decoration-color:var(--lime)}
.site-footer__nav{grid-column:6 / span 7;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gutter);row-gap:40px}
.site-footer__heading{
  margin-bottom:12px;font:500 var(--fs-micro)/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-2);
}
.site-footer__list a{
  display:inline-flex;align-items:center;min-height:32px;font-size:15px;line-height:1.35;color:var(--on-dark);
  background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 100% / 100% 0;
  transition:background-size var(--dur-2) var(--ease-arrive),color var(--dur-1) linear;
}
.site-footer__list a:hover{background-size:100% 100%;color:var(--ink)}
.site-footer__bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:72px;padding-top:20px;
  border-top:1px solid var(--rule-dark);font-size:var(--fs-small);line-height:20px;color:var(--on-dark-2);
}
@media (max-width:1099px){
  .site-footer__brand{grid-column:1 / -1}
  .site-footer__nav{grid-column:1 / -1}
}
@media (max-width:699px){
  .site-footer{padding:56px 0 28px}
  .site-footer__top{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:40px}
  .site-footer__nav{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
  .site-footer__list a{min-height:44px}
  .site-footer__bottom{flex-direction:column;margin-top:48px}
}

/* 7 ─ Buttons and links ────────────────────────────────────────────────── */
.btn{
  --btn-h:52px;--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:var(--btn-h);padding:0 24px;
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd);border-radius:0;
  font:500 16px/1.2 var(--font-sans);letter-spacing:-.005em;text-align:center;white-space:nowrap;cursor:pointer;
  transition:background-color var(--dur-2) var(--ease-arrive),color var(--dur-2) var(--ease-arrive),border-color var(--dur-2) var(--ease-arrive);
}
.btn__icon{width:16px;height:16px;flex:none;transition:transform 320ms var(--ease-arrive)}
.btn:hover .btn__icon{transform:translateX(3px)}
.btn--primary{--btn-bg:var(--ink);--btn-fg:var(--bone);--btn-bd:var(--ink)}
.btn--primary:hover{--btn-bg:var(--lime);--btn-fg:var(--ink);--btn-bd:var(--ink)}
.btn--secondary{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--ink)}
.btn--secondary:hover{--btn-bg:var(--ink);--btn-fg:var(--bone)}
/* On dark: primary turns Bone (Lime on hover), secondary is a Bone outline */
:is(.on-dark,.section--ink,.cta-band,.site-footer) .btn--primary{--btn-bg:var(--on-dark);--btn-fg:var(--ink);--btn-bd:var(--on-dark)}
:is(.on-dark,.section--ink,.cta-band,.site-footer) .btn--primary:hover{--btn-bg:var(--lime);--btn-fg:var(--ink);--btn-bd:var(--lime)}
:is(.on-dark,.section--ink,.cta-band,.site-footer) .btn--secondary{--btn-bg:transparent;--btn-fg:var(--on-dark);--btn-bd:var(--on-dark)}
:is(.on-dark,.section--ink,.cta-band,.site-footer) .btn--secondary:hover{--btn-bg:var(--on-dark);--btn-fg:var(--ink)}
.btn--sm{--btn-h:44px;padding:0 18px;font-size:15px}
.btn--block{display:flex;width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* Text link with an arrow: underlined, highlighted in Lime on hover */
.link-arrow{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font:500 16px/1.3 var(--font-sans);color:var(--text);cursor:pointer;
}
.link-arrow > span{
  padding:2px 2px 3px;margin:0 -2px;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;
  background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 100% / 100% 0;
  transition:background-size 280ms var(--ease-arrive),text-decoration-color var(--dur-1) linear,color var(--dur-1) linear;
}
.link-arrow svg{width:16px;height:16px;flex:none;transition:transform 320ms var(--ease-arrive)}
.link-arrow:hover > span{background-size:100% 100%;text-decoration-color:transparent;color:var(--ink)}
.link-arrow:hover svg{transform:translateX(3px)}
.link-arrow--ext:hover svg{transform:translate(2px,-2px)}

/* 8 ─ Chips, badges, tags ──────────────────────────────────────────────── */
/* Capability chips: informational labels, not controls */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips--grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.chip{
  display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px 0 11px;
  border:1px solid var(--rule-2);font:500 14px/1.2 var(--font-sans);letter-spacing:-.005em;color:var(--text);
}
.chip svg{width:16px;height:16px;flex:none;color:var(--text-2)}
.chips--grid .chip{padding:8px 10px;justify-content:flex-start}

/* Platform badges: Web, App Store, Google Play */
.badges{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.badge{
  display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 8px;
  background:var(--paper);border:1px solid var(--ink);color:var(--ink);
  font:500 13px/1 var(--font-sans);letter-spacing:-.005em;white-space:nowrap;
}
.badge svg{width:14px;height:14px;flex:none}
/* Qualifier chips: India only, UI/UX design, Designed & built for a client */
.qual{
  display:inline-flex;align-items:center;height:28px;padding:0 10px;
  background:var(--canvas-2);color:var(--ink-2);font:500 13px/1 var(--font-sans);letter-spacing:-.005em;white-space:nowrap;
}
/* A qualifier that applies to some badges only: wrap them in a group */
.badge-group{display:inline-flex;flex-wrap:nowrap;align-items:stretch}
.badge-group > .badge + .badge{margin-left:-1px}
.badge-group > .qual{height:28px;border:1px solid var(--ink);border-left:0;background:var(--canvas-2)}

/* Small mono tags (figure stage tags, status) */
.tag{
  display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 7px;
  background:var(--paper);border:1px solid var(--rule);color:var(--ink);
  font:500 10px/1 var(--font-mono);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;
}
.tag__num{color:var(--ink-3)}
.tag--live{background:var(--lime);border-color:var(--lime)}
.tag--live .tag__num{color:var(--ink)}

/* Section head: label, numeral and heading, on a strong rule */
.section-head{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:20px;
  padding-top:18px;margin-bottom:var(--space-8);border-top:1px solid var(--line-strong);
}
.section-head__meta{grid-column:1 / span 3;display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.section-head__label{font:500 var(--fs-label)/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.section-head__num{display:block;font:300 clamp(3.25rem,2.6rem + 2.2vw,4.75rem)/.78 var(--font-serif);letter-spacing:-.045em;color:var(--text);margin-left:-.04em}
.section-head__main{grid-column:4 / span 7;padding-top:2px}
.section-head__title{font:400 var(--fs-h2)/1.06 var(--font-serif);letter-spacing:-.022em}
.section-head__intro{margin-top:16px;max-width:52ch;font-size:var(--fs-lede);line-height:1.5;letter-spacing:-.01em;color:var(--text-2)}
.section-head__aside{grid-column:11 / span 2;justify-self:end;align-self:end}
@media (max-width:1099px){
  .section-head__main{grid-column:4 / -1}
  .section-head__aside{grid-column:4 / -1;justify-self:start}
}
@media (max-width:699px){
  .section-head{grid-template-columns:minmax(0,1fr);row-gap:16px;margin-bottom:40px}
  .section-head__meta,.section-head__main,.section-head__aside{grid-column:1 / -1}
  .section-head__meta{flex-direction:row;align-items:baseline;justify-content:space-between}
  .section-head__num{font-size:2.5rem}
}

/* Page head: the top of every inner page */
.page-head{padding:clamp(40px,6vw,88px) 0 clamp(40px,5vw,72px);border-bottom:1px solid var(--rule)}
.page-head__eyebrow{grid-column:1 / -1}
.page-head__title{grid-column:1 / span 10;margin-top:20px;font:400 var(--fs-h1)/1 var(--font-serif);letter-spacing:-.03em}
.page-head__intro{grid-column:1 / span 6;margin-top:24px;font-size:var(--fs-lede);line-height:1.5;letter-spacing:-.01em;color:var(--text-2)}
.page-head__aside{grid-column:8 / span 5;align-self:end;justify-self:end;margin-top:24px}
@media (max-width:1099px){ .page-head__intro{grid-column:1 / span 9} .page-head__aside{grid-column:1 / -1;justify-self:start} }
@media (max-width:699px){ .page-head__title,.page-head__intro{grid-column:1 / -1} }

/* Breadcrumb for case studies */
.crumbs ol{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font:500 var(--fs-label)/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.crumbs li{display:inline-flex;align-items:center;gap:10px}
.crumbs li + li::before{content:"/";color:var(--rule-2)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.crumbs a:hover{background:var(--lime);color:var(--ink);text-decoration-color:transparent}

/* 9 ─ Cards ────────────────────────────────────────────────────────────── */
/* Project card. The title link stretches over the whole card. */
.project-card{position:relative;display:flex;flex-direction:column;min-width:0}
.project-card__media{position:relative;aspect-ratio:4 / 3;overflow:hidden;background:var(--canvas)}
.project-card__media > img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease-arrive)}
.project-card:hover .project-card__media > img{transform:scale(1.02)}
.project-card__body{display:flex;flex-direction:column;gap:10px;padding-top:20px}
.project-card__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;font:500 var(--fs-label)/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.project-card__num{color:var(--text)}
.project-card__title{display:flex;align-items:baseline;gap:12px;font:400 var(--fs-h3)/1.1 var(--font-serif);letter-spacing:-.018em}
.project-card__title a::after{content:"";position:absolute;inset:0;z-index:var(--z-raised)}
.project-card__title a:focus-visible{outline:none}
.project-card__title a:focus-visible::after{outline:2px solid var(--focus);outline-offset:6px}
.project-card__arrow{width:18px;height:18px;flex:none;align-self:center;opacity:0;transform:translateX(-6px);transition:opacity var(--dur-2) linear,transform 320ms var(--ease-arrive)}
.project-card:hover .project-card__arrow{opacity:1;transform:none}
.project-card:hover .project-card__title a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
.project-card__line{max-width:46ch;font-size:16px;line-height:1.5;color:var(--text-2)}
.project-card__foot{margin-top:6px}
.project-card--feature .project-card__title{font-size:clamp(2rem,1.5rem + 1.5vw,2.75rem)}
.project-card--feature .project-card__line{font-size:var(--fs-body)}

/* Product card: compact entries in a ruled grid */
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line-strong)}
.product-card{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:24px 24px 26px;background:var(--surface);transition:background-color var(--dur-2) linear}
.product-card:hover{background:var(--surface-hover,var(--paper))}
.product-card__top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px}
.product-card__icon{display:grid;place-items:center;width:56px;height:56px;background:var(--paper);border:1px solid var(--rule);color:var(--ink);transition:background-color var(--dur-2) linear,border-color var(--dur-2) linear}
.product-card__icon svg{width:32px;height:32px}
.product-card:hover .product-card__icon{background:var(--lime);border-color:var(--lime)}
.product-card__num{font:500 var(--fs-label)/16px var(--font-mono);letter-spacing:.08em;color:var(--text-3)}
.product-card__title{font:600 1.1875rem/1.3 var(--font-sans);letter-spacing:-.012em;color:var(--text)}
.product-card__title a::after{content:"";position:absolute;inset:0;z-index:var(--z-raised)}
.product-card__title a:focus-visible{outline:none}
.product-card__title a:focus-visible::after{outline:2px solid var(--focus);outline-offset:-4px}
.product-card__text{font-size:15px;line-height:1.5;color:var(--text-2)}
.product-card__url{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:10px;font:500 var(--fs-label)/16px var(--font-mono);letter-spacing:.04em;color:var(--text-3)}
.product-card__url svg{width:12px;height:12px;flex:none}
.product-grid__more{display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:24px;background:var(--surface)}
@media (max-width:1099px){ .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:699px){ .product-grid{grid-template-columns:minmax(0,1fr)} .product-card{padding:20px 0 22px} .product-grid__more{padding:20px 0} }

/* Client entry: names in type, never logos or quotes */
.client-list{border-top:1px solid var(--line-strong)}
.client{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:10px;padding:28px 0 30px;border-bottom:1px solid var(--line)}
.client__name{font:400 clamp(1.75rem,1.4rem + 1.2vw,2.5rem)/1.08 var(--font-serif);letter-spacing:-.02em;color:var(--text)}
.client__sector{font-size:15px;line-height:1.45;color:var(--text)}
.client__region{font:500 var(--fs-label)/18px var(--font-mono);letter-spacing:.04em;color:var(--text-3)}
.client__about{max-width:60ch;font-size:15px;line-height:1.55;color:var(--text-2)}
/* Placement only for direct children, so the classes can be reused inside other layouts */
.client > .client__name{grid-column:1 / span 6}
.client > .client__sector{grid-column:7 / span 3;align-self:end}
.client > .client__region{grid-column:10 / span 3;align-self:end}
.client > .client__about{grid-column:7 / span 6}
@media (max-width:1099px){ .client > .client__name{grid-column:1 / -1} .client > .client__sector{grid-column:1 / span 6} .client > .client__region{grid-column:7 / span 6} .client > .client__about{grid-column:1 / span 9} }
@media (max-width:699px){ .client{grid-template-columns:minmax(0,1fr);padding:22px 0 24px} .client > .client__name,.client > .client__sector,.client > .client__region,.client > .client__about{grid-column:1 / -1} }

/* Service row: an editorial index of what we do */
.service-list{border-top:1px solid var(--line-strong)}
.service{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:16px;padding:32px 0 36px;border-bottom:1px solid var(--line)}
.service__num{grid-column:1 / span 1;padding-top:8px;font:500 var(--fs-label)/16px var(--font-mono);letter-spacing:.08em;color:var(--text)}
.service__head{grid-column:2 / span 4;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.service__icon{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--rule);background:var(--paper);color:var(--ink)}
.service__icon svg{width:24px;height:24px}
.service__title{font:400 var(--fs-h3)/1.1 var(--font-serif);letter-spacing:-.018em}
.service__text{grid-column:6 / span 4;padding-top:6px;color:var(--text-2)}
.service__includes{grid-column:10 / span 3;padding-top:8px}
.service__includes h4,.service__includes .label{margin-bottom:10px}
.service__includes ul{list-style:none;margin:0;padding:0}
.service__includes ul li{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.4;color:var(--text)}
.service__includes ul li::before{content:"";flex:none;width:6px;height:6px;background:var(--ink);transform:translateY(-2px)}
@media (max-width:1099px){
  .service__head{grid-column:2 / span 5}
  .service__text{grid-column:7 / span 6}
  .service__includes{grid-column:7 / span 6}
}
@media (max-width:699px){
  .service{grid-template-columns:minmax(0,1fr);padding:24px 0 28px}
  .service__num,.service__head,.service__text,.service__includes{grid-column:1 / -1}
  .service__num{padding-top:0}
}

/* Numbered steps (Process, "What happens next") */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px var(--gutter)}
.step{position:relative;padding-top:22px;border-top:1px solid var(--line-strong)}
.step::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;background:var(--text)}
.step__num{display:block;font:300 clamp(3rem,2.4rem + 2vw,4.25rem)/.8 var(--font-serif);letter-spacing:-.045em;color:var(--text);margin-left:-.04em}
.step__title{margin-top:28px;font:600 var(--fs-h4)/1.3 var(--font-sans);letter-spacing:-.01em;color:var(--text)}
.step__text{margin-top:10px;max-width:34ch;font-size:16px;line-height:1.55;color:var(--text-2)}
@media (max-width:699px){
  .step{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:16px;padding-top:18px}
  .step__num{grid-row:1 / span 2;font-size:2.75rem}
  .step__title{margin-top:0}
  .step__text{margin-top:6px}
}
.steps--compact .step__num{font:500 var(--fs-label)/16px var(--font-mono);letter-spacing:.08em;margin:0}
.steps--compact .step__title{margin-top:12px}

/* 10 ─ Figure plate, caption, stage rail, placeholder ───────────────────── */
.figure{margin:0;min-width:0}
.plate{position:relative;background:var(--canvas)}
.plate > img{width:100%;height:auto}
.plate--paper{background:var(--paper);outline:1px solid var(--rule);outline-offset:-1px}
.plate--ink{background:var(--ink)}
.plate--pad{padding:clamp(16px,5%,56px)}
/* Crop marks just outside the four corners (keep 20 px of space around the plate) */
.plate--marks::before{
  content:"";position:absolute;inset:-20px;pointer-events:none;
  background:
    linear-gradient(var(--mark),var(--mark)) left 0 top 19px / 12px 1px no-repeat,
    linear-gradient(var(--mark),var(--mark)) left 19px top 0 / 1px 12px no-repeat,
    linear-gradient(var(--mark),var(--mark)) right 0 top 19px / 12px 1px no-repeat,
    linear-gradient(var(--mark),var(--mark)) right 19px top 0 / 1px 12px no-repeat,
    linear-gradient(var(--mark),var(--mark)) left 0 bottom 19px / 12px 1px no-repeat,
    linear-gradient(var(--mark),var(--mark)) left 19px bottom 0 / 1px 12px no-repeat,
    linear-gradient(var(--mark),var(--mark)) right 0 bottom 19px / 12px 1px no-repeat,
    linear-gradient(var(--mark),var(--mark)) right 19px bottom 0 / 1px 12px no-repeat;
}
@media (max-width:699px){ .plate--marks::before{display:none} }
.plate--marks + .fig-cap{margin-top:28px}
@media (max-width:699px){ .plate--marks + .fig-cap{margin-top:12px} }
/* Figure caption. Write it as: Fig. NN — Caption text. */
.fig-cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin-top:12px;font-size:var(--fs-small);line-height:20px;color:var(--text-2)}
.fig-cap__no{font:500 var(--fs-micro)/20px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
/* Device frames for screenshots: Paper with an Ink hairline, static shadow */
.device{position:relative;background:var(--paper);border:1px solid var(--ink);box-shadow:var(--shadow-2)}
.device > img{width:100%;height:auto}
/* The phone bezel is the screen's margin: a child's % margin resolves against the phone itself,
   so the bezel stays 2.6% of the phone in any parent (% padding would follow the parent's width) */
.device--phone{padding:0;border-radius:clamp(18px,13%,40px)}
.device--phone > img{width:94.8%;margin:2.6%;border-radius:clamp(12px,10%,32px)}
.device--browser{padding-top:28px;border-radius:8px}
.device--browser::before{
  content:"";position:absolute;left:12px;top:10px;width:40px;height:8px;
  background:radial-gradient(circle at 4px 4px,var(--rule-2) 3px,transparent 3.5px) 0 0 / 14px 8px repeat-x;
}
.device--browser > img{border-radius:0 0 7px 7px}

/* Stage rail: the readable list of build stages under the hero figure */
.stage-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:12px}
.stage-rail__item{display:flex;align-items:baseline;gap:8px;min-width:0;padding-top:8px;border-top:1px solid var(--line-strong);font:500 var(--fs-small)/20px var(--font-sans);color:var(--text);white-space:nowrap}
.stage-rail__num{font:500 var(--fs-micro)/20px var(--font-mono);letter-spacing:.08em;color:var(--text-3)}
.stage-rail__item[aria-current="step"]{padding-top:6px;border-top-width:3px}
.stage-rail__item[aria-current="step"] .stage-rail__label{margin:0 -4px;padding:0 4px;background:var(--lime);color:var(--ink)}
@media (max-width:699px){
  .stage-rail{column-gap:10px}
  .stage-rail__item{flex-direction:column;gap:0;align-items:flex-start}
  .stage-rail__item[aria-current="step"] .stage-rail__label{margin:0;padding:0 4px}
}

/* Designed placeholder for media that has not arrived yet (WorkDail) */
.media-ph{
  position:relative;display:grid;place-items:center;width:100%;height:100%;overflow:hidden;
  background:var(--canvas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M34 40h12M40 34v12' stroke='%23D5CFC1' stroke-width='1.5'/%3E%3C/svg%3E") 0 0 / 5% auto repeat;
}
.media-ph > svg{width:auto;height:86%;max-width:92%}

/* 11 ─ Forms ──────────────────────────────────────────────────────────── */
.form{display:grid;gap:28px}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px var(--gutter)}
@media (max-width:699px){ .form-row{grid-template-columns:minmax(0,1fr)} }
.field{display:grid;gap:8px;min-width:0}
.field__label,.fieldset > legend{font:500 15px/1.35 var(--font-sans);color:var(--text)}
.fieldset > legend{margin-bottom:10px}
.field__opt{font-weight:400;color:var(--text-3)}
.field__req{font-weight:400;color:var(--text-3)}
.input,.select,.textarea{
  display:block;width:100%;min-height:52px;padding:0 16px;margin:0;
  background:var(--paper);color:var(--ink);border:1px solid var(--field);border-radius:0;
  font:400 16px/1.4 var(--font-sans);letter-spacing:-.005em;
  transition:border-color var(--dur-1) linear,box-shadow var(--dur-1) linear;
}
.input::placeholder,.textarea::placeholder{color:var(--ink-3);opacity:1}
.input:hover,.select:hover,.textarea:hover{border-color:var(--ink-2)}
.input:focus,.select:focus,.textarea:focus{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--ink)}
.textarea{min-height:168px;padding:14px 16px;line-height:1.55;resize:vertical}
.select{
  appearance:none;-webkit-appearance:none;padding-right:48px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%23111814' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:16px 16px;
}
.field__help{font-size:var(--fs-small);line-height:1.45;color:var(--text-3)}
.field__error{display:flex;align-items:flex-start;gap:8px;font:500 var(--fs-small)/1.45 var(--font-sans);color:var(--brick)}
.field__error svg{flex:none;width:16px;height:16px;margin-top:2px}
.field.is-invalid .input,.field.is-invalid .select,.field.is-invalid .textarea,
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"]{border:2px solid var(--brick);padding-inline:15px}
.field.is-invalid .select,.select[aria-invalid="true"]{padding-right:47px}

/* Chip checkboxes (multi-select): a real checkbox inside each label */
.check-chips{display:flex;flex-wrap:wrap;gap:8px}
.check-chip{position:relative;display:inline-flex}
.check-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.check-chip span{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;
  background:var(--paper);border:1px solid var(--field);color:var(--ink);font:500 15px/1.2 var(--font-sans);
  transition:background-color var(--dur-1) linear,color var(--dur-1) linear,border-color var(--dur-1) linear;
}
.check-chip span::before{content:"";flex:none;width:14px;height:14px;border:1px solid var(--field);background:var(--paper) no-repeat center / 10px 10px}
.check-chip:hover span{border-color:var(--ink)}
.check-chip input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.check-chip input:checked + span::before{
  background-color:var(--lime);border-color:var(--lime);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2 4 7.6 8.6 2.6' fill='none' stroke='%23111814' stroke-width='1.6'/%3E%3C/svg%3E");
}
.check-chip input:focus-visible + span{outline:2px solid var(--focus);outline-offset:2px}
.fieldset.is-invalid .check-chip span{border-color:var(--brick)}

/* Preview note above the submit button */
.form-note{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;background:var(--canvas);font-size:var(--fs-small);line-height:1.45;color:var(--ink-2)}
.form-note svg{flex:none;width:16px;height:16px;margin-top:2px;color:var(--ink)}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
/* Success state (role="status") */
.form-success{position:relative;display:flex;gap:16px;padding:22px 24px 24px 28px;background:var(--paper);border:1px solid var(--ink)}
.form-success::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:6px;background:var(--lime)}
.form-success__icon{display:grid;place-items:center;flex:none;width:32px;height:32px;background:var(--lime);color:var(--ink)}
.form-success__icon svg{width:18px;height:18px}
.form-success__title{font:600 var(--fs-h4)/1.3 var(--font-sans);letter-spacing:-.01em;color:var(--ink)}
.form-success__text{margin-top:4px;font-size:16px;line-height:1.5;color:var(--ink-2)}
/* Error summary at the top of a form. No role="alert": forms.js rebuilds it as fields are fixed
   and moves focus to the first field that needs a fix (SYSTEM.md 5.12) */
.form-alert{padding:18px 20px;background:var(--paper);border:2px solid var(--brick);color:var(--ink)}
.form-alert__title{display:flex;align-items:center;gap:8px;font:600 16px/1.4 var(--font-sans);color:var(--brick)}
.form-alert__title svg{width:16px;height:16px;flex:none}
.form-alert ul{margin:4px 0 0;padding-left:24px;list-style:none}
.form-alert a{display:block;width:fit-content;padding:4px 0;font-size:15px;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
@media (max-width:699px){ .form-alert a{padding:10px 0} }

/* 12 ─ Call-to-action band ──────────────────────────────────────────── */
.cta-band{
  --text:var(--on-dark);--text-2:var(--on-dark-2);--text-3:var(--on-dark-2);
  --line:var(--rule-dark);--line-strong:var(--on-dark);--focus:var(--lime);
  background:var(--ink);color:var(--on-dark);padding:clamp(72px,9vw,128px) 0 clamp(56px,6vw,88px);
}
.cta-band__title{grid-column:1 / span 10;font:400 clamp(3rem,1.6rem + 5.4vw,6.5rem)/.96 var(--font-serif);letter-spacing:-.035em;color:var(--on-dark)}
.cta-band__foot{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;row-gap:28px;margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid var(--rule-dark)}
.cta-band__text{grid-column:1 / span 5;font-size:var(--fs-lede);line-height:1.5;letter-spacing:-.01em;color:var(--on-dark-2)}
.cta-band__actions{grid-column:7 / -1;justify-self:end;align-self:start}
@media (max-width:1099px){ .cta-band__title{grid-column:1 / -1} .cta-band__text{grid-column:1 / span 7} .cta-band__actions{grid-column:1 / -1;justify-self:start} }
@media (max-width:699px){ .cta-band__text{grid-column:1 / -1} .cta-band__actions{width:100%} .cta-band__actions .btn{flex:1 1 auto} }

/* 13 ─ Utilities ──────────────────────────────────────────────────────── */
.nowrap{white-space:nowrap}
.text-2{color:var(--text-2)}
.text-3{color:var(--text-3)}
.mt-0{margin-top:0} .mt-2{margin-top:var(--space-2)} .mt-4{margin-top:var(--space-4)} .mt-5{margin-top:var(--space-5)}
.mt-6{margin-top:var(--space-6)} .mt-7{margin-top:var(--space-7)} .mt-8{margin-top:var(--space-8)}
.rule-top{border-top:1px solid var(--line-strong)}
.hairline-top{border-top:1px solid var(--line)}

/* Forced states, for the style board only (design/style.html). Pages never use them. */
.btn--primary.is-hover{--btn-bg:var(--lime);--btn-fg:var(--ink);--btn-bd:var(--ink)}
.btn--secondary.is-hover{--btn-bg:var(--ink);--btn-fg:var(--bone)}
:is(.on-dark,.section--ink,.cta-band,.site-footer) .btn--primary.is-hover{--btn-bg:var(--lime);--btn-fg:var(--ink);--btn-bd:var(--lime)}
:is(.on-dark,.section--ink,.cta-band,.site-footer) .btn--secondary.is-hover{--btn-bg:var(--on-dark);--btn-fg:var(--ink)}
.btn.is-hover .btn__icon,.link-arrow.is-hover svg{transform:translateX(3px)}
.btn.is-focus,.link-arrow.is-focus,.menu-toggle.is-focus,.site-nav__link.is-focus{outline:2px solid var(--focus);outline-offset:3px}
.input.is-focus,.select.is-focus,.textarea.is-focus{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--ink)}
.link-arrow.is-hover > span{background-size:100% 100%;text-decoration-color:transparent;color:var(--ink)}
.site-nav__link.is-hover::after{transform:scaleX(1)}
.menu-toggle.is-hover{background:var(--ink);color:var(--bone)}
.product-card.is-hover{background:var(--surface-hover,var(--paper))}
.product-card.is-hover .product-card__icon{background:var(--lime);border-color:var(--lime)}
.project-card.is-hover .project-card__arrow{opacity:1;transform:none}
.project-card.is-hover .project-card__title a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
.project-card.is-focus .project-card__title a::after{outline:2px solid var(--focus);outline-offset:6px}
.check-chip.is-hover span{border-color:var(--ink)}
.check-chip.is-focus span{outline:2px solid var(--focus);outline-offset:2px}

/* 14 ─ Motion ─────────────────────────────────────────────────────────── */
/* Everything that moves is driven by site.js (every page) and motion.js (home hero), and stops
   under prefers-reduced-motion: no smooth scrolling, no reveals, no logo draw, no hero build. */

/* Smooth scrolling (site.js runs Lenis). The rules of lenis.css 1.3.27 (MIT), so no page needs
   an extra stylesheet; the file itself is kept in assets/vendor/. */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],.lenis [data-lenis-prevent-horizontal]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}
/* Lenis moves the page itself; the browser's own smooth scrolling would fight it */
html.lenis{scroll-behavior:auto}
/* Phone menu open: the page behind it stays put (site.js). Root only: overflow on body would
   unstick the header. */
html.is-scroll-locked{overflow:hidden}

/* Section reveals (site.js). [data-reveal] eases in as it enters the viewport; on
   [data-reveal="stagger"] each direct child does, one after another. site.js marks only blocks
   that start below the fold (.reveal-pending), and only when motion is allowed, so the first
   screen never waits and nothing stays hidden without JavaScript. */
@media (prefers-reduced-motion:no-preference){
  .reveal-pending{opacity:0}
  .reveal-in{animation:reveal-in 900ms var(--ease-arrive) var(--reveal-delay,0s) backwards}
}
@keyframes reveal-in{from{opacity:0;transform:translate3d(0,28px,0)}}
@media print{ .reveal-pending{opacity:1 !important} }

/* The wordmark types itself once on load (home page header: .logo--draw, one path per letter).
   The i-dot is a block cursor: it starts as a 1:2 typing caret (like the headline's) on the first
   letter, steps along as each letter appears, then lifts and settles as the dot of the i.
   0.8 s from the first paint; transforms and opacity only. */
@media (prefers-reduced-motion:no-preference){
  .logo--draw .logo__l{animation:logo-type 1ms linear backwards}
  .logo--draw .logo__l:nth-child(1){animation-delay:120ms}
  .logo--draw .logo__l:nth-child(2){animation-delay:190ms}
  .logo--draw .logo__l:nth-child(3){animation-delay:260ms}
  .logo--draw .logo__l:nth-child(4){animation-delay:330ms}
  .logo--draw .logo__l:nth-child(5){animation-delay:400ms}
  .logo--draw .logo__l:nth-child(6){animation-delay:440ms}
  .logo--draw .logo__cursor{transform-box:fill-box;transform-origin:0 0;animation:logo-caret 800ms linear backwards}
}
@keyframes logo-type{from{opacity:0}}
/* Caret: 30 x 60 (the x-height) on each letter's left edge; on the i it narrows to the stem's
   width, then pulls up out of the stem into the 14 x 19 dot at x 255, y 14 */
@keyframes logo-caret{
  0%{transform:translate(-255px,26px) scale(2.143,3.158);animation-timing-function:steps(1,end)}
  15%{transform:translate(-202px,26px) scale(2.143,3.158);animation-timing-function:steps(1,end)}
  23.75%{transform:translate(-156px,26px) scale(2.143,3.158);animation-timing-function:steps(1,end)}
  32.5%{transform:translate(-89px,26px) scale(2.143,3.158);animation-timing-function:steps(1,end)}
  41.25%{transform:translate(-24px,26px) scale(2.143,3.158);animation-timing-function:steps(1,end)}
  50%{transform:translate(0,26px) scale(1,3.158);animation-timing-function:steps(1,end)}
  55%{transform:translate(0,26px) scale(1,3.158);animation-timing-function:cubic-bezier(.16,1,.3,1)}
  100%{transform:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .caret{animation:none !important}
}