@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/PlusJakartaSans-variable.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: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/PlusJakartaSans-italic-variable.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;
}


/* ============ Tokens: solid colors only. Light is the default; dark is teal with gold. ============ */
:root{
  --bg:#FAF8F5; --bg-alt:#F3EEE6; --surface:#FFFFFF; --surface-2:#F6F1E9;
  --ink:#0C0A08; --text:#1A1410; --muted:#6B5D50;
  --teal:#208D82; --teal-text:#176F66; --teal-deep:#1A3A35; --teal-deep-2:#14302B; --teal-tint:#E4F1EF;
  --gold:#BC8629; --gold-light:#D29732; --gold-text:#8F6418; --gold-tint:#F6ECDA;
  --line:#E6E0D6; --line-strong:#D3CABD;
  --on-dark:#F5F0E8; --on-dark-muted:#C4D3CF;
  --bezel:#1A3A35; --bezel-2:#122A27;
  --shadow:0 1px 2px rgba(26,20,16,.04),0 12px 32px -12px rgba(26,20,16,.18);
  --shadow-lg:0 2px 4px rgba(26,20,16,.05),0 28px 60px -20px rgba(26,20,16,.28);
  --display:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:18px; --r-sm:10px; --ease:cubic-bezier(.2,.7,.3,1);
  color-scheme:light;
}
[data-theme="dark"]{
  --bg:#14302B; --bg-alt:#1A3A35; --surface:#1F4740; --surface-2:#25534B;
  --ink:#FAF8F5; --text:#F5F0E8; --muted:#B7CBC6;
  --teal:#4DC5B5; --teal-text:#7FD9CC; --teal-deep:#0F2622; --teal-deep-2:#0A1B18; --teal-tint:#25534B;
  --gold:#D29732; --gold-light:#E2B45C; --gold-text:#E2B45C; --gold-tint:#2C5A51;
  --line:#2B5A52; --line-strong:#3A6E65;
  --on-dark:#F5F0E8; --on-dark-muted:#C4D3CF;
  --bezel:#0A1B18; --bezel-2:#061311;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -12px rgba(0,0,0,.55);
  --shadow-lg:0 2px 4px rgba(0,0,0,.4),0 28px 60px -20px rgba(0,0,0,.65);
  color-scheme:dark;
}

/* ============ Base ============ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.6;overflow-x:hidden;transition:background-color .35s,color .35s}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-text);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.12;margin:0 0 .5em;color:var(--ink);letter-spacing:-.012em;word-spacing:.04em}
h1{font-size:clamp(2.3rem,7.2vw,4.2rem);font-weight:700}
h2{font-size:clamp(1.9rem,4.4vw,2.9rem)}
h3{font-size:1.35rem}
p{margin:0 0 1em}
.mono{font-family:var(--mono)}
.wrap{width:min(1160px,100% - 2.5rem);margin-inline:auto}
.section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.section-alt{background:var(--bg-alt)}
.section-head{max-width:720px;margin-bottom:clamp(2rem,4vw,3rem)}
.section-head .sub{color:var(--muted);font-size:1.08rem;margin:0}
.eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);margin:0 0 .9rem}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:#0C0A08;padding:.6rem 1rem;border-radius:8px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.band-teal{background:var(--teal-deep);color:var(--on-dark)}
.band-teal h2,.band-teal h3{color:var(--on-dark)}

/* ============ Buttons ============ */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.35rem;border-radius:999px;font-weight:600;font-size:1rem;border:2px solid transparent;transition:transform .25s var(--ease),background-color .25s,color .25s,border-color .25s,box-shadow .25s;cursor:pointer}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:#0C0A08;border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-light);border-color:var(--gold-light);box-shadow:0 10px 24px -10px rgba(188,134,41,.6)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal-text)}
.btn-sm{padding:.55rem 1rem;font-size:.92rem}
.btn-lg{padding:1.05rem 1.7rem;font-size:1.08rem}
.btn .arrow{display:inline-block;transition:transform .25s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

/* ============ Nav ============ */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none}
.progress span{display:block;height:100%;width:0;background:var(--gold)}
.nav{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s,background-color .35s}
.nav.scrolled{border-color:var(--line);box-shadow:0 8px 24px -16px rgba(26,20,16,.25)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:66px}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink);font-weight:700}
.brand .mono{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--teal-deep);color:var(--gold-light);font-size:.85rem}
.brand:hover{text-decoration:none}
.nav-links{display:none;gap:1.6rem}
.nav-links a{color:var(--text);font-weight:500;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-links a:hover{text-decoration:none}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-actions{display:flex;align-items:center;gap:.6rem}
.icon-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .25s,transform .25s}
.icon-btn:hover{border-color:var(--gold);transform:rotate(15deg)}
.icon-btn .moon{display:none}
[data-theme="dark"] .icon-btn .moon{display:block}
[data-theme="dark"] .icon-btn .sun{display:none}
.brand-name{display:none}
@media(min-width:560px){.brand-name{display:inline}}
@media(min-width:860px){.nav-links{display:flex}}

/* ============ Hero ============ */
.hero{padding:clamp(2.5rem,6vw,5rem) 0 clamp(2rem,4vw,3rem);overflow:hidden}
.hero-grid{display:grid;gap:2.5rem;align-items:center}
.lede{font-size:clamp(1.05rem,2vw,1.22rem);color:var(--muted);max-width:560px}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.6rem 0 1.2rem}
.hero-note{display:flex;align-items:center;gap:.5rem;color:var(--muted);font-size:.95rem;margin:0}
.hero-note .dot{width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(32,141,130,.5);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(32,141,130,.45)}70%{box-shadow:0 0 0 10px rgba(32,141,130,0)}100%{box-shadow:0 0 0 0 rgba(32,141,130,0)}}

/* rotating word */
.rotator{display:inline-grid;color:var(--teal-text);position:relative;text-align:left;vertical-align:top}
.rot-word{grid-area:1/1;opacity:0;transform:translateY(.5em);transition:opacity .45s var(--ease),transform .55s var(--ease);white-space:nowrap}
.rot-word.is-on{opacity:1;transform:translateY(0)}
.rot-word.is-out{opacity:0;transform:translateY(-.45em)}
[data-theme="dark"] .rotator{color:var(--gold-light)}

/* load-in */
.js .load-up{opacity:0;transform:translateY(18px);animation:loadUp .9s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes loadUp{to{opacity:1;transform:none}}

/* hero visual: hub and spoke, Shakira at the center (solid colors, SVG lines, HTML labels so text stays crisp) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hub{position:relative;width:100%;max-width:520px;aspect-ratio:1/1;margin-inline:auto}
.hub-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hub-orbit{fill:none;stroke:var(--line-strong);stroke-width:.25;stroke-dasharray:1 1.6}
.hub-base line{stroke:var(--line-strong);stroke-width:.45}
.hub-flow line{stroke:var(--gold);stroke-width:.9;stroke-linecap:round;stroke-dasharray:7 93;stroke-dashoffset:0;opacity:.95}
.js .hub-flow line{animation:hubFlow 3.6s linear infinite}
.hub-flow line:nth-child(2){animation-delay:-.45s}.hub-flow line:nth-child(3){animation-delay:-.9s}.hub-flow line:nth-child(4){animation-delay:-1.35s}
.hub-flow line:nth-child(5){animation-delay:-1.8s}.hub-flow line:nth-child(6){animation-delay:-2.25s}.hub-flow line:nth-child(7){animation-delay:-2.7s}.hub-flow line:nth-child(8){animation-delay:-3.15s}
@keyframes hubFlow{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
.hub-nodes{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.hub-node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:23%;display:flex;flex-direction:column;align-items:center;gap:.3rem;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:.55rem .6rem .5rem;box-shadow:var(--shadow);font-size:clamp(.7rem,2.6vw,.88rem);font-weight:600;line-height:1.15;color:var(--ink)}
.js .hub-node{animation:hubFloat 6s ease-in-out infinite;animation-delay:calc(var(--i) * -.75s)}
@keyframes hubFloat{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 6px))}}
.hub-ic{display:grid;place-items:center;width:2em;height:2em;border-radius:50%;background:var(--teal-tint)}
.hub-ic svg{width:1.15em;height:1.15em;fill:none;stroke:var(--teal-text);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hub-node:nth-child(even) .hub-ic{background:var(--gold-tint)}
.hub-node:nth-child(even) .hub-ic svg{stroke:var(--gold-text)}
.hub-core{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1/1;transform:translate(-50%,-50%);display:grid;place-items:center}
.hub-photo{width:100%;height:100%;border-radius:50%;background:var(--teal-deep);border:5px solid var(--gold);display:grid;place-items:center;overflow:hidden;box-shadow:var(--shadow-lg),0 0 0 0 rgba(188,134,41,.4)}
.js .hub-photo{animation:hubPulse 3.2s ease-out infinite}
@keyframes hubPulse{0%{box-shadow:var(--shadow-lg),0 0 0 0 rgba(188,134,41,.38)}70%{box-shadow:var(--shadow-lg),0 0 0 16px rgba(188,134,41,0)}100%{box-shadow:var(--shadow-lg),0 0 0 0 rgba(188,134,41,0)}}
.hub-photo img{width:100%;height:100%;object-fit:cover}
.hub-initials{font-family:var(--display);font-weight:700;font-size:clamp(2rem,9vw,3.3rem);color:var(--gold-light);letter-spacing:.02em}
.hub-name{position:absolute;bottom:-.7rem;left:50%;transform:translateX(-50%);background:var(--gold);color:#14302B;font-family:var(--mono);font-size:clamp(.66rem,2.3vw,.78rem);letter-spacing:.12em;text-transform:uppercase;padding:.3rem .7rem;border-radius:999px;white-space:nowrap}
[data-theme="dark"] .hub-photo{background:var(--teal-deep-2)}
[data-theme="dark"] .hub-ic{background:var(--surface-2)}
[data-theme="dark"] .hub-ic svg{stroke:var(--teal-text)}
[data-theme="dark"] .hub-node:nth-child(even) .hub-ic svg{stroke:var(--gold-light)}

/* device mockups in project cards: the phone is the front device; both screens show in full, nothing cropped */
.shot.devices{padding:0;aspect-ratio:4/3;background:var(--teal-tint)}
.dev-laptop{position:absolute;left:4.5%;top:19%;width:65%;transition:transform .5s var(--ease)}
.dev-screen{background:var(--bezel);border:5px solid var(--bezel);border-bottom-width:7px;border-radius:10px 10px 0 0;overflow:hidden;box-shadow:0 18px 40px -18px rgba(26,20,16,.35)}
.dev-screen img{width:100%;height:auto;background:#FFFFFF}
.dev-base{height:7px;margin:0 -6%;background:var(--bezel-2);border-radius:0 0 8px 8px;position:relative}
.dev-base::after{content:"";position:absolute;left:50%;top:0;width:16%;height:3px;transform:translateX(-50%);background:var(--bezel);border-radius:0 0 4px 4px}
.dev-phone{position:absolute;right:4.5%;bottom:6.5%;width:27.5%;z-index:2;background:var(--bezel);border:4px solid var(--bezel);border-radius:20px;box-shadow:var(--shadow-lg);transition:transform .5s var(--ease)}
.dev-phone-screen{border-radius:15px;overflow:hidden;background:#FFFFFF}
.dev-phone-screen{aspect-ratio:360/780}
.dev-phone-screen img{width:100%;height:100%;object-fit:cover;object-position:top center}
.shot.devices:hover .dev-phone{transform:translateY(-8px)}
.shot.devices:hover .dev-laptop{transform:translateY(-4px)}
[data-theme="dark"] .shot.devices{background:var(--surface-2)}
/* one wide laptop, no phone */
.shot.devices.solo .dev-laptop{left:9%;top:50%;width:82%;transform:translateY(-50%)}
.shot.devices.solo:hover .dev-laptop{transform:translateY(calc(-50% - 4px))}
/* laptop with two phones side by side */
.shot.devices.duo .dev-laptop{left:4%;top:12%;width:62%}
.shot.devices.duo .dev-phone{width:23%;right:4%;bottom:7%}
.shot.devices.duo .dev-phone-back{right:29%;bottom:4%;z-index:1}
/* extra screens under a project's mockup */
.more-shots{list-style:none;margin:0;padding:.8rem 1rem 0;display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.more-shots a{display:flex;flex-direction:column;gap:.35rem;color:var(--muted);font-size:.78rem;font-weight:500;text-decoration:none}
.more-shots img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top left;border:1px solid var(--line);border-radius:8px;background:#FFFFFF;transition:border-color .25s,transform .25s var(--ease)}
.more-shots a:hover img{border-color:var(--gold);transform:translateY(-2px)}
.more-shots a:hover span{color:var(--teal-text)}
.more-shots.one{grid-template-columns:minmax(0,1fr)}
.more-shots.one a{flex-direction:row;align-items:center;gap:.8rem}
.more-shots.one img{width:46%;flex:none}

/* ============ Marquee ============ */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);padding:.9rem 0;margin-top:1rem}
.marquee-track{display:flex;gap:1.6rem;width:max-content;animation:marquee 38s linear infinite;font-family:var(--mono);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-text)}
.marquee-track i{color:var(--gold);font-style:normal}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee:hover .marquee-track{animation-play-state:paused}

/* ============ Stats ============ */
.stats{padding:clamp(2.5rem,5vw,3.5rem) 0}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem 1.2rem}
.stat{display:flex;flex-direction:column;gap:.2rem}
.num{font-family:var(--display);font-size:clamp(2.4rem,6vw,3.6rem);font-weight:700;color:var(--gold-light);line-height:1}
.lbl{color:var(--on-dark-muted);font-size:.95rem;line-height:1.35;max-width:22ch}
@media(min-width:760px){.stats-grid{grid-template-columns:repeat(4,1fr)}}

/* ============ Tiles (What I build) ============ */
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:1.1rem 1rem;display:flex;flex-direction:column;gap:.7rem;font-weight:600;color:var(--ink);transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.tile svg{width:30px;height:30px;fill:none;stroke:var(--teal);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.tile:hover{transform:translateY(-5px);border-color:var(--gold);box-shadow:var(--shadow)}
.tile:hover svg{stroke:var(--gold)}
@media(min-width:760px){.tiles{grid-template-columns:repeat(4,1fr)}}

/* ============ Filters ============ */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.8rem}
.chip{border:1px solid var(--line-strong);background:var(--surface);color:var(--text);border-radius:999px;padding:.5rem 1rem;font:inherit;font-size:.92rem;font-weight:500;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s,transform .25s}
.chip:hover{border-color:var(--teal);transform:translateY(-1px)}
.chip.is-on{background:var(--teal-deep);color:var(--gold-light);border-color:var(--teal-deep)}

/* ============ Cards ============ */
.cards{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s,opacity .3s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--line-strong)}
.card.is-hidden{display:none}
.shot{position:relative;display:block;flex:none;background:var(--teal-tint);padding:1.6rem 1.6rem 0;overflow:hidden}
.view{position:absolute;left:1.2rem;top:1.1rem;background:var(--teal-deep);color:var(--gold-light);font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;padding:.4rem .7rem;border-radius:999px;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s var(--ease)}
.shot:hover .view,.shot:focus-visible .view{opacity:1;transform:none}
.shot:hover{text-decoration:none}
a.shot:focus-visible{outline-offset:-4px}
.shot-illus{padding:1.6rem;display:grid;place-items:center;background:var(--teal-deep)}
.card-body{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;gap:.6rem}
.cat{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text);margin:0}
.card h3{font-size:1.5rem;margin:0}
.tagline{color:var(--muted);margin:0;font-size:1.02rem}
.card dl{margin:.4rem 0 0;display:grid;gap:.8rem}
.card dt{font-weight:700;color:var(--ink);font-size:.9rem;margin-bottom:.15rem}
.card dd{margin:0;color:var(--text);font-size:.97rem;line-height:1.55}
.caps{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.caps li{font-size:.8rem;font-weight:500;background:var(--surface-2);border:1px solid var(--line);color:var(--teal-text);padding:.3rem .65rem;border-radius:999px}
.more{font-weight:600;margin-top:.4rem;color:var(--teal-text)}
.more span{display:inline-block;transition:transform .25s var(--ease)}
.more:hover span{transform:translate(3px,-3px)}
@media(min-width:760px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.cards{grid-template-columns:repeat(3,1fr)} .card[data-project="fitnessapp"],.card[data-project="memberportal"]{grid-column:span 1}}

/* illustrated systems (solid, labeled, not fake UIs) */
.illus{width:100%;max-width:330px;background:var(--surface);border-radius:12px;padding:1rem 1.1rem;color:var(--text);font-size:.9rem;box-shadow:var(--shadow-lg)}
.illus-title{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text);margin:0 0 .7rem}
.illus-row{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;border-bottom:1px solid var(--line)}
.illus-row span{color:var(--muted)} .illus-row b{font-family:var(--mono);font-weight:400;color:var(--teal-text)}
.illus-out{margin-top:.7rem;background:var(--teal-deep);color:var(--gold-light);font-family:var(--mono);font-size:.82rem;padding:.55rem .7rem;border-radius:8px;word-break:break-all}
.illus-check{margin-top:.6rem;font-size:.8rem;color:var(--teal-text);font-weight:600}
.illus-check::before{content:"\2713  ";color:var(--gold)}
.flow-steps{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.flow-steps li{display:flex;align-items:center;gap:.6rem;opacity:.45;transition:opacity .4s}
.flow-steps li i{width:12px;height:12px;border-radius:50%;border:2px solid var(--teal);flex:none;transition:background-color .4s}
.flow-steps li.done{opacity:1} .flow-steps li.done i{background:var(--gold);border-color:var(--gold)}
.brief-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.brief-list li{display:flex;gap:.6rem;align-items:baseline;padding:.3rem 0;border-bottom:1px solid var(--line)}
.brief-list b{font-family:var(--mono);color:var(--gold-text);min-width:2.2ch;font-weight:400}

/* ============ Process + dial ============ */
.dial{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem 1.5rem;margin-bottom:2.2rem}
.dial-label{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text);margin:0 0 1rem}
.dial-track{position:relative;height:10px;border-radius:999px;background:var(--line);margin:0 9px}
.dial-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:var(--teal);transition:width .15s linear}
.dial-knob{position:absolute;top:50%;left:0;width:26px;height:26px;border-radius:50%;background:var(--gold);border:4px solid var(--surface);box-shadow:0 2px 8px rgba(0,0,0,.25);transform:translate(-50%,-50%);transition:left .15s linear}
.dial-marks{list-style:none;margin:.9rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem;font-size:.78rem;color:var(--muted)}
.dial-marks li{transition:color .3s,font-weight .3s}
.dial-marks li:nth-child(2),.dial-marks li:nth-child(3){text-align:center}.dial-marks li:last-child{text-align:right}
.dial-marks li.is-on{color:var(--ink);font-weight:700}
.dial-read{margin:.9rem 0 0;font-size:.95rem;color:var(--text)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem;position:relative}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;position:relative;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.step:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--gold)}
.step-n{display:inline-block;color:var(--gold-text);font-size:.85rem;margin-bottom:.8rem;letter-spacing:.1em}
.step h3{margin-bottom:.4rem}
.step p{margin:0;color:var(--text);font-size:.97rem}
.step::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gold);border-radius:var(--r) 0 0 var(--r);transform:scaleY(0);transform-origin:top;transition:transform .7s var(--ease)}
.js .steps.drawn .step:nth-child(1)::before{transform:scaleY(1);transition-delay:.1s}
.js .steps.drawn .step:nth-child(2)::before{transform:scaleY(1);transition-delay:.35s}
.js .steps.drawn .step:nth-child(3)::before{transform:scaleY(1);transition-delay:.6s}
.js .steps.drawn .step:nth-child(4)::before{transform:scaleY(1);transition-delay:.85s}
html:not(.js) .step::before{transform:none}
@media(min-width:760px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.steps{grid-template-columns:repeat(4,1fr)}}

/* ============ About ============ */
.about-grid{display:grid;gap:2.5rem;align-items:center}
.about-photo{margin:0;max-width:380px}
.photo-placeholder{aspect-ratio:4/5;border-radius:var(--r);background:var(--teal-deep);display:grid;place-items:center;position:relative;overflow:hidden;box-shadow:var(--shadow-lg)}
.photo-placeholder .mono{font-size:clamp(3rem,10vw,5rem);color:var(--gold-light);letter-spacing:.05em}
.photo-placeholder::after{content:"";position:absolute;inset:14px;border:1px solid var(--gold);border-radius:12px;opacity:.55}
.about-photo img{border-radius:var(--r);box-shadow:var(--shadow-lg);aspect-ratio:4/5;object-fit:cover}
.about-photo figcaption{margin-top:.8rem;font-family:var(--display);font-style:italic;color:var(--muted)}
.facts{list-style:none;margin:1.2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.facts li{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.4rem .85rem;font-size:.88rem;font-weight:500}
@media(min-width:860px){.about-grid{grid-template-columns:5fr 7fr}.hero-grid{grid-template-columns:7fr 6fr}}

/* ============ CTA + footer ============ */
.cta{padding:clamp(3.5rem,8vw,6rem) 0}
.cta-in{max-width:720px;text-align:left}
.cta p{color:var(--on-dark-muted);font-size:1.08rem}
.cta-alt{margin-top:1.4rem;font-size:.95rem}
.cta-alt a{color:var(--gold-light)}
.footer{background:var(--bg);border-top:1px solid var(--line);padding:2.2rem 0;font-size:.92rem;color:var(--muted)}
.footer-in{display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:space-between;align-items:center}
.footer-in .mono{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--teal-deep);color:var(--gold-light);font-size:.7rem;margin-right:.3rem}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:1.2rem}
.footer a{color:var(--text)}

/* ============ Scroll reveal ============ */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .cards .card.reveal:nth-child(3n+2){transition-delay:.1s}
.js .cards .card.reveal:nth-child(3n+3){transition-delay:.2s}

/* ============ Reduced motion ============ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .js .load-up,.js .reveal{opacity:1;transform:none}
  .marquee-track{animation:none}
  .float,.hub-flow line,.hub-node,.hub-photo{animation:none!important}
}

/* card details: visual first, the story one tap away */
.card-details{margin:.3rem 0 0;border-top:1px solid var(--line);padding-top:.6rem}
.card-details summary{cursor:pointer;font-weight:600;font-size:.92rem;color:var(--teal-text);list-style:none;display:flex;align-items:center;gap:.5rem}
.card-details summary::-webkit-details-marker{display:none}
.card-details summary::before{content:"+";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--gold);color:#0C0A08;font-weight:700;transition:transform .3s var(--ease)}
.card-details[open] summary::before{content:"\2212"}
.card-details summary:hover{text-decoration:underline;text-underline-offset:3px}
.card-details dl{margin-top:.8rem}

[data-theme="dark"] .brand .mono,[data-theme="dark"] .footer-in .mono{background:var(--gold);color:#0C0A08}
[data-theme="dark"] .icon-btn{border-color:var(--gold)}

/* Ignitly card wears Ignitly's own brand colors (sampled from ignitly.vercel.app): green #0F7C66, orange #D97706 */
.card[data-project="ignitly"]{--teal:#0F7C66;--teal-text:#0F7C66;--teal-deep:#0A4F41;--teal-tint:#F1F3E6;--gold:#D97706;--gold-light:#F59E0B;--gold-text:#B45309;--gold-tint:#FDF0DC;--bezel:#0A4F41;--bezel-2:#083D33}
.card[data-project="ignitly"] .view{color:#FFFFFF;background:#0F7C66}
.card[data-project="ignitly"] .card-details summary::before{color:#FFFFFF}
.card[data-project="ignitly"] .caps li{background:#F5F6EF;border-color:#D9E7E0}
.card[data-project="ignitly"] .more-shots a:hover img{border-color:#D97706}