/* =============================================================
   IT GURUJAN — BLUEPRINT EDITION
   A draftsman's cyanotype sheet. Deep blue paper, pale linework,
   amber annotation pencil. Everything draws itself on as you scroll.
   Sheet A-01 · Rev. 3
   ============================================================= */

/* -------------------------------------------------------------
   00 · TOKENS
   ------------------------------------------------------------- */
:root{
  /* paper */
  --sheet:        #0d3363;
  --sheet-deep:   #09244a;
  --sheet-lift:   rgba(255,255,255,.035);

  /* ink — all checked for contrast against --sheet */
  --paper:        #f4f8ff;   /* headings          ~15.4:1 */
  --line:         #dce9ff;   /* strong linework   ~12.9:1 */
  --body:         #c4d8f5;   /* body copy          ~8.6:1 */
  --dim:          #8fb0da;   /* mono micro-labels  ~5.5:1 */

  /* rules */
  --rule:         rgba(198,224,255,.30);
  --rule-soft:    rgba(198,224,255,.15);
  --rule-strong:  rgba(220,233,255,.55);

  /* annotation pencil */
  --accent:       #f5c26b;
  --accent-dim:   rgba(245,194,107,.55);
  --accent-wash:  rgba(245,194,107,.12);

  /* type */
  --f-display: 'Saira Condensed', 'Arial Narrow', system-ui, sans-serif;
  --f-body:    'Inter', system-ui, -apple-system, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* metrics */
  --pad-x: 22px;
  --header-h: 62px;
  --ease: cubic-bezier(.16,.84,.3,1);
}

/* -------------------------------------------------------------
   01 · RESET / BASE
   ------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }

html{
  background: var(--sheet);
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}

body{
  background: transparent;
  color: var(--body);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.62;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-anchor: none;
}

img, svg{ max-width:100%; }
img{ display:block; height:auto; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol{ list-style: none; }
::selection{ background: var(--accent); color: var(--sheet-deep); }

:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

h1,h2,h3,h4{
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--paper);
  line-height: 1.06;
  letter-spacing: .01em;
}

.wrap{
  width: 100%;
  max-width: 1220px;
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* -------------------------------------------------------------
   02 · THE SHEET — grid paper, wash, drafting crosshair
   ------------------------------------------------------------- */
.sheet-grid{
  position: fixed;
  inset: -14% 0;
  z-index: -2;
  pointer-events: none;
  background-color: var(--sheet);
  background-image:
    linear-gradient(rgba(168,206,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,206,255,.055) 1px, transparent 1px),
    linear-gradient(rgba(176,212,255,.105) 1px, transparent 1px),
    linear-gradient(90deg, rgba(176,212,255,.105) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
  background-position: center top;
  transform: translate3d(0, var(--gy, 0px), 0);
  will-change: transform;
}

.sheet-wash{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(115% 78% at 12% -6%, rgba(126,183,255,.17), transparent 58%),
    radial-gradient(100% 72% at 92% 104%, rgba(6,22,48,.62), transparent 66%);
  box-shadow: inset 0 0 200px rgba(5,18,40,.70);
}
.sheet-wash::after{
  content:'';
  position: absolute;
  inset: 0;
  opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* drafting crosshair that follows the pointer */
.drafting-cursor{
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease;
}
.drafting-cursor.on{ opacity: 1; }
.dc-h, .dc-v{ position:absolute; background: rgba(245,194,107,.24); }
.dc-h{
  left:0; right:0; height:1px; top:0;
  transform: translate3d(0, -100px, 0);
  background: linear-gradient(90deg, transparent, rgba(245,194,107,.26) 12%, rgba(245,194,107,.26) 88%, transparent);
}
.dc-v{
  top:0; bottom:0; width:1px; left:0;
  transform: translate3d(-100px, 0, 0);
  background: linear-gradient(180deg, transparent, rgba(245,194,107,.26) 12%, rgba(245,194,107,.26) 88%, transparent);
}
.dc-ring{
  position:absolute; top:0; left:0;
  width:24px; height:24px; margin:-12px 0 0 -12px;
  border:1px solid rgba(245,194,107,.42);
  border-radius:50%;
  transform: translate3d(-100px, -100px, 0);
}

/* -------------------------------------------------------------
   03 · SHEET INTRO — the drawing being unrolled
   ------------------------------------------------------------- */
.sheet-intro{ display:none; }
.js .sheet-intro{
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 900;
  align-items: center;
  justify-content: center;
  background: var(--sheet-deep);
  background-image:
    linear-gradient(rgba(168,206,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,206,255,.06) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px;
  clip-path: inset(0 0 0 0);
  transition: clip-path .95s cubic-bezier(.76,0,.16,1);
}
.js .sheet-intro.done{ clip-path: inset(100% 0 0 0); }
.js .sheet-intro.gone{ display:none; }

.si-inner{ text-align:center; padding: 24px; }
.si-mark{ width: 108px; height: 108px; margin-inline:auto; display:block; overflow:visible; }
.si-mark path{ fill:none; stroke: var(--line); stroke-width: 1.4; stroke-linecap: round; }
/* pre-hide the compass rose before the pen-draw engine takes over:
   a 1000-unit dash with a 1000-unit offset parks every path (all far
   shorter than 1000 user units) in the pattern's empty half. */
.js .si-mark path{ stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.si-mark .si-cross{ stroke: rgba(198,224,255,.4); stroke-width: 1; }
.si-mark .si-needle{ stroke: var(--accent); stroke-width: 1.5; fill: rgba(245,194,107,.16); }
/* the needle only gets inked in once its outline has been traced */
.js .si-mark .si-needle{ fill: transparent; transition: fill .7s ease; }
.js .si-mark.is-drawn .si-needle{ fill: rgba(245,194,107,.16); }
.si-label{
  margin-top: 20px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: .42em;
  text-indent: .42em;
  color: var(--paper);
}
.si-sub{
  margin-top: 8px;
  font-family: var(--f-mono);
  font-size: .64rem;
  letter-spacing: .26em;
  color: var(--accent);
}
.si-label, .si-sub{ animation: si-fade .8s .35s both ease-out; }
@keyframes si-fade{ from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform:none; } }

/* -------------------------------------------------------------
   04 · HEADER
   ------------------------------------------------------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11,42,82,.90);
  -webkit-backdrop-filter: blur(9px) saturate(1.15);
  backdrop-filter: blur(9px) saturate(1.15);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 3px 0 -2px var(--rule-soft);
}
.header-row{
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--header-h);
}

.logo{ display:flex; align-items:center; gap:9px; flex-shrink:0; }
.logo img{ width:26px; height:26px; }
.logo-text{
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .19em;
  color: var(--paper);
}
.logo-sheet{
  font-family: var(--f-mono);
  font-size: .56rem;
  letter-spacing: .16em;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  padding: 2px 5px;
  line-height: 1;
}

.main-nav{ display:none; margin-left:auto; align-items:center; gap: 26px; }
.nav-link{
  position: relative;
  font-family: var(--f-mono);
  font-size: .69rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 6px 0;
  transition: color .25s ease;
}
.nav-link::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0;
  height:1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav-link:hover, .nav-link.active{ color: var(--paper); }
.nav-link:hover::after, .nav-link.active::after{ transform: scaleX(1); }

.nav-cta{
  font-family: var(--f-mono);
  font-size: .69rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  padding: 8px 14px;
  transition: background .25s ease, color .25s ease;
}
.nav-cta:hover{ background: var(--accent); color: var(--sheet-deep); }

/* editions picker */
.theme-picker{ position: relative; margin-left: auto; }
.theme-toggle{
  display:flex; align-items:center; gap:7px;
  border:1px solid var(--rule);
  padding: 7px 11px;
  color: var(--body);
  transition: border-color .25s ease, color .25s ease;
}
.theme-toggle:hover{ border-color: var(--accent-dim); color: var(--accent); }
.tt-label{ font-family: var(--f-mono); font-size:.62rem; letter-spacing:.18em; }

.theme-menu{
  position:absolute; top: calc(100% + 12px); right: 0;
  width: 232px;
  max-height: min(70vh, 480px);
  overflow-y: auto;
  background: var(--sheet-deep);
  border: 1px solid var(--rule-strong);
  box-shadow: 0 22px 50px -20px rgba(3,12,28,.9);
  padding: 8px;
  opacity:0; visibility:hidden;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s var(--ease), visibility .25s;
}
.theme-menu.open{ opacity:1; visibility:visible; transform:none; }
.tm-head{
  font-family: var(--f-mono);
  font-size:.58rem; letter-spacing:.24em;
  color: var(--accent);
  padding: 6px 8px 10px;
  border-bottom: 1px dashed var(--rule);
  margin-bottom: 6px;
}
.theme-option{
  display:flex; align-items:center; gap:10px;
  font-family: var(--f-display);
  font-size: .95rem;
  letter-spacing: .08em;
  color: var(--body);
  padding: 7px 8px;
  transition: background .2s ease, color .2s ease;
}
.theme-option .to-no{
  font-family: var(--f-mono);
  font-size:.6rem;
  letter-spacing:.05em;
  color: var(--dim);
  min-width: 18px;
}
.theme-option:hover{ background: rgba(255,255,255,.06); color: var(--paper); }
.theme-option.active{ background: var(--accent-wash); color: var(--accent); }
.theme-option.active .to-no{ color: var(--accent); }

/* hamburger */
.nav-toggle{
  display:flex; flex-direction:column; gap:5px;
  padding: 6px; flex-shrink:0;
}
.nav-toggle span{
  width: 22px; height: 1.5px;
  background: var(--line);
  transition: transform .3s var(--ease), opacity .2s ease;
}
.nav-toggle.open span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

/* mobile panel */
.mobile-nav{
  position: fixed;
  top: var(--header-h);
  left:0; right:0; bottom:0;
  z-index: 99;
  background: var(--sheet-deep);
  border-top: 1px solid var(--rule);
  padding: 26px var(--pad-x) 48px;
  overflow-y: auto;
  transform: translateX(102%);
  transition: transform .45s var(--ease);
}
.mobile-nav.open{ transform: none; }
.mobile-nav > a{
  display:block;
  font-family: var(--f-display);
  font-size: 1.45rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--paper);
  padding: 13px 0;
  border-bottom: 1px dashed var(--rule-soft);
}
.mobile-nav > a:hover{ color: var(--accent); }
.mobile-nav-themes{ margin-top: 26px; }
.mobile-nav-label{
  display:block;
  font-family: var(--f-mono);
  font-size:.6rem; letter-spacing:.2em;
  color: var(--accent);
  margin-bottom: 12px;
}
.mobile-nav-themes a{
  display:inline-block;
  font-family: var(--f-mono);
  font-size:.7rem; letter-spacing:.1em;
  color: var(--body);
  border:1px solid var(--rule-soft);
  padding: 6px 10px;
  margin: 0 6px 6px 0;
}
.mobile-nav-themes a:hover{ border-color: var(--accent-dim); color: var(--accent); }

/* -------------------------------------------------------------
   05 · SHARED DRAFTING PARTS
   ------------------------------------------------------------- */

/* --- FIG. tag --- */
.fig-tag{
  display:flex; align-items:center; gap:12px;
  font-family: var(--f-mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.ft-rule{
  flex: 0 1 96px;
  height: 1px;
  background: var(--accent-dim);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .8s .1s var(--ease);
}
.fig-tag.is-visible .ft-rule{ transform: scaleX(1); }

/* --- dimension rule:  |<--- LABEL --->|  --- */
.dimrule, .dim-top{
  display:flex; align-items:center; gap:12px;
  width:100%;
  max-width: 460px;
  margin: 18px 0 22px;
}
.dim-top{ margin: 0 0 12px; max-width:none; }

.dimrule .arm, .dim-top .arm{
  position:relative;
  flex: 1 1 auto;
  height: 1px;
  min-width: 24px;
  background: var(--rule-strong);
  transform: scaleX(0);
  transition: transform .85s var(--ease);
}
.arm-l{ transform-origin: right center; }
.arm-r{ transform-origin: left center; }
.arm::after{                       /* extension tick at the outer end */
  content:'';
  position:absolute; top:-5px;
  width:1px; height:11px;
  background: var(--rule-strong);
  opacity: 0;
  transition: opacity .3s .55s ease;
}
.arm-l::after{ left:0; }
.arm-r::after{ right:0; }
.ah{                               /* arrow head */
  position:absolute; top:50%;
  width:0; height:0;
  margin-top:-4px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  opacity: 0;
  transition: opacity .3s .5s ease;
}
.arm-l .ah{ left:0; border-right: 9px solid var(--rule-strong); }
.arm-r .ah{ right:0; border-left: 9px solid var(--rule-strong); }

.dimrule-label{
  flex: 0 0 auto;
  font-family: var(--f-mono);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .55s .2s ease;
}
.dimrule.is-drawn .arm,
[data-reveal].is-visible .dim-top .arm{ transform: scaleX(1); }
.dimrule.is-drawn .ah, .dimrule.is-drawn .arm::after, .dimrule.is-drawn .dimrule-label,
[data-reveal].is-visible .dim-top .ah,
[data-reveal].is-visible .dim-top .arm::after,
[data-reveal].is-visible .dim-top .dimrule-label{ opacity: 1; }

/* --- registration crosses --- */
.reg{
  position:absolute;
  width: 28px; height: 28px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(198,224,255,.26);
  opacity: .8;
  pointer-events: none;
}
.reg::before, .reg::after{ content:''; position:absolute; background: var(--accent-dim); }
.reg::before{ left:50%; top:-6px; width:1px; height: calc(100% + 12px); margin-left:-.5px; }
.reg::after{ top:50%; left:-6px; height:1px; width: calc(100% + 12px); margin-top:-.5px; }
.reg-tl{ top: 26px; left: 10px; }
.reg-tr{ top: 26px; right: 10px; }
.reg-bl{ bottom: 26px; left: 10px; }
.reg-br{ bottom: 26px; right: 10px; }

/* --- drawn frames (span.frame > svg) --- */
.frame{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 0;
}
.frame svg{ width:100%; height:100%; display:block; overflow:visible; }
.frame path{
  fill:none;
  stroke: var(--rule-strong);
  stroke-width: 1;
  transition: stroke .35s ease;   /* JS overrides this while drawing, then hands it back */
}

/* --- buttons --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  position: relative;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 14px 26px;
  border: 1px solid var(--accent);
  transition: background .3s ease, color .3s ease, transform .3s var(--ease);
}
.btn-primary{ background: var(--accent); color: var(--sheet-deep); }
.btn-primary:hover{ background: #ffd489; border-color:#ffd489; transform: translateY(-2px); }
.btn-ghost{ background: transparent; color: var(--line); border-color: var(--rule-strong); }
.btn-ghost:hover{ background: rgba(220,233,255,.10); color: var(--paper); transform: translateY(-2px); }

/* --- chips & tags --- */
.chip-row, .tag-row{ display:flex; flex-wrap:wrap; gap: 8px; }
.chip, .tag{
  font-family: var(--f-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--body);
  border: 1px solid var(--rule-soft);
  background: rgba(255,255,255,.03);
  padding: 6px 11px;
  transition: border-color .25s ease, color .25s ease;
}
.chip:hover, .tag:hover{ border-color: var(--accent-dim); color: var(--accent); }
.tag{ font-size:.6rem; padding: 5px 9px; }
.tag-row{ margin-top: 16px; }

/* -------------------------------------------------------------
   06 · SECTION SHELL
   ------------------------------------------------------------- */
main, .site-header, .site-footer{ position: relative; z-index: 1; }

.section{
  position: relative;
  padding: 92px 0;
}
.section-alt{
  background: var(--sheet-lift);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.section-alt::before, .section-alt::after,
.contact-section::before, .contact-section::after{
  content:'';
  position:absolute;
  width: 15px; height: 15px;
  background:
    linear-gradient(var(--accent-dim), var(--accent-dim)) center/1px 100% no-repeat,
    linear-gradient(var(--accent-dim), var(--accent-dim)) center/100% 1px no-repeat;
  opacity: .8;
}
.section-alt::before, .contact-section::before{ top: 16px; left: 16px; }
.section-alt::after, .contact-section::after{ bottom: 16px; right: 16px; }

.sec-head{ max-width: 780px; margin-bottom: 46px; }
.sec-title{
  font-size: clamp(1.95rem, 5.4vw, 3.1rem);
  letter-spacing: .015em;
  color: var(--paper);
  padding-bottom: 4px;
}
.sec-sub{
  margin-top: 6px;
  color: var(--body);
  font-size: 1.01rem;
  max-width: 62ch;
}
.dimrule-sec{ margin: 14px 0 18px; }

/* -------------------------------------------------------------
   07 · HERO / TITLE SHEET
   ------------------------------------------------------------- */
.hero{
  position: relative;
  overflow: hidden;
  padding: 74px 0 66px;
}
.hero-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 46px;
  align-items: center;
}
.hero-title{
  font-size: clamp(2.5rem, 8.4vw, 4.9rem);
  line-height: .96;
  letter-spacing: .005em;
  color: var(--paper);
  padding-bottom: 6px;
}
.hero-title em{
  font-style: italic;
  color: var(--accent);
  position: relative;
}
.hero-title em::after{
  content:'';
  position:absolute; left:0; right:-.06em; bottom: .06em;
  height:1px;
  background: repeating-linear-gradient(90deg, var(--accent-dim) 0 6px, transparent 6px 10px);
}
.hero-sub{
  color: var(--body);
  font-size: 1.05rem;
  max-width: 58ch;
  margin-bottom: 22px;
}
.chip-row{ margin-bottom: 28px; }
.cta-row{ display:flex; flex-wrap:wrap; gap: 14px; }

.spec-strip{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1px;
  margin-top: 40px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
}
.spec-strip li{
  background: rgba(9,36,74,.55);
  padding: 14px 14px 12px;
}
.ss-num{
  display:block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.65rem;
  letter-spacing: .04em;
  color: var(--paper);
  line-height: 1.1;
}
.ss-lab{
  display:block;
  margin-top: 3px;
  font-family: var(--f-mono);
  font-size: .56rem;
  letter-spacing: .18em;
  color: var(--dim);
}

/* --- the exploded figure --- */
.hero-fig{ position: relative; }
.fig-cap{
  font-family: var(--f-mono);
  font-size: .58rem;
  letter-spacing: .2em;
  color: var(--dim);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--rule-soft);
}
.fig-svg{ width:100%; height:auto; display:block; overflow: visible; }

.fig-svg .plate{ fill:none; stroke: var(--line); stroke-width: 1.3; stroke-linejoin: round; }
.fig-svg .plate-hot{ stroke: var(--accent); stroke-width: 1.6; }
.fig-svg .fig-guides path{ stroke: rgba(198,224,255,.42); stroke-width: .9; stroke-dasharray: 5 5; fill:none; }
.fig-svg .fig-dim path{ stroke: rgba(198,224,255,.62); stroke-width: 1; fill:none; }
.fig-svg .fig-leaders path{ stroke: rgba(198,224,255,.5); stroke-width: 1; fill:none; }
.fig-svg .fig-compass path{ stroke: rgba(198,224,255,.5); stroke-width: 1; fill:none; }
.fig-svg .fig-compass path:nth-child(2){ stroke: var(--accent); fill: rgba(245,194,107,.18); }
.js .fig-svg .fig-compass path:nth-child(2){ fill: transparent; transition: fill .8s ease; }
.js .fig-svg.is-drawn .fig-compass path:nth-child(2){ fill: rgba(245,194,107,.18); }
.fig-svg .fig-t{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  fill: var(--line);
  stroke: none;
}
.fig-svg .fig-t-hot{ fill: var(--accent); }
.fig-svg .fig-t-dim{ fill: var(--dim); font-size: 10.5px; letter-spacing:.18em; }
.fig-svg .fig-t-sm{ fill: var(--dim); font-size: 10px; }

.fig-legend{
  display: grid;
  gap: 6px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--rule-soft);
}
.fig-legend li{
  display:flex; align-items:center; gap: 10px;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--body);
}
.fig-legend span{
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  padding: 1px 5px;
  font-size: .6rem;
  line-height: 1.5;
}

/* -------------------------------------------------------------
   08 · SERVICES — detail drawings
   ------------------------------------------------------------- */
.detail-grid{
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 18px;
}
.detail-card{
  position: relative;
  padding: 24px 22px 26px;
  background: rgba(9,36,74,.42);
  transition: transform .4s var(--ease), background .4s ease;
}
.detail-card > *:not(.frame){ position: relative; z-index: 1; }
.detail-card:hover{ transform: translateY(-4px); background: rgba(13,52,102,.6); }
.detail-card:hover .frame path{ stroke: var(--accent-dim); }
.detail-card::after{                    /* corner tick, bottom-right */
  content:'';
  position:absolute; right: 9px; bottom: 9px;
  width: 11px; height: 11px;
  background:
    linear-gradient(var(--accent-dim), var(--accent-dim)) center/1px 100% no-repeat,
    linear-gradient(var(--accent-dim), var(--accent-dim)) center/100% 1px no-repeat;
  opacity: 0;
  transition: opacity .35s ease;
}
.detail-card:hover::after{ opacity: 1; }

.dc-head{
  display:flex; align-items:center; justify-content: space-between;
  font-family: var(--f-mono);
  font-size: .58rem;
  letter-spacing: .18em;
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 1px dashed var(--rule-soft);
}
.dc-no{ color: var(--accent); }
.dc-scale{ color: var(--dim); }
.status-dev{ color: var(--accent); border:1px solid var(--accent-dim); padding: 2px 6px; line-height:1.4; }

.dc-icon{ display:block; width: 40px; height: 40px; margin-bottom: 14px; }
.dc-icon svg{ width:100%; height:100%; display:block; }
.dc-icon path{
  fill:none;
  stroke: var(--line);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .3s ease;
}
.detail-card:hover .dc-icon path{ stroke: var(--accent); }

.detail-card h3{ font-size: 1.24rem; letter-spacing: .03em; margin-bottom: 8px; }
.detail-card p{ font-size: .92rem; color: var(--body); }

/* -------------------------------------------------------------
   09 · CHAT BOT — spec sheet
   ------------------------------------------------------------- */
.spec-grid{
  display:grid;
  grid-template-columns: minmax(0,1fr);
  gap: 40px;
}
.lead{
  font-size: 1.08rem;
  color: var(--line);
  margin-bottom: 26px;
}
.lead em{ color: var(--accent); font-style: italic; }

.spec-list li{
  display:grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px dashed var(--rule-soft);
}
.sl-no{
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  width: 28px; height: 28px;
  display:flex; align-items:center; justify-content:center;
}
.spec-list strong{
  display:block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: .04em;
  color: var(--paper);
  margin-bottom: 2px;
}
.spec-list p{ font-size: .9rem; color: var(--body); }

.spec-visual{ position: relative; }
.plate-frame{
  position: relative;
  padding: 14px;
  background: rgba(9,36,74,.42);
}
.plate-frame > *:not(.frame){ position:relative; z-index:1; }
.main-shot{
  width: 100%;
  cursor: zoom-in;
  filter: saturate(.62) contrast(1.03) brightness(.96);
  transition: filter .5s ease, transform .5s var(--ease);
  border: 1px solid var(--rule-soft);
}
.main-shot:hover{ filter:none; }
.thumb-row{ display:flex; flex-wrap:wrap; gap: 8px; margin-top: 10px; }
.thumb-row img{
  flex: 1 1 76px;
  max-width: 132px;
  height: 58px;
  object-fit: cover;
  object-position: top left;
  cursor: zoom-in;
  border: 1px solid var(--rule-soft);
  filter: saturate(.55) brightness(.9);
  transition: filter .4s ease, border-color .3s ease;
}
.thumb-row img:hover{ filter:none; border-color: var(--accent-dim); }
.plate-note{
  margin-top: 12px;
  text-align: center;
  font-family: var(--f-mono);
  font-size: .55rem;
  letter-spacing: .22em;
  color: var(--dim);
}

/* -------------------------------------------------------------
   10 · WORK — as-built drawings
   ------------------------------------------------------------- */
.proj{ margin-bottom: 58px; }
.proj:last-child{ margin-bottom: 0; }

.proj-strip{
  display:flex;
  flex-wrap: wrap;
  border: 1px solid var(--rule);
  background: rgba(9,36,74,.5);
  margin-bottom: 22px;
}
.ps-cell{
  flex: 1 1 150px;
  padding: 10px 14px;
  border-right: 1px solid var(--rule-soft);
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--line);
}
.ps-cell:last-child{ border-right: none; }
.ps-cell b{
  display:block;
  font-weight: 500;
  font-size: .54rem;
  letter-spacing: .2em;
  color: var(--dim);
  margin-bottom: 3px;
}
.ps-status{ color: var(--accent); }
.ps-live::before, .ps-current::before{
  content:'';
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background: var(--accent);
  margin-right: 7px;
  vertical-align: 1px;
}
.ps-live::before{ animation: pulse-dot 2.2s infinite ease-in-out; }
@keyframes pulse-dot{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

.proj-body{
  display:grid;
  grid-template-columns: minmax(0,1fr);
  gap: 26px;
}
.proj-visual{
  position: relative;
  padding: 12px;
  background: rgba(9,36,74,.35);
}
.proj-visual > *:not(.frame){ position:relative; z-index:1; }
.proj-text h3{ font-size: 1.5rem; letter-spacing: .03em; margin-bottom: 10px; }
.proj-text > p{ color: var(--body); font-size: .96rem; }

.schedule{ margin-top: 18px; }
.schedule > div{
  display:grid;
  grid-template-columns: minmax(0,1fr);
  gap: 2px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--rule-soft);
}
.schedule dt{
  font-family: var(--f-mono);
  font-size: .56rem;
  letter-spacing: .2em;
  color: var(--dim);
}
.schedule dd{ font-size: .9rem; color: var(--line); }

.proj-link{ margin-top: 14px; }
.proj-link a{
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--accent);
  border-bottom: 1px dashed var(--accent-dim);
  padding-bottom: 2px;
}
.proj-link a:hover{ border-bottom-style: solid; }

/* -------------------------------------------------------------
   11 · APPS
   ------------------------------------------------------------- */
.app-grid{
  display:grid;
  grid-template-columns: minmax(0,1fr);
  gap: 18px;
}
.app-card{
  position: relative;
  padding: 22px 20px 24px;
  background: rgba(9,36,74,.42);
  transition: transform .4s var(--ease);
}
.app-card > *:not(.frame){ position:relative; z-index:1; }
.app-card:hover{ transform: translateY(-4px); }
.app-card:hover .frame path{ stroke: var(--accent-dim); }

.device{
  position: relative;
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 10px;
  margin-bottom: 16px;
  background: rgba(6,22,48,.5);
}
.device::before{                       /* handset speaker slot */
  content:'';
  position:absolute; top: 4px; left:50%;
  transform: translateX(-50%);
  width: 42px; height: 3px;
  border-radius: 2px;
  background: var(--rule);
}
.device img{
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  object-position: top center;
  border-radius: 8px;
  cursor: zoom-in;
  filter: saturate(.65) brightness(.95);
  transition: filter .45s ease;
}
.device img:hover{ filter:none; }

.app-card h3{ font-size: 1.3rem; letter-spacing:.03em; margin-bottom: 6px; }
.app-card > p{ font-size: .92rem; color: var(--body); margin-bottom: 14px; }
.mini-list li{
  position: relative;
  padding: 7px 0 7px 16px;
  font-size: .85rem;
  color: var(--body);
  border-bottom: 1px dashed var(--rule-soft);
}
.mini-list li:last-child{ border-bottom: none; }
.mini-list li::before{
  content:'';
  position:absolute; left:0; top: 16px;
  width: 8px; height:1px;
  background: var(--accent-dim);
}

/* -------------------------------------------------------------
   12 · PROCESS — construction sequence
   ------------------------------------------------------------- */
.steps{ max-width: 840px; }
.step{
  position: relative;
  display:grid;
  grid-template-columns: 34px minmax(0,1fr);
  column-gap: 20px;
  padding-bottom: 36px;
}
.step:last-child{ padding-bottom: 0; }
.step-rail{
  position:absolute;
  left: 16.5px;
  top: 40px;
  bottom: 0;
  width: 1px;
  background: repeating-linear-gradient(180deg, var(--rule-strong) 0 6px, transparent 6px 12px);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .9s var(--ease);
}
.step:last-child .step-rail{ display:none; }
.step.is-drawn .step-rail{ transform: scaleY(1); }

.step-node{ display:block; width: 34px; height: 34px; }
.step-node svg{ width:100%; height:100%; display:block; }
.step-node path{ fill:none; stroke: var(--accent); stroke-width: 1.4; }

.step-no{
  font-family: var(--f-mono);
  font-size: .6rem;
  letter-spacing: .24em;
  color: var(--accent);
  margin-bottom: 4px;
}
.step-body h3{ font-size: 1.4rem; letter-spacing:.03em; margin-bottom: 8px; }
.step-body p{ color: var(--body); font-size: .96rem; max-width: 62ch; }

/* -------------------------------------------------------------
   13 · ABOUT
   ------------------------------------------------------------- */
.about-grid{
  display:grid;
  grid-template-columns: minmax(0,1fr);
  gap: 38px;
}
.portrait-frame{
  position: relative;
  padding: 12px;
  background: rgba(9,36,74,.42);
}
.portrait-frame > *:not(.frame){ position:relative; z-index:1; }
.portrait-frame img{
  width: 100%;
  /* cyanotype treatment — a drafting reference photo, colour on hover */
  filter: grayscale(1) contrast(1.06) sepia(.45) hue-rotate(172deg) saturate(2.4) brightness(.94);
  transition: filter .6s ease;
  border: 1px solid var(--rule-soft);
}
.portrait-frame img:hover{ filter:none; }
.portrait-name{
  margin-top: 14px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .08em;
  color: var(--paper);
}
.portrait-role{
  font-family: var(--f-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  color: var(--dim);
  margin-top: 3px;
}

.about-copy p{ color: var(--body); margin-bottom: 16px; }
.note{
  position: relative;
  margin-top: 26px;
  padding: 4px 0 4px 24px;
}
.note-leader{
  position:absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--accent-dim);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .8s .15s var(--ease);
}
.note-leader::after{
  content:'';
  position:absolute; top: 0; left:0;
  width: 12px; height:1px;
  background: var(--accent-dim);
}
[data-reveal].is-visible .note-leader, .note.is-visible .note-leader{ transform: scaleY(1); }
.note p{
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.32;
  letter-spacing: .02em;
  color: var(--paper);
}
.note cite{
  display:block;
  margin-top: 10px;
  font-style: normal;
  font-family: var(--f-mono);
  font-size: .58rem;
  letter-spacing: .2em;
  color: var(--accent);
}

/* -------------------------------------------------------------
   14 · CONTACT — the title block
   ------------------------------------------------------------- */
.titleblock{
  position: relative;
  background: rgba(9,36,74,.55);
  margin-bottom: 30px;
}
.titleblock > *:not(.frame){ position:relative; z-index:1; }
.tb-row{ display:flex; flex-wrap: wrap; }
.tb-row-head{ background: rgba(255,255,255,.035); }
.tb-row-foot{ background: rgba(6,22,48,.4); }
.tb-cell{
  flex: 1 1 220px;
  padding: 15px 18px;
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  min-width: 0;
}
.tb-row:last-child .tb-cell{ border-bottom: none; }
.tb-row > .tb-cell:last-child{ border-right: none; }
.tb-wide{ flex: 2 1 320px; }
.tb-lab{
  display:block;
  font-family: var(--f-mono);
  font-size: .55rem;
  letter-spacing: .24em;
  color: var(--dim);
  margin-bottom: 6px;
}
.tb-val{
  display:block;
  font-size: .94rem;
  color: var(--paper);
  overflow-wrap: anywhere;
}
.tb-big{
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 4.2vw, 2.3rem);
  letter-spacing: .12em;
  color: var(--accent);
  line-height: 1.1;
}
.tb-link{ transition: background .25s ease; }
.tb-link:hover{ background: var(--accent-wash); }
.tb-link:hover .tb-val{ color: var(--accent); }

.tb-row-foot .tb-cell{ padding: 12px 16px; }
.tb-mini{ flex: 1 1 118px; }
.tb-mini .tb-val{
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--line);
}
.tb-stamp{
  display:flex; align-items:center; justify-content:center;
  flex: 1 1 150px;
}
.tb-stamp .tb-val{
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--accent);
  border: 2px solid var(--accent-dim);
  padding: 5px 12px;
  transform: rotate(-6deg);
  opacity: .92;
}

.contact-cta{ display:flex; flex-wrap:wrap; gap: 14px; }

/* -------------------------------------------------------------
   15 · FOOTER
   ------------------------------------------------------------- */
.site-footer{
  padding: 34px 0 44px;
  border-top: 1px solid var(--rule);
  background: rgba(6,22,48,.55);
}
.footer-top{
  display:flex; flex-wrap:wrap; align-items:center; justify-content: space-between;
  gap: 20px;
}
.footer-brand{ display:flex; align-items:center; gap: 10px; }
.footer-brand span{
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--paper);
}
.theme-switcher{ display:flex; flex-wrap:wrap; align-items:center; gap: 8px 14px; }
.ts-lab{
  font-family: var(--f-mono);
  font-size: .55rem;
  letter-spacing: .24em;
  color: var(--accent);
}
.theme-switcher a{
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  color: var(--dim);
  transition: color .25s ease;
}
.theme-switcher a:hover{ color: var(--paper); }
.ts-current{
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  padding: 3px 8px;
}
.footer-line{
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--rule-soft);
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--dim);
  text-align: center;
}

/* -------------------------------------------------------------
   16 · LIGHTBOX
   ------------------------------------------------------------- */
.lightbox{
  display:none;
  position: fixed;
  inset: 0;
  z-index: 500;
  padding: 24px;
  align-items:center; justify-content:center;
  background: rgba(6,22,48,.965);
  background-image:
    linear-gradient(rgba(168,206,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,206,255,.05) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.lightbox.open{ display:flex; }
.lightbox-content{
  display:flex; flex-direction:column; align-items:center;
  max-width: min(94vw, 1000px);
  max-height: 92vh;
}
.lightbox img{
  max-width: min(94vw, 1000px);
  max-height: 72vh;
  width: auto;
  border: 1px solid var(--rule-strong);
  padding: 8px;
  background: rgba(9,36,74,.6);
}
.lightbox-info{ margin-top: 16px; text-align:center; max-width: 720px; }
.lightbox-info h4{
  font-size: 1.15rem;
  letter-spacing: .06em;
  color: var(--paper);
  margin-bottom: 4px;
}
.lightbox-info p{ font-size: .86rem; color: var(--body); }
.lightbox-counter{
  display:block;
  margin-top: 8px;
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .2em;
  color: var(--accent);
}
.lightbox-close, .lightbox-nav{
  position: absolute;
  width: 44px; height: 44px;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid var(--rule-strong);
  background: rgba(9,36,74,.7);
  color: var(--line);
  font-size: 1.3rem;
  line-height: 1;
  z-index: 2;
  transition: border-color .25s ease, color .25s ease;
}
.lightbox-close:hover, .lightbox-nav:hover{ border-color: var(--accent); color: var(--accent); }
.lightbox-close{ top: 18px; right: 18px; }
.lightbox-nav{ top: 50%; transform: translateY(-50%); font-size: 1.8rem; }
.lightbox-prev{ left: 14px; }
.lightbox-next{ right: 14px; }

/* -------------------------------------------------------------
   17 · MOTION — reveal + pen-draw engines
   ------------------------------------------------------------- */
.js [data-reveal]{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s var(--ease), transform .75s var(--ease), background-color .4s ease;
}
.js [data-reveal].is-visible{ opacity: 1; transform: none; }

/* headings wipe on like a pen sweeping across the sheet */
.js .hero-title[data-reveal], .js .sec-title[data-reveal]{
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition: opacity .5s ease, clip-path 1.05s var(--ease);
}
.js .hero-title[data-reveal].is-visible, .js .sec-title[data-reveal].is-visible{
  clip-path: inset(0 0 0 0);
}
/* ...trailed by a ruled underline */
.js .sec-title[data-reveal]{ position: relative; }
.js .sec-title[data-reveal]::after{
  content:'';
  position:absolute; left:0; bottom:-6px;
  width: 100%; height:1px;
  background: linear-gradient(90deg, var(--accent-dim), rgba(198,224,255,.12));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s .25s var(--ease);
}
.js .sec-title[data-reveal].is-visible::after{ transform: scaleX(1); }

/* the reveal engine owns `transform` on every [data-reveal] element, so
   card hover-lifts have to be restated here to out-specify .is-visible */
.js .detail-card.is-visible:hover,
.js .app-card.is-visible:hover{ transform: translateY(-4px); }

/* SVG pen-draw: hidden until JS has primed the dash offsets */
.js svg[data-draw]{ opacity: 0; }
.js svg[data-draw].draw-ready{ opacity: 1; transition: opacity .2s ease; }
.js svg[data-draw] text,
.js svg[data-draw] .fig-fills,
.js svg[data-draw] .fig-guides{
  opacity: 0;
  transition: opacity .8s ease;
}
.js svg[data-draw].is-drawn text,
.js svg[data-draw].is-drawn .fig-fills,
.js svg[data-draw].is-drawn .fig-guides{ opacity: 1; }

/* -------------------------------------------------------------
   18 · RESPONSIVE
   ------------------------------------------------------------- */
@media (min-width: 560px){
  :root{ --pad-x: 28px; }
  .spec-strip{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  .fig-legend{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 20px; }
  .schedule > div{ grid-template-columns: 130px minmax(0,1fr); gap: 14px; align-items: baseline; }
}

@media (min-width: 700px){
  .detail-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .app-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .section{ padding: 104px 0; }
  .reg-tl, .reg-tr{ top: 34px; }
  .reg-bl, .reg-br{ bottom: 34px; }
  .reg-tl, .reg-bl{ left: 22px; }
  .reg-tr, .reg-br{ right: 22px; }
}

@media (min-width: 900px){
  .proj-body{ grid-template-columns: minmax(0,1.12fr) minmax(0,1fr); gap: 38px; align-items: start; }
  .proj:nth-of-type(even) .proj-visual{ order: 2; }
  .about-grid{ grid-template-columns: 320px minmax(0,1fr); gap: 46px; align-items: start; }
  .about-portrait{ position: sticky; top: 92px; }
  .app-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .spec-grid{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 52px; align-items: start; }
  .spec-visual{ position: sticky; top: 92px; }
}

@media (min-width: 980px){
  .main-nav{ display:flex; }
  .nav-toggle{ display:none; }
  .mobile-nav{ display:none; }
  .theme-picker{ margin-left: 0; }
  .detail-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .hero{ padding: 90px 0 84px; }
  .hero-grid{ grid-template-columns: minmax(0,1.02fr) minmax(0,1fr); gap: 54px; }
  .fig-legend{ display:none; }
  .sec-head{ margin-bottom: 54px; }
}

@media (min-width: 1200px){
  .hero-grid{ gap: 70px; }
}

/* the exploded figure drops its callouts on small screens — the
   printed legend below carries the same labels */
@media (max-width: 899px){
  .fig-leaders, .fig-leader-text, .fig-compass{ display:none; }
}

/* -------------------------------------------------------------
   19 · REDUCED MOTION
   ------------------------------------------------------------- */
@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;
  }
  .js [data-reveal]{ opacity: 1; transform: none; clip-path: none; }
  .js .hero-title[data-reveal], .js .sec-title[data-reveal]{ clip-path: none; }
  .js .sec-title[data-reveal]::after,
  .ft-rule, .step-rail, .note-leader,
  .dimrule .arm, .dim-top .arm{ transform: none; }
  .ah, .arm::after, .dimrule-label{ opacity: 1; }
  .js svg[data-draw]{ opacity: 1; }
  .js svg[data-draw] text,
  .js svg[data-draw] .fig-fills,
  .js svg[data-draw] .fig-guides{ opacity: 1; }
  .drafting-cursor{ display:none; }
  .sheet-grid{ transform: none; }
}

/* -------------------------------------------------------------
   20 · PRINT — it is a drawing, after all
   ------------------------------------------------------------- */
@media print{
  .sheet-grid, .sheet-wash, .drafting-cursor, .sheet-intro,
  .nav-toggle, .theme-picker, .mobile-nav, .lightbox{ display:none !important; }
  html, body{ background:#fff; color:#111; }
  .js [data-reveal]{ opacity:1; transform:none; clip-path:none; }
  .js svg[data-draw]{ opacity:1; }
}