/* Finale Media — single stylesheet */
@font-face{font-family:"Anton";src:url(../fonts/anton-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Anton Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Helvetica Bold");font-weight:400;size-adjust:73.8%;ascent-override:159.4%;descent-override:44.6%;line-gap-override:0%}

:root{
  --red:#af3434;
  --text:#414141;
  --gray-h:#606060;
  --band:#4a4a4a;
  --panel:#6e6d6b;
  --footer:#222;
  --ink:#222;
  --white:#fff;
  --quote-cite:#bababa;   /* AA-adjusted from #aaa */
  --footer-link:#ee5f5f;  /* AA-adjusted from #e94b4b */
  --hdr-bg:rgba(74,74,74,.9);

  --display:"Anton","Anton Fallback",Impact,sans-serif;
  --body:Arial,"Helvetica Neue",Helvetica,"Liberation Sans",sans-serif;

  --hdr:84px;
  --gutter:clamp(16px,2.7vw,32px);
  --wrap:920px;
  --space-s:16px;
  --space-m:clamp(32px,5vw,56px);
  --space-l:clamp(64px,9vw,110px);
  --h2:clamp(34px,4.2vw,46px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font:16px/1.55 var(--body);color:var(--text);background:var(--white)}
img,svg{display:block;max-width:100%;height:auto}
h1,h2,p,ul,ol,figure,blockquote{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;z-index:20;padding:10px 16px;background:var(--white);color:var(--ink);font-weight:700}
.skip:focus{top:8px}
.display{font-family:var(--display);font-weight:400;line-height:1.1;letter-spacing:0}
.wrap{max-width:calc(var(--wrap) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
section[id]{scroll-margin-top:var(--hdr)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ---------- Header ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:10;height:var(--hdr);display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:var(--gutter);transition:background-color .3s}
.scrolled .site-header{background:var(--hdr-bg)}
.logo{display:block;flex:none}
.logo img{width:290px}
.site-header--solid{position:static;justify-content:center;background:var(--band)}
.site-header--solid .logo img{width:325px}
.top-sentinel{position:absolute;top:0;left:0;width:1px;height:60px;pointer-events:none}

.nav ul{list-style:none;margin:0;padding:0}
.nav a{display:block;text-decoration:none;color:var(--white);text-transform:uppercase;font-size:16px;line-height:1;padding:12px 0}
.nav a:hover{text-decoration:underline;text-underline-offset:5px}
.nav .btn{background:var(--red);border-radius:999px;padding:12px 24px}
.nav .btn:hover{background:#962c2c;text-decoration:none}
.menu-btn{display:none;width:44px;height:44px;padding:10px;border:0;border-radius:6px;background:transparent;color:var(--white);cursor:pointer}
.menu-btn svg{width:24px;height:24px}

@media (min-width:900px){
  #menu{display:flex;align-items:center;gap:clamp(24px,4vw,48px);position:static;inset:auto;width:auto;height:auto;margin:0;padding:0;border:0;overflow:visible;background:none;color:inherit}
}
@media (max-width:899px){
  :root{--hdr:64px}
  .logo img{width:200px}
  .site-header--solid .logo img{width:240px}
  .menu-btn{display:block}
  #menu:popover-open{display:flex;flex-direction:column;gap:4px;position:fixed;inset:var(--hdr) 0 auto 0;width:100%;height:auto;margin:0;padding:12px var(--gutter) 24px;border:0;background:#2b2b2b;box-shadow:0 12px 24px rgba(0,0,0,.3)}
  #menu a{padding:14px 0;font-size:17px}
  #menu .btn{display:inline-block;margin-top:8px;padding:14px 28px}
}

/* ---------- Hero ---------- */
.hero{position:relative;display:grid;color:var(--white);background:#6e6d6b;overflow:hidden}
.hero > *{grid-area:1/1}
.hero > picture,.hero > picture img{width:100%;height:100%}
.hero > picture img{object-fit:cover;object-position:center top}
.hero-copy{position:relative;align-self:start;max-width:calc(580px + 2*var(--gutter));padding:calc(var(--hdr) + 32px) var(--gutter) 64px}
.hero h1{display:flex;align-items:center;gap:18px;color:var(--ink);font-size:clamp(40px,4.6vw,54px);margin-bottom:24px}
.hero h1 img{width:clamp(64px,7.4vw,88px);height:auto;flex:none}
.hero p{font-size:clamp(13px,calc(1.75vw - 4px),16px);line-height:1.6;text-shadow:0 1px 8px rgba(0,0,0,.25)}
@media (min-width:768px){
  .hero{height:max(620px,100svh,79.1vw)}
  .hero-copy{padding-top:clamp(140px,19.6vw,260px);margin-left:clamp(0px,calc(17.5vw - var(--gutter)),340px)}
}
@media (max-width:767px){
  .hero{min-height:178vw}
  .hero::before{content:"";grid-area:1/1;z-index:1;background:linear-gradient(rgba(40,40,40,.35),rgba(40,40,40,.15) 55%,transparent 75%)}
  .hero-copy{z-index:2;padding-bottom:0}
  .hero p{font-size:12px}
}

/* ---------- Skills ---------- */
.skills{--h:clamp(480px,70vw,860px);position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,64px);margin-top:-14vw}
.skills picture{display:block;width:calc(var(--h) * .64);height:var(--h)}
.skills img{width:calc(var(--h) * 1.219);max-width:none;height:var(--h);margin-left:calc(var(--h) * -.585)}
.skills-copy{max-width:560px;padding:var(--space-m) var(--gutter) var(--space-m) 0}
.skills h2{color:var(--red);font-size:var(--h2);margin-bottom:28px}
.skills p{font-size:18px;line-height:1.65;letter-spacing:.01em}
.skills ul{margin-top:36px;padding-left:18px;font-size:18px;line-height:1.9}
@media (max-width:767px){
  .skills{grid-template-columns:1fr;gap:0}
  .skills{margin-top:0}
  .skills picture{width:100%;height:auto}
  .skills img{width:100%;height:auto;margin-left:0;aspect-ratio:4/3;object-fit:cover;object-position:30% 20%}
  .skills-copy{padding:var(--space-m) var(--gutter)}
  .skills p,.skills ul{font-size:17px}
}

/* ---------- Testimonial ---------- */
.quote{background:var(--band);color:var(--white);text-align:center;padding:clamp(40px,5vw,60px) var(--gutter)}
.quote blockquote p{font-size:clamp(18px,2vw,21px);line-height:1.45}
.quote figcaption{margin-top:16px;color:var(--quote-cite);font-style:italic;font-size:18px}

/* ---------- Parallax banner ---------- */
.growth{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:clamp(480px,66vw,780px);padding:var(--space-l) var(--gutter);text-align:center;color:var(--white);
  background-color:#3c4448;
  background-image:linear-gradient(rgba(10,14,18,.28),rgba(10,14,18,.28)),url(../img/growth-1536.jpg);
  background-image:linear-gradient(rgba(10,14,18,.28),rgba(10,14,18,.28)),image-set(url(../img/growth-1536.avif) type("image/avif"),url(../img/growth-1536.webp) type("image/webp"),url(../img/growth-1536.jpg) type("image/jpeg"));
  background-size:cover;background-position:center}
@media (max-width:1023px){
  .growth{
    background-image:linear-gradient(rgba(10,14,18,.28),rgba(10,14,18,.28)),url(../img/growth-960.jpg);
    background-image:linear-gradient(rgba(10,14,18,.28),rgba(10,14,18,.28)),image-set(url(../img/growth-960.avif) type("image/avif"),url(../img/growth-960.webp) type("image/webp"),url(../img/growth-960.jpg) type("image/jpeg"))}
}
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  .growth{background-attachment:fixed}
}
.growth h2{font-size:clamp(48px,7.2vw,84px);text-transform:uppercase;padding-top:clamp(80px,16vw,200px);text-shadow:0 2px 16px rgba(0,0,0,.25)}
.growth p{max-width:840px;margin-top:12px;font-size:clamp(18px,2vw,22px);line-height:1.35;text-shadow:0 1px 8px rgba(0,0,0,.5)}

/* ---------- Portfolio ---------- */
.portfolio{padding-block:var(--space-l)}
.portfolio h2{color:var(--gray-h);font-size:var(--h2);text-transform:uppercase;margin-bottom:28px}
.portfolio .intro{max-width:880px;margin-bottom:32px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.col{display:grid;gap:20px}
.grid img{width:100%;border:1px solid #e3e3e3}
@media (max-width:767px){
  .grid{display:block;columns:2;column-gap:12px}
  .col{display:contents}
  .grid picture{display:block;break-inside:avoid;margin-bottom:12px}
}

/* ---------- Company ---------- */
.company{display:grid;grid-template-columns:minmax(0,48.3%) minmax(0,1fr);background:var(--panel);color:var(--white)}
.company picture,.company img{width:100%;height:100%}
.company img{object-fit:cover;aspect-ratio:1}
.company-copy{align-self:center;max-width:640px;padding:var(--space-m) clamp(24px,5vw,72px)}
.company h2{font-size:var(--h2);text-transform:uppercase;margin-bottom:28px}
.company p{font-size:17px;line-height:1.5}
.company p + p{margin-top:1.2em}
@media (max-width:767px){
  .company{grid-template-columns:1fr}
  .company-copy{padding:var(--space-m) var(--gutter)}
}

/* ---------- Legal pages ---------- */
.legal{padding:var(--space-l) var(--gutter)}
.prose{max-width:70ch;margin-inline:auto}
.prose h1{font-size:var(--h2);color:#000;text-transform:uppercase;margin-bottom:24px}
.prose h2{font:400 17px/1.4 var(--body);color:var(--ink);margin:32px 0 12px}
.prose p,.prose ol{margin-bottom:1.15em}
.prose ol{padding-left:24px}
.prose li + li{margin-top:4px}

/* ---------- Footer ---------- */
.site-footer{background:var(--footer);color:var(--white);text-align:center;padding:clamp(64px,8vw,96px) var(--gutter) clamp(48px,6vw,72px);font-size:14px;line-height:1.6}
.site-footer .logo{width:max-content;margin:0 auto 56px}
.site-footer .logo img{width:300px}
.site-footer p + p{margin-top:6px}
.site-footer a{display:inline-block;padding:4px 2px;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer .email{color:var(--footer-link)}
.sep{margin-inline:10px}
@media (max-width:767px){
  .site-footer .logo img{width:220px}
  .nap span,.copy{display:block}
  .nap .sep,.copy + .sep{display:none}
}
.site-header:has(#menu:popover-open){background:var(--hdr-bg)}
/* hero v2 (lighter image) */
@media (min-width:768px){
  .hero::before{content:"";grid-area:1/1;z-index:1;background:linear-gradient(rgba(40,40,40,.45),rgba(40,40,40,0) 140px);pointer-events:none}
  .hero-copy{z-index:2}
}
.hero p{color:#000;text-shadow:none}
.hero{isolation:isolate}
.skills img{mix-blend-mode:multiply}
@media (max-width:767px){
  .hero{min-height:0;background:#82817f linear-gradient(rgba(40,40,40,.45),rgba(40,40,40,0) 120px) no-repeat}
  .hero::before{display:none}
  .hero > *{grid-area:auto}
  .hero-copy{order:-1}
  .hero > picture{height:auto;margin-top:-16vw}
  .hero > picture img{height:auto;-webkit-mask-image:linear-gradient(transparent,#000 9%);mask-image:linear-gradient(transparent,#000 9%)}
}
main:focus{outline:none}
/* animated gauge */
.gauge{flex:none;display:block;width:clamp(64px,7.4vw,88px);cursor:pointer;border-radius:6px}
.gauge-svg{display:block;width:100%;height:auto;overflow:visible}
.needle{transform-box:view-box;transform-origin:56.5px 50px;transform:rotate(22deg)}
@media (prefers-reduced-motion:no-preference){
  .needle{animation:rev 2.2s ease-in-out infinite}
}
.gauge-toggle:checked + h1 .needle{animation-play-state:paused}
.gauge-toggle:focus-visible + h1 .gauge{outline:3px solid var(--red);outline-offset:4px}
@keyframes rev{
  0%,100%{transform:rotate(14deg)}
  14%{transform:rotate(32deg)}
  28%{transform:rotate(18deg)}
  44%{transform:rotate(36deg)}
  60%{transform:rotate(9deg)}
  76%{transform:rotate(30deg)}
  90%{transform:rotate(20deg)}
}