/* ============================================================
   RYAN BERROA — ryanberroa.com
   Aesthetic: Dark Luxury / Editorial Command
   ============================================================ */

/* ---- Self-hosted fonts -------------------------------------------------
   Was an @import of Google Fonts right here: a render-blocking request to a
   third-party origin, chained behind this stylesheet, plus a duplicate <link>
   in every page. Now same-origin — no extra DNS/TLS, and covered by the CSP.

   Each family also gets a metric-matched "… Fallback" face. size-adjust plus
   the ascent/descent overrides make the fallback occupy the SAME space as the
   real font, so the swap no longer reflows text. That reflow was the only
   source of layout shift left on this site. Metrics: @capsizecss/metrics.

   Files are deduped by content: DM Sans 300/400/500/600 are ONE variable file,
   declared once as font-weight:300 600 rather than downloaded four times.
   ---------------------------------------------------------------------- */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/bebas-neue-normal-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/bebas-neue-normal-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:italic;font-weight:300;font-display:swap;src:url('/assets/fonts/dm-sans-italic-300-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:italic;font-weight:300;font-display:swap;src:url('/assets/fonts/dm-sans-italic-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300 600;font-display:swap;src:url('/assets/fonts/dm-sans-normal-300-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300 600;font-display:swap;src:url('/assets/fonts/dm-sans-normal-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Serif Display';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/dm-serif-display-italic-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Serif Display';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/dm-serif-display-italic-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/dm-serif-display-normal-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/dm-serif-display-normal-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans Fallback';src:local('Arial'),local('Helvetica');size-adjust:91.75%;ascent-override:108.12%;descent-override:33.79%;line-gap-override:0.00%}
@font-face{font-family:'DM Serif Display Fallback';src:local('Georgia'),local('Helvetica');size-adjust:98.42%;ascent-override:105.26%;descent-override:34.04%;line-gap-override:0.00%}
@font-face{font-family:'Bebas Neue Fallback';src:local('Arial'),local('Helvetica');size-adjust:73.45%;ascent-override:122.53%;descent-override:40.84%;line-gap-override:0.00%}


:root {
  --ink:      #070a0f;
  --ink2:     #0d1219;
  --panel:    rgba(255,255,255,0.04);
  --panel2:   rgba(255,255,255,0.07);
  --border:   rgba(255,255,255,0.09);
  --border2:  rgba(255,255,255,0.15);
  --text:     #eef2f7;
  --muted:    rgba(238,242,247,0.68);
  /* 0.42 measured 3.7:1 on --ink — below the 4.5:1 floor for small text.
     0.52 lands at ~5.2:1 and keeps the muted look. */
  --soft:     rgba(238,242,247,0.52);
  --gold:     #c9a84c;
  --gold2:    #e8c97a;
  --cyan:     #5bc8e8;
  --shadow:   0 28px 80px rgba(0,0,0,0.55);
  --radius:   24px;
  --font-display: 'DM Serif Display', 'DM Serif Display Fallback', Georgia, serif;
  --font-sans:    'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
  --font-caps:    'Bebas Neue', 'Bebas Neue Fallback', Impact, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);color:var(--text);background:var(--ink);overflow-x:hidden;min-height:100vh}
img,video{display:block;max-width:100%}
a{text-decoration:none;color:inherit}

body::before{
  content:'';position:fixed;inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 75% 5%,rgba(201,168,76,.12) 0%,transparent 60%),
    radial-gradient(ellipse 40% 40% at 15% 85%,rgba(91,200,232,.08) 0%,transparent 55%),
    radial-gradient(ellipse 70% 60% at 50% 50%,rgba(13,18,25,1) 0%,transparent 70%);
  pointer-events:none;z-index:0;
}

.container{width:min(1200px,calc(100% - 2.5rem));margin:0 auto}
.section{padding:6rem 0 0;position:relative;z-index:1}

::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:99px}

@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes drawLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pulse-ring{
  0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(201,168,76,.5)}
  70%{transform:scale(1);box-shadow:0 0 0 12px rgba(201,168,76,0)}
  100%{transform:scale(.95);box-shadow:0 0 0 0 rgba(201,168,76,0)}
}

/* Header */
.site-header{
  position:sticky;top:0;z-index:100;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  background:rgba(7,10,15,.72);
  border-bottom:1px solid var(--border);
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.1rem 0}
.brand{display:flex;align-items:center;gap:1rem}
.brand-logo{width:42px;height:42px;border-radius:12px;border:1px solid rgba(201,168,76,.3);object-fit:cover}
.brand-name{font-family:var(--font-caps);font-size:1.25rem;letter-spacing:.12em;color:var(--text);line-height:1}
.brand-role{margin-top:3px;font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:500}
.nav-links{display:flex;gap:2rem;font-size:.82rem;letter-spacing:.15em;text-transform:uppercase;font-weight:500;color:var(--muted)}
.nav-links a{transition:color .2s}
.nav-links a:hover{color:var(--gold2)}

/* Buttons */
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  height:46px;padding:0 1.5rem;border-radius:10px;
  font-family:var(--font-sans);font-weight:600;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;border:none;transition:all .22s ease;white-space:nowrap;
}
.button:hover{transform:translateY(-2px)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#0a0c10;box-shadow:0 6px 24px rgba(201,168,76,.35)}
.btn-gold:hover{box-shadow:0 10px 32px rgba(201,168,76,.5)}
.btn-ghost{background:transparent;border:1px solid var(--border2);color:var(--text)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold2)}
.btn-small{height:40px;padding:0 1.1rem;font-size:.75rem}

/* Hero */
.hero{position:relative;z-index:1;padding:5rem 0 3rem;overflow:hidden}
.hero-bg-text{
  position:absolute;top:-2rem;right:-1rem;
  font-family:var(--font-caps);font-size:clamp(9rem,18vw,20rem);line-height:.85;
  color:rgba(201,168,76,.04);pointer-events:none;user-select:none;
  white-space:nowrap;letter-spacing:-.02em;
}
.hero-layout{display:grid;grid-template-columns:1fr 400px;gap:4rem;align-items:center}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:.75rem;padding:.55rem 1rem;
  border-radius:999px;border:1px solid rgba(201,168,76,.28);background:rgba(201,168,76,.07);
  font-size:.7rem;letter-spacing:.35em;text-transform:uppercase;color:var(--gold2);font-weight:600;
  animation:fadeIn .6s ease both;
}
.hero-eyebrow::before{
  content:'';width:7px;height:7px;border-radius:99px;background:var(--gold);
  animation:pulse-ring 2.5s ease-in-out infinite;
}
.hero h1{
  font-family:var(--font-display);font-size:clamp(3.2rem,6.5vw,5.6rem);line-height:1.0;
  margin:1.2rem 0 0;animation:fadeUp .7s .1s ease both;letter-spacing:-.01em;
}
.hero h1 em{font-style:italic;color:var(--gold2)}
.hero-divider{
  width:48px;height:2px;background:linear-gradient(90deg,var(--gold),transparent);
  margin:1.8rem 0;transform-origin:left;animation:drawLine .8s .4s ease both;
}
.hero-bio{
  font-size:1.05rem;line-height:1.9;color:var(--muted);max-width:600px;
  animation:fadeUp .7s .2s ease both;font-weight:300;
}
.hero-bio strong{color:var(--text);font-weight:500}
.hero-stats{display:flex;gap:2.5rem;margin:2.2rem 0;animation:fadeUp .7s .3s ease both}
.stat-num{font-family:var(--font-caps);font-size:2.4rem;line-height:1;color:var(--gold2);letter-spacing:.04em}
.stat-label{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--soft);margin-top:4px;font-weight:500}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;animation:fadeUp .7s .4s ease both}

.hero-photo-frame{position:relative;animation:fadeIn .9s .3s ease both}
.hero-photo-frame::before{
  content:'';position:absolute;inset:-2px;border-radius:26px;
  background:linear-gradient(135deg,rgba(201,168,76,.5),transparent 50%,rgba(91,200,232,.2));
  z-index:0;pointer-events:none;
}
.hero-photo-inner{position:relative;z-index:1;border-radius:26px;overflow:hidden;background:var(--ink2)}
.hero-photo-pic{display:block}
.hero-photo{width:100%;height:520px;object-fit:cover;object-position:top;display:block}
.hero-badge{
  position:absolute;bottom:-1px;left:0;right:0;
  display:flex;align-items:center;gap:12px;padding:18px 22px;
  background:rgba(7,10,15,.82);border-top:1px solid var(--border2);
  backdrop-filter:blur(12px);z-index:2;
}
.hero-badge img{width:46px;height:46px;border-radius:12px;border:1px solid rgba(201,168,76,.3);object-fit:cover}
.hero-badge-name{font-weight:600;font-size:.95rem;line-height:1}
.hero-badge-title{margin-top:5px;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.hero-year{
  position:absolute;top:22px;right:20px;
  font-family:var(--font-caps);font-size:.85rem;letter-spacing:.2em;
  color:var(--gold);background:rgba(201,168,76,.12);
  border:1px solid rgba(201,168,76,.2);padding:6px 12px;border-radius:8px;z-index:3;
}

/* Section labels */
.label{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.68rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:1rem;
}
.label::before{content:'';width:20px;height:1px;background:var(--gold)}
h2.section-title{font-family:var(--font-display);font-size:clamp(2.2rem,4.5vw,3.8rem);line-height:1.05;letter-spacing:-.01em}
h2.section-title em{font-style:italic;color:var(--gold2)}

/* About */
.about-layout{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.about-text{font-size:1.06rem;line-height:2;color:var(--muted);font-weight:300}
.about-text+.about-text{margin-top:1.2rem}
.about-text strong{color:var(--text);font-weight:500}
.about-pillars{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}
.pillar{
  padding:1.4rem;border-radius:16px;border:1px solid var(--border);background:var(--panel);
  transition:border-color .2s,background .2s;
}
.pillar:hover{border-color:rgba(201,168,76,.3);background:rgba(201,168,76,.04)}
.pillar-icon{font-size:1.4rem;margin-bottom:.6rem}
.pillar-name{font-size:.78rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:.35rem}
.pillar-desc{font-size:.88rem;color:var(--muted);line-height:1.7}

/* Expertise */
.expertise-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.exp-card{
  padding:2rem 1.6rem;border-radius:20px;border:1px solid var(--border);
  background:linear-gradient(160deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.02) 100%);
  position:relative;overflow:hidden;transition:transform .22s ease,border-color .22s ease;
}
.exp-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.exp-card:hover{transform:translateY(-4px);border-color:rgba(201,168,76,.25)}
.exp-card:hover::before{transform:scaleX(1)}
.exp-icon{
  width:48px;height:48px;border-radius:14px;background:rgba(201,168,76,.1);
  border:1px solid rgba(201,168,76,.2);display:grid;place-items:center;margin-bottom:1.2rem;
}
.exp-icon svg{width:22px;height:22px;fill:var(--gold2)}
.exp-card h3{font-family:var(--font-display);font-size:1.28rem;margin-bottom:.8rem;line-height:1.2}
.exp-card p{font-size:.88rem;color:var(--muted);line-height:1.8}

/* Technology */
.tech-section-inner{display:grid;grid-template-columns:1fr 2fr;gap:4rem;align-items:start}
.tech-intro-text{font-size:1rem;color:var(--muted);line-height:1.9;font-weight:300;margin-top:1rem}
.tech-grid{display:flex;flex-wrap:wrap;gap:.75rem}
.tech-pill{
  display:flex;align-items:center;gap:.65rem;padding:.75rem 1.1rem;border-radius:12px;
  border:1px solid var(--border);background:rgba(255,255,255,.035);
  font-size:.85rem;font-weight:600;color:rgba(238,242,247,.88);transition:all .2s ease;cursor:default;
}
.tech-pill:hover{border-color:rgba(201,168,76,.35);background:rgba(201,168,76,.06);color:var(--gold2);transform:translateY(-2px)}
.dot{width:8px;height:8px;border-radius:99px;flex-shrink:0}
.azure{background:#2f8fff}.aws{background:#ff9a2f}.palo{background:#ff5757}
.panorama{background:#b15cff}.gp{background:#5be39b}.cisco{background:#59c8ff}
.meraki{background:#79e0c3}.sdwan{background:#ffd24d}.bgp{background:#8eb1ff}
.ospf{background:#ff8bd1}.ps{background:#4fa6ff}.py{background:#ffe36d}
.oci{background:#f80000}.zt{background:#00c1a2}

/* Impact Bar */
.impact-bar{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid var(--border);border-radius:20px;overflow:hidden;margin-top:4rem;
}
.impact-item{padding:2.5rem 2.2rem;border-right:1px solid var(--border);background:rgba(255,255,255,.02);transition:background .2s}
.impact-item:last-child{border-right:none}
.impact-item:hover{background:rgba(201,168,76,.04)}
.impact-tag{font-size:.65rem;letter-spacing:.38em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:.8rem}
.impact-item h3{font-family:var(--font-display);font-size:1.4rem;margin-bottom:.7rem;line-height:1.2}
.impact-item p{font-size:.88rem;color:var(--muted);line-height:1.8}

/* Web Projects */
.web-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.web-card{
  padding:2rem;border-radius:20px;border:1px solid var(--border);
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  display:flex;flex-direction:column;gap:1rem;transition:border-color .22s,transform .22s;
}
.web-card:hover{border-color:rgba(201,168,76,.3);transform:translateY(-3px)}
.web-card-top{display:flex;align-items:center;gap:1rem}
.web-icon{
  width:52px;height:52px;border-radius:16px;background:rgba(201,168,76,.1);
  border:1px solid rgba(201,168,76,.2);display:grid;place-items:center;flex-shrink:0;
}
.web-icon svg{width:22px;height:22px;fill:var(--gold2)}
.web-card-name{font-family:var(--font-display);font-size:1.3rem;line-height:1.1}
.web-card-desc{font-size:.88rem;color:var(--soft)}
.web-card p{font-size:.92rem;color:var(--muted);line-height:1.8;flex:1}
.web-card-link{
  display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--gold);transition:gap .2s;
}
.web-card-link:hover{gap:.65rem}
.web-card-link::after{content:'→'}

/* Video */
.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.video-card{border-radius:20px;overflow:hidden;border:1px solid var(--border);background:var(--ink2)}
.video-frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden}
.site-video{width:100%;height:100%;object-fit:cover;display:block}
.video-cloud{object-position:center 24%}
.video-family{object-position:center 34%}
.video-info{padding:1.5rem 1.7rem}
.video-info h3{font-family:var(--font-display);font-size:1.2rem;margin-bottom:.5rem;line-height:1.2}
.video-info p{font-size:.88rem;color:var(--muted);line-height:1.8}

/* Contact */
.contact-layout{display:grid;grid-template-columns:1fr 1.4fr;gap:1.5rem;align-items:stretch}
.contact-brand{
  padding:3rem 2.5rem;border-radius:20px;
  border:1px solid rgba(201,168,76,.2);
  background:linear-gradient(160deg,rgba(201,168,76,.07),rgba(201,168,76,.02));
  /* Three blocks — letterhead, statement, credentials. The card is stretched to
     match the taller form panel beside it, so space-between spreads the surplus
     across two even gaps instead of pooling it into one hole. */
  display:flex;flex-direction:column;justify-content:space-between;gap:1.8rem;
}
.cb-footer{display:flex;flex-direction:column;gap:1.5rem}
/* Letterhead lockup — the mark reads as orphaned when it floats alone,
   so it's paired with the name it belongs to. */
.cb-lockup{display:flex;align-items:center;gap:1.15rem}
.cb-id-name{font-family:var(--font-display);font-size:1.3rem;line-height:1.05}
.cb-id-role{
  font-size:.63rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--soft);margin-top:.5rem;font-weight:500;
}
.contact-brand-logo{
  width:80px;height:80px;border-radius:20px;object-fit:cover;flex-shrink:0;
  border:1px solid rgba(201,168,76,.3);
  animation:float 4s ease-in-out infinite;
}
.contact-brand h2{font-family:var(--font-display);font-size:2rem;line-height:1.15;margin-bottom:1rem}
.contact-brand h2 em{font-style:italic;color:var(--gold2)}
.contact-brand p{font-size:.95rem;color:var(--muted);line-height:1.85;font-weight:300}

/* Contact-card content — fills the panel so it doesn't run tall and empty */
.cb-divider{height:1px;background:linear-gradient(90deg,rgba(201,168,76,.35),transparent)}
.cb-steps{display:flex;flex-direction:column;gap:1.1rem;counter-reset:step}
.cb-step{display:flex;gap:1rem;align-items:flex-start}
.cb-step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--font-caps);font-size:.9rem;letter-spacing:.1em;color:var(--gold);
  border:1px solid rgba(201,168,76,.28);background:rgba(201,168,76,.07);
  border-radius:8px;padding:.3rem .5rem;line-height:1;flex-shrink:0;min-width:32px;text-align:center;
}
.cb-step-name{font-size:.9rem;font-weight:600;color:var(--text);line-height:1.4}
.cb-step-desc{margin-top:.25rem;font-size:.84rem;color:var(--muted);line-height:1.7;font-weight:300}
.cb-facts{display:flex;flex-direction:column;gap:.85rem}
.cb-fact{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.cb-fact dt{font-size:.63rem;letter-spacing:.28em;text-transform:uppercase;color:var(--soft);font-weight:500}
.cb-fact dd{font-size:.9rem;color:var(--text);font-weight:500;text-align:right}
.contact-panel{padding:3rem 2.5rem;border-radius:20px;border:1px solid var(--border);background:var(--panel)}
.contact-panel .label{margin-bottom:.6rem}
.contact-panel h2{font-family:var(--font-display);font-size:2.2rem;margin-bottom:.8rem;line-height:1.1}
.contact-panel>p{font-size:.95rem;color:var(--muted);line-height:1.85;font-weight:300;margin-bottom:2rem}
.contact-links{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.contact-box{
  display:block;padding:1.2rem 1.3rem;border-radius:14px;
  border:1px solid var(--border);background:rgba(0,0,0,.2);
  transition:border-color .2s,background .2s;
}
.contact-box:hover{border-color:rgba(201,168,76,.35);background:rgba(201,168,76,.05)}
.contact-box span{
  display:block;font-size:.63rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--soft);margin-bottom:.5rem;font-weight:500;
}
.contact-box strong{display:block;font-size:.9rem;line-height:1.5;color:var(--text);font-weight:500}
.contact-box.wide{grid-column:1/-1}

/* Contact form */
.contact-form{margin-top:1.6rem;display:flex;flex-direction:column;gap:1rem}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.cf-field{display:flex;flex-direction:column;gap:.4rem}
.cf-field label{font-size:.63rem;letter-spacing:.32em;text-transform:uppercase;color:var(--soft);font-weight:500}
.cf-field input,.cf-field textarea{
  padding:.85rem 1.1rem;border-radius:14px;border:1px solid var(--border);
  background:rgba(0,0,0,.2);color:var(--text);font-family:var(--font-sans);
  font-size:.9rem;outline:none;resize:none;transition:border-color .2s,background .2s;
}
.cf-field input:focus,.cf-field textarea:focus{border-color:rgba(201,168,76,.35);background:rgba(201,168,76,.05)}
.cf-field input::placeholder,.cf-field textarea::placeholder{color:var(--soft)}
.cf-hp{position:absolute;left:-9999px;top:-9999px;opacity:0;pointer-events:none}
.contact-form .button{align-self:flex-start;margin-top:.2rem}
.cf-note{font-size:.82rem;color:var(--gold2);min-height:1rem}
@media(max-width:640px){.cf-row{grid-template-columns:1fr}}

/* Footer */
.site-footer{
  margin-top:6rem;border-top:1px solid var(--border);
  background:rgba(0,0,0,.25);position:relative;z-index:1;
}
.footer-wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding:1.8rem 0 2.2rem;
}
.footer-name{font-family:var(--font-caps);font-size:1.1rem;letter-spacing:.1em;color:var(--text)}
.footer-sub{margin-top:4px;font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.footer-links{display:flex;gap:1.5rem;font-size:.82rem;color:var(--muted)}
.footer-links a:hover{color:var(--gold2)}
.footer-copy{font-size:.72rem;color:var(--soft)}

/* Mobile menu */
.menu-toggle{
  display:none;width:44px;height:44px;border-radius:12px;
  border:1px solid var(--border2);background:rgba(255,255,255,.05);
  cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;flex-shrink:0;
}
.menu-toggle span{
  display:block;width:18px;height:1.5px;background:var(--text);border-radius:99px;
  transition:transform .25s,opacity .25s;
}
.menu-toggle.active span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile-menu{display:none;background:rgba(7,10,15,.97);border-top:1px solid var(--border)}
.mobile-menu.open{display:block}
.mobile-menu-inner{padding:.5rem 0 1.2rem}
.mobile-menu a{
  display:block;padding:.95rem 0;font-size:.88rem;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.85);border-bottom:1px solid rgba(255,255,255,.05);font-weight:500;
}
.mobile-menu a:last-child{border-bottom:none}

/* Reveal on scroll */
/* Scoped to .js so the scroll-reveal is an enhancement, never a prerequisite.
   Without scripting the content is simply visible. */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}

/* Responsive */
@media(max-width:1100px){
  .hero-layout{grid-template-columns:1fr}
  .hero-photo-frame{max-width:420px;margin:0 auto}
  .about-layout{grid-template-columns:1fr}
  .tech-section-inner{grid-template-columns:1fr;gap:2rem}
  .expertise-grid{grid-template-columns:repeat(2,1fr)}
  .impact-bar{grid-template-columns:1fr;border-radius:16px}
  .impact-item{border-right:none;border-bottom:1px solid var(--border)}
  .impact-item:last-child{border-bottom:none}
  .contact-layout{grid-template-columns:1fr}
}
@media(max-width:760px){
  .section{padding:4rem 0 0}
  .hero{padding:3rem 0 2rem}
  .hero h1{font-size:3rem}
  .hero-bg-text{font-size:8rem;opacity:.025}
  .hero-stats{gap:1.5rem}
  .expertise-grid{grid-template-columns:1fr}
  .web-grid,.video-grid{grid-template-columns:1fr}
  .about-pillars{grid-template-columns:1fr}
  .contact-links{grid-template-columns:1fr}
  .contact-box.wide{grid-column:1}
  .footer-wrap{flex-direction:column;align-items:flex-start;gap:1rem}
  .nav-links,.desktop-resume{display:none !important}
  .menu-toggle{display:flex !important}
  .nav-wrap{padding:.9rem 0}
}

/* Visitors who ask for less motion get the page fully rendered, not animated
   into place — the reveal/fade states resolve instantly instead of being skipped. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    /* The hero staggers on animation-delay (.1s–.4s) with fill `both`, so the
       delay alone holds elements at opacity:0. Negative delay starts them
       already finished. */
    animation-delay:-1ms !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
  }
  html{scroll-behavior:auto}
}