/* ── CODED_Type stubs — swap in real files, keep the names ── */
@font-face{
  font-family:"CODED_Type";
  src:url("fonts/CODED_Type-Bold.woff2") format("woff2");
  font-weight:700 900; font-display:swap;
}
@font-face{
  font-family:"CODED_Type";
  src:url("fonts/CODED_Type-Medium.woff2") format("woff2");
  font-weight:400 600; font-display:swap;
}

/* ═══════════════════════════════════════════════════════════
   CODED MASTERY × BURGAN BANK — blended theme
   Canvas   : CODED Navy #14243F → deep #0B1424
   Current  : Burgan blue gradient  #00A9E0 → #005EB8
   Signature: the Burgan orange dot #F58025
   Support  : CODED Brand Blue #004AA3, Soft Grey #D2D2D2
   ═══════════════════════════════════════════════════════════ */
:root{
  --navy:#14243F;
  --navy-deep:#0B1424;
  --navy-raise:#1B2E4E;
  --coded-blue:#004AA3;
  --burgan-blue:#0089D1;
  --burgan-sky:#00A9E0;
  --burgan-royal:#005EB8;
  --dot:#F58025;
  --white:#FFFFFF;
  --grey:#D2D2D2;
  --ink-dim:rgba(255,255,255,.62);
  --ink-faint:rgba(255,255,255,.38);
  --line:rgba(210,222,240,.12);
  --grad-current:linear-gradient(100deg,var(--burgan-sky),var(--burgan-royal));
  --grad-brand:linear-gradient(120deg,var(--burgan-sky) 0%,var(--coded-blue) 100%);
  --display:"CODED_Type","Inter","Helvetica Neue",system-ui,sans-serif;
  --body:"Inter","Helvetica Neue",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --pad:clamp(20px,5vw,72px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:var(--body);
  background:var(--navy-deep);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.6;
}
::selection{background:var(--dot);color:var(--navy-deep)}
img{max-width:100%;display:block}
a{color:inherit}

/* ── ambient canvas: navy wash, faint grid, twin brand glows ── */
.canvas{position:fixed;inset:0;z-index:-1;background:
  radial-gradient(900px 600px at 85% -10%,rgba(0,169,224,.16),transparent 60%),
  radial-gradient(800px 600px at -10% 110%,rgba(0,74,163,.22),transparent 60%),
  linear-gradient(to bottom,var(--navy) 0%,var(--navy-deep) 100%);
}
.canvas::after{content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(210,222,240,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(210,222,240,.035) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 30%,transparent 75%);
}

/* ═══ HERO ═══ */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:calc(var(--pad)*1.2) var(--pad) var(--pad);position:relative}

.lockup{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:clamp(16px,3.2vw,30px);margin-bottom:clamp(28px,4vh,44px)}
.lockup .x{font-family:var(--mono);color:var(--ink-faint);font-size:clamp(13px,1.6vw,17px)}

/* ── brand lockup logos ──
   Both files are white-on-transparent, so they sit directly on the navy.
   The CODED mark is a boxed wordmark (its frame eats ~11% of the file height),
   so it runs a touch taller than Burgan to read as optically equal. */
.logo{width:auto;flex:none;height:auto}
.logo-coded{height:clamp(34px,5vw,52px)}
.logo-burgan{height:clamp(29px,4.3vw,45px)}

/* The label is long; let it wrap inside the pill rather than push the page wide. */
.badge{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;
  max-width:100%;font-family:var(--mono);
  font-size:clamp(10px,1.3vw,13px);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);
  border:1px solid var(--line);border-radius:999px;padding:9px 18px;margin-bottom:clamp(24px,3.5vh,36px);
  background:rgba(20,36,63,.5);backdrop-filter:blur(6px);line-height:1.5}
.badge .pulse{width:7px;height:7px;border-radius:50%;background:var(--dot);flex:none;
  box-shadow:0 0 0 0 rgba(245,128,37,.5);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(245,128,37,0)}100%{box-shadow:0 0 0 0 rgba(245,128,37,0)}}

h1{font-family:var(--display);font-weight:900;line-height:1.02;letter-spacing:-.025em;
  font-size:clamp(44px,9.2vw,118px);max-width:12ch;margin-inline:auto}
h1 .grad{background:var(--grad-current);-webkit-background-clip:text;background-clip:text;color:transparent}
h1 .dot{color:var(--dot)}

.slogan{margin-top:clamp(18px,2.6vh,26px);font-size:clamp(16px,2.1vw,21px);color:var(--ink-dim);
  max-width:52ch;font-weight:500}
.slogan strong{color:var(--white);font-weight:600}

.meta{display:grid;grid-template-columns:repeat(4,auto);gap:clamp(18px,4vw,64px);
  margin-top:clamp(36px,5.5vh,60px);padding-top:clamp(22px,3vh,30px);border-top:1px solid var(--line)}
.meta div{text-align:center}
.meta dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:6px}
.meta dd{font-weight:700;font-size:clamp(14px,1.8vw,17px)}
.meta dd .num{color:var(--burgan-sky)}

.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);
  display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-hint::after{content:"";width:1px;height:34px;
  background:linear-gradient(to bottom,var(--dot),transparent);animation:drip 1.8s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(.2);transform-origin:top}55%{transform:scaleY(1)}100%{opacity:0;transform:scaleY(1)}}

/* ═══ WORK ═══ */
.work{padding:clamp(70px,12vh,130px) var(--pad);max-width:1200px;margin-inline:auto}
.section-head{margin-bottom:clamp(44px,8vh,84px)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--burgan-sky);display:flex;align-items:center;gap:12px;margin-bottom:16px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--burgan-sky)}
.section-head h2{font-family:var(--display);font-weight:900;letter-spacing:-.02em;
  font-size:clamp(38px,6.5vw,76px);line-height:1.05}
.section-head h2 em{font-style:normal;background:var(--grad-current);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* project block */
.project{position:relative;padding:clamp(36px,5vw,60px) 0 clamp(56px,8vh,96px);border-top:1px solid var(--line)}
.p-num{position:absolute;top:clamp(10px,2vw,18px);right:0;font-family:var(--display);font-weight:900;
  font-size:clamp(84px,15vw,190px);line-height:1;color:transparent;
  -webkit-text-stroke:1px rgba(0,169,224,.22);user-select:none;pointer-events:none}
.p-tag{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-dim);display:flex;align-items:center;gap:10px;margin-bottom:14px}
.p-tag .gdot{width:8px;height:8px;border-radius:50%;background:var(--dot)}
.p-name{font-family:var(--display);font-weight:800;letter-spacing:-.015em;
  font-size:clamp(32px,5.6vw,60px);line-height:1.08;max-width:14ch}
.p-sub{margin-top:10px;color:var(--ink-dim);font-size:clamp(15px,1.9vw,18px);max-width:56ch}

.p-brief{margin-top:clamp(24px,3.5vh,36px);max-width:68ch}
.p-brief h4,.p-pain h4,.p-team h4{font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:14px}
.p-brief p,.p-pain p{color:var(--grey);font-size:clamp(14.5px,1.7vw,16.5px)}
.p-brief p+p,.p-pain p+p{margin-top:12px}
.p-brief strong,.p-pain strong{color:var(--white)}
.p-brief .ph{color:var(--ink-faint);font-style:italic}

/* The brief is the solution; the pain point is the problem it answers.
   An orange rule marks it as the "before" without shouting. */
.p-pain{margin-top:clamp(22px,3vh,30px);max-width:68ch;
  border-left:2px solid rgba(245,128,37,.55);padding-left:clamp(14px,1.8vw,20px)}
.p-pain h4{color:rgba(245,128,37,.85)}

.p-team{margin-top:clamp(28px,4vh,42px)}
/* Four even columns, capped so each cell is wide enough to hold the longest
   name on a single line. Columns keep the row tidy rather than ragged. */
.team-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.4vw,30px);max-width:900px;align-items:stretch}

/* name plate — the default, used until a member has a headshot */
.member-name{display:inline-flex;align-items:center;gap:10px;
  padding:11px 20px;border-radius:999px;
  border:1px solid var(--line);background:rgba(27,46,78,.45);
  font-size:clamp(13.5px,1.6vw,15px);font-weight:600;color:var(--white);line-height:1.3}
.member-name .ndot{width:7px;height:7px;border-radius:50%;background:var(--dot);flex:none}
.member{display:flex;flex-direction:column;align-items:center;gap:12px;
  width:100%;text-align:center}
.avatar{width:clamp(86px,11vw,112px);height:clamp(86px,11vw,112px);border-radius:50%;position:relative;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:linear-gradient(135deg,var(--navy-raise),var(--navy));
  border:1.5px solid rgba(0,169,224,.35);
  font-family:var(--display);font-weight:800;font-size:clamp(18px,2.4vw,24px);color:var(--burgan-sky)}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.member::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--dot);order:-1;
  transform:translateY(6px);opacity:0;transition:.3s}
.member:hover::after{opacity:1;transform:translateY(0)}

/* Name on a single line, role directly beneath it. Because the name never
   wraps, every role in a row already sits on the same baseline. */
.m-text{display:flex;flex-direction:column;gap:3px;width:100%;min-width:0}
.m-name{font-size:clamp(11.5px,1.35vw,13.5px);font-weight:600;color:var(--grey);
  line-height:1.35;white-space:nowrap}
.m-role{padding-top:1px;
  font-size:clamp(10.5px,1.2vw,11.5px);font-weight:500;line-height:1.3;
  color:var(--ink-dim);letter-spacing:.01em;white-space:nowrap}

/* ═══ FOOTER ═══ */
footer{border-top:1px solid var(--line);padding:clamp(48px,8vh,80px) var(--pad);text-align:center}
.f-lockup{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:20px}
.f-lockup .x{font-family:var(--mono);color:var(--ink-faint);font-size:13px}
.f-lockup .logo-coded{height:30px}
.f-lockup .logo-burgan{height:26px}
footer .program{font-weight:700;margin-bottom:6px}
footer .fine{font-family:var(--mono);font-size:12px;color:var(--ink-faint);line-height:1.9}

/* ═══ reveal on scroll ═══ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ═══ responsive ═══
   Laptops keep the wide layout. Below 860px the hero stats fold to two
   columns; below 620px the ghost numeral moves inline and the team becomes
   a 2-up grid so names line up in even rows instead of ragged wrapping. */

/* tablets & small laptops */
@media (max-width:860px){
  .meta{grid-template-columns:repeat(2,1fr);gap:20px clamp(24px,5vw,44px);
    justify-items:center;width:100%;max-width:520px}
  .p-brief,.p-pain,.p-sub{max-width:none}
}

/* tablets: two columns — four full names won't fit on one line each */
@media (max-width:1000px) and (min-width:701px){
  .team-row{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px}
}

/* phones: lay each member on their side — the full page width goes to the
   name, so it still reads on one line with the role under it */
@media (max-width:700px){
  .p-num{position:static;display:block;text-align:left;font-size:clamp(52px,15vw,72px);
    line-height:1;margin-bottom:4px;-webkit-text-stroke-width:1px}
  .p-name{max-width:none}
  .project{padding-top:clamp(28px,6vw,40px);padding-bottom:clamp(44px,10vw,64px)}

  .team-row{grid-template-columns:1fr;gap:14px;max-width:none}
  .member{flex-direction:row;align-items:center;gap:14px;text-align:left}
  .member::after{display:none}
  .avatar{width:56px;height:56px;flex:none}
  .m-name{font-size:14px}
  .m-role{font-size:12px}
  .member-name{width:100%;justify-content:flex-start;padding:10px 16px}

  .hero{padding-top:calc(var(--pad)*1.6)}
  .scroll-hint{bottom:18px}
}

/* narrow phones — keep the lockup and stats from crowding */
@media (max-width:380px){
  .meta{gap:16px 20px}
  .meta dt{font-size:10px;letter-spacing:.12em}
  .badge{letter-spacing:.1em;padding:8px 14px}
  .avatar{width:50px;height:50px}
  .m-name{font-size:13px}
  .m-role{font-size:11.5px}
}

/* short viewports (landscape phones): don't force a tall empty hero */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding-block:clamp(36px,10vh,64px)}
  .scroll-hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}
:focus-visible{outline:2px solid var(--dot);outline-offset:3px;border-radius:4px}