/* ══════════════════════════════════════════════════════════════════════
   Alessandra Woods — Electrical Pre-Apprentice, Virginia
   Direction: industrial spec-sheet. Copper conductor on graphite.
   Display: Bricolage Grotesque · Body: Chivo · Labels: Chivo Mono
   ══════════════════════════════════════════════════════════════════════ */

/* === defensive base — injected by harden_css.py; do not hand-edit === */
*, *::before, *::after { box-sizing: border-box; min-width: 0; }
html { scroll-padding-top: calc(var(--nav-h, 72px) + 1rem); }
img, svg, video, iframe, canvas, table { display: block; max-width: 100%; }
p, li, h1, h2, h3, h4, blockquote, td, dd, dt { overflow-wrap: anywhere; }
form[style*="min-height"] { align-content: center; }
/* === end defensive base === */

:root{
  --ink:      #131519;
  --ink-1:    #191c22;
  --ink-2:    #202429;
  --line:     #2c3138;
  --line-lt:  #3a4049;

  --copper:    #bf6a3a;
  --copper-lt: #dd8b57;
  --copper-dk: #93502b;
  --signal:    #e8b13d;

  --paper: #f2efe9;
  --dim:   #a4abb5;
  --dim-2: #767d87;

  --display: "Bricolage Grotesque", Georgia, serif;
  --body:    "Chivo", "Helvetica Neue", sans-serif;
  --mono:    "Chivo Mono", ui-monospace, monospace;

  --nav-h: 66px;
  --gut:   clamp(1.15rem, 4vw, 3rem);
  --wrap:  1180px;
  --r:     3px;

  --ease: cubic-bezier(.22,.68,.24,1);
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font:400 1rem/1.65 var(--body);
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}

/* faint schematic ruling behind everything */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.017) 0 1px, transparent 1px 54px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.012) 0 1px, transparent 1px 54px);
}
body > *{ position:relative; z-index:1; }

img,svg,picture{ display:block; }
a{ color:inherit; }

h1,h2,h3{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.028em;
  line-height:.94;
  margin:0;
  font-variation-settings:"opsz" 96;
}

::selection{ background:var(--copper); color:#fff; }

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

/* hidden by clipping, not by an off-screen offset — a negative left reads as
   horizontal overflow to layout assertions */
.skip{
  position:absolute; left:0; top:0;
  width:1px; height:1px; padding:0; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
  background:var(--copper); color:#fff;
  text-decoration:none; z-index:99;
  font:500 .9rem var(--mono);
}
.skip:focus{
  width:auto; height:auto; overflow:visible; clip-path:none;
  padding:.7rem 1.1rem; left:.6rem; top:.6rem;
}

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

/* ═══════════════ TYPE UTILITIES ═══════════════ */

.tag{
  font:500 .715rem/1 var(--mono);
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--copper-lt);
  margin:0 0 1.15rem;
}

.s-head{ max-width:47rem; margin-bottom:clamp(2.4rem,5vw,3.6rem); }
.s-head h2{ font-size:clamp(2.1rem,5.4vw,3.6rem); }
.s-lede{
  color:var(--dim);
  font-size:clamp(1rem,1.6vw,1.12rem);
  margin:1.15rem 0 0; max-width:44rem;
}
.s-lede b{ color:var(--paper); font-weight:500; }

/* ═══════════════ BUTTONS ═══════════════ */

.btn{
  --bg:transparent; --fg:var(--paper); --bd:var(--line-lt);
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  padding:.92rem 1.5rem;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--bd); border-radius:var(--r);
  font:500 .935rem/1 var(--body);
  letter-spacing:.005em;
  text-decoration:none; cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease),
             color .2s var(--ease), transform .2s var(--ease);
}
.btn i{ font-style:italic; }
.btn:hover{ transform:translateY(-1px); }

.btn-primary{ --bg:var(--copper); --fg:#fff; --bd:var(--copper); }
.btn-primary:hover{ --bg:var(--copper-lt); --bd:var(--copper-lt); }

.btn-ghost:hover{ --bd:var(--copper); --fg:var(--copper-lt); }

.btn-sm{ padding:.68rem 1.1rem; font-size:.865rem; }
.btn-lg{ padding:1.06rem 1.85rem; font-size:1rem; }

.link{
  font:500 .93rem var(--body);
  color:var(--copper-lt); text-decoration:none;
  border-bottom:1px solid rgba(221,139,87,.32);
  padding-bottom:2px;
  align-self:start;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.link:hover{ color:var(--paper); border-color:var(--paper); }

/* ═══════════════ NAV ═══════════════ */

.nav{
  position:sticky; top:0; z-index:40;
  background:rgba(19,21,25,.86);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--gut);
  height:var(--nav-h);
  display:flex; align-items:center; gap:1.1rem;
}

.brand{
  display:flex; align-items:center; gap:.62rem;
  text-decoration:none; margin-right:auto; min-width:0;
}
.brand img{ width:34px; height:34px; flex:none; }
.brand-txt{ display:flex; flex-direction:column; min-width:0; }
.brand-txt b{
  font:800 1.015rem/1.05 var(--display);
  letter-spacing:-.022em; white-space:nowrap;
  font-variation-settings:"opsz" 96;
}
.brand-txt em{
  font:400 .655rem/1.35 var(--mono);
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--dim-2); font-style:normal; white-space:nowrap;
}

.nav-links{ display:flex; align-items:center; gap:1.7rem; }
.nav-links > a:not(.btn){
  font:400 .9rem/1 var(--body);
  color:var(--dim); text-decoration:none;
  transition:color .18s var(--ease);
  white-space:nowrap;
}
.nav-links > a:not(.btn):hover{ color:var(--paper); }
.nav-cta-m{ display:none; }

.burger{
  display:none;
  width:42px; height:42px; flex:none;
  background:none; border:1px solid var(--line-lt); border-radius:var(--r);
  cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.burger span{
  display:block; width:16px; height:1.5px;
  background:var(--paper);
  transition:transform .22s var(--ease), opacity .22s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

/* ═══════════════ HERO ═══════════════ */

.hero{
  container-type:inline-size;
  min-height:calc(100svh - var(--nav-h));
  display:flex; align-items:center;
  padding-block:clamp(1.4rem,4cqi,3.4rem);
  padding-inline:var(--gut);
  position:relative;
  overflow-x:clip;                  /* scopes the decorative glow */
  border-bottom:1px solid var(--line);
}
/* copper wash + grain, contained */
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58rem 40rem at 76% 8%,  rgba(191,106,58,.20), transparent 68%),
    radial-gradient(42rem 34rem at 6% 96%, rgba(232,177,61,.075), transparent 70%);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-grid{
  position:relative; z-index:1;
  width:100%; max-width:var(--wrap); margin-inline:auto;
  display:grid; align-items:center;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.76fr);
  gap:clamp(1.5rem,5cqi,4.5rem);
}

.hero-copy{ display:flex; flex-direction:column; min-width:0; }

.eyebrow{
  display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;
  font:500 clamp(.68rem,1.75cqi,.775rem)/1.3 var(--mono);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--copper-lt);
  margin:0 0 clamp(.9rem,2.4cqi,1.35rem);
}
.eyebrow span{ color:var(--dim-2); }
.live{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--signal);
  box-shadow:0 0 0 3px rgba(232,177,61,.16);
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 3px rgba(232,177,61,.16); }
  50%    { box-shadow:0 0 0 7px rgba(232,177,61,.03); }
}

.hero h1{
  font-size:clamp(2.5rem,11.4cqi,5.05rem);
  line-height:.895;
  margin:0;
}

.lede{
  color:var(--dim);
  font-size:clamp(.985rem,2.35cqi,1.155rem);
  line-height:1.6;
  max-width:31rem;
  margin:clamp(1rem,2.6cqi,1.5rem) 0 0;
}

.cta-row{
  display:flex; flex-wrap:wrap; gap:.7rem;
  margin-top:clamp(1.35rem,3.4cqi,2.05rem);
}
.cta-row-sm{ margin-top:1.6rem; }

.proof{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:.55rem .8rem;
  margin:clamp(1.3rem,3.2cqi,1.95rem) 0 0;
  padding-top:clamp(1rem,2.6cqi,1.4rem);
  border-top:1px solid var(--line);
  font:500 clamp(.665rem,1.68cqi,.755rem)/1 var(--mono);
  letter-spacing:.155em; text-transform:uppercase;
  color:var(--dim);
}
.proof b{ font-weight:500; color:var(--paper); white-space:nowrap; }
.proof i{ width:14px; height:1px; background:var(--copper); flex:none; }

/* portrait */
.hero-figure{
  position:relative; margin:0; min-width:0;
  justify-self:end; width:100%; max-width:26rem;
}
/* No padding: the image fills the frame exactly, and the "mat" is drawn as an
   inset hairline OVER it. Padding here would leave the img short of its own
   box, which layout assertions read as a collapsed-image gap. */
.frame{
  position:relative;
  border:1px solid var(--line-lt);
  border-radius:var(--r);
  overflow:hidden;
}
.frame::before{                     /* copper corner ticks */
  content:""; position:absolute; inset:0; z-index:2;
  pointer-events:none;
  background:
    linear-gradient(var(--copper),var(--copper)) 0 0/2px 30px no-repeat,
    linear-gradient(var(--copper),var(--copper)) 0 0/30px 2px no-repeat,
    linear-gradient(var(--copper),var(--copper)) 100% 100%/2px 30px no-repeat,
    linear-gradient(var(--copper),var(--copper)) 100% 100%/30px 2px no-repeat;
}
.frame::after{                      /* inset hairline + copper wash */
  content:""; position:absolute; inset:10px; z-index:1;
  pointer-events:none;
  border:1px solid rgba(242,239,233,.26);
  background:linear-gradient(165deg, rgba(191,106,58,.13), transparent 58%);
}
.frame picture,.frame img{ display:block; width:100%; }
.frame img{
  aspect-ratio:4/5;
  height:auto;
  object-fit:cover; object-position:50% 20%;
  filter:saturate(.92) contrast(1.03);
}

.plate{
  position:absolute; left:-.5rem; bottom:-.85rem;
  z-index:3;                        /* must clear .frame::before's corner ticks */
  display:flex; align-items:stretch;
  background:var(--ink-1);
  border:1px solid var(--line-lt); border-left:2px solid var(--signal);
  border-radius:2px;
  box-shadow:0 12px 34px -14px rgba(0,0,0,.8);
  overflow:hidden;
}
.plate span{
  font:500 clamp(.6rem,1.5cqi,.69rem)/1 var(--mono);
  letter-spacing:.15em; text-transform:uppercase;
  padding:.62rem .8rem;
  white-space:nowrap;
}
.plate-k{ color:var(--signal); }
.plate-v{ color:var(--paper); border-left:1px solid var(--line); }

/* ═══════════════ BANDS ═══════════════ */

.band{
  padding-block:clamp(4rem,9vw,7.5rem);
  border-bottom:1px solid var(--line);
}
.band-alt{
  background:var(--ink-1);
  background-image:radial-gradient(rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:22px 22px;
}

/* ═══════════════ CERTIFICATIONS ═══════════════ */

/* pinned to 3 across, not auto-fit: 6 cards must fill exactly 2 rows, or the
   leftover cells show through as a flat empty slab */
.certs{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
}
.cert{
  background:var(--ink);
  padding:1.7rem 1.5rem 1.85rem;
  display:flex; flex-direction:column;
  position:relative;
  transition:background .25s var(--ease);
}
.cert:hover{ background:var(--ink-2); }
.cert::after{
  content:""; position:absolute; left:0; top:0; width:2px; height:0;
  background:var(--copper);
  transition:height .32s var(--ease);
}
.cert:hover::after{ height:100%; }

.cert-n{
  font:500 .68rem/1 var(--mono);
  letter-spacing:.16em; color:var(--dim-2);
  margin:0 0 1.05rem;
}
.cert h3{ font-size:1.4rem; letter-spacing:-.02em; }
.cert-sub{
  font:400 .845rem/1.45 var(--body);
  color:var(--dim-2);
  margin:.52rem 0 0;
}
.cert-note{
  font-size:.925rem; line-height:1.55;
  color:var(--dim);
  margin:1.15rem 0 0;
  padding-left:.85rem;
  border-left:1px solid var(--copper-dk);
}
.cert-note i{ color:var(--paper); }
.cert-meta{
  font:500 .665rem/1 var(--mono);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim-2);
  margin:auto 0 0; padding-top:1.5rem;
}
.cert-meta span{ color:var(--copper-lt); }

.cert-lead{ background:var(--ink-2); }
.cert-lead::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(22rem 14rem at 100% 0, rgba(232,177,61,.09), transparent 70%);
}
.cert-lead h3{ font-size:1.72rem; }
.cert-lead > *{ position:relative; }

.also{
  display:flex; align-items:center; flex-wrap:wrap; gap:.5rem .85rem;
  margin:1.6rem 0 0;
  font:400 .845rem/1.5 var(--body);
  color:var(--dim);
}
.also span{
  font:500 .655rem/1 var(--mono);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim-2);
}
.also i{ width:14px; height:1px; background:var(--line-lt); flex:none; }

/* ═══════════════ PROBLEM SOLVING FLOW ═══════════════ */

.flow{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(1rem,2.4vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  counter-reset:f;
}
.flow-step{
  position:relative;
  background:var(--ink);
  border:1px solid var(--line);
  border-top:2px solid var(--copper-dk);
  border-radius:var(--r);
  padding:1.65rem 1.5rem 1.75rem;
}
.flow-end{ border-top-color:var(--signal); }

.flow-k{
  font:500 .675rem/1 var(--mono);
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--copper-lt);
  margin:0 0 .95rem;
}
.flow-end .flow-k{ color:var(--signal); }
.flow-v{
  font:800 clamp(1.2rem,2.5vw,1.5rem)/1.15 var(--display);
  letter-spacing:-.022em;
  font-variation-settings:"opsz" 96;
  margin:0;
}
.flow-x{
  font:400 .855rem/1.5 var(--body);
  color:var(--dim-2);
  margin:.85rem 0 0;
}

/* ═══════════════ MUSIC ═══════════════ */

.album{
  display:grid; gap:clamp(1.8rem,4vw,3.4rem);
  grid-template-columns:minmax(0,320px) minmax(0,1fr);
  align-items:start;
}
.album-art{ margin:0; min-width:0; }
/* source is a true 600×600 square, so no aspect-ratio/object-fit is needed —
   width:100% + height:auto gives an exact box with nothing left over */
.album-art .art{
  position:relative;
  border:1px solid var(--line-lt); border-radius:var(--r);
  overflow:hidden;
}
.album-art .art::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(242,239,233,.1);
  background:linear-gradient(150deg, rgba(191,106,58,.12), transparent 55%);
}
.album-art picture{ display:block; }
.album-art img{ width:100%; height:auto; }
/* NOT uppercased: the artist name is "Weird0" with a zero, and small-cap mono
   renders that indistinguishably from an O */
.album-art figcaption{
  font:500 .8rem/1.45 var(--mono);
  letter-spacing:.04em;
  color:var(--dim);
  margin-top:.95rem;
}
.album-art figcaption i{ color:var(--copper); font-style:normal; }

.album-body{ min-width:0; }

.tracks{
  list-style:none; margin:0; padding:0;
  border-top:1px solid var(--line);
}
.tracks li{
  display:flex; align-items:baseline; gap:.9rem;
  padding:.72rem .1rem;
  border-bottom:1px solid var(--line);
  transition:background .2s var(--ease), padding-left .2s var(--ease);
}
.tracks li:hover{ background:rgba(255,255,255,.022); padding-left:.5rem; }
.t-n{
  font:500 .69rem/1 var(--mono);
  color:var(--copper); flex:none; width:1.1rem;
}
.t-t{ flex:1 1 auto; font-size:.985rem; min-width:0; }
.t-d{
  font:400 .78rem/1 var(--mono);
  color:var(--dim-2); flex:none;
}

.quote{
  margin:1.9rem 0 0; padding:0 0 0 1.15rem;
  border-left:2px solid var(--copper);
  font:italic 400 1.03rem/1.62 var(--body);
  color:var(--dim);
}

/* ═══════════════ WORK CARDS ═══════════════ */

.work{
  display:grid; gap:clamp(1rem,2.4vw,1.6rem);
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
}
.card{
  display:flex; flex-direction:column;
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:1.85rem 1.7rem 1.95rem;
}
.card-k{
  font:500 .675rem/1.4 var(--mono);
  letter-spacing:.155em; text-transform:uppercase;
  color:var(--copper-lt);
  margin:0 0 1rem;
}
.card-k i{ color:var(--dim-2); font-style:normal; }
.card h3{ font-size:clamp(1.3rem,2.6vw,1.62rem); }
.card-p{
  font-size:.945rem; line-height:1.6;
  color:var(--dim);
  margin:.9rem 0 0;
}

.shot{
  margin:1.45rem 0 0;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  background:#0f1114;
}
.shot picture{ display:block; }
.shot img{ width:100%; height:auto; }

/* published-project rows — echoes the album tracklist so the two work cards
   read as one system, and gives the shorter card real content instead of void */
.mini-list{
  list-style:none; margin:1.5rem 0 1.7rem; padding:0;
  border-top:1px solid var(--line);
}
.mini-list li{
  display:flex; align-items:baseline; gap:.85rem;
  padding:.66rem .1rem;
  border-bottom:1px solid var(--line);
  transition:background .2s var(--ease), padding-left .2s var(--ease);
}
.mini-list li:hover{ background:rgba(255,255,255,.022); padding-left:.5rem; }
.m-n{
  font:500 .655rem/1 var(--mono);
  color:var(--copper); flex:none; letter-spacing:.06em;
}
.m-t{ font-size:.945rem; line-height:1.35; min-width:0; }
.m-t em{
  font-style:normal; color:var(--dim-2); font-size:.78rem;
  white-space:nowrap;
}

.chips{
  list-style:none; margin:1.4rem 0 1.6rem; padding:0;
  display:flex; flex-wrap:wrap; gap:.45rem;
}
.chips li{
  font:400 .8rem/1 var(--body);
  color:var(--dim);
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:2px;
  padding:.5rem .68rem;
}
.chips li span{ color:var(--dim-2); font-size:.72rem; }
.card .link{ margin-top:auto; }

/* ═══════════════ CTA BAND ═══════════════ */

.cta-band{
  padding-block:clamp(3.6rem,8vw,6.4rem);
  background:var(--ink-1);
  position:relative; overflow-x:clip;
}
.cta-band::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(46rem 26rem at 82% 50%, rgba(191,106,58,.15), transparent 70%);
}
.cta-in{
  position:relative;
  display:grid; gap:clamp(1.8rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
}
.cta-in h2{ font-size:clamp(1.95rem,4.6vw,3.05rem); }
.cta-actions{
  display:flex; flex-direction:column; align-items:flex-start; gap:1rem;
}
.mail{
  font:400 .875rem/1 var(--mono);
  color:var(--dim); text-decoration:none;
  border-bottom:1px solid var(--line-lt);
  padding-bottom:3px;
  word-break:break-all;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.mail:hover{ color:var(--copper-lt); border-color:var(--copper); }

/* ═══════════════ FOOTER ═══════════════ */

.foot{
  padding-block:clamp(2.6rem,5vw,3.8rem);
  border-top:1px solid var(--line);
  background:var(--ink);
}
.foot-in{
  display:flex; flex-wrap:wrap; gap:2rem clamp(2rem,6vw,5rem);
  align-items:flex-start;
}
.foot-brand{ display:flex; align-items:center; gap:.8rem; margin-right:auto; }
.foot-brand img{ width:40px; height:40px; flex:none; }
.foot-brand p{ margin:0; display:flex; flex-direction:column; }
.foot-brand b{
  font:800 1.06rem/1.1 var(--display);
  letter-spacing:-.022em;
  font-variation-settings:"opsz" 96;
}
.foot-brand span{
  font:400 .655rem/1.5 var(--mono);
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--dim-2);
}
.foot-nav{ display:flex; flex-direction:column; gap:.62rem; }
.foot-nav a{
  font:400 .865rem/1 var(--body);
  color:var(--dim); text-decoration:none;
  transition:color .18s var(--ease);
}
.foot-nav a:hover{ color:var(--copper-lt); }

/* ═══════════════ CONTACT PAGE ═══════════════ */

.sr-only{
  position:absolute !important;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.page-head{
  container-type:inline-size;
  padding-block:clamp(3rem,8vw,5.6rem) clamp(2.4rem,5vw,3.4rem);
  position:relative; overflow-x:clip;
  border-bottom:1px solid var(--line);
}
.page-head::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(52rem 30rem at 78% 0, rgba(191,106,58,.17), transparent 70%);
}
.page-head .wrap{ position:relative; }
.page-head h1{ font-size:clamp(2.5rem,10cqi,4.6rem); }
.page-head .lede{ max-width:36rem; }

.contact-grid{
  display:grid; gap:clamp(1.6rem,4vw,3.2rem);
  grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr);
  align-items:start;
}

.form-card{
  background:var(--ink-1);
  border:1px solid var(--line);
  border-top:2px solid var(--copper);
  border-radius:var(--r);
  padding:clamp(1.5rem,3.4vw,2.4rem);
  min-width:0;
}
.form-card h2{ font-size:clamp(1.6rem,3.4vw,2.1rem); margin-bottom:1.7rem; }

.form-fields{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.field{ display:flex; flex-direction:column; gap:.5rem; margin:0; min-width:0; }
.field-wide{ grid-column:1/-1; }

.field label{
  font:500 .675rem/1 var(--mono);
  letter-spacing:.155em; text-transform:uppercase;
  color:var(--dim);
}
.field input,.field textarea{
  width:100%;
  font:400 .965rem/1.5 var(--body);
  color:var(--paper);
  background:var(--ink);
  border:1px solid var(--line-lt);
  border-radius:var(--r);
  padding:.85rem .95rem;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.field textarea{ resize:vertical; min-height:7.5rem; }
.field input::placeholder,.field textarea::placeholder{ color:#5d646d; }
.field input:focus,.field textarea:focus{
  outline:none;
  border-color:var(--copper);
  background:var(--ink-2);
}
.field input:user-invalid,.field textarea:user-invalid{ border-color:#a8503f; }

#estimate-form button[type="submit"]{ margin-top:1.6rem; width:100%; }
#estimate-form button.is-sent{
  --bg:var(--ink-2); --fg:var(--signal); --bd:var(--line-lt);
  opacity:1; transform:none;
}

.form-status{
  margin:1.15rem 0 0; padding:.95rem 1.1rem;
  border-radius:var(--r);
  font-size:.945rem; line-height:1.55;
  border:1px solid var(--line-lt);
  background:var(--ink);
}
.form-status.is-good{
  border-color:var(--copper-dk);
  border-left:2px solid var(--signal);
  color:var(--paper);
}
.form-status.is-bad{
  border-color:#a8503f; border-left:2px solid #c4614a;
  color:#f0cec6;
}

.form-fine{
  margin:1.05rem 0 0;
  font:400 .755rem/1.5 var(--mono);
  letter-spacing:.03em; color:var(--dim-2);
}

.turnstile-box{ margin-top:1.4rem; }

.contact-side{ display:flex; flex-direction:column; gap:1.75rem; min-width:0; }
.side-block{
  padding-left:1rem;
  border-left:1px solid var(--line-lt);
  min-width:0;
}
.side-k{
  font:500 .655rem/1 var(--mono);
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--copper-lt);
  margin:0 0 .7rem;
}
.side-v{
  display:block;
  font:500 1rem/1.4 var(--body);
  color:var(--paper); text-decoration:none;
  word-break:break-word;
  transition:color .2s var(--ease);
}
a.side-v:hover{ color:var(--copper-lt); }
.side-v-plain{ margin:0; }
.side-x{
  margin:.4rem 0 0;
  font-size:.86rem; line-height:1.5; color:var(--dim-2);
}
.side-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:.5rem;
  font-size:.885rem; line-height:1.45;
  color:var(--dim);
}
.side-links a{
  color:var(--dim); text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.side-links a:hover{ color:var(--paper); border-color:var(--copper); }

@media (max-width:880px){
  .contact-grid{ grid-template-columns:1fr; }
  .form-fields{ grid-template-columns:1fr; }
}

/* ═══════════════ SCROLL REVEAL (below the fold only) ═══════════════ */

.rise{
  opacity:0; transform:translateY(16px);
  transition:opacity .62s var(--ease), transform .62s var(--ease);
}
.rise.in{ opacity:1; transform:none; }

/* ═══════════════ RESPONSIVE ═══════════════ */

@media (max-width:1020px){
  .nav-links{ gap:1.25rem; }
  .nav-links > a:not(.btn){ font-size:.855rem; }
}

@media (max-width:880px){
  :root{ --nav-h:60px; }

  .brand-txt em{ display:none; }
  .nav-cta{ display:none; }
  .nav-cta-m{ display:inline-flex; }
  .burger{ display:flex; }

  .nav-links{
    display:none;
    position:absolute; left:0; right:0; top:var(--nav-h);
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink-1);
    border-bottom:1px solid var(--line);
    box-shadow:0 22px 44px -18px rgba(0,0,0,.8);
    padding:.5rem var(--gut) 1.15rem;
  }
  .nav-links.open{ display:flex; }
  .nav-links > a:not(.btn){
    padding:.92rem .1rem; font-size:.985rem;
    border-bottom:1px solid var(--line);
  }
  .nav-cta-m{ margin-top:1rem; }

  /* hero: portrait becomes a compact plate above the copy so the whole
     first screen (headline + CTAs + proof) still clears the fold */
  .hero-grid{ grid-template-columns:1fr; gap:0; }
  .hero-figure{
    order:-1; justify-self:start;
    width:clamp(120px,38cqi,168px); max-width:none;
    margin-bottom:clamp(1.5rem,5cqi,2.1rem);
  }
  .frame img{ aspect-ratio:1/1; }
  .frame::after{ inset:6px; }
  .frame::before{ background-size:2px 18px, 18px 2px, 2px 18px, 18px 2px; }
  /* anchor LEFT, not right: the plate is wider than the shrunken figure, so
     right-anchoring pushes it off the viewport and the hero clips it */
  .plate{ left:0; right:auto; bottom:-.8rem; }
  .plate span{ padding:.46rem .58rem; font-size:.6rem; letter-spacing:.11em; }
  .lede{ max-width:34rem; }

  .album{ grid-template-columns:1fr; }
  .album-art{ max-width:320px; }

  .cta-in{ grid-template-columns:1fr; }
  .certs{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:520px){
  .certs{ grid-template-columns:1fr; }
  .cert-lead h3{ font-size:1.55rem; }
  .foot-in{ gap:1.9rem 2.5rem; }
  .foot-nav{ min-width:8.5rem; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rise{ opacity:1; transform:none; }
}

/* === site credit (injected by credit_footer.py); do not hand-edit === */
.site-credit {
  margin: 2.25rem 0 0;
  padding-inline: 1.25rem;
  font-size: .73rem;
  line-height: 1.5;
  letter-spacing: .06em;
  text-align: center;
  opacity: .65;
}
.site-credit a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(128, 128, 128, .5);
  border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  transition: border-bottom-color .25s ease;
}
.site-credit a:hover,
.site-credit a:focus-visible { border-bottom-color: currentColor; }
@media (prefers-reduced-motion: reduce) {
  .site-credit a { transition: none; }
}

/* Shares the footer's own copyright row: sits opposite it rather than adding a
   third line under the page. The parent is reached with :has() so no client
   class name has to be guessed, and the rule cannot fire on a footer that has
   no inline credit in it. */
.site-credit--inline {
  margin: 0;
  padding: 0;
  text-align: right;
}
footer :has(> .site-credit--inline) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .35rem 1.5rem;
}
/* === end site credit === */