/* =====================================================================
   HigherHighLabs "workshop wall" design system
   Shared by every page. Guide: DESIGN-SYSTEM.md (redesign scratchpad).
   Sections:
    01 tokens            09 section heads, annotations, marks
    02 base + type       10 page hero, breadcrumb
    03 layout            11 materials in grids: works, notes, steps, stats, logos
    04 buttons + links   12 tabs, faq
    05 materials         13 packages, table, chips, stamp, score
    06 icons             14 forms
    07 header + nav      15 prose (typed sheet), doc layout
    08 footer            16 media: video frame, gallery, before/after, dialogs
                         17 cta box, utilities, motion, responsive
   ===================================================================== */

/* ---------- 01 tokens ---------- */
:root{
  --paper:#f4f7fa;          /* page ground */
  --grid:#e0e9f2;           /* 24px minor grid */
  --grid-major:#cbdbea;     /* 120px major grid, hairlines */
  --ink:#1c3db4;            /* blue ballpoint: annotations, links hover, focus */
  --ink-soft:#4b67c9;
  --ink-wash:#e8eefb;       /* pale ink fill (chips, selected rows) */
  --text:#0f1216;           /* black: headings, borders, solid buttons */
  --body:#2a303a;           /* typed body copy */
  --muted:#4a5462;          /* meta, captions */
  --red:#d42a20;            /* signal red: circles, pins, numbers. Never for body text */
  --marker:#ffe45c;         /* highlighter */
  --sticky:#fff3b0;         /* sticky note */
  --card:#fff;
  --rule:#cfdff0;           /* ruled lines on index cards */
  --tape:rgba(214,224,234,.8);
  --line:#e3e9f0;           /* separators on white */

  --sh-card:0 1px 1px rgba(20,40,80,.08),0 14px 30px -18px rgba(20,40,80,.35);
  --sh-print:0 1px 1px rgba(20,40,80,.1),0 22px 40px -22px rgba(20,40,80,.42);
  --sh-sheet:0 1px 1px rgba(20,40,80,.08),0 20px 40px -24px rgba(20,40,80,.4);

  --ease:cubic-bezier(.7,0,.2,1);
  --sans:'Geologica',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --hand:'Mynerve','Segoe Print','Bradley Hand',cursive;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --wrap:1240px;
  --gutter:28px;
  --sec:120px;              /* vertical gap between sections */
  --radius:4px;

  /* hand-drawn strokes as data URIs (reused by marks, tabs, lists) */
  --svg-ellipse:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath d='M170 4 C 80 0, 6 10, 4 30 C 2 52, 90 58, 170 56 C 250 54, 298 44, 296 28 C 294 10, 230 2, 150 6 C 130 7, 110 9, 96 13' fill='none' stroke='%23d42a20' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --svg-underline:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C 60 3, 130 4, 190 6 C 230 7, 265 5, 297 4' fill='none' stroke='%23d42a20' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --svg-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 13.2C6 14.6 8 16.8 9.6 19.6C12.6 12.6 16 7.6 21 3.6' fill='none' stroke='%231c3db4' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --svg-cross:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.6 5.4C10 9.8 14.1 14 18.6 18.7M18.3 5.3C14 9.9 10 14.1 5.5 18.6' fill='none' stroke='%23d42a20' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --svg-curl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 46'%3E%3Cpath d='M3 30 C 14 8, 30 6, 34 20 C 38 34, 24 36, 26 24 C 28 12, 50 10, 70 22 M60 13 L71 23 L57 28' fill='none' stroke='%231c3db4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --svg-swoop-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 60'%3E%3Cpath d='M8 3 C 30 10, 36 30, 24 54 M14 46 L24 55 L32 44' fill='none' stroke='%231c3db4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --svg-swoop-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath d='M57 30 C 44 8, 22 6, 5 16 M14 7 L4 16 L15 23' fill='none' stroke='%231c3db4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --svg-swoop-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 60'%3E%3Cpath d='M38 57 C 14 50, 8 30, 20 6 M11 14 L20 5 L29 15' fill='none' stroke='%231c3db4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- 02 base + type ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;overflow-x:hidden;color:var(--text);font-family:var(--sans);font-weight:350;font-size:17px;line-height:1.55;
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
  background-position:-1px -1px;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4,.h1,.h2,.h3,.h4{margin:0;font-weight:750;letter-spacing:-.03em;line-height:1.02;text-wrap:balance}
p,figure,blockquote,dl,dd{margin:0}
strong,b{font-weight:650}
.h1,h1{font-size:clamp(40px,4.6vw,68px);font-weight:800;letter-spacing:-.045em;line-height:.98}
.h2,h2{font-size:clamp(34px,4.3vw,62px)}
.h3,h3{font-size:clamp(21px,1.9vw,26px);letter-spacing:-.025em;line-height:1.15}
.h4,h4{font-size:18px;font-weight:650;letter-spacing:-.015em;line-height:1.25}
.lead{font-size:19px;line-height:1.55;color:#262c35;max-width:34em}
.sub{font-size:18px;color:var(--body);max-width:32em}
.small{font-size:14.5px}
.muted{color:var(--muted)}
.hand{font-family:var(--hand);font-weight:400;letter-spacing:0}
.sr-only,.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:12px;top:-60px;background:var(--text);color:#fff;padding:10px 14px;z-index:100;text-decoration:none;border-radius:var(--radius)}
.skip:focus{top:12px}
::selection{background:var(--marker);color:var(--text)}

/* ---------- 03 layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.wrap--narrow{max-width:900px}
.sec{padding:var(--sec) 0 0}
.sec--tight{padding-top:72px}
.sec--last,.pad-bottom{padding-bottom:var(--sec)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.split--5-7{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.split--7-5{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split--center{align-items:center}
.grid{display:grid;gap:40px 34px;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
.grid--2{--cols:2}.grid--3{--cols:3}.grid--4{--cols:4}
.stack>*+*{margin-top:var(--stack,18px)}
.actions{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:32px}

/* ---------- 04 buttons + links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 16px/1.1 var(--sans);letter-spacing:-.01em;text-decoration:none;padding:16px 22px;border-radius:var(--radius);border:1.5px solid var(--text);cursor:pointer;transition:background .2s,color .2s,border-color .2s;text-align:center}
.btn-solid{background:var(--text);color:#fff}
.btn-solid:hover{background:var(--ink);border-color:var(--ink)}
.btn-line{background:transparent;color:var(--text)}
.btn-line:hover{background:#fff}
.btn-sm{padding:12px 16px;font-size:15px}
.btn .t{font-weight:400;color:#b8c2d6;margin-left:4px}
.btn .ic{width:1.15em;height:1.15em}
.tlink{font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-color:var(--ink)}
.tlink:hover{color:var(--ink)}
.links-row{display:flex;flex-wrap:wrap;gap:8px 18px}

/* ---------- 05 materials (paper, tape, pins) ---------- */
.tape{position:absolute;width:92px;height:26px;background:var(--tape);box-shadow:0 1px 1px rgba(20,40,80,.06);
  clip-path:polygon(0 8%,6% 0,12% 10%,18% 2%,82% 0,88% 9%,94% 1%,100% 7%,100% 93%,94% 100%,88% 91%,82% 99%,18% 100%,12% 92%,6% 100%,0 94%);z-index:3;pointer-events:none;top:-12px}
.tape--l{left:8%;transform:rotate(-6deg)}
.tape--r{right:8%;transform:rotate(5deg)}
.tape--c{left:calc(50% - 46px);transform:rotate(-2deg)}
.tape--corner-l{left:-22px;top:18px;transform:rotate(-40deg)}
.tape--corner-r{right:-22px;bottom:18px;top:auto;transform:rotate(-40deg)}
.pin{position:absolute;top:-7px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;z-index:3;
  background:radial-gradient(circle at 35% 30%,#ff7a70 0 18%,var(--red) 45%,#8e1611 100%);box-shadow:0 3px 4px rgba(40,10,10,.28)}

/* index card: white, ruled, red margin line near the top */
.icard{position:relative;background:#fff;box-shadow:var(--sh-card);padding:66px 28px 26px;
  background-image:linear-gradient(transparent 55px,rgba(212,42,32,.45) 55px,rgba(212,42,32,.45) 56.5px,transparent 56.5px),repeating-linear-gradient(transparent 0 27px,var(--rule) 27px 28px);background-position:0 0,0 12px}
.icard--plain{background-image:linear-gradient(transparent 55px,rgba(212,42,32,.45) 55px,rgba(212,42,32,.45) 56.5px,transparent 56.5px)}
.icard--flush{padding:0}
.icard--blank{background-image:none;padding-top:34px}
.icard>.label{position:absolute;left:28px;top:18px;font-family:var(--hand);color:var(--red);font-size:26px;line-height:1}
.icard h3{line-height:28px;font-size:23px}
.icard p{line-height:28px;font-size:16px;color:var(--body)}
.icard h3+p{margin-top:0}
.icard p+p{margin-top:0}

/* sticky note */
.sticky{position:relative;background:var(--sticky);padding:30px 26px 24px;box-shadow:var(--sh-card)}
.sticky .hand,.sticky.hand{font-size:23px;line-height:1.3;color:#18202c}

/* taped print: a screenshot/photo on white border */
.print{position:relative;display:block;background:#fff;padding:10px;box-shadow:var(--sh-print)}
.print img,.print video{width:100%}
.print .ph{aspect-ratio:16/9;overflow:hidden;background:#e9eef4}
.print .ph img{width:100%;height:100%;object-fit:cover;object-position:top left}
.print figcaption,.fig-cap{margin-top:12px;font-size:14.5px;color:var(--muted)}

/* typed sheet: white A4 taped to the wall */
.sheet{position:relative;background:#fff;padding:52px 48px 40px;box-shadow:var(--sh-sheet)}
.sheet>.tape--l{left:12%;transform:rotate(-3deg)}
.sheet>.tape--r{right:12%;transform:rotate(4deg)}
.sheet-label{font-size:14px;font-weight:500;color:var(--muted);letter-spacing:0;margin-bottom:10px;line-height:1.3}

/* plain paper panel (no tilt, no tape) for dense UI like forms and tables */
.paper{position:relative;background:#fff;border:1px solid #e1e8f0;padding:28px}

.tilt-xs{transform:rotate(-.5deg)}
.tilt-l{transform:rotate(-1deg)}
.tilt-r{transform:rotate(1deg)}
.tilt-l2{transform:rotate(-1.6deg)}
.tilt-r2{transform:rotate(1.4deg)}
.scatter>:nth-child(4n+1){transform:rotate(-1.1deg)}
.scatter>:nth-child(4n+2){transform:rotate(.9deg);margin-top:28px}
.scatter>:nth-child(4n+3){transform:rotate(-.5deg);margin-top:8px}
.scatter>:nth-child(4n+4){transform:rotate(1.2deg);margin-top:20px}

/* ---------- 06 icons ---------- */
.ic{width:1.3em;height:1.3em;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.25em}
.ic--lg{width:34px;height:34px;stroke-width:1.7}
.ic--ink{color:var(--ink)}
.ic--red{color:var(--red)}
.icon-row{display:flex;align-items:flex-start;gap:12px}
.icon-row .ic{color:var(--ink);margin-top:.1em}

/* ---------- 07 header + nav ---------- */
.top{position:relative;z-index:40}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:18px;padding-bottom:18px}
.logo{display:block;flex:none}
.logo img{width:56px;height:56px}
.nav{display:flex;align-items:center;gap:30px}
.nav-list{display:flex;gap:26px;list-style:none;margin:0;padding:0;align-items:center}
.nav-list>li{position:relative}
.nav-list a{font-size:15.5px;font-weight:450;text-decoration:none;padding:6px 0;display:inline-block}
.nav-list a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:5px}
.nav-list>li>a[aria-current]{position:relative;font-weight:600}
.nav-list>li>a[aria-current]::after{content:"";position:absolute;left:-3px;right:-3px;bottom:-4px;height:8px;background:var(--svg-underline) no-repeat center/100% 100%}
.nav-list>li>a[aria-current]:hover{text-decoration:none}
.nav .btn{padding:13px 18px;font-size:15px}
.has-sub{display:flex;align-items:center;gap:2px}
.sub-toggle{background:none;border:0;padding:6px 4px;cursor:pointer;display:inline-grid;place-items:center;color:var(--text)}
.sub-toggle .ic{width:14px;height:14px;stroke-width:2.4;transition:transform .2s}
.sub-toggle[aria-expanded="true"] .ic{transform:rotate(180deg)}
.subnav{list-style:none;margin:0;padding:22px 20px 14px;position:absolute;left:-20px;top:calc(100% + 10px);width:290px;background:#fff;box-shadow:var(--sh-card);
  background-image:repeating-linear-gradient(transparent 0 39px,var(--rule) 39px 40px);background-position:0 18px;display:none;transform:rotate(-.6deg)}
.subnav::before{content:"";position:absolute;top:-7px;left:40px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff7a70 0 18%,var(--red) 45%,#8e1611 100%);box-shadow:0 3px 4px rgba(40,10,10,.28)}
.subnav::after{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.subnav a{display:block;padding:8px 0;line-height:24px;font-size:15.5px}
.subnav a[aria-current]{color:var(--ink);font-weight:600}
.has-sub:hover .subnav,.has-sub:focus-within .subnav,.has-sub.open .subnav{display:block}
.burger{display:none;font:600 15px var(--sans);background:#fff;border:1.5px solid var(--text);border-radius:var(--radius);padding:10px 14px;cursor:pointer;color:var(--text)}
/* landing-page header: logo + email + one CTA, no nav */
.top--lp .lp-contact{display:flex;align-items:center;gap:22px}
.top--lp .lp-contact a:not(.btn){font-size:15px;text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.top--lp .lp-contact a:not(.btn):hover{color:var(--ink);text-decoration:underline}

/* ---------- 08 footer ---------- */
.foot{border-top:1.5px solid var(--text);padding:48px 0 36px;background:rgba(244,247,250,.72);margin-top:0}
.foot .wrap{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:30px}
.foot .logo img{width:64px;height:64px}
.foot p{margin-top:14px;color:var(--muted);font-size:15px;max-width:23em}
.foot h2{margin:0 0 12px;font-size:14px;font-weight:600;letter-spacing:0;line-height:1.3}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:0 0 8px}
.foot li a{text-decoration:none;font-size:15px}
.foot li a:hover{color:var(--ink);text-decoration:underline}
.foot .contact-list{margin-top:16px}
.foot .contact-list li{display:flex;gap:9px;align-items:center;font-size:15px}
.foot .contact-list .ic{color:var(--ink);width:18px;height:18px}
.foot-bottom{grid-column:1/-1;border-top:1px solid var(--grid-major);padding-top:22px;margin-top:16px;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between}
.foot .copy{margin:0;font-size:13.5px;color:var(--muted);max-width:none}
.foot .hh-footer-legal{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;justify-content:flex-start}
.foot .hh-footer-legal a,.foot .hh-footer-legal button{color:var(--muted);font-size:13.5px;text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;cursor:pointer;font-family:var(--sans)}
.foot .hh-footer-legal a:hover,.foot .hh-footer-legal button:hover{color:var(--ink)}

/* ---------- 09 section heads, annotations, marks ---------- */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px 32px;flex-wrap:wrap;margin-bottom:48px}
.sec-head h2,.sec-head .h2{max-width:15em}
.sec-head .sub{margin-top:16px}
.sec-head>.anno{margin-bottom:6px}
/* the handwritten ink note (short: max ~12 words) */
.note-ink,.anno{font-family:var(--hand);color:var(--ink);font-size:23px;line-height:1.2;font-weight:400;letter-spacing:0}
.anno{display:inline-block;position:relative;transform:rotate(-2deg);max-width:17em}
.anno--red{color:var(--red)}
.anno--left{padding-left:66px}
.anno--left::before{content:"";position:absolute;left:0;top:50%;width:56px;height:38px;margin-top:-22px;background:var(--svg-swoop-left) no-repeat center/contain}
.anno--down{padding-bottom:58px}
.anno--down::after{content:"";position:absolute;left:30%;bottom:0;width:40px;height:52px;background:var(--svg-swoop-down) no-repeat center/contain}
.anno--up{padding-top:58px}
.anno--up::before{content:"";position:absolute;left:24%;top:0;width:40px;height:52px;background:var(--svg-swoop-up) no-repeat center/contain}
/* inline marks */
.circled{position:relative;display:inline-block;padding:0 .18em;white-space:nowrap}
.circled::after{content:"";position:absolute;inset:-.28em -.34em -.22em;background:var(--svg-ellipse) no-repeat center/100% 100%;pointer-events:none}
/* in tight multi-line headings the ellipse stays inside its own line (wider, flatter) so it does not cross the line above */
:is(h1,h2,h3,.h1,.h2,.h3) .circled::after{inset:-.04em -.36em -.1em}
.u-red{position:relative;display:inline-block;white-space:nowrap}
.u-red::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-.14em;height:.26em;min-height:6px;background:var(--svg-underline) no-repeat center/100% 100%;pointer-events:none}
.hl{background:linear-gradient(transparent 52%,rgba(255,228,92,.85) 52%,rgba(255,228,92,.85) 90%,transparent 90%);padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.strike{text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px}
/* tick lists */
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding:0 0 0 38px;margin:0 0 12px}
.ticks li::before{content:"";position:absolute;left:2px;top:.05em;width:24px;height:24px;background:var(--svg-check) no-repeat center/contain}
.ticks--x li::before{background-image:var(--svg-cross)}
.ticks strong{display:block;font-size:18px;letter-spacing:-.015em}
.ticks--ruled li{padding:18px 0 18px 42px;margin:0;border-top:1px solid var(--line)}
.ticks--ruled li:first-child{border-top:0}
.ticks--ruled li::before{top:19px;width:28px;height:28px}
/* clause list (big ink ticks, bold title + sentence) */
.clauses{list-style:none;margin:0;padding:0}
.clauses li{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:20px 0;border-top:1px solid var(--line)}
.clauses li:first-child{border-top:0}
.clauses li::before{content:"";width:34px;height:30px;background:var(--svg-check) no-repeat left top/30px 30px}
.clauses strong{display:block;font-size:21px;font-weight:700;letter-spacing:-.02em}
.clauses span{display:block;margin-top:4px;color:#3a424e}
/* caption pair: short handwriting + typed paragraph */
.cap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;margin-top:30px}
.cap .hand{color:var(--ink);font-size:22px;line-height:1.3}
.cap .hand strong{font-weight:400;color:var(--red)}
.cap .typed{font-size:16.5px;color:var(--body)}
.cap .typed p+p{margin-top:12px}

/* ---------- 10 page hero, breadcrumb ---------- */
.phero{padding:26px 0 0}
.phero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.phero--text .wrap{grid-template-columns:minmax(0,1fr)}
.phero h1{margin-top:22px;max-width:14em}
.phero--text h1{max-width:16em}
.phero .lead{margin-top:24px}
.phero .print{transform:rotate(1deg)}
.phero-note{margin-top:30px}
/* centered hero (service pages): big type straight on the wall, no taped print */
.phero--center{padding:clamp(30px,4.4vw,60px) 0 clamp(6px,1.6vw,20px);text-align:center}
.phero--center .wrap{display:block}
.phero--center .crumbs{justify-content:center}
.phero--center h1{margin:clamp(28px,3.4vw,46px) auto 0;max-width:16.5ch;font-size:clamp(40px,6.2vw,92px);line-height:.95;letter-spacing:-.052em;text-wrap:balance}
.phero--center h1 .ln{display:block;text-wrap:balance}
.phero--center h1 .kick{display:block;margin-bottom:.34em;font-size:.4em;font-weight:700;letter-spacing:-.025em;line-height:1.1}
.phero--center .lead{margin:clamp(24px,2.6vw,34px) auto 0;max-width:60ch;font-size:clamp(17px,1.45vw,20.5px);text-wrap:pretty}
.phero--center .chips{justify-content:center;margin-top:28px}
.phero--center .actions{justify-content:center;margin-top:34px}
.phero--center .stats{grid-template-columns:repeat(var(--n,3),minmax(0,16em));justify-content:center;gap:0;margin:56px auto 0;width:fit-content;max-width:100%;padding-top:22px}
.phero--center .stats>div{padding:0 32px}
.phero--center .stats>div+div{border-left:1px solid var(--grid-major)}
.phero--center .stats dt{max-width:15em;margin-inline:auto}
.phero--center+.logowall{margin-top:64px}
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;font-size:14.5px;color:var(--muted)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;list-style:none;margin:0;padding:0}
.crumbs li{display:inline-flex;align-items:center}
.crumbs li+li::before{content:"/";margin:0 10px;color:#9aa5b4}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.crumbs [aria-current]{position:relative;color:var(--text);font-weight:550;padding:0 .3em}
.crumbs [aria-current]::after{content:"";position:absolute;inset:-6px -10px -5px;background:var(--svg-ellipse) no-repeat center/100% 100%;pointer-events:none}

/* ---------- 11 grids of paper: works, notes, steps, stats, logos ---------- */
/* stats */
.stats{display:grid;grid-template-columns:repeat(var(--n,3),auto);justify-content:start;gap:14px 44px;margin:44px 0 0;padding:22px 0 0;border-top:1.5px solid var(--text);position:relative}
.stats>div{min-width:0}
.stats dd{margin:0;font-size:40px;font-weight:700;letter-spacing:-.04em;line-height:1}
.stats dd small{font-size:.5em;font-weight:500;color:var(--muted);letter-spacing:0}
.stats dt{font-size:14px;color:var(--muted);margin-top:6px}
.stats .since{position:absolute;right:0;top:-38px;color:var(--ink);font-size:21px;transform:rotate(-3deg)}
/* logo wall */
.logowall{padding:34px 0 30px;border-top:1.5px solid var(--text);border-bottom:1px solid var(--grid-major)}
.phero+.logowall{margin-top:84px}
.logowall .wrap{display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:center}
.logowall p{font-size:15px;color:var(--muted);line-height:1.45}
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:22px 38px;margin:0;padding:0;list-style:none}
.logos img{height:34px;width:auto;filter:invert(1) grayscale(1);opacity:.72;mix-blend-mode:multiply}
.logos img.tall{height:44px}
.logos--dark img{filter:grayscale(1)}
/* work cards (portfolio) */
.work{position:relative;text-decoration:none;display:block}
.work .print{padding:9px}
.work h3{font-size:22px;letter-spacing:-.02em;margin-top:18px;line-height:1.15}
.work .tags{font-size:14px;color:var(--muted);margin-top:6px}
.work p.desc{font-size:15.5px;color:var(--body);margin-top:8px}
.work:hover h3{color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.work .tape{left:calc(50% - 46px);transform:rotate(-2deg)}
.works{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px 48px}
.works--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 40px}
.works>.work:nth-child(4n+1) .print{transform:rotate(-.8deg)}
.works>.work:nth-child(4n+2) .print{transform:rotate(1deg)}
.works>.work:nth-child(4n+3) .print{transform:rotate(.6deg)}
.works>.work:nth-child(4n+4) .print{transform:rotate(-.6deg)}
/* editorial scatter used on the homepage: 12-col, alternating 7/5 */
.works--scatter{grid-template-columns:repeat(12,minmax(0,1fr));gap:64px 44px}
.works--scatter>:nth-child(4n+1){grid-column:1/span 7}
.works--scatter>:nth-child(4n+2){grid-column:8/span 5;margin-top:60px}
.works--scatter>:nth-child(4n+3){grid-column:1/span 5}
.works--scatter>:nth-child(4n+4){grid-column:6/span 7;margin-top:-30px}
.works--scatter>.w-more{align-self:center;padding:68px 30px 30px}
.w-more .hand{font-size:27px;line-height:1.2;color:var(--ink)}
.w-more .hand b{font-weight:400;color:var(--red);font-size:1.25em}
.w-more .btn{margin-top:24px}
/* testimonial notes */
.notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 34px;align-items:start}
.nt{position:relative;margin:0;padding:34px 28px 24px;box-shadow:var(--sh-card);background:var(--sticky)}
.nt--white{background:#fff}
.nt blockquote{margin:0;font-family:var(--hand);font-size:23px;line-height:1.3;color:#18202c}
.nt--typed blockquote{font-family:var(--sans);font-size:17px;line-height:1.55;color:var(--body)}
.nt .who{margin-top:18px;font-size:14.5px;line-height:1.35}
.nt .who strong{display:block;font-weight:650}
.nt .who span{color:var(--muted)}
.nt .stars{position:absolute;right:18px;top:12px;font-size:13px;letter-spacing:2px;color:var(--red)}
.notes>.nt:nth-child(5n+1){transform:rotate(-1.6deg)}
.notes>.nt:nth-child(5n+2){transform:rotate(1.1deg);margin-top:40px}
.notes>.nt:nth-child(5n+3){transform:rotate(-.7deg);margin-top:10px}
.notes>.nt:nth-child(5n+4){transform:rotate(.9deg)}
.notes>.nt:nth-child(5n+5){transform:rotate(-1.2deg);margin-top:26px}
/* process steps: pinned index cards with ink arrows between */
.steps{--n:4;position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:62px;list-style:none;margin:0;padding:24px 0 0}
.step{position:relative;z-index:1;padding:0 24px 26px;min-height:268px}
.step:nth-child(4n+1){transform:rotate(-1.4deg);margin-top:30px}
.step:nth-child(4n+2){transform:rotate(1deg)}
.step:nth-child(4n+3){transform:rotate(-.6deg);margin-top:44px}
.step:nth-child(4n+4){transform:rotate(1.3deg);margin-top:8px}
.step:not(:last-child)::after{content:"";position:absolute;right:-70px;top:74px;width:78px;height:46px;z-index:4;pointer-events:none;background:var(--svg-curl) no-repeat center/contain}
.step .n{display:block;font-family:var(--hand);color:var(--red);font-size:40px;line-height:56px;height:56px}
.step h3{font-size:24px;line-height:28px;margin-top:10px;letter-spacing:-.025em}
.step p{margin-top:0;line-height:28px;font-size:16px;color:var(--body)}
.steps-foot{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:54px}
/* feature cards (service overviews): icard with ink icon */
.fcard{display:flex;flex-direction:column;text-decoration:none}
.fcard>.ic{position:absolute;right:24px;top:14px;width:30px;height:30px;color:var(--ink);stroke-width:1.7}
.fcard .more{margin-top:auto;padding-top:28px;line-height:28px;font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-color:var(--ink)}
a.fcard:hover h3{color:var(--ink)}

/* ---------- 12 tabs, faq ---------- */
/* horizontal tabs: selected tab gets the red hand circle */
.tablist{display:flex;flex-wrap:wrap;gap:6px 10px;margin:0 0 34px;padding:0;list-style:none}
.tab{position:relative;background:none;border:0;padding:10px 16px;cursor:pointer;font:650 18px/1.1 var(--sans);letter-spacing:-.015em;color:#6b7684}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"]{color:var(--text)}
.tab[aria-selected="true"]::after{content:"";position:absolute;inset:-4px -6px;background:var(--svg-ellipse) no-repeat center/100% 100%;pointer-events:none}
[role="tabpanel"][hidden]{display:none}
html:not(.js) [role="tabpanel"][hidden]{display:block;margin-top:60px}
/* index-card tabs (vertical, big): used on the homepage "what we do" */
.card-tabs{list-style:none;margin:0;padding:66px 30px 26px}
.card-tabs li+li{margin-top:6px}
.card-tabs .tab{display:block;width:100%;text-align:left;padding:12px 14px;font:700 clamp(22px,2.2vw,30px)/1.1 var(--sans);letter-spacing:-.03em;color:#8a94a3}
.card-tabs .tab[aria-selected="true"]{color:var(--text)}
.card-tabs .tab[aria-selected="true"]::after{inset:-6px -4px}
.card-tabs .all{margin-top:22px;padding:14px 14px 0;border-top:1px solid var(--rule);font-size:15px;color:var(--muted)}
.card-tabs .all a{margin-right:12px;white-space:nowrap}
/* faq: details/summary on a sheet */
.faq{background:#fff;box-shadow:var(--sh-sheet);padding:10px 36px}
.faq details{border-top:1px solid var(--line)}
.faq details:first-child{border-top:0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:22px 0;font-size:19px;font-weight:650;letter-spacing:-.015em;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:26px;height:26px;margin-top:-1px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C12.1 9.5 12 14.5 11.9 19.5M4.5 12.1C9.5 11.9 14.5 11.9 19.5 12.1' fill='none' stroke='%231c3db4' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;transition:transform .2s}
.faq details[open]>summary::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.1C9.5 11.9 14.5 11.9 19.5 12.1' fill='none' stroke='%23d42a20' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")}
.faq summary:hover{color:var(--ink)}
.faq .ans{padding:0 46px 24px 0;color:var(--body);max-width:62ch}
.faq .ans p+p,.faq .ans ul{margin-top:12px}

/* ---------- 13 packages, table, chips, stamp, score ---------- */
.pkgs{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:40px 34px;align-items:start}
.pkg{display:flex;flex-direction:column}
.pkg .pkg-name{font-size:24px;line-height:28px}
.pkg .pkg-for{font-size:15px;line-height:28px;color:var(--muted)}
.pkg .price{margin-top:14px;font-size:44px;font-weight:750;letter-spacing:-.045em;line-height:56px}
.pkg .price small{font-size:15px;font-weight:450;color:var(--muted);letter-spacing:0;margin-left:4px}
.pkg .price--note{font-size:24px;letter-spacing:-.025em;line-height:28px;margin-top:28px;margin-bottom:14px}
.pkg .price .from{font-size:15px;font-weight:450;color:var(--muted);letter-spacing:0;margin-right:4px}
.pkg .ticks{margin-top:14px}
.pkg .ticks li{margin:0;line-height:28px;font-size:16px;padding-left:34px}
.pkg .ticks li::before{top:2px;width:22px;height:22px}
.pkg .btn{margin-top:26px;align-self:flex-start}
.pkg--pick{background-color:var(--sticky);background-image:linear-gradient(transparent 55px,rgba(212,42,32,.45) 55px,rgba(212,42,32,.45) 56.5px,transparent 56.5px),repeating-linear-gradient(transparent 0 27px,rgba(170,140,40,.22) 27px 28px)}
.pkg .stamp{position:absolute;right:18px;top:12px;margin:0}
/* table */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;background:#fff;box-shadow:var(--sh-sheet)}
.tbl{width:100%;border-collapse:collapse;font-size:15.5px;min-width:560px}
.tbl caption{text-align:left;padding:18px 22px 0;font-size:14px;color:var(--muted)}
.tbl th,.tbl td{text-align:left;padding:14px 22px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{font-size:14px;font-weight:600;color:var(--text);border-bottom:1.5px solid var(--text);white-space:nowrap}
.tbl tbody th{font-weight:600}
.tbl tbody tr:last-child>*{border-bottom:0}
.tbl .ic{color:var(--ink)}
.tbl .no .ic{color:var(--red)}
.tbl .col-pick{background:rgba(255,243,176,.55)}
/* chips */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:550;line-height:1;padding:7px 11px;border-radius:99px;background:var(--ink-wash);color:var(--ink);text-decoration:none;white-space:nowrap}
.chip--y{background:var(--sticky);color:#6b5500}
.chip--g{background:#eaeef3;color:var(--muted)}
.chip--line{background:transparent;border:1.2px solid currentColor;color:var(--text)}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
a.chip:hover{background:var(--ink);color:#fff}
/* stamp: hand-lettered red box, one per view */
.stamp{display:inline-block;font-family:var(--hand);color:var(--red);font-size:23px;line-height:1.2;border:2px solid var(--red);border-radius:var(--radius);padding:2px 12px;transform:rotate(-4deg);margin-bottom:24px;background:rgba(255,255,255,.5)}
/* score: a number circled by hand (PageSpeed scores, ratings) */
.scores{display:flex;flex-wrap:wrap;gap:18px 30px;list-style:none;margin:0;padding:0}
.score{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:14px;color:var(--muted);text-align:center}
.score b{position:relative;display:grid;place-items:center;width:92px;height:66px;font-size:28px;font-weight:750;letter-spacing:-.04em;color:var(--text)}
.score b::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80' preserveAspectRatio='none'%3E%3Cpath d='M58 5 C 26 2, 5 18, 6 40 C 7 64, 30 76, 54 75 C 80 74, 96 58, 94 38 C 92 17, 72 5, 46 7 C 40 8, 35 10, 31 12' fill='none' stroke='%231c3db4' stroke-width='2.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center/100% 100%}

/* ---------- 14 forms: a paper form ---------- */
.form{position:relative;background:#fff;box-shadow:var(--sh-sheet);padding:48px 44px 36px}
.form>.tape--l{left:10%;transform:rotate(-3deg)}
.form>.tape--r{right:10%;transform:rotate(4deg)}
.form-title{font-size:26px;letter-spacing:-.025em;line-height:1.15;margin-bottom:8px}
.form-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 22px}
.field{margin-top:22px;display:flex;flex-direction:column}
.field>label,.field>.label,.fieldset legend{font-size:14.5px;font-weight:600;margin-bottom:8px;color:var(--text);padding:0}
.req{color:var(--red);font-weight:600}
.hint{font-size:13.5px;color:var(--muted);margin-top:6px}
.input,.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea{
  width:100%;font:400 16px/1.4 var(--sans);color:var(--text);background:#fff;border:1.5px solid var(--text);border-radius:var(--radius);padding:13px 14px;min-height:50px;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.field textarea{min-height:130px;resize:vertical;line-height:1.5;
  background-image:repeating-linear-gradient(transparent 0 23px,var(--rule) 23px 24px);background-position:0 12px;background-attachment:local}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 9.6C8.4 11.4 10.2 13.2 12 15.2C13.9 13.2 15.7 11.4 17.6 9.4' fill='none' stroke='%230f1216' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:20px;padding-right:44px}
.field ::placeholder{color:#8a94a3;opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(28,61,180,.18)}
.field.is-error input,.field.is-error select,.field.is-error textarea,.field [aria-invalid="true"]{border-color:var(--red)}
.err{display:flex;gap:6px;align-items:flex-start;font-size:14px;font-weight:500;color:var(--red);margin-top:7px}
.err::before{content:"!";font-family:var(--hand);font-size:19px;line-height:1;flex:none}
.check{display:flex;gap:12px;align-items:flex-start;margin-top:18px;font-size:15px;line-height:1.45;cursor:pointer}
.check input{-webkit-appearance:none;appearance:none;flex:none;width:22px;height:22px;margin:0;border:1.5px solid var(--text);border-radius:3px;background:#fff center/18px no-repeat;cursor:pointer}
.check input[type=radio]{border-radius:50%}
.check input:checked{background-image:var(--svg-check);border-color:var(--ink)}
.check input[type=radio]:checked{background-image:radial-gradient(circle,var(--ink) 0 5px,transparent 5.5px)}
.check input:focus-visible{outline:2.5px solid var(--ink);outline-offset:2px}
.fieldset{border:0;margin:22px 0 0;padding:0}
.form .btn[type=submit],.form-submit{margin-top:28px}
.form-legal{margin-top:18px;font-size:13.5px;color:var(--muted);line-height:1.5}
.form-legal a{color:inherit}
.form-note{margin-top:10px}
/* success / status message */
.form-status{margin-top:18px;padding:14px 16px;border-left:3px solid var(--ink);background:var(--ink-wash);font-size:15px}

/* ---------- 15 prose (typed sheet for blog + legal) ---------- */
.prose{font-size:18px;line-height:1.7;color:#1d232c;max-width:70ch}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:clamp(26px,2.4vw,32px);line-height:1.15;letter-spacing:-.03em;margin-top:2.2em;scroll-margin-top:24px}
.prose h3{font-size:22px;line-height:1.25;letter-spacing:-.02em;margin-top:1.8em;scroll-margin-top:24px}
.prose h4{font-size:18px;margin-top:1.6em}
.prose h2+*,.prose h3+*,.prose h4+*{margin-top:.6em}
.prose>:first-child{margin-top:0}
.prose a{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:var(--ink);font-weight:500}
.prose a:hover{color:var(--ink)}
.prose ul,.prose ol{padding-left:1.4em}
.prose li+li{margin-top:.45em}
.prose ul li::marker{color:var(--ink)}
.prose ol li::marker{color:var(--red);font-family:var(--hand);font-size:1.1em}
.prose strong{font-weight:650;color:var(--text)}
.prose blockquote{position:relative;margin-left:0;margin-right:0;padding:4px 0 4px 26px;border-left:2px solid var(--red);font-size:20px;line-height:1.55;color:var(--text)}
.prose blockquote cite{display:block;margin-top:8px;font-size:15px;font-style:normal;color:var(--muted)}
.prose code{font-family:var(--mono);font-size:.86em;background:#eef2f7;padding:.12em .38em;border-radius:3px}
.prose pre{font-family:var(--mono);font-size:14.5px;line-height:1.6;background:#f4f7fa;border:1px solid var(--line);border-left:3px solid var(--ink);padding:16px 18px;overflow-x:auto}
.prose pre code{background:none;padding:0;font-size:inherit}
.prose hr{border:0;height:10px;background:var(--svg-underline) no-repeat center/60% 100%;margin:2.4em 0;opacity:.7}
.prose img{border-radius:2px}
.prose figure{margin-top:1.8em;margin-bottom:.4em}
.prose figure figcaption{margin-top:10px;font-size:14.5px;color:var(--muted)}
.prose table{width:100%;border-collapse:collapse;font-size:15.5px}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl-scroll>table{min-width:520px}
.prose th,.prose td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.prose thead th{border-bottom:1.5px solid var(--text);font-size:14.5px;font-weight:600}
.prose .note{background:var(--sticky);padding:18px 22px;font-size:17px;box-shadow:var(--sh-card);transform:rotate(-.4deg)}
.prose .lead{font-size:21px;line-height:1.55;color:var(--text);max-width:none}
/* article / legal layout: typed sheet + side column */
.doc{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
.doc--solo{grid-template-columns:minmax(0,860px);justify-content:center}
.doc .sheet{padding:64px clamp(24px,6vw,76px) 56px}
.doc-aside{position:sticky;top:24px;display:grid;gap:30px}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc li{line-height:28px;font-size:15px;counter-increment:toc;display:grid;grid-template-columns:26px 1fr}
.toc li::before{content:counter(toc);font-family:var(--hand);color:var(--red);font-size:18px}
.toc a{text-decoration:none}
.toc a:hover{color:var(--ink);text-decoration:underline}
.meta-row{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14.5px;color:var(--muted);margin-top:18px}
.meta-row .ic{color:var(--ink);width:18px;height:18px}
.meta-row span{display:inline-flex;gap:6px;align-items:center}

/* ---------- 16 media: video frame, gallery, before/after, dialogs ---------- */
.video-frame{cursor:pointer;display:block;width:100%;border:0;font:inherit;text-align:left;padding:10px}
.play-mark{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;display:grid;place-items:center;pointer-events:none}
.play-mark::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M70 8 C 30 4, 6 30, 8 62 C 10 96, 44 114, 74 110 C 104 106, 116 80, 112 52 C 108 24, 86 8, 58 10 C 50 11, 42 14, 36 18' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;transition:filter .2s}
.play-mark::before{content:"";width:0;height:0;border-style:solid;border-width:18px 0 18px 30px;border-color:transparent transparent transparent #fff;margin-left:8px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.video-frame:hover .play-mark::after{filter:drop-shadow(0 0 0 #fff) brightness(1.1) sepia(1) saturate(6) hue-rotate(5deg)}
.video-frame .ph{position:relative}
.play-mark--sm{width:74px;height:74px;margin:-37px 0 0 -37px}
.play-mark--sm::before{border-width:12px 0 12px 20px;margin-left:5px}
/* modal dialogs for video + images (created by workshop.js if absent) */
dialog.wk-dialog{padding:0;border:0;background:#000;width:min(1100px,94vw);max-width:94vw;max-height:90vh;overflow:visible}
dialog.wk-dialog::backdrop{background:rgba(10,14,22,.82)}
dialog.wk-dialog video,dialog.wk-dialog img{display:block;width:100%;height:auto;max-height:86vh;object-fit:contain;background:#000}
dialog.wk-dialog--img{background:#fff;padding:10px;width:auto}
dialog.wk-dialog .x{position:absolute;right:10px;top:10px;z-index:2;background:#fff;border:0;border-radius:var(--radius);font:600 15px var(--sans);padding:9px 12px;cursor:pointer;color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.25)}
dialog.wk-dialog .dcap{background:#fff;color:var(--muted);font-size:14.5px;padding:10px 4px 2px}
/* gallery */
.gallery{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:40px 30px;list-style:none;margin:0;padding:0}
.gallery a.print{cursor:zoom-in}
.gallery>:nth-child(3n+1) .print,.gallery>.print:nth-child(3n+1){transform:rotate(-.8deg)}
.gallery>:nth-child(3n+2) .print,.gallery>.print:nth-child(3n+2){transform:rotate(.7deg)}
.gallery>:nth-child(3n+3) .print,.gallery>.print:nth-child(3n+3){transform:rotate(-.3deg)}
.gallery .print:hover{box-shadow:0 1px 1px rgba(20,40,80,.1),0 28px 44px -22px rgba(20,40,80,.5)}
/* before / after pair */
.ba{display:grid;grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr);align-items:center;gap:0}
.ba-arrow{height:46px;background:var(--svg-curl) no-repeat center/60px auto}
.ba figure{position:relative}
.ba .ba-label{display:block;font-family:var(--hand);font-size:26px;line-height:1.1;margin-bottom:12px}
.ba .ba-before .ba-label{color:var(--red)}
.ba .ba-before .ba-label span{text-decoration:line-through;text-decoration-thickness:2px}
.ba .ba-after .ba-label{color:var(--ink)}
.ba .ba-before .print{transform:rotate(-1.4deg)}
.ba .ba-after .print{transform:rotate(1deg)}
.ba .ba-before .print img{filter:saturate(.85)}
.ba figcaption{margin-top:14px;font-size:15.5px;color:var(--body)}
.ba .ticks{margin-top:14px}

/* ---------- 17 cta box, utilities, motion ---------- */
.cta{padding:var(--sec) 0}
.cta-box{position:relative;border:1.5px solid var(--text);background:#fff;padding:56px 56px 50px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:end}
.cta-box>div>p{margin-top:18px;font-size:18px;color:var(--body);max-width:30em}
.cta-box .cta-side{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.cta-box .cta-side span{font-size:15.5px;color:var(--muted)}
.cta-box .cta-side a:not(.btn){color:var(--text)}
.cta-box .anno{position:absolute;right:40px;top:-20px;background:var(--paper);padding:0 10px}

.center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}
.mt-0{margin-top:0!important}
.mt-s{margin-top:14px}
.mt-m{margin-top:28px}
.mt-l{margin-top:56px}
.maxw-prose{max-width:62ch}
.nowrap{white-space:nowrap}

/* ---------- 18 case study (portfolio-details-*) ---------- */
/* spec card in the hero: <div class="icard spec"><span class="label">δελτίο έργου</span><dl>...</dl></div> */
.phero .spec{margin-top:34px;max-width:36em;transform:rotate(-.6deg)}
.spec dl{margin:0;display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:22px}
.spec dt{font-size:14px;line-height:28px;color:var(--muted)}
.spec dd{margin:0;font-size:16px;line-height:28px;color:var(--text)}
/* marked screenshot: <figure class="print shot"><a class="crop" style="--x;--y;--w;--ar"><img><span class="mk" style="left;top">1</span></a></figure>
   --x/--y = crop origin as a fraction of the image, --w = crop width fraction, --ar = crop aspect ratio. .crop--full shows the whole image. */
.shot .crop{position:relative;display:block;overflow:hidden;aspect-ratio:var(--ar);cursor:zoom-in}
.shot .crop img{position:absolute;left:0;top:0;max-width:none;width:calc(100% / var(--w));height:auto;transform:translate(calc(-100% * var(--x)),calc(-100% * var(--y)))}
.shot .crop--full img{position:static;width:100%;transform:none}
.crop .mk{position:absolute;z-index:2;width:32px;height:32px;margin:-16px 0 0 -16px;border:2px solid var(--red);border-radius:50%;background:rgba(255,255,255,.92);color:var(--red);font-family:var(--hand);font-size:21px;line-height:27px;text-align:center;pointer-events:none}
/* red hand-drawn ellipse placed over a screenshot: <span class="ring" style="left;top;width;height"> inside a position:relative box */
.ring{position:absolute;background:var(--svg-ellipse) no-repeat center/100% 100%;pointer-events:none}
/* key list that matches the .mk numbers */
.keyed{list-style:none;margin:0;padding:0;counter-reset:k}
.keyed li{position:relative;counter-increment:k;padding-left:44px;line-height:28px;font-size:16px;color:var(--body);margin:0 0 18px}
.keyed li:last-child{margin-bottom:0}
.keyed li::before{content:counter(k);position:absolute;left:0;top:-1px;width:28px;height:28px;border:2px solid var(--red);border-radius:50%;color:var(--red);font-family:var(--hand);font-size:19px;line-height:24px;text-align:center}
.keyed strong{color:var(--text);font-weight:600}
/* annotation positioned next to a screenshot (set left/top/bottom inline) */
.shot-wrap{position:relative}
.shot-wrap>.anno{position:absolute;z-index:3}
/* before/after as two text cards: <div class="ba"><figure class="ba-before"><div class="icard icard--plain"><span class="ba-label">... */
.ba .icard .ticks li{margin:0;line-height:28px;font-size:16px;padding-left:34px}
.ba .icard .ticks li::before{top:2px}
.ba .icard>.ba-label{position:absolute;left:28px;top:14px;margin:0}
.ba-before .icard{transform:rotate(-1.2deg)}
.ba-after .icard{transform:rotate(.9deg)}
/* before/after as two taped sheets with tick lists: <div class="print ba-sheet"><ul class="ticks">... */
.ba-sheet{padding:30px 30px 24px}
.ba .ba-before .ba-sheet{transform:rotate(-1deg)}
.ba .ba-after .ba-sheet{transform:rotate(.8deg)}
/* feature rows: <div class="split ... feat"><div class="shot-wrap">..</div><div class="txt"><h3>..</h3><p>..</p><div class="icard">..</div></div></div> */
.sec-head+.feat{margin-top:84px}
.feat+.feat{margin-top:110px}
.feat .txt h3{font-size:clamp(24px,2.2vw,30px);letter-spacing:-.025em;line-height:1.15}
.feat .txt>p{margin-top:14px;color:var(--body)}
.feat .txt>.icard{margin-top:30px}
/* "next project" card */
.next .work{max-width:560px}
@media (min-width:641px){.shot-wrap:has(>.anno--up){margin-bottom:64px}}
@media (max-width:640px){
  .spec dl{grid-template-columns:minmax(0,1fr)}
  .spec dt{line-height:22px;padding-top:6px}
  .spec dd{padding-bottom:0}
  .crop .mk{width:24px;height:24px;margin:-12px 0 0 -12px;font-size:16px;line-height:20px}
  .shot-wrap>.anno{position:static;display:block;margin:0 0 14px}
  .shot-wrap>.anno--up{margin:22px 0 0}
  .ba-sheet{padding:24px 20px 18px}
  .sec-head+.feat{margin-top:0}
  .feat+.feat{margin-top:80px}
}

/* ---------- 19 landing pages (lp-*) ---------- */
/* hero = offer on the left, paper form on the right */
.lp-hero{padding:26px 0 0}
.lp-hero>.wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:64px;align-items:start}
.lp-hero h1{margin-top:22px;max-width:13.5em}
.lp-hero .lead{margin-top:24px}
.lp-hero .ticks{margin-top:30px;max-width:32em}
.lp-hero .ticks li{margin-bottom:16px}
.lp-hero .actions{margin-top:26px}
.lp-hero .note-ink{margin-top:26px;transform:rotate(-1.5deg);max-width:18em}
.lp-form{scroll-margin-top:18px;margin-top:14px}
.form-sub{font-size:15.5px;color:var(--body);margin-top:6px}
.lp-form .req-note{font-size:13.5px;color:var(--muted);margin-top:10px}
.lp-form .btn[type=submit]{width:100%}
/* small footnote under an index card's text */
.icard p.note,.icard p.lp-card-note{margin-top:14px;padding-top:12px;border-top:1px dashed var(--rule);font-size:15px;line-height:28px;color:var(--muted)}
/* two "paths" (packages without prices) */
.lp-paths .pkg p.pkg-for{font-size:16px;color:var(--body);margin-top:0}
.lp-paths .pkg .ticks{margin-top:18px}
.lp-paths .pkg .btn{margin-top:auto}
.lp-paths .pkg .ticks+.btn{margin-top:28px}
/* tick list inside the closing CTA box */
.cta-box .ticks{margin-top:22px}
.cta-box .ticks li{font-size:16.5px}
.cta-box .ticks strong{font-size:17px}
/* mobile sticky CTA: <div class="lp-sticky"><a class="btn btn-solid" href="#form">..</a></div> after the footer.
   workshop.js hides it while #form is on screen; hh-chatbot.js lifts its launchers above it. */
.lp-sticky{display:none}
@media (max-width:1080px){
  .lp-hero>.wrap{grid-template-columns:minmax(0,1fr);gap:40px}
  .lp-hero .form{max-width:680px}
}
@media (max-width:767px){
  .lp-sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 18px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(244,247,250,.96);border-top:1.5px solid var(--text);transition:transform .25s ease}
  .lp-sticky .btn{flex:1}
  .lp-sticky.is-off{transform:translateY(110%)}
  body:has(>.lp-sticky){padding-bottom:76px}
}

/* ---------- 20 small shared pieces ---------- */
/* circled score as a button (opens a light dialog with the full scores) */
.psi{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:0;background:none;border:0;font:500 14px/1.3 var(--sans);color:var(--muted);cursor:pointer;text-align:left}
.psi b{position:relative;display:grid;place-items:center;width:56px;height:40px;font-size:19px;font-weight:750;letter-spacing:-.03em;color:var(--text)}
.psi b::after{content:"";position:absolute;inset:0;background:var(--svg-ellipse) no-repeat center/100% 100%}
.psi:hover span{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.psi:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
/* light dialog: a white sheet instead of the black media modal */
dialog.wk-dialog--light{background:#fff;padding:46px 40px 34px;width:min(620px,94vw);box-shadow:var(--sh-sheet)}
/* a single testimonial column (next to a heading or in a side column) */
.notes--1{grid-template-columns:minmax(0,1fr);max-width:420px}
.notes--1>.nt:nth-child(n){margin-top:0}
/* play mark for light posters */
.play-mark--light::after{filter:invert(1)}
.play-mark--light::before{border-left-color:var(--text);filter:none}
/* a call-to-action sticky (one with a link) in a doc side column is noise once the column stacks above the text */
@media (max-width:1080px){.doc-aside .sticky:has(.tlink){display:none}}
@media (max-width:640px){
  dialog.wk-dialog--light{padding:52px 22px 26px}
}

/* Motion: max ONE orchestrated moment per page. Content is visible by default:
   only workshop.js adds .wk-motion to <html> (never under reduced motion), in the
   same run that sets up the observer that reveals it. No JS = everything visible. */
.wk-motion [data-reveal]:not(.is-in){opacity:0;transform:translateY(14px)}
.wk-motion [data-reveal="pin"]:not(.is-in){transform:translateY(-18px) rotate(-3deg)}
.wk-motion [data-reveal]{transition:opacity .6s ease var(--rd,0s),transform .7s var(--ease) var(--rd,0s)}
.wk-motion [data-reveal="draw"] path{transition:stroke-dashoffset 1.1s ease var(--rd,0s)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .nav-list{gap:18px}
  .split,.split--5-7,.split--7-5{grid-template-columns:minmax(0,1fr);gap:44px}
  .phero .wrap{grid-template-columns:minmax(0,1fr);gap:40px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 30px}
  .step::after{display:none}
  .step:nth-child(n){margin-top:0}
  .cta-box{grid-template-columns:minmax(0,1fr)}
  .logowall .wrap{grid-template-columns:minmax(0,1fr);gap:20px}
  .grid--4,.pkgs[style*="--cols:4"]{--cols:2}
  .doc{grid-template-columns:minmax(0,1fr)}
  .doc-aside{position:static;order:-1}
  .works--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .nav-list,.nav>.btn{display:none}
  .burger{display:inline-block}
  .nav.open .nav-list{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;left:18px;right:18px;top:86px;background:#fff;box-shadow:var(--sh-card);border:1.5px solid var(--text);padding:10px 20px 18px;z-index:50}
  .nav.open .nav-list>li{display:block}
  .nav.open .nav-list a{display:block;padding:11px 0;font-size:18px;border-bottom:1px solid var(--line)}
  .nav.open .nav-list>li>a[aria-current]::after{display:none}
  .nav.open .nav-list>li>a[aria-current]{color:var(--ink)}
  .nav.open .sub-toggle{display:none}
  .nav.open .subnav{display:block;position:static;width:auto;box-shadow:none;background:none;transform:none;padding:0 0 4px 18px}
  .nav.open .subnav::before,.nav.open .subnav::after{display:none}
  .nav.open .subnav a{font-size:16px;padding:9px 0;color:var(--muted)}
  .nav.open .nav-cta{display:block;margin-top:16px}
  .nav.open .nav-cta .btn{width:100%}
  .works,.works--3,.works--scatter{grid-template-columns:minmax(0,1fr);gap:56px}
  .works--scatter>*{grid-column:1/-1!important;margin-top:0!important}
  .notes{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 24px}
  .notes>.nt:nth-child(n){margin-top:0}
  .grid--3,.pkgs{--cols:2}
  .gallery{--cols:2}
  .foot .wrap{grid-template-columns:1fr 1fr}
  .ba{grid-template-columns:minmax(0,1fr);gap:18px}
  .ba-arrow{transform:rotate(90deg);height:60px}
}
@media (min-width:901px){.nav-cta{display:none}}
@media (max-width:640px){
  :root{--gutter:18px;--sec:88px}
  body{font-size:16px}
  .logo img{width:48px;height:48px}
  .lead{font-size:17px}
  .h1,h1{font-size:clamp(36px,10.6vw,52px)}
  .h2,h2{font-size:clamp(30px,8.6vw,44px)}
  .stats{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:18px 16px}
  .stats dd{font-size:30px}
  .stats dt{font-size:13px;line-height:1.3}
  .stats .since{top:-34px;font-size:19px}
  .sec-head{margin-bottom:34px}
  .actions .btn{flex:1 1 auto}
  .cap{grid-template-columns:1fr;gap:16px}
  .card-tabs{padding:62px 16px 22px}
  .card-tabs .all a{white-space:normal}
  .steps{grid-template-columns:1fr}
  .step{min-height:0}
  .sheet{padding:44px 22px 26px}
  .icard{padding-left:22px;padding-right:22px}
  .notes,.grid,.grid--2,.grid--3,.grid--4,.pkgs,.gallery{grid-template-columns:minmax(0,1fr)}
  .cta-box{padding:36px 22px 30px}
  .cta-box .anno{right:16px}
  .foot .wrap{grid-template-columns:1fr}
  .logos{gap:18px 26px}
  .logos img{height:28px}.logos img.tall{height:36px}
  .form{padding:40px 20px 28px}
  .form-row{grid-template-columns:minmax(0,1fr)}
  .faq{padding:4px 20px}
  .faq .ans{padding-right:0}
  .prose{font-size:17px}
  .doc .sheet{padding:44px 20px 36px}
  .top--lp .lp-contact a:not(.btn){display:none}
  .anno--left{padding-left:52px}
  .anno--left::before{width:44px}
  .phero+.logowall{margin-top:64px}
  .phero--center .stats{grid-template-columns:repeat(var(--n,3),minmax(0,1fr));width:auto;margin-top:44px}
  .phero--center .stats>div{padding:0 12px}
  /* corner tape stays inside the 18px gutter */
  .tape--corner-l{left:-10px}
  .tape--corner-r{right:-10px}
  /* scores: one row of four */
  .scores{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 6px}
  .score{font-size:12.5px;line-height:1.25}
  .score b{width:100%;max-width:74px;height:52px;font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s!important;transition-delay:0s!important;animation:none!important}
  .wk-motion [data-reveal]{opacity:1!important;transform:none!important}
}
@media print{
  body{background:#fff}
  .top .nav,.burger,.foot,.skip{display:none}
  .print,.sheet,.icard,.nt{box-shadow:none;transform:none!important}
}