/* =========================================================================
   BlackDevil Creative — site.css · GENERATO, non modificare a mano.

   Il sorgente e' _assets/css/site.css, ed e' pieno di commenti: le trappole
   pagate, i numeri misurati, il perche' di ogni scelta. Qui non ci sono,
   perche' sarebbero 30 KB scaricati a ogni prima visita e letti da nessuno.

   **I numeri di riga combaciano con il sorgente.** Ogni commento non e' stato
   tolto ma sostituito da altrettante righe vuote: quello che devtools segnala
   alla riga N sta alla riga N di _assets/css/site.css. Si diagnostica sul
   file giusto, che era l'unica obiezione a questa strada.

   Si rigenera con `python3 tools/stamp-assets.py`.
   ========================================================================= */




































@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-variable.woff2?v=8020337e") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}










@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-variable.woff2?v=92e4f6cf") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-variable.woff2?v=5d91eb5d") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}





:root {
  
  --bd-black: #0a0a0f;        
  --bd-glow: #33ccff;         
  --bd-blue: #1269ff;         
  --bd-aqua: #00ffc6;         
  --bd-coral: #ff5e33;        
  --bd-grey: #2a2a2a;         
  --bd-white: #ffffff;

  


  --bd-glow-deep: #1d728f;

  


  --n-900: #0a0a0f;
  --n-850: #101017;
  --n-800: #16161f;
  --n-700: #1e1e28;
  --n-650: #26262f;
  --n-600: #2a2a2a;
  --n-500: #3a3a44;
  --n-450: #5a5a66;
  --n-400: #6b6b78;
  --n-350: #7a7a88;
  --n-300: #8e8e9c;
  --n-200: #a9a9b5;
  --n-100: #c7c7d1;
  --n-50:  #e3e3e8;
  --n-25:  #f4f4f6;
  --n-0:   #ffffff;

  
  --font-body: "Satoshi", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  



  --font-display: var(--font-body);
  --display-stretch: normal;   
  --display-weight: 900;       
  --display-tracking: -0.01em;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  --fs-md:   clamp(1.125rem, 1.08rem + 0.23vw, 1.25rem);
  






















































  --fs-lg:   clamp(1.1875rem, 1.11rem + 0.33vw, 1.5rem);
  --fs-xl:   clamp(1.1875rem, 1.05rem + 0.55vw, 1.6875rem);
  












  --fs-2xl:  clamp(1.337rem, 1.115rem + 0.912vw, 2.09rem);
  --fs-3xl:  clamp(1.569rem, 1.059rem + 1.604vw, 2.681rem);
  

























  --fs-hero: clamp(1.825rem, 1.32rem + 2.07vw, 3.325rem);

  --lh-tight: 1.02;
  --lh-snug: 1.2;
  --lh-normal: 1.6;
  --lh-loose: 1.7;

  










  --measure: 44ch;
  --measure-narrow: 33ch;

  
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --section-y: clamp(3.5rem, 2rem + 7vw, 8rem);

  
  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 8px;
  --border: 1px;

  --wrap: 76rem;          
  --wrap-narrow: 44rem;   

  
  --dur-fast: 120ms;
  --dur: 200ms;
  --ease: cubic-bezier(0.2, 0, 0.1, 1);
  

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  

  --header-h: 4.5rem;
}









:root,
.theme-dark {
  color-scheme: dark;

  --bg: var(--n-900);
  --bg-raised: var(--n-800);        
  --bg-inset: var(--n-850);         

  --fg: var(--n-0);                 
  --fg-muted: var(--n-200);         
  --fg-faint: var(--n-300);         

  --accent: var(--bd-glow);         
  --accent-ink: var(--bd-black);    
  --accent-quiet: rgba(51, 204, 255, 0.12);

  --line: var(--n-650);             
  --line-strong: var(--n-400);      

  --focus: var(--bd-glow);
  --danger: var(--bd-coral);
  --danger-ink: var(--bd-black);    

}

.theme-light {
  color-scheme: light;

  --bg: var(--n-0);
  --bg-raised: var(--n-25);
  --bg-inset: var(--n-25);

  --fg: var(--n-900);               
  --fg-muted: var(--n-450);         
  --fg-faint: var(--n-400);         

  --accent: var(--bd-glow-deep);    
  --accent-ink: var(--n-0);         
  --accent-quiet: rgba(29, 114, 143, 0.1);

  --line: var(--n-50);
  --line-strong: var(--n-350);

  --focus: var(--bd-glow-deep);
  --danger: #c2371a;                

  --danger-ink: var(--n-0);
}





*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--sp-8);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--accent); color: var(--accent-ink); }

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





.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section {
  padding-block: var(--section-y);
  background: var(--bg);
  color: var(--fg);
}
.section + .section { border-top: var(--border) solid var(--line); }
.section--flush { padding-block: 0; }

.stack > * + * { margin-top: var(--flow, var(--sp-4)); }
.stack--lg { --flow: var(--sp-6); }
.stack--xl { --flow: var(--sp-7); }

.grid { display: grid; gap: var(--sp-6); }
@media (min-width: 40em) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56em) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--sidebar { grid-template-columns: minmax(0, 1fr) 20rem; }
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}


.section__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  align-items: end;
  justify-content: space-between;
}
.section__head > div > .eyebrow + h2 { margin-top: var(--sp-2); }





.display,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  letter-spacing: var(--display-tracking);
  line-height: var(--lh-snug);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.t-hero  { font-size: var(--fs-hero); line-height: var(--lh-tight); }
.t-3xl   { font-size: var(--fs-3xl);  line-height: var(--lh-tight); }
.t-2xl   { font-size: var(--fs-2xl); }
.t-xl    { font-size: var(--fs-xl); }
.t-lg    { font-size: var(--fs-lg); }
.t-md    { font-size: var(--fs-md); }
.t-sm    { font-size: var(--fs-sm); }
.t-xs    { font-size: var(--fs-xs); }

h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: var(--lh-snug);
}


.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.lede {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
  max-width: var(--measure);
}

.muted { color: var(--fg-muted); }
.faint { color: var(--fg-faint); }
.accent { color: var(--accent); }

.prose { max-width: var(--measure); }







.rule p,
.svc__body p,
.note,
p.t-sm { max-width: var(--measure); }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { margin-top: var(--sp-7); }
.prose h3 { margin-top: var(--sp-6); }
.prose a { color: var(--accent); }
.prose ul { list-style: none; }
.prose ul > li { position: relative; padding-left: var(--sp-5); }
.prose ul > li + li { margin-top: var(--sp-2); }
.prose ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.5rem;
  height: 1px;
  background: var(--accent);
}













:lang(de) { hyphens: auto; }
:lang(de) :is(h1, h2, h3, .t-hero, .t-3xl, .t-2xl, .display,
              .statement__text, .svc__price) { hyphens: manual; }







.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-ink);
  --btn-border: var(--accent);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: var(--border) solid var(--btn-border);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn:hover { --btn-bg: transparent; --btn-fg: var(--accent); }

.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-border: var(--line-strong);
}
.btn--secondary:hover { --btn-fg: var(--accent); --btn-border: var(--accent); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg-muted);
  --btn-border: transparent;
  text-transform: none;
  letter-spacing: 0;
  padding-inline: 0;
  min-height: 2.25rem;
}
.btn--ghost:hover { --btn-fg: var(--accent); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}


.btn__arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(0.2em); }



.link {
  color: var(--accent);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--dur) var(--ease);
}
.link:hover { background-size: 100% 1px; }





.hero {
  position: relative;
  overflow: clip;   
  padding-block: clamp(4rem, 3rem + 9vw, 9rem) clamp(4rem, 2rem + 8vw, 8rem);
  border-bottom: var(--border) solid var(--line);
}
.hero::before {
  content: "";
  position: absolute;
  right: -8rem;
  top: -16rem;
  width: min(46rem, 92vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(51, 204, 255, 0.16), transparent 66%);
  pointer-events: none;
}
@media (forced-colors: active) { .hero::before { display: none; } }

.hero__inner { position: relative; }
.hero__inner > * + * { margin-top: var(--sp-6); }
.hero__lede { max-width: 38ch; font-size: var(--fs-lg); color: var(--fg-muted); }



.project {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--bg-raised);
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  overflow: clip;   
  transition: border-color var(--dur) var(--ease);
}
.project:hover { border-color: var(--accent); }

.project__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: clip;   
  background: var(--bg-inset);
}
.project__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--ease);
}
.project:hover .project__media img { transform: scale(1.03); }


.project--empty {
  display: grid;
  place-items: center;
  min-height: 16rem;
  padding: var(--sp-5);
  text-align: center;
  border-style: dashed;
}

.project__body { padding: var(--sp-5); }
.project__body > .tag + .project__title { margin-top: var(--sp-3); }
.project__title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}
.project__meta {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}












.tag {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border: var(--border) solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.tag--accent { border-color: var(--accent); color: var(--accent); }



.card {
  padding: var(--sp-6);
  background: var(--bg-raised);
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
}

.process { list-style: none; counter-reset: none; }

.step { display: grid; grid-template-columns: 3rem 1fr; gap: var(--sp-4); }
.step__n {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--accent);
}
.step__dur {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--fg-faint);
}



.price {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--bg-raised);
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  height: 100%;
}
.price--featured { border-color: var(--accent); }


a.price {
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease);
}
a.price:hover { border-color: var(--accent); }
a.price::after {
  content: "See what's included \2192";
  margin-top: auto;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
}



.price__flag {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
}

.price__flag + .price__name { padding-right: 6.5rem; }

.price__name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: var(--fs-lg);
}
.price__from {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
}
.price__from-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.price__amount {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  



  font-size: clamp(1.5rem, 1.34rem + 0.66vw, 2.125rem);
  line-height: 1;
}
.price__time { font-size: var(--fs-sm); color: var(--fg-muted); }
.price__list { flex: 1; }
.price__list li {
  position: relative;
  padding-left: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}
.price__list li + li { margin-top: var(--sp-2); }
.price__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.5rem;
  height: 1px;
  background: var(--accent);
}


.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th, .table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: var(--border) solid var(--line);
}
.table th {
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.table td:last-child, .table th:last-child { text-align: right; }
.table-scroll { overflow-x: auto; }



.field { display: block; }
.field + .field { margin-top: var(--sp-5); }


.fieldset { border: 0; padding: 0; min-inline-size: 0; }
.fieldset + .fieldset,
.fieldset + .field,
.field + .fieldset { margin-top: var(--sp-6); }

.field__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.field__req { color: var(--accent); }
.field__hint {
  margin-top: var(--sp-1);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

.input, .textarea, .select {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  background: var(--bg-inset);
  color: var(--fg);
  border: var(--border) solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease);
}
.textarea { min-height: 8rem; resize: vertical; line-height: var(--lh-normal); }
.input::placeholder, .textarea::placeholder { color: var(--fg-faint); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--fg-faint); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--accent); }

.select {
  appearance: none;
  padding-right: 2.5rem;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 1.15rem) calc(50% + 2px),
    calc(100% - 0.85rem) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}


.choice {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  border: var(--border) solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.choice + .choice { margin-top: var(--sp-2); }
.choice:hover { border-color: var(--fg-faint); }
.choice input { margin: 0.3rem 0 0; accent-color: var(--accent); width: 1rem; height: 1rem; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-quiet); }
.choice__text { font-size: var(--fs-sm); }
.choice__note { display: block; color: var(--fg-muted); }

.field--invalid .input,
.field--invalid .textarea,
.field--invalid .select { border-color: var(--danger); }

.field__error {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--danger);
}
.field__error::before { content: "!"; }
.field__error[hidden] { display: none; }



.progress { display: flex; flex-direction: column; gap: var(--sp-3); }
.progress__meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.progress__track {
  height: 3px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width var(--dur) var(--ease);
}

.steps { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.steps li { font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); }
.steps li[aria-current="step"] { color: var(--accent); font-weight: 700; }
.steps li[data-done] { color: var(--fg-muted); }



.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: var(--border) solid var(--line);
}
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  padding-block: var(--sp-3);
  min-height: 4.5rem;
}




.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-4);
  align-items: center;
}
@media (min-width: 48em) {
  .site-header__inner { flex-wrap: nowrap; padding-block: 0; }
  .site-nav { gap: var(--sp-5); }
}
.site-nav a {
  font-size: var(--fs-sm);
  text-decoration: none;
  color: var(--fg-muted);
  transition: color var(--dur) var(--ease);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--fg); }
.site-nav a[aria-current="page"] { font-weight: 700; }


.site-nav__cta { min-height: 2.5rem; padding: 0.5rem 1rem; }
.site-nav a.site-nav__cta { color: var(--btn-fg); }








.site-header__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
}

.lang { display: flex; align-items: center; }




@media (min-width: 48em) {
  .lang {
    padding-left: var(--sp-5);
    border-left: var(--border) solid var(--line);
  }
}



.lang__drop { position: relative; }

.lang__btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--fg-faint);            
  cursor: pointer;
  

  list-style: none;
  transition: color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.lang__btn::-webkit-details-marker { display: none; }
.lang__btn::marker { content: ""; }
.lang__btn:hover { color: var(--fg); }
.lang__drop[open] .lang__btn { color: var(--fg); background: var(--accent-quiet); }

.lang__globe {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.lang__menu {
  position: absolute;
  top: calc(100% + 0.45rem);
  




  left: 0;
  

  z-index: 11;
  display: grid;
  min-width: 9.5rem;
  padding: var(--sp-2);
  background: var(--bg-raised);
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  

  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}
.lang__menu a {
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  text-decoration: none;
  white-space: nowrap;
  color: var(--fg-muted);            
  transition: color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.lang__menu a:hover { color: var(--fg); background: var(--accent-quiet); }




@media (min-width: 48em) {
  .lang__menu { left: auto; right: 0; }
}




.lang__menu a[aria-current="true"] {
  color: var(--accent);              
  font-weight: 700;
}



.lockup { display: block; width: clamp(8rem, 14vw, 11rem); }
.lockup--h { width: clamp(8.5rem, 34vw, 13.5rem); }
@media (min-width: 48em) { .lockup--h { width: clamp(9.5rem, 17vw, 13.5rem); } }
.lockup--sm { width: 7.5rem; }






.lockup--footer { width: clamp(6.5rem, 16vw, 8.5rem); }

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 20;
  padding: 0.6rem 1rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  border-radius: var(--radius);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }



.site-footer {
  padding-block: var(--sp-8) var(--sp-6);
  border-top: var(--border) solid var(--line);
  background: var(--bg);
  color: var(--fg);
}
.site-footer__grid {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
}
@media (min-width: 48em) {
  .site-footer__grid { grid-template-columns: 1fr auto; }
}
.site-footer__legal {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: var(--border) solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--fg-faint);
}
.social { display: flex; gap: var(--sp-4); }
.social a { font-size: var(--fs-sm); color: var(--fg-muted); text-decoration: none; }
.social a:hover { color: var(--accent); }



.facts { display: grid; gap: 0; align-self: start; }
.facts__row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-top: var(--border) solid var(--line);
}
.facts__row:last-child { border-bottom: var(--border) solid var(--line); }
.facts dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
  align-self: center;
}
.facts dd { margin: 0; font-size: var(--fs-sm); }



.cta { text-align: center; }
.cta .measure { margin-inline: auto; }



.note {
  padding: var(--sp-5);
  border-left: 2px solid var(--accent);
  background: var(--accent-quiet);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--fs-sm);
}



.plate { background: var(--bg-raised); border-radius: var(--radius); overflow: hidden; }
.plate img { width: 100%; }
.plate figcaption {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  border-top: var(--border) solid var(--line);
}





.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.center { margin-inline: auto; text-align: center; }
.measure { max-width: var(--measure); }
.measure--narrow { max-width: var(--measure-narrow); }
.full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }

[hidden] { display: none !important; }











.case { background: var(--bg); color: var(--fg); }



.case--abyss {
  color-scheme: light;
  --p-ink: #1a1a1a;
  --p-accent: #8b3a2a;
  --p-tan: #c4a882;
  --p-cream: #f5f0e8;
  
  --p-accent-dark: #c4a882;   

  --bg: var(--p-cream);
  --bg-raised: #ede6da;
  --bg-inset: #ede6da;
  --fg: var(--p-ink);          
  --fg-muted: #5c5c56;         
  


  --fg-faint: #63635a;         
  --accent: var(--p-accent);   
  --accent-ink: var(--p-cream);
  --accent-quiet: rgba(139, 58, 42, 0.09);
  --line: rgba(26, 26, 26, 0.14);
  --line-strong: #8a857a;      
  --focus: var(--p-accent);
}





.case--ethical {
  color-scheme: light;
  --p-ink: #200116;
  --p-accent: #26547c;
  --p-green: #0c8346;
  --p-magnolia: #f7f0f5;
  
  --p-accent-dark: #3fbe7e;   

  --bg: var(--p-magnolia);
  --bg-raised: #ffffff;
  --bg-inset: #ffffff;
  --fg: var(--p-ink);          
  --fg-muted: #4a4550;         
  --fg-faint: #5e5866;         
  --accent: var(--p-accent);   
  --accent-ink: #ffffff;       
  --accent-quiet: rgba(38, 84, 124, 0.08);
  --line: rgba(32, 1, 22, 0.12);
  --line-strong: #8a8290;      
  --focus: var(--p-accent);
}








.case--irox {
  --p-ink: #0f2d42;
  --p-accent-dark: #00c27a;      
  --accent: #00c27a;             
  --accent-ink: #0a0a0f;
  --accent-quiet: rgba(0, 194, 122, 0.12);
  --focus: #00c27a;
}



.case-dark {
  --bg: var(--p-ink);
  --bg-raised: color-mix(in srgb, var(--p-ink) 88%, #ffffff);
  --fg: var(--p-cream, #ffffff);
  --fg-muted: color-mix(in srgb, var(--p-cream, #ffffff) 74%, var(--p-ink));
  







  --fg-faint: color-mix(in srgb, var(--p-cream, #ffffff) 64%, var(--p-ink));
  --accent: var(--p-accent-dark);
  --accent-ink: var(--p-ink);
  --line: rgba(255, 255, 255, 0.16);
  --line-strong: rgba(255, 255, 255, 0.42);
  --focus: var(--p-accent-dark);
  background: var(--bg);
  color: var(--fg);
}



.case-hero { padding-block: clamp(3.5rem, 2rem + 7vw, 7rem) clamp(2.5rem, 1.5rem + 5vw, 5rem); }
.case-hero__inner > * + * { margin-top: var(--sp-5); }
.case-hero h1 { font-size: var(--fs-3xl); }
.case-hero__line {
  max-width: 34ch;
  font-size: var(--fs-lg);
  line-height: 1.35;
  color: var(--fg-muted);
}


.case-meta {
  display: grid;
  gap: 0;
  border-top: var(--border) solid var(--line);
}
@media (min-width: 44em) {
  




  .case-meta { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); border-top: 0; }
}
.case-meta__cell {
  padding-block: var(--sp-4);
  border-bottom: var(--border) solid var(--line);
}
@media (min-width: 44em) {
  .case-meta__cell { border-top: var(--border) solid var(--line); border-bottom: 0; padding-right: var(--sp-5); }
}
.case-meta dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.case-meta dd { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); }





.plate { margin: 0; }
.plate > picture > img,
.plate > img { width: 100%; border-radius: var(--radius); }
.plate--bleed > picture > img, .plate--bleed > img { border-radius: 0; }
.plate figcaption {
  padding: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
  color: var(--fg-faint);
}
.plate--bleed { border-radius: 0; background: none; }
.plate--bleed figcaption { padding-inline: clamp(1.25rem, 4vw, 3rem); }

.plates { display: grid; gap: var(--sp-5); }
@media (min-width: 48em) { .plates--2 { grid-template-columns: 1fr 1fr; } }




.case-section { padding-block: clamp(3rem, 2rem + 5vw, 6rem); }
.case-section > .wrap > * + * { margin-top: var(--sp-7); }
.case-section__head { max-width: var(--measure); }
.case-section__head > .eyebrow + h2 { margin-top: var(--sp-2); }
.case-section__head > h2 + p { margin-top: var(--sp-4); }


.pull {
  max-width: 24ch;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: var(--fs-2xl);
  line-height: 1.1;
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
}
.pull--wide { max-width: 34ch; }



.swatches { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.swatch__chip {
  height: clamp(6rem, 14vw, 9rem);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--line);
}
.swatch__name { margin-top: var(--sp-3); font-weight: 700; font-size: var(--fs-sm); }
.swatch__hex {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}
.swatch__note { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--fg-faint); }



.specimens { display: grid; gap: var(--sp-6); }
@media (min-width: 48em) { .specimens { grid-template-columns: 1fr 1fr; } }
.specimen {
  padding: var(--sp-6);
  background: var(--bg-raised);
  border-radius: var(--radius);
}
.specimen__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  justify-content: space-between;
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: var(--border) solid var(--line);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.specimen__name { font-weight: 700; letter-spacing: 0.06em; color: var(--fg); }
.specimen__sample { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); line-height: 1.15; }
.specimen__set {
  margin-top: var(--sp-4);
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--fg-muted);
  word-spacing: 0.15em;
}



.voice { display: grid; gap: 0; }
@media (min-width: 40em) { .voice { grid-template-columns: 1fr 1fr; } }
.voice__cell {
  padding: var(--sp-6);
  border-top: var(--border) solid var(--line);
  text-align: center;
}
@media (min-width: 40em) {
  .voice__cell:nth-child(odd) { border-right: var(--border) solid var(--line); }
}
.voice__word {
  font-size: var(--fs-xl);
  letter-spacing: 0.14em;
}
.voice__gloss { margin-top: var(--sp-3); color: var(--fg-muted); }



.next-project {
  display: block;
  padding-block: clamp(3rem, 2rem + 5vw, 6rem);
  text-decoration: none;
  color: inherit;
  border-top: var(--border) solid var(--line);
}
.next-project:hover .next-project__title { color: var(--accent); }
.next-project__title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: var(--fs-3xl);
  line-height: 1.05;
  letter-spacing: var(--display-tracking);
  transition: color var(--dur) var(--ease);
}










.svc { padding-block: clamp(3rem, 2rem + 5vw, 5.5rem); border-top: var(--border) solid var(--line); }
.svc:first-of-type { border-top: 0; }
.svc__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 56em) {
  .svc__grid { grid-template-columns: 22rem minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
  .svc__aside { position: sticky; top: 7rem; }
}
.svc__aside > * + * { margin-top: var(--sp-4); }
.svc__price {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: var(--fs-2xl);
  line-height: 1;
}
.svc__body > * + * { margin-top: var(--sp-6); }


.includes { display: grid; gap: var(--sp-3); }
@media (min-width: 34em) { .includes { grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-6); } }
.includes li {
  position: relative;
  padding-left: var(--sp-5);
  font-size: var(--fs-sm);
}
.includes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.55rem;
  height: 1px;
  background: var(--accent);
}



.phase {
  display: grid;
  gap: var(--sp-4);
  padding-block: var(--sp-7);
  border-top: var(--border) solid var(--line);
}
@media (min-width: 52em) {
  .phase { grid-template-columns: 4rem minmax(0, 1fr) 15rem; gap: var(--sp-6); }
}
.phase__n {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--accent);
}
.phase__body > * + * { margin-top: var(--sp-3); }



.phase__body p { max-width: var(--measure); }
.phase__side {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  padding-top: var(--sp-1);
}
.phase__fact { font-size: var(--fs-sm); }
.phase__fact dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.phase__fact dd { margin: var(--sp-1) 0 0; }







.legal { max-width: var(--measure); }
.legal > * + * { margin-top: var(--sp-4); }
.legal h2 {
  margin-top: var(--sp-8);
  font-size: var(--fs-xl);
  scroll-margin-top: 6rem;
}
.legal h3 { margin-top: var(--sp-6); font-size: var(--fs-md); font-family: var(--font-body); font-weight: 700; }
.legal ul, .legal ol { padding-left: var(--sp-5); }
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal li + li { margin-top: var(--sp-2); }
.legal li::marker { color: var(--fg-faint); }
.legal a { color: var(--accent); }
.legal dl > div + div { margin-top: var(--sp-3); }
.legal dt { font-weight: 700; }
.legal dd { margin: 0; color: var(--fg-muted); }


.toc { padding: var(--sp-5); border: var(--border) solid var(--line); border-radius: var(--radius); }
.toc ol { columns: 2; column-gap: var(--sp-6); padding-left: var(--sp-5); list-style: decimal; }
.toc li { break-inside: avoid; margin-bottom: var(--sp-2); font-size: var(--fs-sm); }
.toc a { color: inherit; }
.toc a:hover { color: var(--accent); }



.rules { display: grid; gap: var(--sp-5); }
@media (min-width: 44em) { .rules { grid-template-columns: 1fr 1fr; } }
.rule { padding-top: var(--sp-4); border-top: 2px solid var(--accent); }
.rule h3 { font-size: var(--fs-md); font-family: var(--font-body); font-weight: 700; }
.rule p { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--fg-muted); }
















.brief { max-width: 42rem; }



.brief--short > * + * { margin-top: var(--sp-6); }


.brief--short .brief__turnstile { margin-top: 0; min-height: 0; }


.brief .field,
.brief .fieldset,
.brief__errors,
.brief__progress { scroll-margin-top: 6.5rem; }


.brief--page > * + * { margin-top: var(--sp-6); }


.brief__head { margin-bottom: var(--sp-6); }
.brief__head > * + * { margin-top: var(--sp-3); }



.brief__errors {
  padding: var(--sp-4) var(--sp-5);
  border: var(--border) solid var(--danger);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}
.brief__errors:focus-visible { outline-offset: 2px; }
.brief__errors p { font-weight: 700; color: var(--danger); }
.brief__errors ul { margin-top: var(--sp-2); }
.brief__errors li + li { margin-top: var(--sp-1); }
.brief__errors a { color: var(--fg); }

.brief__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-6);
  border-top: var(--border) solid var(--line);
}
.brief__nav-right { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

.brief__saved {
  font-size: var(--fs-xs);
  color: var(--fg-faint);
  transition: opacity var(--dur) var(--ease);
}
.brief__saved[hidden] { display: none; }



.brief__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.brief__consent { margin-top: var(--sp-6); }
.brief__turnstile { margin-top: var(--sp-5); min-height: 4.5rem; }


.brief__status { margin-top: var(--sp-4); font-size: var(--fs-sm); }
.brief__status[hidden] { display: none; }
.brief__status--error { color: var(--danger); font-weight: 700; }




.steps a { color: inherit; text-decoration: none; }
.steps a:hover { text-decoration: underline; text-underline-offset: 0.25em; }



.fields-2 { display: grid; gap: var(--sp-6); }





.fields-2 > .field + .field { margin-top: 0; }
@media (min-width: 40em) {
  .fields-2 { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
}




.more { border-top: var(--border) solid var(--line); padding-top: var(--sp-5); }
.more__summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  list-style: none;
  padding: var(--sp-2) 0;
}
.more__summary::-webkit-details-marker { display: none; }


.more__summary::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--dur) var(--ease);
}
.more[open] .more__summary::before { transform: rotate(45deg); }
.more__summary:hover { color: var(--fg); }
.more__summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-sm, 4px); }
.more__count {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.more__body { padding-top: var(--sp-5); }
.more__body > * + * { margin-top: var(--sp-6); }






.brief-index { list-style: none; border-top: var(--border) solid var(--line); }
.brief-index__link {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-bottom: var(--border) solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: background var(--dur) var(--ease), padding-inline var(--dur) var(--ease);
}
.brief-index__link:hover {
  background: var(--bg-raised);
  padding-inline: var(--sp-4);
}
.brief-index__n {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  color: var(--accent);
  font-weight: 700;
}
.brief-index__body { flex: 1 1 auto; display: block; }
.brief-index__title { display: block; font-size: var(--fs-md); }
.brief-index__note { display: block; margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--fg-muted); }
.brief-index__count { font-size: var(--fs-xs); color: var(--fg-faint); white-space: nowrap; }
.brief-index__link .btn__arrow { color: var(--fg-faint); }
.brief-index__link:hover .btn__arrow { color: var(--accent); }


@media (max-width: 34em) {
  .brief-index__link { flex-wrap: wrap; }
  .brief-index__link .btn__arrow { order: 2; }
  .brief-index__count { order: 3; flex-basis: 100%; }
}



.review { margin-top: var(--sp-7); max-width: 42rem; }



.brief__missing {
  max-width: 42rem;
  border-left-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}
.brief__missing ul { margin-top: var(--sp-3); }
.brief__missing li + li { margin-top: var(--sp-2); }

.review__group + .review__group { margin-top: var(--sp-7); }
.review__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: var(--border) solid var(--line);
}
.review__list { margin-top: var(--sp-4); }
.review__row { display: grid; gap: var(--sp-1); padding-block: var(--sp-3); }
.review__row + .review__row { border-top: var(--border) solid var(--line); }
.review__row[hidden] { display: none; }
.review__row dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-faint); }





.review__row dd { font-size: var(--fs-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (min-width: 40em) {
  .review__row { grid-template-columns: 12rem 1fr; gap: var(--sp-4); align-items: baseline; }
}


















@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    




    [data-reveal] {
      animation: bd-reveal linear both;
      animation-timeline: view();
      



      animation-range: entry 8% entry 92%;
    }
    


    [data-reveal-group] > * {
      animation: bd-reveal linear both;
      animation-timeline: view();
      animation-range: entry calc(6% + var(--i, 0) * 6%) entry calc(88% + var(--i, 0) * 3%);
    }

    



    .drift > img,
    .drift > picture > img,
    .drift > picture > source + img {
      animation: bd-drift linear both;
      animation-timeline: view();
      animation-range: cover;
      will-change: transform;
    }

    







    .t-hero--live {
      animation: bd-condense linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }

    


    .lure { animation: bd-lure linear both; animation-timeline: scroll(root); }

  }

  



  .rise > span > span {
    animation: bd-rise 620ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
  .fade-up {
    animation: bd-reveal 460ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
    animation-delay: calc(200ms + var(--i, 0) * 60ms);
  }
}

@keyframes bd-reveal {
  








  from { opacity: 0; transform: translate3d(0, 1.75rem, 0); }
  35%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}
@keyframes bd-drift {
  from { transform: scale(1.06) translate3d(0, -2.2%, 0); }
  to   { transform: scale(1.06) translate3d(0,  2.2%, 0); }
}
@keyframes bd-condense {
  from { letter-spacing: 0.07em; }
  to   { letter-spacing: -0.03em; }
}
@keyframes bd-lure { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bd-rise {
  from { transform: translate3d(0, 110%, 0); }
  to   { transform: none; }
}






.drift { overflow: clip; }



































.rise > span {
  display: block;
  overflow: hidden;
  padding-block: 0.06em 0.3em;
  margin-block-end: -0.24em;
}
.rise > span > span { display: block; }



















.hero--full {
  --hero-h: clamp(30rem, 74svh, 52rem);
  display: grid;
  align-items: center;
  min-height: var(--hero-h);
  padding-block: clamp(2.5rem, 1.75rem + 2.5vw, 4rem);
}


.hero--full + .section { padding-block-start: clamp(2rem, 1.25rem + 3vw, 3.5rem); }
.hero--full::before {
  right: auto;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: min(74rem, 130vw);
  background: radial-gradient(circle, rgba(51, 204, 255, 0.2), transparent 62%);
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--fg-faint);
}
.hero__meta > * { display: inline-flex; align-items: center; gap: var(--sp-2); }
.hero__meta b { color: var(--fg-muted); font-weight: 500; }


.lure {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: 2px;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--bd-glow-deep), var(--bd-glow));
  box-shadow: 0 0 12px rgba(51, 204, 255, 0.55);
  pointer-events: none;
}
@media (forced-colors: active) { .lure { display: none; } }




.eyebrow--rule {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.eyebrow--rule::before {
  content: "";
  width: clamp(1.5rem, 4vw, 3.5rem);
  height: 1px;
  background: currentColor;
  flex: none;
  opacity: 0.7;
}


.t-hero, .t-3xl, .t-2xl { text-wrap: balance; }
.prose p, .lede { text-wrap: pretty; }



.lede em, .lede--accent b { font-style: normal; color: var(--accent); font-weight: inherit; }


.section__n {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--fg-faint);
}




.statement {
  position: relative;
  







  overflow: clip;
  display: grid;
  place-items: center;
  





  min-height: clamp(18rem, 54vh, 32rem);
  padding-block: var(--sp-9) var(--sp-5);
  text-align: center;
}




.statement__text {
  position: relative;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  


  font-size: clamp(1.875rem, 1.18rem + 2.86vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  max-width: 18ch;
  margin-inline: auto;
}
.statement__text b { color: var(--accent); font-weight: inherit; }





.statement__part {
  display: block;
  text-wrap: balance;
}





.statement__part--light { margin-top: 0.5em; }



















@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    






    .statement__part--dark {
      animation: bd-statement-focus linear both;
      animation-timeline: view();
      animation-range: cover 8% cover 38%;
    }

    .statement__part--light {
      














      padding-bottom: 0.36em;
      margin-bottom: -0.36em;
      



      --bd-fascio: linear-gradient(100deg, transparent 0 44%, #000 60% 100%);
      -webkit-mask-image: var(--bd-fascio);
              mask-image: var(--bd-fascio);
      -webkit-mask-size: 300% 100%;
              mask-size: 300% 100%;
      -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
      -webkit-mask-position: 100% 0;
              mask-position: 100% 0;
      










      animation: bd-statement-sweep linear both;
      animation-timeline: view();
      animation-range: cover 38% cover 60%;
    }
  }
}

@keyframes bd-statement-focus {
  from { opacity: 0; translate: 0 0.45em; filter: blur(16px); }
  30%  { opacity: 1; }
  to   { opacity: 1; translate: 0 0; filter: blur(0); }
}

@keyframes bd-statement-sweep {
  from {
    -webkit-mask-position: 0% 0;
            mask-position: 0% 0;
    text-shadow: 0 0 0 rgba(51, 204, 255, 0);
  }
  55% { text-shadow: 0 0 0.42em rgba(51, 204, 255, 0.45); }
  to {
    -webkit-mask-position: 100% 0;
            mask-position: 100% 0;
    text-shadow: 0 0 0 rgba(51, 204, 255, 0);
  }
}




.project--feature {
  background: none;
  border: 0;
  border-radius: 0;
}
.project--feature .project__media {
  border-radius: var(--radius);
  aspect-ratio: 3 / 2;
}
.project--feature .project__body { padding: var(--sp-5) 0 0; }
.project--feature .project__title { font-size: var(--fs-xl); }
.project--feature .project__body::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: var(--sp-5);
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 500ms var(--ease);
}
.project--feature:hover .project__body::after,
.project--feature:focus-visible .project__body::after { transform: scaleX(1); }










@media (min-width: 60em) {
  .sticky-col { position: sticky; top: calc(var(--header-h, 4.5rem) + var(--sp-6)); align-self: start; }
}
















.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.theme-light .grain, .case--abyss .grain { display: none; }
@media (forced-colors: active) { .grain { display: none; } }


























:where(.section__head, .section) h2 { font-size: var(--fs-2xl); }
@media (min-width: 60em) {
  .section__head h2 { letter-spacing: -0.02em; }
}







.index-list { border-top: var(--border) solid var(--line); }












.index-row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  gap: var(--sp-2) var(--sp-4);
  align-items: baseline;
  padding-block: var(--sp-6);
  border-bottom: var(--border) solid var(--line);
  text-decoration: none;
  color: inherit;
  position: relative;
  


  isolation: isolate;
  transition: padding-inline-start var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
@media (min-width: 48em) {
  .index-row { grid-template-columns: 2.75rem minmax(0, 1fr) auto; padding-block: var(--sp-7); }
}
.index-row__n    { grid-column: 1; grid-row: 1; }
.index-row__name { grid-column: 2; grid-row: 1; }
.index-row__what { grid-column: 2; grid-row: 2; }
.index-row__go   { grid-column: 3; grid-row: 2; justify-self: end; align-self: end; }

.index-row__n {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--fg-faint);
  transition: color var(--dur) var(--ease);
}
.index-row:hover .index-row__n { color: var(--accent); }




.index-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--accent-quiet), transparent 58%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}



.index-row::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 320ms var(--ease-out);
  pointer-events: none;
}
.index-row:hover, .index-row:focus-visible {
  padding-inline-start: var(--sp-4);
  border-color: var(--accent);
}
.index-row:is(:hover, :focus-visible)::before { opacity: 1; }
.index-row:is(:hover, :focus-visible)::after { transform: scaleY(1); }
.index-row__name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  

  font-size: clamp(1.25rem, 1.09rem + 0.66vw, 1.875rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.index-row:hover .index-row__name { color: var(--accent); }
.index-row__what { color: var(--fg-muted); font-size: var(--fs-sm); max-width: 46ch; }
.index-row__price {
  grid-column: 3;
  grid-row: 1;
  text-align: right;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--fs-lg);
  white-space: nowrap;
}
.index-row__price small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.index-row__go {
  color: var(--fg-faint);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.index-row:hover .index-row__go { transform: translateX(0.35rem); color: var(--accent); }









.stack-cards { display: grid; gap: var(--sp-5); }
@media (min-width: 48em) {
  .stack-cards { gap: var(--sp-6); }
  .stack-cards > li {
    position: sticky;
    



    top: calc(var(--header-h) + var(--sp-5) + var(--i, 0) * 0.55rem);
  }
  

  .stack-cards > li::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
    opacity: 0.8;
  }
}
.stack-cards > li {
  position: relative;
  background: var(--bg-raised);
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-6);
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: auto 1fr;
  align-items: start;
}
@media (min-width: 48em) {
  .stack-cards > li { grid-template-columns: 5rem 1fr auto; padding: var(--sp-7); }
}
.stack-cards .step__n {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--fs-xl);
  color: var(--accent);
  line-height: 1;
}
.stack-cards h3 { font-size: var(--fs-lg); }
.stack-cards .step__dur {
  font-size: var(--fs-sm);
  color: var(--fg-faint);
  white-space: nowrap;
}
















.mark-plate {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(26rem, 60vw);
  margin: 0;
}
.mark-plate::before {
  content: "";
  position: absolute;
  width: min(30rem, 88%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(51, 204, 255, 0.16), transparent 66%);
  pointer-events: none;
}
.mark-plate img {
  position: relative;
  width: min(19rem, 74%);
  height: auto;
  filter: drop-shadow(0 0 48px rgba(51, 204, 255, 0.22));
}
@media (forced-colors: active) { .mark-plate::before { display: none; } }



@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .mark-plate img {
      animation: bd-mark-float linear both;
      animation-timeline: view();
      animation-range: cover;
    }
  }
}
@keyframes bd-mark-float {
  from { transform: translate3d(0, 2.5%, 0) scale(0.96); }
  to   { transform: translate3d(0, -2.5%, 0) scale(1.04); }
}












.social--icons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}
.social--icons a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius);
  color: var(--fg-muted);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.social--icons a:hover,
.social--icons a:focus-visible {
  color: var(--accent);
  transform: translateY(-2px);
}
.social--icons svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.social--icons svg .dot { fill: currentColor; stroke: none; }
























.dive {
  position: relative;
  min-height: clamp(22rem, 56vh, 34rem);
  background-color: var(--bd-black);
  





  overflow: clip;
  isolation: isolate;
  






  view-timeline-name: --risalita;

  








  --pesce: min(15rem, 38vw);
  --esca-x: calc(var(--pesce) * 0.341);
  


  margin-bottom: -1px;
}





.dive__deep,
.dive__lantern,
.dive__wash {
  position: absolute;
  pointer-events: none;
}

















.dive__deep {
  inset: 0;
  


  background-image: linear-gradient(to bottom,
    #0a0a0f 0%,
    #0a0a0f 79.5%,
    #16161f 83%,
    #30303b 86.5%,
    #5e5e69 90%,
    #9c9ca2 93%,
    #cccccf 95.5%,
    #ebebec 98%,
    #ffffff 100%);
  background-size: 100% 250%;
  background-repeat: no-repeat;
  

  background-position: 0 100%;
}














.dive__angler {
  position: absolute;
  left: 50%;
  top: 46%;
  


  width: var(--pesce);
  height: auto;
  
  translate: -50% -14%;
  opacity: 0;
  

  filter: blur(3px);
  



  -webkit-mask-image: linear-gradient(to bottom, #000 0 46%, rgba(0,0,0,0.45) 72%, transparent 94%);
          mask-image: linear-gradient(to bottom, #000 0 46%, rgba(0,0,0,0.45) 72%, transparent 94%);
  pointer-events: none;
}




.dive__lantern {
  
  left: calc(50% + var(--esca-x));
  top: 46%;
  width: min(19rem, 46vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  opacity: 0;
  


  background:
    radial-gradient(circle,
      rgba(255, 255, 255, 1) 0%,
      rgba(230, 250, 255, 0.86) 8%,
      rgba(168, 236, 255, 0.56) 15%,
      rgba(96, 216, 255, 0.32) 23%,
      rgba(51, 204, 255, 0.17) 31%,
      rgba(51, 204, 255, 0.07) 41%,
      rgba(51, 204, 255, 0.02) 52%,
      transparent 66%);
  

  filter: blur(8px);
}









.dive__wash {
  left: calc(50% + var(--esca-x));
  top: 46%;
  width: 130%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.05);
  



  background: radial-gradient(circle,
    #ffffff 0%,
    #ffffff 16%,
    rgba(246, 253, 255, 0.72) 26%,
    rgba(200, 238, 250, 0.38) 37%,
    rgba(140, 205, 228, 0.17) 49%,
    rgba(80, 160, 190, 0.06) 62%,
    transparent 76%);
  filter: blur(10px);
}

@media (forced-colors: active) {
  .dive__deep, .dive__angler, .dive__lantern, .dive__wash { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .dive__deep,
    .dive__angler,
    .dive__lantern,
    .dive__wash {
      animation-timeline: --risalita;
      animation-range: cover;
      animation-timing-function: linear;
      animation-fill-mode: both;
    }
    .dive__deep    { animation-name: bd-deep; }
    .dive__angler  { animation-name: bd-angler; }
    .dive__lantern { animation-name: bd-lantern; }
    .dive__wash    { animation-name: bd-wash; }
  }
}



@media (prefers-reduced-motion: reduce) {
  .dive { min-height: 13rem; }
  .dive__lantern { opacity: 0.9; }
}
@supports not (animation-timeline: view()) {
  .dive { min-height: 13rem; }
  .dive__lantern { opacity: 0.9; }
}













@keyframes bd-deep {
  0%        { background-position: 0 0%; }
  82%, 100% { background-position: 0 100%; }
}








@keyframes bd-angler {
  0%      { opacity: 0;    transform: translateY(-18px); }
  14%     { opacity: 0.1;  transform: translateY(-2px); }
  

  34%     { opacity: 0.16; transform: translateY(21px); }
  52%     { opacity: 0.1;  transform: translateY(41px); }
  68%     { opacity: 0.02; transform: translateY(60px); }
  82%     { opacity: 0;    transform: translateY(75px); }
  100%    { opacity: 0;    transform: translateY(96px); }
}
@keyframes bd-lantern {
  0%      { opacity: 0;    transform: translateY(-18px) scale(0.35); }
  14%     { opacity: 0;    transform: translateY(-2px) scale(0.42); }
  34%     { opacity: 0.42; transform: translateY(21px) scale(0.64); }
  

  52%     { opacity: 1;    transform: translateY(41px) scale(0.96); }
  68%     { opacity: 0.48; transform: translateY(60px) scale(1.3); }
  82%     { opacity: 0;    transform: translateY(75px) scale(1.72); }
  100%    { opacity: 0;    transform: translateY(96px) scale(1.8); }
}


@keyframes bd-wash {
  0%      { opacity: 0;    transform: translateY(-18px) scale(0.06); }
  34%     { opacity: 0;    transform: translateY(21px) scale(0.06); }
  52%     { opacity: 0.26; transform: translateY(41px) scale(0.4); }
  68%     { opacity: 0.5;  transform: translateY(60px) scale(0.9); }
  82%     { opacity: 0.28; transform: translateY(75px) scale(1.45); }
  100%    { opacity: 0;    transform: translateY(96px) scale(2); }
}




.surface { background: var(--bg); color: var(--fg); }




.on-dark { display: block; }
.on-light { display: none; }
.theme-light .on-dark { display: none; }
.theme-light .on-light { display: block; }
























.markwrap { display: inline-block; line-height: 0; }
.mark { position: relative; display: block; }



.mark__spark {
  position: absolute;
  left: 22.4%;
  top: 11.2%;
  width: 42%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle,
    rgba(190, 240, 255, 0.95) 0%,
    rgba(51, 204, 255, 0.62) 22%,
    rgba(51, 204, 255, 0.22) 46%,
    transparent 68%);
}
@media (forced-colors: active) { .mark__spark { display: none; } }








@media (prefers-reduced-motion: no-preference) {
  .mark__spark { animation: bd-spark 4300ms var(--ease-out) both; }
  .markmark .bd-fish {
    



    transform-origin: 93.9% 11.2%;
    animation: bd-fish-in 1500ms var(--ease-out) 1380ms both;
  }
  .markmark .bd-word {
    animation: bd-word-in 1500ms var(--ease-out) 2230ms both;
  }
}

@keyframes bd-spark {
  0%   { opacity: 0;    transform: scale(0.35) translate3d(-6%, 4%, 0); }
  26%  { opacity: 0.38; transform: scale(0.72) translate3d(2%, -2%, 0); }
  
  44%  { opacity: 1;    transform: scale(1.25) translate3d(0, 0, 0); }
  62%  { opacity: 0.62; transform: scale(1.05); }
  
  100% { opacity: 0.3;  transform: scale(0.95); }
}
@keyframes bd-fish-in {
  from { opacity: 0; transform: scale(0.86); }
  to   { opacity: 1; transform: none; }
}
@keyframes bd-word-in {
  



  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  20%  { opacity: 1; }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}



























.abyss {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  






  --lure-x: calc(50% + min(22vw, 19rem));
  --lure-y: 46%;

  










  --lure-dx: 0px;
  --lure-dy: 0px;
  --lure-boost: 0;

  



  --fish: min(22rem, 46vw);
  --reveal-r: clamp(7rem, 15vw, 13rem);

  

  --fall: var(--hero-h, 74svh);
}



@media (max-width: 47.99em) {
  .abyss {
    --lure-x: 78%;
    --lure-y: 15%;
  }
  

  .abyss__snow > span:nth-child(n + 10) { display: none; }

  




  .abyss__reveal { display: none; }
}




.hero--abyss::before { display: none; }



.abyss__deep {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(56rem 44rem at
      calc(var(--lure-x) + var(--lure-dx, 0px))
      calc(var(--lure-y) + var(--lure-dy, 0px)),
      rgba(51, 204, 255, 0.125) 0%,
      rgba(51, 204, 255, 0.05) 34%,
      transparent 64%),
    linear-gradient(to bottom,
      rgba(18, 105, 255, 0.05) 0%,
      transparent 42%,
      rgba(0, 0, 0, 0.45) 100%);
  


  filter: brightness(calc(1 + var(--lure-boost) * 0.34));
}



















.abyss__reveal {
  position: absolute;
  
  left: 0;
  top: 0;
  width: var(--fish);
  aspect-ratio: 1;
  pointer-events: none;

  







  translate:
    calc(-84.1% - var(--lure-dx) * 0.12)
    calc(-14%   - var(--lure-dy) * 0.12);

  

  --reveal: radial-gradient(circle var(--reveal-r) at 84.1% 14%,
    #000 0%, rgba(0, 0, 0, 0.92) 26%, rgba(0, 0, 0, 0.6) 48%,
    rgba(0, 0, 0, 0.25) 70%, transparent 100%);
  -webkit-mask-image: var(--reveal);
          mask-image: var(--reveal);
}

.abyss__angler {
  position: absolute;
  inset: 0;
  

  background: radial-gradient(circle at 84.1% 14%,
    rgba(226, 249, 255, 0.92) 0%,
    rgba(150, 226, 255, 0.72) 14%,
    rgba(70, 197, 245, 0.5) 30%,
    rgba(36, 132, 178, 0.32) 48%,
    rgba(22, 78, 110, 0.18) 68%,
    rgba(16, 46, 66, 0.1) 100%);
  









  -webkit-mask-image: url("../img/logo-symbol-body-light.svg?v=ef6ddb82");
          mask-image: url("../img/logo-symbol-body-light.svg?v=ef6ddb82");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  




  filter: blur(1.5px) brightness(calc(1 + var(--lure-boost) * 0.55));
}













.abyss__rig {
  position: absolute;
  left: var(--lure-x);
  top: var(--lure-y);
  width: 0;
  height: 0;
  transform-origin: calc(var(--fish) * -0.341) calc(var(--fish) * 0.41);
}



.abyss__glow {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(11rem, 25vw, 23rem);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  




  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(198, 242, 255, 0.44) 4%,
    rgba(126, 222, 255, 0.31) 10%,
    rgba(70, 208, 255, 0.2) 17%,
    rgba(51, 204, 255, 0.115) 26%,
    rgba(51, 204, 255, 0.052) 37%,
    rgba(51, 204, 255, 0.018) 50%,
    transparent 66%);
  


  filter: blur(6px) brightness(calc(1 + var(--lure-boost) * 0.85));
}


.abyss__core {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(0.4rem, 0.85vw, 0.68rem);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: #ffffff;
  

  box-shadow:
    0 0 calc(1.1rem + var(--lure-boost) * 1.3rem) rgba(190, 240, 255, 0.9),
    0 0 calc(2.8rem + var(--lure-boost) * 2.6rem) rgba(51, 204, 255, 0.5);
}




.abyss__snow {
  position: absolute;
  inset: 0;
}
.abyss__snow > span {
  position: absolute;
  left: var(--x, 50%);
  top: 0;
  width: var(--s, 2px);
  height: var(--s, 2px);
  border-radius: 50%;
  background: #cfeeff;
  
  opacity: 0;
  will-change: transform;
}

@media (forced-colors: active) { .abyss { display: none; } }



@media (prefers-reduced-motion: no-preference) {

  



  .abyss__rig { animation: bd-lure-sway 19s ease-in-out infinite alternate; }

  


  .abyss__glow { animation: bd-lure-breath 6.5s ease-in-out infinite alternate; }
  .abyss__core { animation: bd-lure-pulse 6.5s ease-in-out infinite alternate; }

  .abyss__snow > span {
    animation: bd-snow var(--d, 24s) linear var(--t, 0s) infinite;
  }

  


  @supports (animation-timeline: scroll()) {
    .abyss {
      animation: bd-abyss-sink linear both;
      animation-timeline: scroll(root);
      animation-range: 0 85svh;
    }
  }
}


@media (prefers-reduced-motion: reduce) {
  .abyss__snow { display: none; }
}

@keyframes bd-lure-sway {
  from { rotate: -1deg; }
  to   { rotate: 1deg; }
}
@keyframes bd-lure-breath {
  from { opacity: 0.8; scale: 0.96; }
  to   { opacity: 1;   scale: 1.03; }
}
@keyframes bd-lure-pulse {
  from { opacity: 0.82; }
  to   { opacity: 1; }
}
@keyframes bd-snow {
  0%   { transform: translate3d(0, calc(var(--fall) * -0.05), 0); opacity: 0; }
  14%  { opacity: var(--o, 0.35); }
  78%  { opacity: var(--o, 0.35); }
  100% { transform: translate3d(var(--sx, 10px), calc(var(--fall) * 1.05), 0); opacity: 0; }
}
@keyframes bd-abyss-sink {
  from { opacity: 1;    transform: none; }
  to   { opacity: 0.18; transform: translate3d(0, 7%, 0) scale(1.05); }
}
























.index { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 62em) {
  



  .index { grid-template-columns: minmax(0, 1fr) 23rem; gap: var(--sp-8); align-items: center; }
}

.index-preview { display: none; }
@media (min-width: 62em) and (hover: hover) and (pointer: fine) {
  



  .index-preview { display: grid; }
  .index-preview__shot { grid-area: 1 / 1; }
}

.index-preview__shot {
  margin: 0;
  opacity: 0;
  transform: translate3d(0, 0.5rem, 0);
  transition: opacity 240ms var(--ease), transform 420ms var(--ease-out);
}


.index-preview__shot[data-for="logo"] { opacity: 1; transform: none; }




.index-preview__shot picture {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--bg);
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  overflow: clip;
  box-shadow: 0 14px 34px -18px rgba(10, 10, 15, 0.22);
}



.index-preview__shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--sp-3);
}
.index-preview__shot figcaption {
  padding-top: var(--sp-3);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--fg-faint);
}




.index:has(.index-row:is(:hover, :focus-visible)) .index-preview__shot {
  opacity: 0;
  transform: translate3d(0, 0.5rem, 0);
}
.index:has(.index-row[data-preview="logo"]:is(:hover, :focus-visible)) .index-preview__shot[data-for="logo"],
.index:has(.index-row[data-preview="identity"]:is(:hover, :focus-visible)) .index-preview__shot[data-for="identity"],
.index:has(.index-row[data-preview="packaging"]:is(:hover, :focus-visible)) .index-preview__shot[data-for="packaging"] {
  opacity: 1;
  transform: none;
}












@media (min-width: 48em) {
  .stack-cards { position: relative; padding-left: 4.5rem; }

  


  












  .stack-cards::before,
  .stack-cards::after {
    content: "";
    position: absolute;
    left: 1.75rem;
    top: 0;
    bottom: 0;
    width: 2px;
    border-radius: 2px;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
  .stack-cards::before { background: var(--line); }
  .stack-cards::after {
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--accent) 20%, transparent) 0%,
      var(--accent) 14%,
      var(--accent) 100%);
    transform-origin: 50% 0;
    

    transform: scaleY(1);
  }

  


















}





.theme-light .stack-cards > li {
  background: var(--bg);
  box-shadow:
    0 1px 2px rgba(10, 10, 15, 0.05),
    0 14px 34px -14px rgba(10, 10, 15, 0.18);
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .stack-cards::after {
      animation: bd-spine linear both;
      animation-timeline: view();
      



      animation-range: cover 16% cover 78%;
    }
  }
}
@keyframes bd-spine {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}









.cta--lit {
  position: relative;
  overflow: clip;   
  border-top: var(--border) solid var(--line);
}
.cta--lit::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(-1 * min(26rem, 46vw));
  width: min(64rem, 130vw);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent) 17%, transparent) 0%,
    color-mix(in srgb, var(--accent) 6%, transparent) 34%,
    transparent 62%);
  pointer-events: none;
}
.cta--lit > .wrap { position: relative; }
@media (forced-colors: active) { .cta--lit::before { display: none; } }










@media (min-width: 48em) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .site-footer__grid { grid-template-columns: 1.7fr 1fr 1.3fr auto; gap: var(--sp-7); }
}
.footer-nav__h {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: var(--sp-4);
}
.footer-nav ul { display: grid; gap: var(--sp-3); }
.footer-nav a {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.footer-nav a:hover { color: var(--accent); }
.footer-contact > * + * { margin-top: var(--sp-3); }
.footer-contact .btn { margin-top: var(--sp-5); }























.hero--page .hero__inner { display: grid; gap: var(--sp-7); align-items: start; }


.hero--page .hero__inner > * + * { margin-top: 0; }
.hero__main > * + * { margin-top: var(--sp-6); }

@media (min-width: 60em) {
  .hero--page .hero__inner {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
    gap: var(--sp-9);
    align-items: center;
  }
}





.hero-panel__h {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: var(--sp-4);
}
.hero-panel__list { border-top: var(--border) solid var(--line); }
.hero-panel__row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sp-2) var(--sp-4);
  align-items: baseline;
  padding-block: var(--sp-4);
  border-bottom: var(--border) solid var(--line);
  color: inherit;
  text-decoration: none;
}



a.hero-panel__row {
  transition: padding-inline-start var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
a.hero-panel__row::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 300ms var(--ease-out);
}
a.hero-panel__row:is(:hover, :focus-visible) {
  padding-inline-start: var(--sp-3);
  border-color: var(--accent);
}
a.hero-panel__row:is(:hover, :focus-visible)::after { transform: scaleY(1); }
a.hero-panel__row:is(:hover, :focus-visible) .hero-panel__k { color: var(--accent); }

.hero-panel__n {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--fg-faint);
}
.hero-panel__k { font-size: var(--fs-sm); font-weight: 700; transition: color var(--dur) var(--ease); }
.hero-panel__v {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--fs-md);
  white-space: nowrap;
}


.hero-panel__v--quiet {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}
.hero-panel__note {
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg-faint);
}




.hero--tight { padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem) clamp(2rem, 1.5rem + 2vw, 3rem); }
.hero--tight + .section { padding-block-start: clamp(2rem, 1.25rem + 3vw, 3.5rem); }




.work-rows { display: grid; gap: var(--sp-9); }
@media (min-width: 56em) {
  


  .work-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-8); align-items: center; }
  
  .work-row:nth-child(even) .project__media { order: 2; }
  .work-row .project__body { padding: 0; }
  .work-row .project__media { aspect-ratio: 3 / 2; }
}
.work-row .project__title { font-size: var(--fs-2xl); }













.hero--statement .hero__lede { max-width: 46ch; font-size: var(--fs-md); }

































.lit { position: relative; overflow: clip; }



.lit::after {
  content: "";
  position: absolute;
  inset: -20% -60%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(104deg,
    transparent 38%,
    rgba(255, 255, 255, 0.07) 46%,
    rgba(198, 240, 255, 0.16) 50%,
    rgba(255, 255, 255, 0.07) 54%,
    transparent 62%);
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .lit {
      animation: bd-lit linear both;
      animation-timeline: view();
      




      animation-range: cover 6% cover 52%;
    }
    .lit::after {
      animation: bd-lit-band linear both;
      animation-timeline: view();
      animation-range: cover 6% cover 58%;
    }
  }
}

@keyframes bd-lit {
  



  from { filter: brightness(0.32) saturate(0.45); }
  62%  { filter: brightness(1.03) saturate(1.02); }
  to   { filter: none; }
}
@keyframes bd-lit-band {
  from { opacity: 0;    transform: translate3d(-42%, 0, 0); }
  30%  { opacity: 0.85; }
  70%  { opacity: 0.6; }
  to   { opacity: 0;    transform: translate3d(42%, 0, 0); }
}




























@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .svc__price {
      animation: bd-price linear both;
      animation-timeline: view();
      animation-range: cover 5% cover 42%;
    }
  }
}
@keyframes bd-price {
  from { letter-spacing: 0.08em; opacity: 0.55; }
  45%  { opacity: 1; }
  to   { letter-spacing: -0.01em; opacity: 1; }
}










.mark-plate::after {
  content: "";
  width: min(19rem, 74%);
  aspect-ratio: 1;
  grid-area: 1 / 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  


  background: radial-gradient(circle at 84.1% 14%,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(190, 240, 255, 0.5) 4%,
    rgba(51, 204, 255, 0.22) 12%,
    rgba(51, 204, 255, 0.06) 26%,
    transparent 44%);
  transform-origin: 84.1% 14%;
}



.mark-plate::before, .mark-plate img { grid-area: 1 / 1; }
.mark-plate { place-items: center; }

@media (forced-colors: active) { .mark-plate::after { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .mark-plate {
      animation: bd-mark-lit linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 44%;
    }
    .mark-plate::after {
      animation: bd-mark-spark linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 50%;
    }
  }
}
@keyframes bd-mark-lit {
  from { filter: brightness(0.22) saturate(0.4); }
  70%  { filter: brightness(1.04) saturate(1.02); }
  to   { filter: none; }
}
@keyframes bd-mark-spark {
  from { opacity: 0;    scale: 0.12; }
  22%  { opacity: 1; }
  to   { opacity: 0;    scale: 2.6; }
}

















.raise { filter: drop-shadow(0 18px 34px rgba(10, 10, 15, 0.22)); }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .raise {
      animation: bd-raise linear both;
      animation-timeline: view();
      animation-range: cover 4% cover 46%;
    }
  }
}
@keyframes bd-raise {
  from {
    opacity: 0.55;
    transform: translate3d(0, 1.5rem, 0);
    filter: drop-shadow(0 2px 6px rgba(10, 10, 15, 0.07));
  }
  40% { opacity: 1; }
  to {
    opacity: 1;
    transform: none;
    filter: drop-shadow(0 18px 34px rgba(10, 10, 15, 0.22));
  }
}