/* UF Fatany — shared design system.
   Every page links this one file. Tokens first, then base, type, components,
   page furniture, and finally the few page-specific blocks. A new page should
   need markup only. */

/* ============ 1. TOKENS ============ */
:root{
  /* colour */
  --bg:#0a0a0a;
  --surface:#181716;                      /* one visible step above --bg, for cards and panels */
  /* gold: desaturated toward brass, so on black it reads as metal and is noticed second.
     It is only ever a 1px line, small text, an accent word, an icon stroke or a faint
     glow. Never a solid fill — a block of gold is what makes it look cheap. */
  --gold:#C2A36B;                         /* the standard gold */
  --gold-bright:#D9C08E;                  /* hover, focus, highlights only */
  --gold-deep:#8A7039;                    /* pressed, deeper accents */
  --gold-dim:rgba(194,163,107,0.6);       /* borders only: completed underlines */
  --gold-line:rgba(194,163,107,0.25);     /* borders and hairlines */
  --gold-fill:rgba(194,163,107,0.12);     /* the one fill allowed: a hovered or pressed button */
  --text:#F5F3EC;                         /* headings: near-white */
  --text-muted:#9698A0;                   /* body: cooler and quieter, so the gold carries the brightness */

  /* light */
  --glow-large:rgba(194,163,107,0.07);
  --glow-small:rgba(194,163,107,0.04);
  /* a hairline that fades out at both ends reads as lit rather than drawn */
  --hairline:linear-gradient(90deg,transparent,var(--gold-line) 25%,var(--gold-line) 75%,transparent);

  /* radius — two values only */
  --r-card:8px;
  --r-control:6px;

  /* spacing scale */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:128px;

  /* type */
  --serif:Fraunces,Georgia,'Times New Roman',serif;
  --sans:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  --wordmark:'Bodoni Moda',Fraunces,serif;

  /* motion */
  --ease:cubic-bezier(0.16,1,0.3,1);      /* entrances */
  --ease-soft:cubic-bezier(0.33,1,0.68,1); /* hovers and state changes: no sharp arrival */
  --hover:500ms var(--ease-soft);
  --focus:300ms var(--ease-soft);
  --state:600ms var(--ease-soft);         /* navigation */
  --enter:1400ms var(--ease);
  --line:1100ms var(--ease);              /* each headline line */
  --image:1600ms var(--ease);             /* frame wipe and image settle */
  --rule:1400ms var(--ease);
  --stagger:180ms;

  --header-h:72px;
  --wrap:1100px;
}

/* ============ 2. BASE ============ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);-webkit-text-size-adjust:100%}
body{position:relative;margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:1.0625rem;line-height:1.7}
img,video,svg{max-width:100%}
img,video{display:block}
a{color:inherit}
p,h1,h2,h3,h4,ul,ol,figure,blockquote{margin:0}
cite{font-style:normal}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px}
[hidden]{display:none !important}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--s3)}

/* ============ 3. TYPE SCALE ============ */
/* serif for anything asserted, sans for anything explained */
.display{font-family:var(--serif);font-weight:800;font-size:clamp(2.5rem,9vw,3.5rem);line-height:1.05;letter-spacing:-0.02em;color:var(--text)}
.h1{font-family:var(--serif);font-weight:800;font-size:clamp(1.875rem,5.5vw,2.5rem);line-height:1.15;letter-spacing:-0.01em;color:var(--text)}
.h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,4vw,1.75rem);line-height:1.25;color:var(--text)}
/* the same serif size as typed form text — for short titles inside cards and rows */
.h3{font-family:var(--serif);font-weight:700;font-size:1.25rem;line-height:1.35;color:var(--text)}
.body{font-size:1.0625rem;line-height:1.7;color:var(--text-muted)}
.lede{font-size:1.0625rem;line-height:1.7;color:var(--text-muted);max-width:56ch}
.small{font-size:0.875rem;line-height:1.6;color:var(--text-muted)}
.eyebrow{font-family:var(--sans);font-size:0.7rem;font-weight:500;line-height:1.4;text-transform:uppercase;letter-spacing:0.15em;color:var(--text-muted)}
.gold{color:var(--gold)}
/* the display heading's accent word, set as metal: alternating light and dark bands at
   110deg, with the highlight landing across the middle of the word. Solid gold is the
   fallback wherever text can't be clipped to a background. While a heading is split for
   its entrance, each word's inner span carries the same gradient. */
.metal{color:#C9A961}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .metal,.metal .lw-in{
    background:linear-gradient(110deg,#8A6F3C 0%,#C9A961 22%,#F0DFAE 42%,#C9A961 58%,#9B7D45 76%,#D9C38A 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
}
.label{margin-bottom:var(--s2)}
strong{color:var(--text);font-weight:600}

/* ============ 4. COMPONENTS ============ */

/* --- Button: two styles only --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);padding:var(--s2) var(--s3);border:1px solid var(--gold);border-radius:var(--r-control);
  max-width:100%;font-family:var(--sans);font-size:0.75rem;font-weight:600;line-height:1.2;letter-spacing:0.14em;text-transform:uppercase;text-decoration:none;text-align:left;overflow-wrap:anywhere;cursor:pointer;
  transition:background-color var(--hover),color var(--hover),border-color var(--hover),transform var(--hover),opacity var(--focus)}
/* Both styles are outlines: gold on black is the convention, a gold slab is not.
   Primary carries the full-gold border; secondary a hairline. On hover either one takes
   a 12% fill while its border and text lift to the bright gold. */
.btn-primary{background:transparent;color:var(--gold);border-color:var(--gold)}
.btn-secondary{background:transparent;color:var(--gold);border-color:var(--gold-line)}
.btn-primary:focus-visible,.btn-secondary:focus-visible{background:var(--gold-fill);color:var(--gold-bright);border-color:var(--gold-bright)}
/* a pressed toggle (filters, tabs) holds the hovered look */
.btn-secondary[aria-pressed="true"]{background:var(--gold-fill);color:var(--gold-bright);border-color:var(--gold-bright)}
.btn-sm{padding:var(--s1) var(--s2);font-size:0.6875rem;letter-spacing:0.12em}
/* a waiting button: hairline border, deeper gold text */
.btn:disabled{background:transparent;border-color:var(--gold-line);color:var(--gold-deep);cursor:not-allowed;transform:none}
.btn:active:not(:disabled){color:var(--gold-deep);border-color:var(--gold-deep)}
.btn .icon{width:14px;height:14px;flex-shrink:0;fill:currentColor}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s1)}

/* --- Card --- */
.card{background:var(--surface);border:1px solid var(--gold-line);border-radius:var(--r-card);padding:var(--s4)}
/* a whole card as one link: answers to hover like a project frame */
a.link-card{display:flex;flex-direction:column;gap:var(--s2);text-decoration:none;transition:border-color var(--hover),transform var(--hover)}
a.link-card:focus-visible{border-color:var(--gold-bright)}
.link-card .link-cta{margin-top:auto;padding-top:var(--s2);color:var(--gold)}

/* --- Hairline: every divider on the site --- */
.hairline{height:0;border:0;border-top:1px solid var(--gold-line);margin:0}

/* --- Tag: one pill style --- */
.tag{display:inline-block;padding:var(--s1) var(--s2);border:1px solid var(--gold-line);border-radius:var(--r-control);
  font-size:0.7rem;font-weight:500;line-height:1;text-transform:uppercase;letter-spacing:0.15em;color:var(--text-muted)}
.tag-row{display:flex;flex-wrap:wrap;gap:var(--s1)}

/* --- Screenshot: browser chrome frame --- */
.shot{display:block;border:1px solid var(--gold-line);border-radius:var(--r-card);overflow:hidden;background:var(--surface);text-decoration:none;
  transition:border-color var(--hover),transform var(--hover)}
a.shot:focus-visible{border-color:var(--gold)}
.shot img{transition:transform var(--hover)}
.shot-bar{display:flex;align-items:center;gap:var(--s1);padding:var(--s1) var(--s2);border-bottom:1px solid var(--gold-line)}
.shot-dot{width:8px;height:8px;border-radius:50%;border:1px solid var(--gold-line);flex-shrink:0}
.shot-url{min-width:0;margin-left:var(--s1);font-size:0.875rem;line-height:1.6;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center}

/* --- Media: any other image or video, framed the same way --- */
.media{border:1px solid var(--gold-line);border-radius:var(--r-card);overflow:hidden;background:var(--surface)}
.media img,.media video{width:100%;height:auto;aspect-ratio:11/8;object-fit:contain;background:var(--bg)}
.media.tall video{aspect-ratio:9/16}
.media figcaption{padding:var(--s1) var(--s2);border-top:1px solid var(--gold-line);font-size:0.875rem;line-height:1.6;color:var(--text-muted);text-align:center}
.media a{display:block}

/* --- Input: underline only, typed text in the serif --- */
.field{display:flex;flex-direction:column;gap:var(--s1)}
.field .eyebrow{transition:color var(--hover)}
.field:focus-within .eyebrow{color:var(--gold-bright)}
.field .req{color:var(--gold)}
.field .opt{text-transform:none;letter-spacing:0.02em}
.field-wrap{position:relative;display:block}
.field input,.field textarea{display:block;width:100%;margin:0;padding:var(--s1) var(--s4) var(--s1) 0;background:transparent;border:0;border-bottom:1px solid var(--gold-line);border-radius:0;outline:none;box-shadow:none;
  color:var(--text);caret-color:var(--gold);font-family:var(--serif);font-weight:600;font-size:1.25rem;line-height:1.6;-webkit-appearance:none;appearance:none;transition:border-color var(--focus)}
.field.is-filled input,.field.is-filled textarea{border-bottom-color:var(--gold-dim)}
.field textarea{resize:none;overflow:hidden;transition:border-color var(--focus),height 150ms ease}
.field input:-webkit-autofill{-webkit-text-fill-color:var(--text);caret-color:var(--gold);transition:background-color 99999s ease-out}
/* focus: a full-gold line drawn left to right over the resting underline */
.field-line{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold-bright);transform:scaleX(0);transform-origin:left center;opacity:0;pointer-events:none;transition:opacity var(--focus),transform 0s 300ms}
.field:focus-within .field-line{transform:scaleX(1);opacity:1;transition:transform var(--focus),opacity 0s}
.field-check{position:absolute;right:0;bottom:var(--s2);width:16px;height:16px;fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;pointer-events:none;transition:opacity var(--hover)}
.field.is-done .field-check{opacity:1}
.field-hint{font-size:0.875rem;line-height:1.6;color:var(--text-muted);text-transform:lowercase}
.field-hint:empty{display:none}
.char-count{position:absolute;right:0;top:calc(100% + var(--s1));font-size:0.7rem;letter-spacing:0.04em;color:var(--text-muted);opacity:0;pointer-events:none;transition:opacity var(--hover)}
.char-count.active{opacity:1}

/* ============ 5. MOTION ============ */
/* Entrances use --ease and take their time (reveals 1400ms, 180ms apart); hovers and
   state changes use the gentler --ease-soft. site.js marks the
   pieces of each .reveal section and removes the marks once its entrance has played,
   so nothing here outlives the animation. No piece runs more than two effects at once.

   Pieces, in document order with a 120ms stagger (--i):
     .reveal-item   text and blocks — fade in and rise 40px
     .reveal-lines  headings — each line rises from below its own mask, 140ms apart (--l)
     .reveal-image  framed images — the frame wipes open bottom to top while the image
                    inside settles from 1.06 to 1 */
.js .reveal:not(.is-ready){opacity:0}
.js .reveal .reveal-item{opacity:0;transform:translateY(40px)}
.js .reveal.in-view .reveal-item{opacity:1;transform:none;transition:opacity var(--enter),transform var(--enter);transition-delay:calc(var(--i,0) * var(--stagger))}

.lw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:0.16em;margin-bottom:-0.16em}
.lw-in{display:inline-block;transform:translateY(115%)}
.js .reveal.in-view .lw-in{transform:none;transition:transform var(--line);transition-delay:calc(var(--i,0) * var(--stagger) + var(--l,0) * 140ms)}

.js .reveal .reveal-image{clip-path:inset(100% 0 0 0)}
.js .reveal.in-view .reveal-image{clip-path:inset(0);transition:clip-path var(--image);transition-delay:calc(var(--i,0) * var(--stagger))}
.js .reveal .reveal-image img{opacity:0;transform:scale(calc(var(--rest,1) * 1.06))}
.js .reveal.in-view .reveal-image img{opacity:1;transform:scale(var(--rest,1));transition:opacity var(--image),transform var(--image);transition-delay:calc(var(--i,0) * var(--stagger))}
.is-animating{will-change:transform,opacity}

/* rules: every hairline draws itself from the left when its section enters */
.section::before,.closing::after,.site-footer::before,.rows li::before,.rows::after,.strike-list li::before,.strike-list::after,.stats::before,.stats::after,.delivered::before,.delivered::after,.step::after{
  content:'';position:absolute;left:0;right:0;height:1px;background:var(--hairline);transform-origin:left center;pointer-events:none}
.section::before,.closing::after,.site-footer::before,.rows li::before,.strike-list li::before,.stats::before,.delivered::before{top:0}
.rows::after,.strike-list::after,.stats::after,.delivered::after,.step::after{bottom:0}
.js .section.reveal:not(.in-view)::before,.js .site-footer.reveal:not(.in-view)::before,.js .closing.reveal:not(.in-view)::after,
.js .reveal:not(.in-view) :is(.rows li,.strike-list li,.stats,.delivered)::before,
.js .reveal:not(.in-view) :is(.rows,.strike-list,.stats,.delivered,.step)::after{transform:scaleX(0)}
.js .section.reveal.in-view::before,.js .site-footer.reveal.in-view::before,.js .closing.reveal.in-view::after,
.js .reveal.in-view :is(.rows li,.strike-list li,.stats,.delivered)::before,
.js .reveal.in-view :is(.rows,.strike-list,.stats,.delivered,.step)::after{transition:transform var(--rule);transition-delay:calc(var(--i,0) * var(--stagger))}
.step:hover::after{background:linear-gradient(90deg,transparent,var(--gold-bright) 25%,var(--gold-bright) 75%,transparent)}

/* depth: images drift at about 0.85x the scroll rate. site.js sets the standalone
   `translate` property, so this never fights a hover or entrance transform. */
.is-parallax{will-change:translate}

/* count-up numerals keep their width while they run */
[data-count]{font-variant-numeric:tabular-nums}

/* page transitions: a dissolve out before an internal link resolves, and in on arrival */
@keyframes pageIn{from{opacity:0}}
.js body{animation:pageIn 300ms var(--ease) backwards}
.is-leaving body{opacity:0;transition:opacity 300ms var(--ease)}

@keyframes spin{to{transform:rotate(360deg)}}

/* ============ 6. PAGE FURNITURE ============ */

/* --- Header: identical on every page --- */
/* transparent at the top of the page; once scrolled it gains a blurred backdrop and a
   hairline, shrinks about 15%, hides on the way down and returns on the way up. The
   shrink is done with transforms on the backdrop and contents, so nothing reflows. */
.site-header{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:var(--s2);height:var(--header-h);
  padding:0 max(var(--s3),calc((100% - var(--wrap)) / 2 + var(--s3)));transition:transform var(--state)}
.site-header::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(10,10,10,0.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  opacity:0;transform-origin:top center;transition:opacity var(--state),transform var(--state)}
.site-header::after{content:'';position:absolute;left:0;right:0;top:100%;height:1px;background:var(--hairline);opacity:0;transition:opacity var(--state),transform var(--state)}
.site-header.is-scrolled::before{opacity:1;transform:scaleY(0.85)}
.site-header.is-scrolled::after{opacity:1;transform:translateY(calc(var(--header-h) * -0.15))}
.site-header .brand,.site-nav{transition:transform var(--state)}
.site-header .brand{transform-origin:left center}
.site-nav{transform-origin:right center}
.site-header.is-scrolled .brand,.site-header.is-scrolled .site-nav{transform:translateY(calc(var(--header-h) * -0.075)) scale(0.85)}
.site-header.is-hidden{transform:translateY(-100%)}
.site-header:focus-within{transform:none}
/* reading progress: a 1px gold line along the bottom edge of the bar */
.nav-progress{position:absolute;left:0;right:0;top:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left center;opacity:0;pointer-events:none}
.site-header.is-scrolled .nav-progress{opacity:1;margin-top:calc(var(--header-h) * -0.15)}
.brand{font-family:var(--wordmark);font-style:italic;font-weight:500;font-size:1.5rem;line-height:1;letter-spacing:0.13em;text-transform:uppercase;color:var(--gold);text-decoration:none;white-space:nowrap}
.site-nav{display:flex;align-items:center;gap:var(--s1)}
.site-nav .btn{white-space:nowrap}

/* --- Hero: every page opens with eyebrow, display heading, one supporting line --- */
.hero{min-height:88vh;display:flex;align-items:center;padding:calc(var(--header-h) + var(--s4)) 0 var(--s4)}
.hero-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s5)}
.hero-copy{flex:0 1 640px;min-width:0}
.hero-copy .eyebrow{margin-bottom:var(--s2)}
.hero-copy .lede{margin-top:var(--s3)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.portrait-wrap{position:relative;flex:0 0 auto;width:380px;height:380px}
.portrait{width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--surface)}
/* the ring is drawn, so the opening sequence can trace it clockwise from the top */
.portrait-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotate(-90deg);pointer-events:none}
.portrait-ring circle{fill:none;stroke:var(--gold);stroke-width:0.3;stroke-opacity:0.25;stroke-dasharray:1;stroke-dashoffset:0}
.hero-rule{display:block;width:var(--s7);height:1px;margin-top:var(--s3);background:var(--gold);transform-origin:left center}
.portrait img{--rest:1.12;width:100%;height:100%;object-fit:cover;object-position:center 36%;transform:scale(var(--rest))}

/* hero facts: three outlined numerals down the right of a text-only hero */
.hero-facts{flex:0 0 auto;width:min(100%,360px)}
.hero-facts li{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--gold-line);border-image:var(--hairline) 1}
.hero-facts li:last-child{border-bottom:1px solid var(--gold-line)}
.hero-facts .stat-num{flex:0 0 var(--s5);text-align:center}

/* hero with a full-bleed image: type in the left 45%, the image fills the right 55% to the
   edge of the screen and the full height of the hero, dissolving into the type column */
.hero-media{position:relative;overflow:hidden}
.hero-media .hero-inner{position:relative;z-index:1}
.hero-media .hero-copy{flex:0 1 auto;max-width:calc(45vw - max(var(--s3),calc((100vw - var(--wrap)) / 2 + var(--s3))) - var(--s2))}
.hero-media .deliverables{margin-top:var(--s4)}
.hero-shot{position:absolute;top:0;right:0;bottom:0;width:55%}
.hero-shot-frame{position:absolute;inset:0;overflow:hidden}
/* taller than its frame, so the slow drift never shows an edge */
.hero-shot-frame img{position:absolute;left:0;top:-24px;width:100%;height:calc(100% + 48px);object-fit:cover;object-position:center 20%}
.hero-shot::after{content:'';position:absolute;top:0;bottom:0;left:0;width:15%;background:linear-gradient(90deg,var(--bg),transparent);pointer-events:none}

/* --- Section: same vertical padding site-wide, hairline between --- */
.section{position:relative;padding:var(--s7) 0}
.section-head{max-width:44rem;margin-bottom:var(--s4)}
.section-head > .eyebrow{margin-bottom:var(--s2)}
.section-head > .lede{margin-top:var(--s2)}
.section-foot{margin-top:var(--s4)}

/* split: the one 12-column grid. Eyebrow and heading take columns 1–4 and hold there
   while the content, in columns 6–12, scrolls past. Both start on the same line. */
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s3);align-items:start}
.split > :first-child{grid-column:1 / 5;position:sticky;top:calc(var(--header-h) + var(--s4));margin-bottom:0}
.split > :last-child{grid-column:6 / 13;min-width:0}

.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.stack{display:flex;flex-direction:column;gap:var(--s4)}

/* ruled rows: a title and one explaining line, divided by hairlines */
.rows{position:relative}
.rows li{position:relative;padding:var(--s3) 0}
.rows .h3 + .body{margin-top:var(--s1)}
.rows.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s4)}

/* --- Closing band: every page ends with it --- */
.closing{position:relative;overflow:hidden;padding:var(--s7) 0;background:var(--surface);text-align:center}
.closing .wrap{position:relative}
.closing .eyebrow{margin-bottom:var(--s2)}
.closing .btn{margin-top:var(--s4)}

/* --- Footer: identical on every page --- */
.site-footer{position:relative;padding:var(--s5) 0 var(--s4)}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3)}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--s3)}
.footer-links a{font-size:0.875rem;line-height:1.6;color:var(--text-muted);text-decoration:none;transition:color var(--hover)}
.footer-links a{position:relative}
.footer-links a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold-bright);transform:scaleX(0);transform-origin:left center;transition:transform var(--focus)}
.footer-links a:focus-visible{color:var(--gold-bright)}
.footer-note{width:100%;padding-top:var(--s3);border-top:1px solid var(--gold-line)}

/* ============ 7. SHARED BLOCKS ============ */

/* --- Contact: heading and direct address on the left, form card on the right --- */
.contact-aside{display:flex;flex-direction:column;gap:var(--s4)}
.contact-aside .section-head{margin-bottom:0}
.contact-or{display:flex;align-items:center;gap:var(--s2)}
.contact-or::before,.contact-or::after{content:'';flex:1;height:1px}
.contact-or::before{background:linear-gradient(90deg,transparent,var(--gold-line))}
.contact-or::after{background:linear-gradient(90deg,var(--gold-line),transparent)}
.email-block{display:flex;flex-direction:column;align-items:center;gap:var(--s2);padding:var(--s4) var(--s2);text-align:center;text-decoration:none;cursor:pointer;transition:border-color var(--hover)}
.email-block:hover,.email-block:focus-visible{border-color:var(--gold-bright)}
.email-mark{width:32px;height:22px;overflow:visible;fill:none;stroke:var(--gold);stroke-width:1;stroke-linejoin:miter;transition:stroke var(--hover)}
.email-block:hover .email-mark{stroke:var(--gold-bright)}
.email-address{max-width:100%;font-family:var(--sans);font-weight:300;font-size:0.875rem;line-height:1.6;letter-spacing:0.06em;color:var(--gold);overflow-wrap:anywhere}
.email-block .eyebrow{transition:color var(--hover)}
.email-block.is-copied .eyebrow{color:var(--gold)}

.form-card{position:relative}
.form-progress{position:absolute;top:-1px;left:var(--r-card);right:var(--r-card);height:1px;overflow:hidden;pointer-events:none}
.form-progress-fill{display:block;width:100%;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:left center;transition:transform var(--enter)}
.form{display:flex;flex-direction:column;gap:var(--s4);transition:opacity var(--focus)}
.form.is-leaving{opacity:0;pointer-events:none}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.form-submit{position:relative;align-self:flex-start}
.form-submit.is-sending:disabled{border-color:var(--gold);cursor:progress}
.form-submit .btn-label{display:block;transition:opacity var(--hover)}
.form-submit.is-sending .btn-label{opacity:0}
.form-submit .spinner{position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:1px solid var(--gold-line);border-top-color:var(--gold);opacity:0;transition:opacity var(--hover)}
.form-submit.is-sending .spinner{opacity:1;animation:spin 800ms linear infinite}
.form-error{font-family:var(--serif);font-weight:600;font-size:1.0625rem;line-height:1.5;color:var(--text)}
.form-error a{color:var(--gold)}
.form-card.is-done{display:flex;align-items:center;justify-content:center}
.form-done{text-align:center;outline:none;opacity:0;transition:opacity var(--enter)}
.form-done.active{opacity:1}
.form-done .small{margin-top:var(--s2)}

/* --- Gallery: tabbed 2x2 grids with click-to-expand --- */
.tabs{display:flex;flex-wrap:wrap;gap:var(--s1);margin-bottom:var(--s3)}
.gallery-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.gallery-shot{position:relative;border:1px solid var(--gold-line);border-radius:var(--r-card);overflow:hidden;background:var(--surface);cursor:zoom-in;transition:border-color var(--hover)}
.gallery-shot:hover,.gallery-shot:focus-visible{border-color:var(--gold-bright)}
.gallery-shot img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:top center}
.gallery-shot::after{content:'';position:absolute;right:var(--s1);bottom:var(--s1);width:24px;height:24px;border:1px solid var(--gold-line);border-radius:var(--r-control);
  background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2A36B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4H4v4M16 4h4v4M4 16v4h4M20 16v4h-4'/%3E%3C/svg%3E") center/14px no-repeat}
.lightbox{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:var(--s3);background:rgba(10,10,10,0.94);opacity:0;pointer-events:none;transition:opacity var(--hover)}
.lightbox.active{opacity:1;pointer-events:auto}
.lightbox[hidden]{display:flex !important}
.lightbox-img{max-width:min(88vw,560px);max-height:80vh;width:auto;height:auto;border:1px solid var(--gold-line);border-radius:var(--r-card);background:var(--bg)}
.lightbox .btn{position:absolute}
.lightbox-close{top:var(--s3);right:var(--s3)}
.lightbox-prev{left:var(--s3);top:50%}
.lightbox-next{right:var(--s3);top:50%}

/* ============ 8. PAGE-SPECIFIC BLOCKS ============ */

/* --- Home --- */
.strike-list{position:relative}
.strike-list li{position:relative;padding:var(--s2) 0}
/* the problems arrive unstruck; each is crossed out only once "I fix all of it." comes
   into view, so the strike reads as the answer rather than the setup */
.strike{position:relative}
.strike::after{content:'';position:absolute;left:0;right:0;top:55%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left center;transition:transform 400ms var(--ease)}
.strike-list li:nth-child(2) .strike::after{transition-delay:120ms}
.strike-list li:nth-child(3) .strike::after{transition-delay:240ms}
.strike-list li:nth-child(4) .strike::after{transition-delay:360ms}
.is-struck .strike::after,html:not(.js) .strike::after{transform:scaleX(1)}
.audience{margin-top:var(--s2);font-style:italic;color:var(--gold-deep)}
.quote{margin-top:var(--s5);padding-left:var(--s3);border-left:1px solid var(--gold-line)}
.quote .eyebrow{display:block;margin-top:var(--s2)}
.assert-list li + li{margin-top:var(--s1)}
.assert-list .h2{color:var(--text-muted)}
.assert-list .gold{color:var(--gold)}
.assert-note{margin-top:var(--s4);max-width:52ch}
/* a stat cell that carries a word, not a number, keeps the numerals' outline and weight */
.stat-word{font-size:clamp(1.75rem,5vw,2.5rem);line-height:1.4}
.terms{margin-top:var(--s5)}
.terms li + li{margin-top:var(--s1)}
.terms .small{margin-top:var(--s3)}
.stats{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.stat{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s4) var(--s3)}
.stat + .stat{border-left:1px solid var(--gold-line)}
.stat-num{font-family:var(--serif);font-weight:800;font-size:clamp(2.5rem,9vw,3.5rem);line-height:1;letter-spacing:-0.01em;color:transparent;-webkit-text-stroke:1px var(--gold)}
.site-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2);margin-top:var(--s2)}
.site-card .small{margin-top:var(--s1)}
.site-card > .btn{margin-top:var(--s2)}
.stars{font-size:1.0625rem;letter-spacing:0.4em;color:var(--gold);margin-bottom:var(--s3)}
.testimonial cite{display:block;margin-top:var(--s3)}

/* --- Portfolio: an index, not a set of case studies --- */
.hero-compact{min-height:45vh}
.filters{display:flex;flex-wrap:nowrap;gap:var(--s1);margin-bottom:var(--s5);overflow-x:auto}
.filters .btn{flex-shrink:0;white-space:nowrap}
/* the rail is the only framing device here: a --gold-line spine with a solid gold node at
   each entry, and no borders on the entries themselves */
.timeline{position:relative}
.timeline::before{content:'';position:absolute;top:0;bottom:0;left:8px;border-left:1px solid var(--gold-line)}
.timeline-item{position:relative;padding-left:var(--s5);scroll-margin-top:calc(var(--header-h) + var(--s3));transition:opacity var(--focus)}
.timeline-item + .timeline-item{margin-top:var(--s6)}
.timeline-item::before{content:'';position:absolute;left:4px;top:var(--s1);width:9px;height:9px;border-radius:50%;border:1px solid var(--gold);background:var(--bg)}
.timeline.filtering .timeline-item{opacity:0.3}
.timeline.filtering .timeline-item.match{opacity:1}
/* image 55% / 5% gap / text 40%, the text centred against the whole image column.
   Odd entries put the image left, even entries right; the rail stays put on the left. */
.index-row{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,40fr);column-gap:5%;align-items:center}
.timeline-item:nth-child(even) .index-row{grid-template-columns:minmax(0,40fr) minmax(0,55fr)}
.timeline-item:nth-child(even) .index-media{order:2}
.index-row .media img{aspect-ratio:16/10}
/* supporting work: up to four quarter-size frames under the main one */
.thumb-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin-top:var(--s2)}
.thumb{display:block;border:1px solid var(--gold-line);border-radius:var(--r-control);overflow:hidden;background:var(--surface);transition:border-color var(--hover)}
a.thumb:focus-visible{border-color:var(--gold-bright)}
.thumb img{opacity:0.86;transition:opacity var(--hover)}
.thumb img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center}
.thumb img.centre{object-position:center}
.thumb .shot-bar{gap:calc(var(--s1) / 2);padding:calc(var(--s1) / 2) var(--s1)}
.thumb .shot-dot{width:4px;height:4px}
.index-info{display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start}
/* client mark: a small light tile, so pale logo artwork reads on the dark page */
.index-logo{width:40px;height:40px;padding:calc(var(--s1) / 2);border-radius:var(--r-control);background:var(--text)}
.index-logo img{width:100%;height:100%;object-fit:contain}
.index-info .body{max-width:46ch}
.index-info .h2 a{text-decoration:none;transition:color var(--hover)}
.index-info .h2 a:focus-visible{color:var(--gold-bright)}
/* metadata, not a second sentence: smaller, wider, deeper gold, under its own rule */
.deliverables{align-self:stretch;padding-top:var(--s2);border-top:1px solid var(--gold-line);border-image:var(--hairline) 1;font-size:0.68rem;font-weight:500;line-height:1.6;text-transform:uppercase;letter-spacing:0.18em;color:var(--gold-deep)}

/* --- IZZ Habitus case study --- */
.delivered{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:var(--s5)}
.delivered li{padding:var(--s3) var(--s2)}
.delivered li + li{border-left:1px solid var(--gold-line)}
/* the client's own colours need a light ground to be seen properly */
.light-panel{border:1px solid var(--gold-line);border-radius:var(--r-card);background:#F5F0E9}
.lockup{display:flex;align-items:center;justify-content:center;padding:var(--s6) var(--s4);margin-bottom:var(--s4)}
.lockup img{width:min(100%,640px);height:auto}
.swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);margin-top:var(--s2)}
.swatch-chip{height:96px;border:1px solid var(--gold-line);border-radius:var(--r-control);margin-bottom:var(--s1)}
.specimen{display:block;font-size:1.75rem;line-height:1.25;color:var(--text)}
.specimen.georgia{font-family:Georgia,'Times New Roman',serif;font-weight:700;letter-spacing:0.02em}
.specimen.inter{font-family:Inter,sans-serif;font-weight:700;font-style:italic;letter-spacing:-0.02em}
.type-row{margin-top:var(--s2)}
.type-row + .type-row{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--gold-line)}
.shot-caption{margin-top:var(--s1);text-align:center}
.print-ground{display:flex;flex-direction:column;gap:var(--s4);padding:var(--s4);background:#DDD5C9}
.print-row{display:grid;gap:var(--s4);align-items:center;justify-items:center}
.print-row.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.print-row.tall{grid-template-columns:1fr 1fr 1.25fr}
.print-piece{width:100%;text-align:center}
.print-piece img{width:100%;height:auto;margin:0 auto var(--s2);box-shadow:0 16px 40px rgba(60,40,30,0.28)}
.print-row.tall .print-piece img{max-width:230px}
.print-row.tall .print-piece.wide img{max-width:300px}
.print-piece .eyebrow{color:#6B5F52}

/* --- Start a project --- */
/* the process: a spine runs down through the numerals and fills with scroll; only the
   step nearest the middle of the screen reads at full strength */
.steps{position:relative;--spine:0}
.steps::before,.steps::after{content:'';position:absolute;top:0;bottom:0;left:40px;pointer-events:none}
.steps::before{border-left:1px solid var(--gold-line)}
.steps::after{border-left:1px solid var(--gold);transform:scaleY(var(--spine));transform-origin:top center}
.step{position:relative;display:grid;grid-template-columns:80px minmax(0,1fr);column-gap:var(--s3);align-items:start;padding:var(--s4) var(--s2) var(--s4) 0}
.step:first-child{padding-top:var(--s1)}
.step-num{position:relative;z-index:1;justify-self:center;padding:var(--s1) 0;background:var(--bg);font-family:var(--serif);font-weight:800;font-size:clamp(2.5rem,5vw,3.5rem);line-height:0.9;letter-spacing:-0.01em;color:transparent;-webkit-text-stroke:1px var(--gold-deep);transition:-webkit-text-stroke-color var(--focus)}
.step-body{opacity:0.4;transition:opacity var(--focus)}
.step-body .body{margin-top:var(--s1);max-width:50ch}
.step.is-active .step-num{-webkit-text-stroke-color:var(--gold)}
.step.is-active .step-body{opacity:1}
html:not(.js) .step-num{-webkit-text-stroke-color:var(--gold)}
html:not(.js) .step-body{opacity:1}
.need-icon{display:block;width:32px;height:32px;margin-bottom:var(--s3);fill:none;stroke:var(--gold);stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.need-card{padding:var(--s3)}
.need-card .small{margin-top:var(--s1)}

/* ============ 9. LIGHT ============ */
/* Light comes from sources, not from a general lift; the black stays black.
   1. One large warm glow per page, off the top-right of the hero and bleeding out of
      frame — light from a window you can't see. */
body::before{content:'';position:absolute;z-index:-1;top:0;right:0;width:min(100%,760px);height:640px;pointer-events:none;
  background:radial-gradient(450px circle at calc(100% - 110px) 90px,var(--glow-large),transparent)}
.has-glow body::before,.js body.has-intro::before{display:none}
.glow{position:fixed;z-index:-1;top:0;right:0;width:min(100%,760px);height:760px;pointer-events:none;
  background:radial-gradient(450px circle at calc(100% - 110px) 90px,var(--glow-large),transparent);transition:transform 2400ms var(--ease-soft)}
/* 2. One much smaller glow behind the last call to action. Nothing in between. */
.closing::before,.cta-glow::after{content:'';position:absolute;left:50%;top:50%;width:480px;height:480px;margin:-240px 0 0 -240px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,var(--glow-small),transparent)}
.cta-glow{position:relative}
.cta-glow::after{z-index:-1;left:70%}
/* 3. Every horizontal divider fades out at both ends. */
.hairline,.footer-note,.type-row + .type-row{border-image:var(--hairline) 1}
/* 4. Fine grain on the background layer only — it sits behind all content, so it never
   desaturates buttons, links, headings or gold text. */
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0.02;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 4 0 0 0 -2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ============ 10. OPENING SEQUENCE (home hero) ============ */
/* One choreographed entrance, about 2.2s, everything overlapping — a room being lit.
   The body starts as .has-intro.intro-wait; site.js swaps intro-wait for intro-play once
   the fonts are in, and removes all three classes when it has played. Scrolling is never
   held. Each step is listed with the moment it begins.

   0ms     the light comes up: the glow fades in and grows from 0.8 */
@keyframes glowUp{from{opacity:0;scale:0.8}}
.has-intro .glow{transform-origin:100% 0;animation:glowUp 1200ms var(--ease) backwards}

/* waiting states */
.js .intro-wait .site-header{opacity:0}
.js .intro-wait .hero .eyebrow{opacity:0;letter-spacing:0.5em}
/* until the headline has been split into lines it is simply held back; after that each
   line waits below its own mask */
.js .intro-wait .hero .display:not(:has(.lw)){opacity:0}
.js .intro-wait .hero .lw-in{transform:translateY(110%);filter:blur(6px)}
.js .intro-wait .hero .lede{opacity:0;transform:translateY(20px)}
.js .intro-wait .hero-rule{transform:scaleX(0)}
.js .intro-wait .hero-actions .btn{opacity:0;transform:translateY(16px)}
.js .intro-wait .portrait{opacity:0;transform:scale(0.92)}
.js .intro-wait .portrait img{transform:scale(calc(var(--rest) * 1.12))}
.js .intro-wait .portrait-ring circle{stroke-dashoffset:1;stroke-opacity:1}
/* the accent word arrives cream like the rest of the line; its gold warms in afterwards */
.has-intro .metal .lw-in{position:relative}
.has-intro .metal .lw-in::after{content:attr(data-text);position:absolute;left:0;top:0;color:var(--text);-webkit-text-fill-color:var(--text);opacity:1}

/* 200ms   the eyebrow fades in as its letters draw together */
.intro-play .hero .eyebrow{transition:opacity 900ms var(--ease) 200ms,letter-spacing 900ms var(--ease) 200ms}
/* 450ms   the headline, line by line, each rising out of its own mask and sharpening */
.intro-play .hero .lw-in{transform:none;filter:none;transition:transform 1100ms var(--ease),filter 1100ms var(--ease);transition-delay:calc(450ms + var(--l,0) * 140ms)}
/* 900ms   the accent word warms from cream to its gold */
.intro-play .metal .lw-in::after{opacity:0;transition:opacity 800ms var(--ease-soft) 900ms}
/* 700ms   the portrait settles like a lens: its circle grows as the image inside eases back */
.intro-play .portrait{transition:transform 1400ms var(--ease) 700ms,opacity 900ms var(--ease) 700ms}
.intro-play .portrait img{transition:transform 1400ms var(--ease) 700ms}
/* 900ms   a gold ring is traced clockwise from the top, then settles to its resting weight */
@keyframes ringDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ringRest{from{stroke-opacity:1}to{stroke-opacity:0.25}}
.intro-play .portrait-ring circle{animation:ringDraw 1200ms var(--ease) 900ms backwards,ringRest 700ms var(--ease-soft) 2100ms backwards}
/* 1100ms  the subhead */
.intro-play .hero .lede{transition:opacity 800ms var(--ease) 1100ms,transform 800ms var(--ease) 1100ms}
/* 1300ms  the rule beneath it draws left to right */
.intro-play .hero-rule{transition:transform 900ms var(--ease) 1300ms}
/* 1450ms  the buttons, 160ms apart */
.intro-play .hero-actions .btn{transition:opacity 700ms var(--ease),transform 700ms var(--ease);transition-delay:1450ms}
.intro-play .hero-actions .btn:nth-child(2){transition-delay:1610ms}
/* 1700ms  the navigation arrives last */
.intro-play .site-header{transition:opacity 600ms var(--ease-soft) 1700ms}

/* ============ 11. HOVER (desktop pointers only) ============ */
@media (hover:hover) and (pointer:fine){
  /* project frames: lift 4px, border to full gold, the screenshot eases to 1.02 inside */
  a.shot:hover,.site-card:hover .shot{transform:translateY(-4px);border-color:var(--gold)}
  a.shot:hover img,.site-card:hover .shot img{transform:scale(1.02)}
  a.link-card:hover{transform:translateY(-4px);border-color:var(--gold)}
  /* a portfolio entry answers as one object: its image eases to 1.02, its thumbnails
     brighten and its button's border lifts, all on the same 500ms */
  .index-row .index-media > :first-child img{transition:transform var(--hover)}
  .index-row .btn{transition:border-color var(--hover),color var(--hover),background-color var(--hover),transform var(--hover)}
  .index-row:hover .index-media > :first-child{transform:none}
  .index-row:hover .index-media > :first-child img{transform:scale(1.02)}
  .index-row:hover .thumb img{opacity:1}
  .index-info .h2 a:hover{color:var(--gold-bright)}
  .index-row:hover .btn{border-color:var(--gold-bright);color:var(--gold-bright)}
  /* buttons: lift 1px, a 12% fill, border and text to the bright gold */
  .btn-primary:hover:not(:disabled),.btn-secondary:hover:not(:disabled){background:var(--gold-fill);color:var(--gold-bright);border-color:var(--gold-bright);transform:translateY(-1px)}
  /* links: the underline draws in from the left */
  .footer-links a:hover{color:var(--gold-bright)}
  .footer-links a:hover::after{transform:scaleX(1)}
  /* thumbnails: a lift in brightness, no movement */
  .thumb:hover img{opacity:1}
  a.thumb:hover{border-color:var(--gold-bright)}
}

/* ============ 12. RESPONSIVE ============ */
@media (max-width:900px){
  .hero{min-height:auto;padding:calc(var(--header-h) + var(--s5)) 0 var(--s5)}
  .hero-inner{flex-direction:column;align-items:flex-start;gap:var(--s4)}
  .hero-copy{flex:0 0 auto;width:100%}
  /* the image moves below the type, full width, with the fade along its top edge */
  .hero-media{flex-direction:column;align-items:stretch;padding-bottom:0}
  .hero-media .hero-copy{max-width:none}
  .hero-shot{position:relative;width:100%;height:60vh;margin-top:var(--s5)}
  .hero-shot::after{top:0;bottom:auto;left:0;right:0;width:auto;height:15%;background:linear-gradient(180deg,var(--bg),transparent)}
  .portrait-wrap{width:240px;height:240px;align-self:center}
  .split{grid-template-columns:1fr;row-gap:var(--s4)}
  .split > :first-child,.split > :last-child{grid-column:1 / -1}
  .split > :first-child{position:static}
  .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .delivered{grid-template-columns:1fr}
  .delivered li + li{border-left:0;border-top:1px solid var(--gold-line);border-image:var(--hairline) 1}
  .print-row.tall{grid-template-columns:1fr 1fr}
  .print-row.tall .print-piece.wide{grid-column:1 / -1}
}
@media (max-width:640px){
  :root{--header-h:64px}
  .wrap{padding:0 var(--s2)}
  .site-header{padding:0 var(--s2)}
  .brand{font-size:1rem;letter-spacing:0.1em}
  .site-nav .nav-home{display:none}
  .site-nav .btn-sm{padding:var(--s1);font-size:0.625rem;letter-spacing:0.06em}
  .section{padding:var(--s5) 0}
  .closing{padding:var(--s6) 0}
  .card{padding:var(--s3)}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%}
  .grid-2,.grid-3,.grid-4,.form-row,.index-row,.timeline-item:nth-child(even) .index-row,.rows.two{grid-template-columns:1fr}
  .stat{padding:var(--s3) var(--s1)}
  .timeline-item{padding-left:var(--s4)}
  .filters .btn{padding:var(--s1);font-size:0.5625rem;letter-spacing:0.04em}
  .timeline-item + .timeline-item{margin-top:var(--s5)}
  .index-row{row-gap:var(--s3)}
  .timeline-item:nth-child(even) .index-media{order:0}
  .print-row.cards{grid-template-columns:1fr}
  .print-ground{padding:var(--s3)}
  .steps::before,.steps::after{left:24px}
  .step{grid-template-columns:48px minmax(0,1fr);column-gap:var(--s2);padding:var(--s3) var(--s1) var(--s3) 0}
  .step-num{font-size:2rem}
  .footer-inner{flex-direction:column;align-items:flex-start}
}

/* reduced motion: no reveals, masks, wipes, scale-ins, parallax, drift or dissolve —
   content is simply there. Only colour transitions on hover and focus remain. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,.js .reveal .reveal-item,.js .reveal .reveal-image,.js .reveal .reveal-image img,.lw-in{opacity:1 !important;transform:none !important;clip-path:none !important;transition:none !important}
  .js .reveal::before,.js .reveal::after,.js .reveal *::before,.js .reveal *::after{transform:none !important;transition:none !important}
  .js body{animation:none}
  .js body.has-intro::before{display:block}
  .js .intro-wait .site-header,.js .intro-wait .hero *{opacity:1 !important;transform:none !important;filter:none !important}
  .js .intro-wait .hero .eyebrow{letter-spacing:0.15em !important}
  .js .intro-wait .portrait img{transform:scale(var(--rest)) !important}
  .js .intro-wait .portrait-ring circle{stroke-dashoffset:0 !important;stroke-opacity:0.25 !important}
  .has-intro .metal .lw-in::after{display:none}
  .is-leaving body{opacity:1;transition:none}
  .glow{transition:none}
  .site-header,.site-header::before,.site-header::after,.site-header .brand,.site-nav{transition:none}
  .site-header.is-hidden{transform:none}
  .btn:hover,.btn:focus-visible,a.shot:hover,a.link-card:hover,.site-card:hover .shot,a.shot:hover img,.site-card:hover .shot img,.index-row:hover .index-media > :first-child img{transform:none !important}
  .field-line,.field:focus-within .field-line{transition:none}
  .field textarea{transition:border-color var(--focus)}
  .step-num{-webkit-text-stroke-color:var(--gold)}
  .strike::after{transform:scaleX(1);transition:none}
  .step-body{opacity:1}
  .form,.form-done,.form-progress-fill{transition:none}
}