:root {
  --ink: #050807;
  --graphite: #111b18;
  --panel: #16231f;
  --paper: #f2f5ef;
  --muted: #aeb9b5;
  --mint: #35f2c8;
  --mint-dark: #14b995;
  --violet: #8177ff;
  --ice: #a9c3ff;
  --line: rgba(190, 222, 212, 0.21);
  --display: "Unbounded", sans-serif;
  --body: "Manrope", sans-serif;
  --mono: "IBM Plex Mono", monospace;
  --radius: 30px;
  --max: 1480px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--paper);
  background: var(--ink);
  font-family: var(--body);
  line-height: 1.5;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 76% -10%, rgba(72, 195, 171, .14), transparent 38%),
    radial-gradient(circle at 8% 58%, rgba(169, 195, 255, .055), transparent 30%),
    linear-gradient(180deg, #060a09, #09100e 45%, #050807);
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
::selection { color: var(--ink); background: var(--mint); }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }

.noise {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 999; background: var(--mint); color: var(--ink); padding: 12px 18px; border-radius: 8px; }
.skip-link:focus { top: 16px; }

.site-header {
  width: min(calc(100% - 40px), var(--max));
  height: 82px;
  margin: 18px auto 0;
  padding: 0 22px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  position: relative;
  z-index: 90;
  border: 1px solid var(--line);
  border-bottom-color: rgba(53, 242, 200, .25);
  background: rgba(7, 11, 10, .72);
  backdrop-filter: blur(18px);
  border-radius: 24px 24px 0 0;
}
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: -.02em; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(53,242,200,.7); color: var(--mint); border-radius: 10px 4px 10px 4px; box-shadow: inset 0 0 18px rgba(53,242,200,.13); font-family: var(--mono); }
.main-nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); font-size: 12px; color: #b7c0bd; }
.main-nav a, .header-cta { transition: color .25s ease; }
.main-nav a:hover, .header-cta:hover { color: var(--mint); }
.header-cta { justify-self: end; font-size: 12px; border: 1px solid rgba(242,245,239,.24); padding: 13px 17px; border-radius: 999px; }
.header-cta span { color: var(--mint); margin-left: 8px; }
.menu-toggle { display: none; border: 0; background: transparent; padding: 10px; }

.shell { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; border: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; position: relative; }
.hero { min-height: calc(100vh - 100px); padding: clamp(68px, 8vw, 120px) clamp(28px, 5.5vw, 86px) 30px; display: grid; grid-template-columns: .96fr 1.04fr; grid-template-rows: 1fr auto; gap: 60px 6vw; background: linear-gradient(135deg, rgba(15,24,22,.92), rgba(5,8,7,.96) 58%); }
.liquid-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .82; }
.hero-orbit { position: absolute; border: 1px solid rgba(53,242,200,.12); border-radius: 50%; pointer-events: none; }
.orbit-one { width: 660px; height: 660px; right: -240px; top: -300px; }
.orbit-two { width: 400px; height: 400px; left: 44%; bottom: -280px; }
.hero-copy, .build-stage, .hero-proof { position: relative; z-index: 2; }
.hero-copy { align-self: center; max-width: 760px; }
.eyebrow { margin: 0 0 24px; display: flex; align-items: center; gap: 10px; color: var(--mint); font: 600 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.eyebrow span { width: 36px; height: 1px; background: var(--mint); box-shadow: 0 0 12px var(--mint); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--display); font-weight: 600; letter-spacing: -.055em; line-height: .98; text-wrap: balance; }
h1 { margin-bottom: 30px; font-size: clamp(48px, 6.1vw, 106px); }
h1 em, h2 em { color: var(--mint); font-style: normal; }
.hero-dynamic { min-height: 31px; display: flex; align-items: center; font: 500 clamp(13px, 1.4vw, 17px)/1.4 var(--mono); color: #c3d0cb; }
.prompt { color: var(--mint); margin-right: 10px; }
.cursor { width: 8px; height: 1.05em; display: inline-block; margin-left: 4px; background: var(--mint); animation: blink .85s steps(1) infinite; vertical-align: -.15em; }
.hero-lead { max-width: 610px; margin: 26px 0 32px; color: #aab4b0; font-size: clamp(16px, 1.35vw, 20px); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.button { min-height: 54px; display: inline-flex; justify-content: center; align-items: center; gap: 22px; border-radius: 12px 4px 12px 4px; padding: 0 23px; border: 1px solid transparent; text-transform: uppercase; font: 600 11px/1 var(--display); letter-spacing: .04em; cursor: pointer; transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.button:hover { transform: translateY(-3px); }
.button-primary { background: var(--mint); color: var(--ink); box-shadow: 0 12px 34px rgba(53,242,200,.14); }
.button-primary:hover { box-shadow: 0 16px 44px rgba(53,242,200,.23); }
.button-ghost { border-color: rgba(242,245,239,.22); background: rgba(8,12,11,.55); }
.button-ghost span { color: var(--mint); }

.build-stage { min-height: 560px; align-self: center; perspective: 1200px; }
.stage-glow { position: absolute; inset: 16% 5% 8%; background: radial-gradient(ellipse, rgba(53,242,200,.18), rgba(129,119,255,.12) 40%, transparent 70%); filter: blur(42px); }
.site-preview { position: absolute; inset: 10% 7% 7% 10%; border-radius: 24px 8px 24px 8px; border: 1px solid rgba(213,235,228,.38); background: linear-gradient(145deg, rgba(234,241,237,.94), rgba(166,196,211,.84)); color: var(--ink); transform: rotateY(-7deg) rotateX(3deg); box-shadow: 0 45px 100px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.8); overflow: hidden; }
.site-preview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.4) 50%, transparent 65%); transform: translateX(-120%); animation: glassSweep 5s ease-in-out infinite; }
.preview-top { height: 58px; border-bottom: 1px solid rgba(5,8,7,.12); display: flex; align-items: center; justify-content: space-between; padding: 0 28px; }
.preview-logo { font: 700 19px var(--display); }
.preview-nav { display: flex; gap: 13px; }.preview-nav i { width: 34px; height: 2px; background: rgba(5,8,7,.18); }.preview-nav i:nth-child(2){width:24px;}
.preview-button { border: 1px solid rgba(5,8,7,.24); padding: 8px 11px; border-radius: 999px; font: 500 9px var(--mono); }
.preview-body { padding: 11% 10%; position: relative; }
.preview-body small { font: 600 9px var(--mono); letter-spacing: .15em; }
.preview-body strong { display: block; margin: 18px 0 24px; font: 600 clamp(38px, 4vw, 68px)/.9 var(--display); letter-spacing: -.08em; }.preview-body strong span{color:#0ea983;}
.preview-line { display: block; width: 45%; height: 5px; border-radius: 5px; background: rgba(5,8,7,.17); margin-bottom: 8px; }.preview-line.long{width:66%;}
.preview-cta { width: 110px; height: 34px; margin-top: 30px; border-radius: 9px 3px 9px 3px; background: #0c1714; }
.preview-footer { position: absolute; bottom: 0; left: 0; right: 0; height: 54px; background: #0b1513; color: var(--mint); padding: 0 24px; display: flex; align-items: center; justify-content: space-between; font: 500 9px var(--mono); }
.floating-card { position: absolute; z-index: 3; border: 1px solid rgba(226,244,238,.22); background: rgba(8,14,12,.82); backdrop-filter: blur(15px); box-shadow: 0 24px 70px rgba(0,0,0,.42); }
.brief-card { width: 220px; top: 0; right: 0; padding: 19px; border-radius: 16px 5px 16px 5px; transform: rotate(3deg); }
.card-kicker { color: var(--mint); font: 500 8px var(--mono); }.brief-card p{margin:14px 0;font-size:13px;}.brief-tags{display:flex;gap:5px;}.brief-tags span{border:1px solid var(--line);border-radius:20px;padding:4px 7px;font:8px var(--mono);color:#aab9b4;}
.status-card { left: 0; bottom: 4%; padding: 15px 16px; display: flex; align-items: center; gap: 12px; border-radius: 14px 4px 14px 4px; }.status-card div{display:flex;flex-direction:column;gap:2px}.status-card small{font:8px var(--mono);color:#85948f}.status-card strong{font-size:11px}.status-card>span:last-child{color:var(--mint);margin-left:8px}
.live-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--mint); box-shadow: 0 0 14px var(--mint); animation: pulse 1.8s ease infinite; }
.code-chip { position: absolute; right: -2%; bottom: 0; z-index: 4; border: 1px solid var(--line); background: #09100e; padding: 11px 14px; border-radius: 8px; font: 9px var(--mono); color: #9ba9a4; transform: rotate(-2deg); }.code-chip span{color:var(--violet)}.code-chip b{color:var(--mint);font-weight:500}
.hero-proof { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 700px; border-top: 1px solid var(--line); padding-top: 25px; }
.hero-proof div { display: flex; flex-direction: column; gap: 3px; padding-left: 22px; border-left: 1px solid var(--line); }.hero-proof div:first-child{padding-left:0;border-left:0}.hero-proof strong{font:600 16px var(--display);}.hero-proof span{color:#77847f;font:10px var(--mono);text-transform:uppercase}

.section { width: min(calc(100% - 40px), var(--max)); margin: 0 auto; padding: clamp(100px, 11vw, 180px) clamp(28px, 2vw, 34px); }
.section-heading { display: grid; grid-template-columns: 1.35fr .65fr; align-items: end; gap: 80px; margin-bottom: 60px; }
h2 { margin-bottom: 0; font-size: clamp(42px, 5.2vw, 82px); }
.section-heading > p, .audience-intro > p:last-child, .program-heading > p { max-width: 460px; margin-bottom: 4px; color: var(--muted); font-size: 16px; }

.format-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: stretch; }
.format-card { min-height: 580px; padding: 26px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 22px 7px 22px 7px; background: linear-gradient(160deg, rgba(17,26,24,.78), rgba(7,11,10,.9)); position: relative; overflow: hidden; transition: transform .35s ease, border-color .35s ease; }
.format-card:hover { transform: translateY(-6px); border-color: rgba(53,242,200,.4); }
.format-card.featured { border-color: rgba(53,242,200,.42); background: radial-gradient(circle at 70% 0, rgba(53,242,200,.14), transparent 40%), linear-gradient(160deg, #13241f, #07100e); }
.format-ribbon { position: absolute; top: 21px; right: -45px; width: 190px; padding: 7px; transform: rotate(31deg); text-align: center; background: var(--mint); color: var(--ink); font: 600 7px var(--display); text-transform: uppercase; }
.format-index { margin-bottom: auto; display: flex; justify-content: space-between; color: var(--mint); font: 500 10px var(--mono); }.format-index span{color:#65736e;}
.format-card h3 { margin: 70px 0 10px; font: 500 clamp(28px,2.6vw,42px)/1 var(--display); letter-spacing:-.05em; text-transform: uppercase; }.format-card>div:nth-of-type(2)>p{min-height:72px;color:#88958f;font-size:14px;}
.clean-list { padding: 0; margin: 26px 0 34px; list-style: none; border-top: 1px solid var(--line); }
.clean-list li { position: relative; padding: 13px 4px 13px 20px; border-bottom: 1px solid var(--line); color: #bdc7c3; font-size: 13px; }.clean-list li::before{content:"↗";position:absolute;left:0;color:var(--mint);font-family:var(--mono)}
.card-action { margin-top: auto; padding: 16px 0 0; border: 0; border-top: 1px solid var(--line); background: transparent; display: flex; justify-content: space-between; text-transform: uppercase; font:600 9px var(--display);letter-spacing:.06em;cursor:pointer;}.card-action span{color:var(--mint);transition:transform .2s}.card-action:hover span{transform:translate(3px,-3px)}

.audience { display: grid; grid-template-columns: .62fr 1.38fr; gap: 6vw; align-items: start; }
.audience-intro { position: sticky; top: 30px; padding-top: 16px; }.audience-intro h2{font-size:clamp(42px,5vw,76px);margin-bottom:28px}.audience-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.audience-card{min-height:330px;padding:25px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:20px 6px 20px 6px;background:#0b1210;overflow:hidden;position:relative}.audience-card>span{color:var(--mint);font:500 9px var(--mono);text-transform:uppercase;letter-spacing:.08em}.audience-card h3{max-width:460px;margin:26px 0 auto;font:500 clamp(20px,2vw,31px)/1.2 var(--display);letter-spacing:-.04em}.card-wide{grid-column:span 2;min-height:300px}.mini-terminal{width:56%;margin-top:35px;padding:18px;border:1px solid var(--line);background:#060a09;border-radius:10px;box-shadow:22px 20px 0 rgba(53,242,200,.045)}.mini-terminal i{display:block;width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint);margin-bottom:18px}.mini-terminal code{font:13px var(--mono);color:#87948f}.progress-ring{width:108px;height:108px;margin-top:30px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--mint) 0 94%,#24312d 94%);position:relative}.progress-ring::after{content:"";position:absolute;inset:8px;border-radius:50%;background:#0b1210}.progress-ring b{z-index:1;font:500 16px var(--mono)}.dark-visual{background:linear-gradient(145deg,#101b19,#080b0b)}.window-stack{height:110px;position:relative;margin-top:20px}.window-stack i{position:absolute;width:58%;height:80px;right:4%;border:1px solid rgba(169,195,255,.22);border-radius:10px;background:linear-gradient(130deg,rgba(129,119,255,.16),rgba(53,242,200,.09))}.window-stack i:nth-child(1){right:28%;top:30px}.window-stack i:nth-child(2){right:16%;top:15px}.client-chip{margin-top:24px;padding:13px;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;gap:12px;font:11px var(--mono)}.client-chip i{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--mint),var(--violet))}.client-chip small{color:#65736e}.soft-visual{background:linear-gradient(105deg,rgba(169,195,255,.1),rgba(53,242,200,.08))}.speed-track{height:78px;margin-top:30px;display:flex;align-items:center;justify-content:space-between;position:relative}.speed-track::before{content:"";position:absolute;left:5%;right:5%;height:1px;background:linear-gradient(90deg,var(--violet),var(--mint))}.speed-track i{position:absolute;left:65%;width:12px;height:12px;border-radius:50%;background:var(--mint);box-shadow:0 0 18px var(--mint);animation:track 3.5s ease-in-out infinite}.speed-track b{z-index:1;padding:7px 10px;background:#101816;border:1px solid var(--line);border-radius:999px;font:500 9px var(--mono);font-weight:500}

.result-scroll { height: 210vh; position: relative; border-block: 1px solid var(--line); background: linear-gradient(180deg,#050807,#09120f 50%,#050807); }
.result-sticky { height: 100vh; position: sticky; top: 0; overflow: hidden; display: grid; place-items: center; padding: 40px; }
.result-copy { position: absolute; left: max(30px, calc((100vw - var(--max))/2 + 35px)); top: 11%; z-index: 4; }.result-copy h2{font-size:clamp(38px,4.3vw,68px)}
.result-device { --zoom: .72; --tilt: -5deg; width:min(74vw,1050px);aspect-ratio:1.72;margin-top:22vh;border:1px solid rgba(225,244,238,.45);border-radius:24px 9px 24px 9px;background:#e9efea;color:var(--ink);transform:scale(var(--zoom)) rotateX(var(--tilt));transform-origin:center center;box-shadow:0 60px 130px rgba(0,0,0,.6),0 0 100px rgba(53,242,200,.08);overflow:hidden;will-change:transform}.browser-bar{height:48px;padding:0 18px;display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;border-bottom:1px solid rgba(5,8,7,.14);font:9px var(--mono)}.browser-bar>span{display:flex;gap:6px}.browser-bar i{display:block;width:7px;height:7px;border-radius:50%;background:#99a39f}.browser-bar i:first-child{background:var(--mint-dark)}.browser-bar b{justify-self:center;padding:7px 30px;border:1px solid rgba(5,8,7,.12);border-radius:20px;font-weight:400}.browser-bar em{justify-self:end;font-style:normal;color:#087a62}.device-layout{display:grid;grid-template-columns:1.05fr .95fr;height:calc(100% - 48px);padding:6%}.device-copy small{font:600 9px var(--mono);letter-spacing:.16em}.device-copy strong{display:block;margin:4% 0;font:600 clamp(32px,4.3vw,70px)/.95 var(--display);letter-spacing:-.07em}.device-copy strong span{color:#0ca886}.device-copy p{width:72%;color:#5c6762;font-size:13px}.device-copy button{margin-top:4%;padding:12px 18px;border:0;border-radius:10px 3px 10px 3px;background:#0a1210;color:white;font:500 9px var(--display);text-transform:uppercase}.device-art{position:relative;display:grid;place-items:center}.device-art i{position:absolute;width:65%;aspect-ratio:1;border:1px solid rgba(5,8,7,.14);border-radius:28% 9% 28% 9%;background:linear-gradient(135deg,rgba(129,119,255,.55),rgba(53,242,200,.7));transform:rotate(28deg)}.device-art i:nth-child(2){transform:rotate(53deg) scale(.82);filter:saturate(1.5)}.device-art i:nth-child(3){transform:rotate(78deg) scale(.64);background:rgba(5,8,7,.88)}.device-art span{z-index:1;font:600 clamp(38px,5vw,80px) var(--display);color:var(--mint)}.result-ledger{position:absolute;bottom:4%;left:5%;right:5%;display:flex;justify-content:center;gap:2vw;flex-wrap:wrap;color:#65736e;font:9px var(--mono);text-transform:uppercase}.result-ledger span::before{content:"✓";color:var(--mint);margin-right:7px}

.program-heading{margin-bottom:50px}.module{border-top:1px solid var(--line)}.module:last-child{border-bottom:1px solid var(--line)}.module summary{list-style:none;display:grid;grid-template-columns:70px 1fr 40px;align-items:center;gap:14px;min-height:92px;cursor:pointer}.module summary::-webkit-details-marker{display:none}.module summary>span{color:#65736e;font:10px var(--mono)}.module summary h3{margin:0;font:500 clamp(18px,2vw,27px)/1.15 var(--display);letter-spacing:-.035em}.module summary i,.faq-item summary i{width:29px;height:29px;border:1px solid var(--line);border-radius:50%;position:relative;justify-self:end}.module summary i::before,.module summary i::after,.faq-item summary i::before,.faq-item summary i::after{content:"";position:absolute;left:8px;right:8px;top:13px;height:1px;background:var(--mint);transition:transform .25s}.module summary i::after,.faq-item summary i::after{transform:rotate(90deg)}.module[open] summary i::after,.faq-item[open] summary i::after{transform:rotate(0)}.module[open] summary h3{color:var(--mint)}.module-content{padding:0 0 34px 84px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.module-topics{grid-column:1/-1;margin:0 0 18px;color:#87938f;font:12px var(--mono)}.module-content>div{padding:18px;border:1px solid var(--line);border-radius:12px 4px 12px 4px;background:#0a100f}.module-content span{display:block;margin-bottom:10px;color:var(--mint);font:600 8px var(--mono);text-transform:uppercase}.module-content p{margin:0;color:#a4aeaa;font-size:12px}

.process { width:100%;max-width:none;border-block:1px solid var(--line);position:relative;overflow:hidden;padding-inline:max(30px,calc((100vw - var(--max))/2 + 34px));background:radial-gradient(circle at 50% 50%,rgba(53,242,200,.06),transparent 42%)}.ascii-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.34;pointer-events:none}.process-heading{position:relative;z-index:2}.process-heading h2{max-width:1100px}.process-track{position:relative;z-index:2;margin-top:100px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.track-line{position:absolute;top:20px;left:0;right:0;height:1px;background:var(--line)}.track-line i{display:block;width:34%;height:1px;background:var(--mint);box-shadow:0 0 16px var(--mint)}.process-step>span{font:500 9px var(--mono);color:var(--mint)}.process-step>i{display:block;width:13px;height:13px;border-radius:50%;margin:14px 0 45px;background:#0b1210;border:2px solid var(--mint);box-shadow:0 0 18px rgba(53,242,200,.44)}.process-step h3{font:500 20px/1.15 var(--display);letter-spacing:-.04em}.process-step p{max-width:260px;color:#7f8b87;font-size:13px}.learning-modes{position:relative;z-index:2;margin-top:110px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.mode-card{min-height:420px;padding:38px;border:1px solid var(--line);border-radius:24px 7px 24px 7px;background:rgba(8,14,12,.86);backdrop-filter:blur(8px)}.mode-personal{background:radial-gradient(circle at 80% 0,rgba(53,242,200,.16),transparent 40%),#0b1714;border-color:rgba(53,242,200,.38)}.mode-code{display:inline-block;padding:9px 12px;border:1px solid var(--line);border-radius:8px;color:var(--mint);font:9px var(--mono)}.mode-card h3{margin:80px 0 30px;font:500 clamp(25px,3vw,42px)/1 var(--display);letter-spacing:-.05em}.mode-card .clean-list{margin-bottom:0}

.mentor{display:grid;grid-template-columns:.92fr 1.08fr;gap:7vw;align-items:center}.mentor-portrait{position:relative;max-width:610px}.mentor-portrait::before{content:"";position:absolute;inset:8% -9% -9% 14%;border:1px solid rgba(53,242,200,.25);border-radius:28px 8px 28px 8px;background:radial-gradient(circle at 70% 20%,rgba(53,242,200,.12),transparent 55%)}.mentor-portrait img{position:relative;width:100%;aspect-ratio:1/.96;object-fit:cover;object-position:center 20%;border:1px solid rgba(53,242,200,.35);border-radius:28px 8px 28px 8px;filter:saturate(.78) contrast(1.05)}.portrait-label{position:absolute;left:5%;bottom:5%;display:flex;flex-direction:column;padding:12px 15px;background:rgba(5,8,7,.78);backdrop-filter:blur(10px);border-left:2px solid var(--mint)}.portrait-label span{font:8px var(--mono);color:#74817c}.portrait-label strong{font:500 11px var(--mono);color:var(--mint)}.portrait-stamp{position:absolute;right:-6%;bottom:-7%;padding:23px 28px;background:var(--mint);color:var(--ink);border-radius:18px 5px 18px 5px;font:600 19px/1.1 var(--display);transform:rotate(-3deg)}.mentor-copy{max-width:680px}.mentor-copy h2{margin-bottom:40px}.mentor-lead{color:#b3bdb9;font-size:clamp(16px,1.6vw,21px);line-height:1.65}.mentor-tags{display:flex;gap:7px;flex-wrap:wrap;margin:35px 0}.mentor-tags span{border:1px solid var(--line);padding:7px 11px;border-radius:999px;color:#82908b;font:9px var(--mono)}.text-link{padding:20px 0;border-block:1px solid var(--line);display:flex;justify-content:space-between;font:600 10px var(--display);text-transform:uppercase}.text-link span{color:var(--mint)}

.faq{display:grid;grid-template-columns:.65fr 1.35fr;gap:7vw}.faq-heading{position:sticky;top:40px;align-self:start}.faq-heading h2{font-size:clamp(38px,4vw,65px);margin-bottom:28px}.faq-heading>p:last-child{max-width:390px;color:var(--muted);font-size:14px}.faq-item{border-top:1px solid var(--line)}.faq-item:last-child{border-bottom:1px solid var(--line)}.faq-item summary{list-style:none;min-height:90px;display:grid;grid-template-columns:46px 1fr 30px;gap:10px;align-items:center;cursor:pointer}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary>span{font:9px var(--mono);color:#5e6c67}.faq-item summary h3{margin:0;font:600 clamp(16px,1.6vw,22px)/1.25 var(--body)}.faq-item[open] summary h3{color:var(--mint)}.faq-item>p{margin:0;padding:0 55px 30px 46px;color:#95a19c;font-size:14px;line-height:1.7}

.apply{border-radius:var(--radius);min-height:790px;margin-bottom:25px;padding:clamp(60px,8vw,120px) clamp(28px,6vw,90px);display:grid;grid-template-columns:1fr .78fr;gap:8vw;align-items:center;background:linear-gradient(145deg,#0b1814,#060a09 62%)}.apply-copy,.lead-form{position:relative;z-index:2}.apply-copy h2{font-size:clamp(46px,5.4vw,84px);margin-bottom:28px}.apply-copy>p:not(.eyebrow){max-width:590px;color:#9ca8a3;font-size:17px}.apply-type{margin-top:45px;display:flex;align-items:center;min-height:28px;color:#9fb0aa;font:500 13px var(--mono)}.apply-type>span:first-child{color:var(--mint);margin-right:10px}.lead-form{padding:30px;border:1px solid rgba(53,242,200,.28);background:rgba(8,14,12,.84);backdrop-filter:blur(16px);border-radius:24px 7px 24px 7px;box-shadow:0 40px 100px rgba(0,0,0,.35)}.form-status{padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;color:#71807a;font:500 8px var(--mono)}.lead-form label{display:block;margin-bottom:19px;color:#84918c;font:600 8px var(--mono);letter-spacing:.08em;text-transform:uppercase}.lead-form input,.lead-form textarea,.lead-form select{display:block;width:100%;margin-top:8px;padding:13px 2px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--paper);outline:none;font:14px var(--body);text-transform:none;letter-spacing:normal;transition:border-color .2s}.lead-form input:focus,.lead-form textarea:focus,.lead-form select:focus{border-color:var(--mint)}.lead-form textarea{resize:vertical}.lead-form select{appearance:auto}.lead-form option{background:var(--graphite)}.form-submit{width:100%;margin-top:8px}.form-note{margin:14px 0 0;text-align:center;color:#596661;font-size:8px}.form-note a{text-decoration:underline}.form-feedback{display:none;margin:16px 0 0;padding:12px;border:1px solid rgba(53,242,200,.24);border-radius:8px;color:var(--mint);font:10px var(--mono)}.form-feedback.show{display:block}.liquid-canvas-bottom{opacity:.54}
.site-footer{width:min(calc(100% - 40px),var(--max));min-height:120px;margin:auto;display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;color:#6f7d78}.site-footer>p{margin:0;font-size:12px}.site-footer>div{justify-self:end;display:flex;gap:24px;font:10px var(--mono)}.site-footer a:hover{color:var(--mint)}

.reveal{opacity:0;transform:translateY(20px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}.reveal.visible{opacity:1;transform:none}
@keyframes blink{50%{opacity:0}}@keyframes pulse{50%{box-shadow:0 0 22px var(--mint);opacity:.65}}@keyframes glassSweep{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}@keyframes track{0%,100%{left:1%}50%{left:94%}}

@media (max-width: 1100px) {
  .hero{grid-template-columns:1fr;padding-top:70px}.hero-copy{max-width:900px}.build-stage{width:min(760px,100%);margin:auto;min-height:560px}.hero-proof{margin-top:0}.audience{grid-template-columns:1fr}.audience-intro{position:relative;top:auto;max-width:800px}.result-device{width:88vw}.mentor{gap:50px}.apply{grid-template-columns:1fr 1fr;gap:40px}
}
@media (max-width: 820px) {
  .site-header{height:70px;grid-template-columns:1fr auto;border-radius:18px 18px 0 0}.menu-toggle{display:block;position:relative;z-index:3}.menu-toggle span{display:block;width:22px;height:1px;background:var(--paper);margin:6px}.main-nav{display:none;position:absolute;top:61px;left:-1px;right:-1px;padding:26px;flex-direction:column;align-items:flex-start;background:#09100e;border:1px solid var(--line);border-radius:0 0 18px 18px}.main-nav.open{display:flex}.header-cta{display:none}.shell,.section,.site-header,.site-footer{width:min(calc(100% - 22px),var(--max))}.hero{min-height:auto;padding:65px 22px 25px}.hero-proof{grid-template-columns:repeat(2,1fr);gap:20px}.hero-proof div:nth-child(3){padding-left:0;border-left:0}.section{padding:90px 12px}.section-heading{grid-template-columns:1fr;gap:24px}.format-grid{grid-template-columns:1fr}.format-card{min-height:510px}.audience-grid{grid-template-columns:1fr}.card-wide{grid-column:span 1}.audience-card{min-height:300px}.result-scroll{height:170vh}.result-copy{top:9%;left:24px}.result-device{width:96vw;margin-top:18vh}.result-ledger{bottom:5%}.module-content{padding-left:0;grid-template-columns:1fr}.module-topics{grid-column:auto}.process{padding-inline:24px}.process-track{grid-template-columns:repeat(2,1fr);gap:55px 25px}.track-line{display:none}.process-step>i{margin-bottom:24px}.learning-modes{grid-template-columns:1fr}.mentor{grid-template-columns:1fr}.mentor-portrait{max-width:600px}.mentor-copy{padding-top:35px}.faq{grid-template-columns:1fr}.faq-heading{position:relative;top:auto}.apply{grid-template-columns:1fr;padding-inline:24px}.site-footer{grid-template-columns:1fr auto}.site-footer>p{display:none}
}
@media (max-width: 560px) {
  .brand{font-size:11px}.brand-mark{width:28px;height:28px}.hero{padding-top:52px;gap:35px}.hero-lead{font-size:15px}.hero-actions{display:grid}.button{width:100%}.build-stage{min-height:390px}.site-preview{inset:7% 1% 10% 4%;transform:rotateY(-3deg)}.preview-top{height:44px;padding:0 15px}.preview-nav{display:none}.preview-body{padding:10% 8%}.preview-body strong{font-size:37px}.brief-card{width:165px;padding:13px}.brief-card p{font-size:10px}.status-card{padding:10px}.code-chip{display:none}.hero-proof{font-size:12px}.section{padding-top:76px;padding-bottom:76px}.section-heading{margin-bottom:35px}.format-card{padding:20px;min-height:480px}.format-card h3{margin-top:55px}.audience-card{padding:20px}.mini-terminal{width:88%}.result-sticky{padding:18px}.result-copy h2{font-size:36px}.result-device{width:110vw;aspect-ratio:1.2;margin-top:20vh}.device-layout{grid-template-columns:1fr;padding:8%}.device-copy strong{font-size:35px}.device-copy p{width:90%}.device-art{display:none}.browser-bar{grid-template-columns:1fr 2fr}.browser-bar em{display:none}.result-ledger{display:none}.module summary{grid-template-columns:38px 1fr 31px;min-height:80px}.module summary h3{font-size:15px}.process-track{grid-template-columns:1fr}.process-step{padding-left:30px}.process-step>i{position:absolute;margin-left:-28px}.mode-card{padding:22px;min-height:390px}.mode-card h3{margin-top:65px}.portrait-stamp{right:-2%;padding:17px;font-size:14px}.mentor-copy{padding-inline:4px}.faq-item summary{grid-template-columns:30px 1fr 30px}.faq-item summary h3{font-size:15px}.faq-item>p{padding-left:30px;padding-right:20px}.apply{min-height:auto;padding-top:70px}.lead-form{padding:20px}.site-footer{min-height:100px}.site-footer>div a{display:none}
}
@media (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}.result-device{transform:scale(.92)}
}

/* Motion polish for the program and FAQ accordions. */
.module summary h3,
.faq-item summary h3 { transition: color .35s ease; }
.module summary i,
.faq-item summary i { transition: border-color .35s ease, background-color .35s ease; }
.module summary i::before,
.module summary i::after,
.faq-item summary i::before,
.faq-item summary i::after { transition: transform .38s cubic-bezier(.22,.61,.36,1); }
.module[open] summary i,
.faq-item[open] summary i { border-color: rgba(53,242,200,.42); background: rgba(53,242,200,.05); }
.module.is-animating,
.faq-item.is-animating {
  overflow: hidden;
  will-change: height;
  transition: height .46s cubic-bezier(.22,.61,.36,1);
}
.module-content,
.faq-item > p {
  transform-origin: top;
  transition: opacity .3s ease, transform .46s cubic-bezier(.22,.61,.36,1);
}

/* Client revision: structured audience grid, static result slide and light author story. */
.audience {
  display: block;
}
.audience-intro {
  position: relative;
  top: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .65fr);
  align-items: end;
  gap: 64px;
  margin-bottom: 48px;
  padding: 0 0 44px;
  border-bottom: 1px solid var(--line);
}
.audience-intro h2 {
  grid-column: 1;
  margin-bottom: 0;
}
.audience-intro .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: -22px;
}
.audience-intro > p:last-child {
  grid-column: 2;
  margin-bottom: 6px;
}
.audience-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.audience-card {
  grid-column: span 2;
  min-height: 300px;
}
.audience-card:nth-child(n + 4) {
  grid-column: span 3;
}
.audience-card h3 {
  margin-top: 24px;
}
.audience-card .mini-terminal {
  width: 100%;
  margin-top: 34px;
  box-shadow: 12px 12px 0 rgba(53,242,200,.045);
}

.result-showcase {
  width: min(calc(100% - 40px), var(--max));
  margin: 0 auto;
  padding: clamp(88px, 9vw, 138px) clamp(28px, 5vw, 74px) clamp(54px, 6vw, 82px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: radial-gradient(circle at 78% 18%, rgba(53,242,200,.08), transparent 34%), #07100e;
  overflow: hidden;
}
.result-sticky {
  height: auto;
  position: relative;
  top: auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
}
.result-copy {
  position: relative;
  left: auto;
  top: auto;
  z-index: 2;
}
.result-copy h2 {
  max-width: 900px;
  font-size: clamp(42px, 5vw, 76px);
}
.result-kicker {
  white-space: nowrap;
}
.result-device {
  width: min(100%, 1120px);
  aspect-ratio: 1.72;
  margin: 54px auto 0;
  transform: none;
  transform-origin: center;
  will-change: auto;
  box-shadow: 0 42px 90px rgba(0,0,0,.48), 0 0 80px rgba(53,242,200,.06);
}
.result-ledger {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  margin-top: 30px;
  color: #87958f;
}

.mentor-light {
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(42px, 6vw, 90px);
  padding: clamp(58px, 7vw, 104px);
  color: #07100e;
  background: #eef2ed;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: var(--radius);
  overflow: hidden;
}
.mentor-light .mentor-copy {
  max-width: 610px;
}
.mentor-light .eyebrow {
  color: #087b63;
}
.mentor-light .eyebrow span {
  background: #0ca886;
  box-shadow: none;
}
.mentor-light .mentor-copy h2 {
  margin-bottom: 34px;
  font-size: clamp(40px, 4.5vw, 70px);
}
.mentor-light .mentor-copy h2 em {
  color: #0ca886;
}
.mentor-light .mentor-lead {
  color: #45534e;
  font-size: clamp(16px, 1.4vw, 20px);
}
.mentor-light .mentor-tags span {
  color: #45534e;
  border-color: rgba(7,16,14,.18);
}
.mentor-light .text-link {
  color: #07100e;
  border-color: rgba(7,16,14,.18);
}
.mentor-light .text-link span {
  color: #087b63;
}
.mentor-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}
.mentor-photo {
  height: clamp(480px, 43vw, 660px);
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 22px 7px 22px 7px;
  background: #cfd7d1;
}
.mentor-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}
.mentor-photo-main img {
  object-position: center 32%;
}
.mentor-photo-side img {
  object-position: center 36%;
}
.mentor-photo figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 58px 20px 19px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  color: white;
  background: linear-gradient(transparent, rgba(5,8,7,.82));
}
.mentor-photo figcaption span {
  color: #b9c8c2;
  font: 500 8px var(--mono);
}
.mentor-photo figcaption strong {
  max-width: 150px;
  text-align: right;
  font: 500 11px/1.3 var(--display);
}
.mentor-note {
  grid-column: 1 / -1;
  min-height: 86px;
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  border-radius: 14px 4px 14px 4px;
  background: #07100e;
  color: white;
}
.mentor-note span {
  color: var(--mint);
  font: 500 9px var(--mono);
}
.mentor-note strong {
  text-align: right;
  font: 500 15px/1.2 var(--display);
}

.lead-form {
  padding: 28px;
}
.form-status {
  margin-bottom: 20px;
  padding-bottom: 17px;
  color: #a5b3ae;
  font-size: 9px;
}
.lead-form label {
  margin-bottom: 14px;
  color: #b9c6c1;
  font-size: 10px;
  line-height: 1.3;
}
.lead-form input,
.lead-form textarea,
.lead-form select {
  margin-top: 6px;
  padding: 10px 2px 12px;
  border-bottom-color: rgba(177,211,201,.28);
  font-size: 16px;
  line-height: 1.4;
}
.lead-form input::placeholder,
.lead-form textarea::placeholder {
  color: #83918c;
  opacity: 1;
}
.lead-form textarea {
  min-height: 58px;
  max-height: 58px;
  resize: none;
}
.form-note {
  color: #7d8a85;
  font-size: 10px;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .audience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .audience-card,
  .audience-card:nth-child(n + 4) {
    grid-column: auto;
  }
  .audience-card:last-child {
    grid-column: 1 / -1;
  }
  .mentor-light {
    grid-template-columns: 1fr;
  }
  .mentor-light .mentor-copy {
    max-width: 820px;
  }
}

/* Large photographic site examples */
.examples {
  padding: clamp(88px, 9vw, 148px) clamp(20px, 4vw, 64px) clamp(34px, 5vw, 72px);
  border-color: rgba(190, 222, 212, .2);
  background:
    radial-gradient(circle at 88% 2%, rgba(53, 242, 200, .08), transparent 24%),
    #09100e;
}

.examples-heading {
  margin-bottom: clamp(46px, 6vw, 82px);
  grid-template-columns: minmax(0, 1.42fr) minmax(280px, .52fr);
}

.examples-heading h2 {
  max-width: 1050px;
  font-size: clamp(46px, 5.45vw, 88px);
}

.examples-heading > p {
  color: #c5cfcb;
  font-size: clamp(16px, 1.22vw, 19px);
}

.project-gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 1.35vw, 22px);
}

.project-shot {
  --project-accent: var(--mint);
  min-width: 0;
  min-height: 620px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 27px 8px 27px 8px;
  background: #090b0a;
  box-shadow: 0 34px 100px rgba(0, 0, 0, .32);
}

.project-shot::before,
.project-shot::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}

.project-shot::before {
  background: linear-gradient(90deg, rgba(4, 5, 5, .96) 0%, rgba(4, 5, 5, .78) 37%, rgba(4, 5, 5, .12) 75%);
}

.project-shot::after {
  background: linear-gradient(0deg, rgba(3, 4, 4, .82), transparent 28%);
}

.project-shot > img {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -2;
  inset: 0;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.22, .61, .36, 1), filter .7s ease;
}

.project-shot:hover > img {
  filter: saturate(1.08) contrast(1.03);
  transform: scale(1.025);
}

.project-ai,
.project-auto {
  grid-column: 1 / -1;
  min-height: clamp(620px, 49vw, 780px);
}

.project-architecture {
  --project-accent: #e7c99f;
  grid-column: span 7;
}

.project-tech {
  --project-accent: #66f260;
  grid-column: span 5;
}

.project-ai {
  --project-accent: #ff6a25;
}

.project-auto {
  --project-accent: #ff7eb3;
}

.project-ai > img {
  object-position: 69% center;
}

.project-architecture > img {
  object-position: 59% center;
}

.project-tech > img {
  object-position: 64% center;
}

.project-auto > img {
  object-position: 58% center;
}

.project-sitebar {
  height: 82px;
  padding: 0 clamp(22px, 3vw, 48px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  color: #fff;
}

.project-sitebar strong {
  color: #fff;
  font: 700 clamp(16px, 1.35vw, 22px) var(--display);
  letter-spacing: -.055em;
}

.project-sitebar strong span {
  margin-left: 4px;
  color: var(--project-accent);
}

.project-sitebar nav {
  display: flex;
  align-items: center;
  gap: clamp(22px, 2.6vw, 46px);
  color: rgba(255, 255, 255, .76);
  font: 500 9px var(--mono);
  text-transform: uppercase;
}

.project-sitebar b {
  width: fit-content;
  justify-self: end;
  padding: 11px 12px 11px 17px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, .52);
  border-radius: 999px;
  color: #fff;
  background: rgba(6, 8, 8, .32);
  backdrop-filter: blur(12px);
  font: 600 9px var(--mono);
  text-transform: uppercase;
}

.project-sitebar b i,
.project-action i {
  font-style: normal;
}

.project-sitebar b i {
  color: var(--project-accent);
}

.project-copy {
  width: min(48%, 700px);
  position: absolute;
  z-index: 2;
  top: 23%;
  left: clamp(24px, 5vw, 82px);
  color: white;
}

.project-copy small {
  display: block;
  margin-bottom: clamp(19px, 2vw, 32px);
  color: var(--project-accent);
  font: 600 clamp(9px, .72vw, 11px) var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.project-copy h3 {
  margin: 0;
  color: #fff;
  font: 600 clamp(54px, 5.8vw, 96px)/.87 var(--display);
  letter-spacing: -.075em;
}

.project-copy h3 em {
  color: var(--project-accent);
  font-style: normal;
}

.project-copy p {
  max-width: 500px;
  margin: clamp(24px, 2.4vw, 36px) 0 0;
  color: rgba(255, 255, 255, .75);
  font-size: clamp(13px, 1.05vw, 17px);
  line-height: 1.55;
}

.project-action {
  width: fit-content;
  margin-top: clamp(22px, 2.2vw, 34px);
  padding: 13px 14px 13px 19px;
  display: inline-flex;
  align-items: center;
  gap: 22px;
  border-radius: 999px;
  color: #080a09;
  background: var(--project-accent);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--project-accent) 20%, transparent);
  font: 700 10px var(--mono);
  text-transform: uppercase;
}

.project-action i {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--project-accent);
  background: #080a09;
}

.project-stats {
  display: flex;
  align-items: end;
  gap: clamp(26px, 4.5vw, 78px);
  position: absolute;
  z-index: 2;
  left: clamp(24px, 5vw, 82px);
  bottom: 35px;
  color: rgba(255, 255, 255, .61);
  font: 500 9px/1.35 var(--mono);
  text-transform: uppercase;
}

.project-stats span {
  display: grid;
  gap: 5px;
}

.project-stats strong {
  color: #fff;
  font: 600 clamp(19px, 1.85vw, 30px) var(--display);
  letter-spacing: -.05em;
  text-transform: none;
}

.project-kind {
  position: absolute;
  z-index: 3;
  right: clamp(20px, 3vw, 48px);
  bottom: 36px;
  color: rgba(255, 255, 255, .62);
  font: 500 8px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.project-architecture::before {
  background: linear-gradient(90deg, rgba(5, 8, 8, .94) 0%, rgba(5, 8, 8, .68) 43%, rgba(5, 8, 8, .12) 78%);
}

.project-architecture .project-copy,
.project-tech .project-copy {
  width: min(62%, 520px);
  top: 25%;
  left: clamp(24px, 3vw, 50px);
}

.project-architecture .project-copy h3,
.project-tech .project-copy h3 {
  font-size: clamp(46px, 4.25vw, 68px);
}

.project-architecture .project-copy p,
.project-tech .project-copy p {
  max-width: 390px;
  font-size: clamp(12px, .9vw, 15px);
}

.project-tech::before {
  background: linear-gradient(90deg, rgba(3, 5, 5, .98) 0%, rgba(3, 5, 5, .86) 47%, rgba(3, 5, 5, .12) 78%);
}

.project-tech .project-copy {
  width: 58%;
}

.project-tech .project-copy h3 {
  font-size: clamp(42px, 3.75vw, 61px);
}

.tech-mark {
  position: absolute;
  z-index: 1;
  right: 4%;
  bottom: -4%;
  color: rgba(102, 242, 96, .13);
  font: 800 clamp(118px, 13vw, 220px)/.72 var(--display);
  letter-spacing: -.11em;
  writing-mode: vertical-rl;
}

.project-auto::before {
  background:
    linear-gradient(90deg, rgba(4, 4, 5, .94) 0%, rgba(4, 4, 5, .7) 38%, rgba(4, 4, 5, .03) 72%),
    linear-gradient(0deg, rgba(4, 4, 5, .66), transparent 44%);
}

.project-auto .project-copy {
  width: min(50%, 710px);
  top: 22%;
}

.project-auto .project-copy h3 {
  font-size: clamp(54px, 5.45vw, 91px);
}

.examples-footer {
  margin-top: clamp(30px, 4vw, 56px);
  padding-top: clamp(24px, 3vw, 38px);
}

.examples-footer p {
  color: #c7d0cd;
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 1100px) {
  .project-ai,
  .project-auto {
    min-height: 650px;
  }

  .project-architecture,
  .project-tech {
    grid-column: 1 / -1;
    min-height: 620px;
  }

  .project-architecture .project-copy,
  .project-tech .project-copy {
    width: min(50%, 560px);
  }
}

@media (max-width: 820px) {
  .examples {
    width: min(calc(100% - 22px), var(--max));
    padding: 72px 14px 24px;
  }

  .examples-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .project-gallery {
    grid-template-columns: 1fr;
  }

  .project-ai,
  .project-auto,
  .project-architecture,
  .project-tech {
    grid-column: auto;
    min-height: 620px;
  }

  .project-sitebar {
    height: 68px;
    grid-template-columns: 1fr auto;
  }

  .project-sitebar nav {
    display: none;
  }

  .project-copy,
  .project-architecture .project-copy,
  .project-tech .project-copy,
  .project-auto .project-copy {
    width: calc(100% - 44px);
    top: 19%;
    left: 22px;
  }

  .project-copy h3,
  .project-architecture .project-copy h3,
  .project-tech .project-copy h3,
  .project-auto .project-copy h3 {
    font-size: clamp(43px, 10vw, 70px);
  }

  .project-copy p,
  .project-architecture .project-copy p,
  .project-tech .project-copy p {
    max-width: 470px;
    font-size: 14px;
  }

  .project-shot::before,
  .project-architecture::before,
  .project-tech::before,
  .project-auto::before {
    background: linear-gradient(180deg, rgba(4, 5, 5, .9) 0%, rgba(4, 5, 5, .74) 48%, rgba(4, 5, 5, .36) 72%, rgba(4, 5, 5, .82) 100%);
  }

  .project-ai > img,
  .project-architecture > img,
  .project-tech > img,
  .project-auto > img {
    object-position: 68% center;
  }

  .project-stats {
    left: 22px;
    right: 22px;
    bottom: 27px;
    justify-content: space-between;
    gap: 12px;
  }

  .project-kind {
    display: none;
  }

  .examples-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .examples-footer .button {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .examples-heading h2 {
    font-size: 37px;
  }

  .project-ai,
  .project-auto,
  .project-architecture,
  .project-tech {
    min-height: 570px;
    border-radius: 19px 6px 19px 6px;
  }

  .project-sitebar {
    height: 62px;
    padding: 0 17px;
  }

  .project-sitebar b {
    padding: 9px 11px;
    font-size: 7px;
  }

  .project-sitebar b i {
    display: none;
  }

  .project-copy,
  .project-architecture .project-copy,
  .project-tech .project-copy,
  .project-auto .project-copy {
    width: calc(100% - 34px);
    left: 17px;
  }

  .project-copy small {
    margin-bottom: 16px;
    font-size: 8px;
  }

  .project-copy h3,
  .project-architecture .project-copy h3,
  .project-tech .project-copy h3,
  .project-auto .project-copy h3 {
    font-size: clamp(39px, 12vw, 55px);
  }

  .project-copy p,
  .project-architecture .project-copy p,
  .project-tech .project-copy p {
    max-width: 330px;
    font-size: 12px;
  }

  .project-action {
    margin-top: 20px;
    padding: 10px 11px 10px 15px;
    font-size: 8px;
  }

  .project-action i {
    width: 23px;
    height: 23px;
  }

  .project-stats {
    left: 17px;
    right: 17px;
    bottom: 22px;
    font-size: 6px;
  }

  .project-stats strong {
    font-size: 16px;
  }

  .tech-mark {
    right: -2%;
    font-size: 130px;
  }

  .examples-footer p span {
    display: block;
    margin: 0 0 8px;
  }
}

/* Final cascade for the photographic examples section */
.examples {
  padding: clamp(88px, 9vw, 148px) clamp(20px, 4vw, 64px) clamp(34px, 5vw, 72px);
  border-color: rgba(190, 222, 212, .2);
  background: radial-gradient(circle at 88% 2%, rgba(53, 242, 200, .08), transparent 24%), #09100e;
}

.examples-heading {
  margin-bottom: clamp(46px, 6vw, 82px);
  grid-template-columns: minmax(0, 1.42fr) minmax(280px, .52fr);
}

.examples-heading h2 {
  max-width: 1050px;
  font-size: clamp(46px, 5.45vw, 88px);
}

.examples-heading > p {
  color: #c5cfcb;
  font-size: clamp(16px, 1.22vw, 19px);
}

.examples-footer {
  margin-top: clamp(30px, 4vw, 56px);
  padding-top: clamp(24px, 3vw, 38px);
}

.examples-footer p {
  color: #c7d0cd;
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 820px) {
  .examples {
    width: min(calc(100% - 22px), var(--max));
    padding: 72px 14px 24px;
  }

  .examples-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .examples-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .examples-footer .button {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .examples-heading h2 {
    font-size: 37px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-shot > img {
    transition: none;
  }
}

@media (max-width: 820px) {
  .audience-intro {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .audience-intro .eyebrow,
  .audience-intro h2,
  .audience-intro > p:last-child {
    grid-column: auto;
  }
  .audience-intro .eyebrow {
    margin-bottom: 0;
  }
  .result-showcase,
  .mentor-light {
    width: min(calc(100% - 22px), var(--max));
  }
  .result-showcase {
    padding: 76px 24px 38px;
  }
  .result-device {
    width: 100%;
    margin-top: 42px;
  }
  .mentor-light {
    padding: 70px 24px 24px;
  }
}

@media (max-width: 560px) {
  .audience-grid {
    grid-template-columns: 1fr;
  }
  .audience-card,
  .audience-card:last-child {
    grid-column: auto;
    min-height: 270px;
  }
  .result-copy h2 {
    font-size: 36px;
  }
  .result-copy #result-title {
    font-size: 29px;
  }
  .result-device {
    width: 100%;
    aspect-ratio: 1.2;
    margin-top: 34px;
  }
  .result-ledger {
    display: none;
  }
  .mentor-gallery {
    grid-template-columns: 1fr;
  }
  .mentor-photo {
    height: 430px;
  }
  .mentor-note {
    grid-column: auto;
  }
  .lead-form {
    padding: 20px;
  }
}

/* Light workbench and restrained interactive details */
.build-lab {
  padding: clamp(58px, 7vw, 104px);
  color: #07100e;
  background: #eef2ed;
  border: 1px solid rgba(255,255,255,.74);
  border-radius: var(--radius);
  overflow: hidden;
}
.lab-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(290px, .55fr);
  align-items: end;
  gap: 30px 70px;
  margin-bottom: 52px;
}
.build-lab .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: -10px;
  color: #087b63;
}
.build-lab .eyebrow span {
  background: #0ca886;
  box-shadow: none;
}
.lab-heading h2 {
  margin: 0;
  font-size: clamp(42px, 5vw, 78px);
}
.lab-heading h2 em {
  color: #0ca886;
}
.lab-heading > p:not(.eyebrow) {
  max-width: 510px;
  margin: 0;
  color: #4d5a56;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.65;
}
.text-arrow-cta {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: #07100e;
  font: 600 10px var(--display);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.text-arrow-cta > span {
  position: relative;
  padding-bottom: 7px;
}
.text-arrow-cta > span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.text-arrow-cta > i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(7,16,14,.18);
  border-radius: 50%;
  color: #087b63;
  font-style: normal;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), background .35s ease, color .35s ease;
}
.text-arrow-cta:hover > span::after {
  transform: scaleX(.35);
}
.text-arrow-cta:hover > i {
  transform: translate(5px,-5px);
  background: #07100e;
  color: var(--mint);
}
.lab-heading .text-arrow-cta {
  grid-column: 2;
  margin-top: 4px;
}

.lab-board {
  min-height: 620px;
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .72fr .76fr;
  align-items: center;
  gap: clamp(18px, 2.5vw, 36px);
  padding: clamp(24px, 3vw, 44px);
  border: 1px solid rgba(7,16,14,.12);
  border-radius: 26px 8px 26px 8px;
  background:
    linear-gradient(rgba(7,16,14,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,16,14,.055) 1px, transparent 1px),
    #dfe6e1;
  background-size: 42px 42px;
  overflow: hidden;
}
.lab-board::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: 17%;
  top: 50%;
  border: 1px solid rgba(12,168,134,.18);
  border-radius: 50%;
  transform: translateY(-50%);
}
.code-workspace,
.phone-visual,
.publish-stack {
  position: relative;
  z-index: 2;
}
.code-workspace {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px 5px 18px 5px;
  color: #dce8e3;
  background: #08110f;
  box-shadow: 0 32px 70px rgba(5,8,7,.22);
  overflow: hidden;
}
.workspace-top {
  height: 54px;
  padding: 0 17px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(177,211,201,.14);
  color: #82928c;
  font: 500 8px var(--mono);
  text-transform: uppercase;
}
.workspace-top > span {
  display: flex;
  gap: 6px;
}
.workspace-top i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #53615c;
}
.workspace-top i:first-child {
  background: var(--mint);
  box-shadow: 0 0 12px rgba(53,242,200,.68);
}
.code-lines {
  padding: 35px 22px 25px;
  display: grid;
  gap: 21px;
}
.code-lines > span {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 12px;
  color: #8c9b96;
  font: 500 11px var(--mono);
}
.code-lines b {
  color: #42504b;
  font-weight: 500;
}
.code-lines code {
  min-width: 0;
  padding: 10px 12px;
  border-left: 1px solid rgba(177,211,201,.14);
}
.code-lines .code-active code {
  color: var(--mint);
  border-color: var(--mint);
  background: linear-gradient(90deg, rgba(53,242,200,.09), transparent);
}
.workspace-command {
  margin: 0 22px 22px;
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(53,242,200,.22);
  border-radius: 10px 3px 10px 3px;
  color: #8c9b96;
  font: 500 10px var(--mono);
}
.workspace-command > span {
  color: var(--mint);
}
.workspace-command > i {
  width: 7px;
  height: 13px;
  margin-left: auto;
  background: var(--mint);
  animation: blink .85s steps(1) infinite;
}

.phone-visual {
  min-height: 560px;
  display: grid;
  place-items: center;
}
.phone-shell {
  width: min(100%, 276px);
  aspect-ratio: .515;
  padding: 10px;
  position: relative;
  border: 2px solid #07100e;
  border-radius: 40px;
  background: #07100e;
  box-shadow: 0 38px 72px rgba(5,8,7,.28);
  transform: rotate(2.5deg);
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
}
.phone-visual:hover .phone-shell {
  transform: rotate(0) translateY(-7px);
}
.phone-island {
  width: 38%;
  height: 20px;
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 17px;
  border-radius: 20px;
  background: #07100e;
  transform: translateX(-50%);
}
.phone-screen {
  height: 100%;
  padding: 62px 22px 22px;
  border-radius: 31px;
  color: #07100e;
  background: linear-gradient(155deg,#f8faf6,#cde0d8);
  overflow: hidden;
}
.phone-screen small {
  color: #087b63;
  font: 600 7px var(--mono);
  letter-spacing: .12em;
}
.phone-screen strong {
  display: block;
  margin: 24px 0 28px;
  font: 600 clamp(27px, 2.5vw, 39px)/.92 var(--display);
  letter-spacing: -.07em;
}
.phone-screen strong em {
  color: #0ca886;
  font-style: normal;
}
.phone-line {
  width: 54%;
  height: 4px;
  margin: 0 0 8px;
  display: block;
  border-radius: 4px;
  background: rgba(7,16,14,.16);
}
.phone-line-wide {
  width: 82%;
}
.phone-cards {
  margin: 34px 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.phone-cards i {
  aspect-ratio: .82;
  border: 1px solid rgba(7,16,14,.1);
  border-radius: 9px 3px 9px 3px;
  background: linear-gradient(145deg, rgba(129,119,255,.28), rgba(53,242,200,.34));
}
.phone-cards i:nth-child(2) {
  transform: translateY(-9px);
}
.phone-button {
  padding: 13px;
  border-radius: 9px 3px 9px 3px;
  text-align: center;
  color: white;
  background: #07100e;
  font: 600 8px var(--display);
}
.phone-tag {
  position: absolute;
  right: -10px;
  bottom: 70px;
  padding: 11px 13px;
  border: 1px solid rgba(7,16,14,.16);
  border-radius: 10px 3px 10px 3px;
  color: #51605a;
  background: rgba(248,250,246,.9);
  box-shadow: 0 18px 38px rgba(5,8,7,.13);
  backdrop-filter: blur(9px);
  font: 500 8px var(--mono);
  text-transform: uppercase;
}
.phone-tag span {
  margin-left: 9px;
  color: #087b63;
}

.publish-stack {
  display: grid;
  gap: 12px;
}
.publish-card,
.publish-meter {
  padding: 20px;
  border: 1px solid rgba(7,16,14,.14);
  border-radius: 15px 5px 15px 5px;
  background: rgba(248,250,246,.84);
  box-shadow: 0 20px 40px rgba(5,8,7,.08);
}
.publish-card-main > span {
  color: #087b63;
  font: 600 8px var(--mono);
}
.publish-card-main > strong {
  display: block;
  margin: 46px 0 26px;
  font: 600 clamp(19px, 2vw, 28px)/1.06 var(--display);
  letter-spacing: -.05em;
}
.publish-card-main > div {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #57645f;
  font: 500 8px var(--mono);
}
.publish-card-main > div i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0ca886;
  box-shadow: 0 0 12px rgba(12,168,134,.46);
}
.publish-card-code {
  color: #a8b8b2;
  background: #07100e;
  font: 500 9px var(--mono);
  transform: translateX(-18px);
}
.publish-meter {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px;
  color: #56635e;
  font: 500 8px var(--mono);
  text-transform: uppercase;
}
.publish-meter b {
  color: #07100e;
  font-size: 11px;
}
.publish-meter i {
  grid-column: 1 / -1;
  height: 3px;
  border-radius: 4px;
  background: linear-gradient(90deg,#0ca886 0 100%,rgba(7,16,14,.12) 100%);
}

.mentor-light .text-arrow-cta {
  width: 100%;
  justify-content: space-between;
  color: #07100e;
}
.mentor-light .text-arrow-cta > span {
  color: #07100e;
}
.mentor-light .text-arrow-cta > i {
  color: #087b63;
}

@media (max-width: 1100px) {
  .lab-board {
    grid-template-columns: 1fr .72fr;
  }
  .publish-stack {
    grid-column: 1 / -1;
    grid-template-columns: 1.2fr .8fr .8fr;
    align-items: stretch;
  }
  .publish-card-main > strong {
    margin: 24px 0 20px;
  }
  .publish-card-code {
    display: grid;
    place-items: center;
    transform: none;
  }
}

@media (max-width: 820px) {
  .build-lab {
    width: min(calc(100% - 22px), var(--max));
    padding: 70px 24px 24px;
  }
  .lab-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .lab-heading .eyebrow,
  .lab-heading .text-arrow-cta {
    grid-column: auto;
  }
  .lab-heading .eyebrow {
    margin-bottom: 0;
  }
  .lab-board {
    grid-template-columns: 1fr;
  }
  .code-workspace {
    max-width: 620px;
  }
  .phone-visual {
    min-height: 540px;
  }
  .publish-stack {
    grid-column: auto;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .lab-heading h2 {
    font-size: 32px;
    line-height: 1.02;
  }
  .lab-board {
    padding: 14px;
    background-size: 30px 30px;
  }
  .code-lines {
    padding-inline: 14px;
  }
  .workspace-command {
    margin-inline: 14px;
  }
  .phone-visual {
    min-height: 520px;
  }
  .phone-shell {
    width: 250px;
  }
  .phone-tag {
    right: 4px;
  }
  .publish-card-code {
    display: block;
  }
}

/* Stronger action hierarchy and lifted graphite rhythm */
.site-header {
  background: rgba(10, 18, 16, .82);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .2);
}
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 7px 8px 7px 17px;
  border-color: rgba(255,255,255,.7);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 10px 28px rgba(0,0,0,.24);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.header-cta span {
  width: 30px;
  height: 30px;
  margin: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--mint);
}
.header-cta:hover {
  transform: translateY(-2px);
  background: var(--mint);
  color: var(--ink);
  box-shadow: 0 14px 34px rgba(53,242,200,.18);
}
.button {
  min-height: 58px;
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 12px 34px rgba(0,0,0,.2);
}
.button-primary {
  box-shadow: 0 15px 42px rgba(53,242,200,.22), inset 0 1px rgba(255,255,255,.45);
}
.button-ghost {
  border-color: rgba(224,241,235,.38);
  background: rgba(223,239,233,.105);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 12px 34px rgba(0,0,0,.2);
}
.button-ghost:hover {
  border-color: rgba(53,242,200,.58);
  background: rgba(53,242,200,.09);
}
.card-action {
  min-height: 56px;
  margin-top: auto;
  padding: 7px 8px 7px 18px;
  align-items: center;
  border: 1px solid rgba(239,245,241,.78);
  border-radius: 13px 4px 13px 4px;
  background: #e8eeea;
  color: #07100e;
  box-shadow: 0 14px 34px rgba(0,0,0,.24);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.card-action span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px 3px 10px 3px;
  background: #07100e;
  color: var(--mint);
}
.format-card.featured .card-action {
  border-color: var(--mint);
  background: var(--mint);
  box-shadow: 0 16px 40px rgba(53,242,200,.17);
}
.card-action:hover {
  transform: translateY(-3px);
  background: #fff;
  box-shadow: 0 18px 42px rgba(0,0,0,.32);
}
.format-card.featured .card-action:hover {
  background: #75f8da;
}
.card-action:hover span {
  transform: translate(2px,-2px);
}

.build-lab .text-arrow-cta,
.mentor-light .text-arrow-cta {
  min-height: 50px;
  padding: 7px 8px 7px 16px;
  border: 1px solid #07100e;
  border-radius: 13px 4px 13px 4px;
  background: #07100e;
  color: var(--paper);
  box-shadow: 0 12px 28px rgba(7,16,14,.16);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.build-lab .text-arrow-cta > span,
.mentor-light .text-arrow-cta > span {
  padding: 0;
  color: var(--paper);
}
.build-lab .text-arrow-cta > span::after,
.mentor-light .text-arrow-cta > span::after {
  display: none;
}
.build-lab .text-arrow-cta > i,
.mentor-light .text-arrow-cta > i {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px 3px 10px 3px;
  background: var(--mint);
  color: var(--ink);
}
.build-lab .text-arrow-cta:hover,
.mentor-light .text-arrow-cta:hover {
  transform: translateY(-2px);
  background: #10211c;
  box-shadow: 0 16px 34px rgba(7,16,14,.22);
}
.build-lab .text-arrow-cta:hover > i,
.mentor-light .text-arrow-cta:hover > i {
  transform: translate(2px,-2px);
  background: var(--paper);
  color: var(--ink);
}

.hero {
  background:
    radial-gradient(circle at 18% 34%, rgba(53,242,200,.085), transparent 31%),
    linear-gradient(135deg, rgba(19,33,29,.96), rgba(7,12,11,.96) 62%);
}
.format-card {
  border-color: rgba(190,222,212,.24);
  background: linear-gradient(155deg, rgba(24,38,34,.94), rgba(9,15,13,.95));
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 24px 70px rgba(0,0,0,.12);
}
.format-card.featured {
  background: radial-gradient(circle at 72% 0, rgba(53,242,200,.19), transparent 42%), linear-gradient(155deg,#183029,#091511);
}
.format-index span,
.format-card > div:nth-of-type(2) > p {
  color: #a7b4af;
}
.audience-card {
  border-color: rgba(190,222,212,.23);
  background: linear-gradient(145deg,#14201d,#0b1210);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.dark-visual {
  background: linear-gradient(145deg,#172824,#0b1110);
}
.soft-visual {
  background: linear-gradient(125deg,rgba(169,195,255,.16),rgba(53,242,200,.12)),#0d1714;
}
.mini-terminal {
  background: #0b1311;
  box-shadow: 22px 20px 0 rgba(53,242,200,.07);
}
.module summary > span,
.faq-item summary > span {
  color: #84948e;
}
.module-content > div {
  background: #111b18;
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.module-topics,
.module-content p,
.faq-item > p {
  color: #aeb9b5;
}
.apply {
  background: radial-gradient(circle at 76% 22%,rgba(53,242,200,.1),transparent 32%),linear-gradient(145deg,#10231d,#070c0b 66%);
}
.lead-form {
  background: rgba(13,25,21,.91);
  border-color: rgba(93,236,204,.37);
  box-shadow: 0 40px 100px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.035);
}

.process {
  background:
    radial-gradient(circle at 82% 21%,rgba(169,195,255,.075),transparent 28%),
    radial-gradient(circle at 48% 55%,rgba(53,242,200,.105),transparent 46%),
    #08100e;
}
.ascii-canvas {
  opacity: .24;
}
.process-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr);
  align-items: end;
  gap: clamp(42px, 6vw, 100px);
}
.process-heading h2 {
  max-width: 1030px;
}
.process-signal {
  min-height: 252px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(191,230,219,.33);
  border-radius: 22px 7px 22px 7px;
  background: linear-gradient(145deg,rgba(229,241,236,.13),rgba(14,31,26,.92));
  box-shadow: 0 28px 70px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.08);
}
.process-signal::after {
  content: "";
  width: 180px;
  height: 180px;
  position: absolute;
  right: -78px;
  top: -90px;
  border: 1px solid rgba(53,242,200,.24);
  border-radius: 50%;
  box-shadow: 0 0 70px rgba(53,242,200,.08);
}
.signal-top,
.signal-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #a9b7b2;
  font: 600 8px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.signal-top span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.signal-top i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 14px var(--mint);
}
.signal-top code {
  color: var(--mint);
  font: inherit;
}
.signal-flow {
  margin: 44px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font: 500 clamp(16px,1.35vw,22px)/1 var(--mono);
}
.signal-flow b {
  font-weight: 500;
}
.signal-flow b:last-child {
  color: var(--mint);
}
.signal-flow i {
  color: #71817b;
  font-style: normal;
}
.process-signal > p {
  margin-bottom: 24px;
  color: #acb8b3;
  font-size: 12px;
}
.signal-meter {
  height: 5px;
  margin-bottom: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(224,240,234,.12);
}
.signal-meter i {
  display: block;
  width: 63%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,var(--violet),var(--ice),var(--mint));
  box-shadow: 0 0 18px rgba(53,242,200,.36);
  animation: signalLive 4.4s ease-in-out infinite;
}
.signal-meta span:last-child {
  color: var(--mint);
}
.process-track {
  margin-top: 70px;
}
.process-step p {
  color: #a4b0ab;
}
.learning-modes {
  margin-top: 82px;
}
.mode-card {
  border-color: rgba(190,222,212,.24);
  background: rgba(15,27,23,.93);
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 28px 70px rgba(0,0,0,.13);
}
.mode-personal {
  background: radial-gradient(circle at 80% 0,rgba(53,242,200,.2),transparent 42%),#10231d;
}
@keyframes signalLive {
  0%,100% { width: 63%; }
  50% { width: 72%; }
}

@media (max-width: 1100px) {
  .process-heading {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .process-signal {
    width: min(100%, 720px);
  }
}
@media (max-width: 820px) {
  .header-cta {
    display: none;
  }
  .process-heading {
    gap: 34px;
  }
  .process-track {
    margin-top: 58px;
  }
  .learning-modes {
    margin-top: 68px;
  }
}
@media (max-width: 560px) {
  .format-card {
    min-height: 500px;
  }
  .card-action {
    min-height: 58px;
    font-size: 9px;
  }
  .process-signal {
    min-height: 0;
    padding: 18px;
    border-radius: 17px 5px 17px 5px;
  }
  .signal-flow {
    margin-top: 34px;
    font-size: 14px;
  }
  .process-signal > p {
    font-size: 11px;
  }
  .signal-meta {
    font-size: 7px;
  }
  .process-track {
    margin-top: 48px;
    gap: 34px;
  }
  .learning-modes {
    margin-top: 58px;
  }
  .mode-card {
    min-height: 350px;
  }
}

/* Vibe-built project gallery */
.examples {
  padding: clamp(82px, 9vw, 138px) clamp(22px, 3.8vw, 56px);
  border: 1px solid rgba(190,222,212,.24);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 92% 4%, rgba(129,119,255,.12), transparent 27%),
    radial-gradient(circle at 4% 82%, rgba(53,242,200,.1), transparent 25%),
    #0c1513;
  overflow: hidden;
}
.examples-heading {
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(280px,.58fr);
  align-items: end;
  gap: 42px 80px;
  margin-bottom: 54px;
}
.examples-heading h2 {
  max-width: 980px;
  font-size: clamp(42px,5vw,78px);
}
.examples-heading > p {
  max-width: 480px;
  margin: 0 0 5px;
  color: #b2bdb9;
  font-size: clamp(15px,1.25vw,18px);
  line-height: 1.65;
}
.examples-wall {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  grid-template-rows: repeat(2,296px);
  gap: 14px;
}
.example-frame {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(234,244,240,.24);
  border-radius: 24px 7px 24px 7px;
  background: #111a18;
  box-shadow: 0 30px 80px rgba(0,0,0,.22);
  transition: transform .45s cubic-bezier(.22,.61,.36,1), border-color .35s ease, box-shadow .35s ease;
}
.example-frame:hover {
  z-index: 2;
  border-color: rgba(234,244,240,.46);
  box-shadow: 0 38px 96px rgba(0,0,0,.34);
  transform: translateY(-5px);
}
.example-tero {
  grid-column: span 7;
  grid-row: span 2;
}
.example-form,
.example-lumen {
  grid-column: span 5;
}
.example-browser {
  height: 42px;
  padding: 0 15px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.13);
  color: rgba(255,255,255,.62);
  background: #101715;
  font: 500 8px var(--mono);
}
.example-browser > span {
  display: flex;
  gap: 5px;
}
.example-browser i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #53605c;
}
.example-browser i:first-child {
  background: var(--mint);
}
.example-browser code {
  padding: 5px 18px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  font: inherit;
}
.example-browser b {
  justify-self: end;
  color: var(--mint);
  font-weight: 500;
}
.tero-screen,
.form-screen,
.lumen-screen {
  height: calc(100% - 42px);
  position: relative;
  overflow: hidden;
}
.tero-screen {
  padding: 25px clamp(25px,3vw,46px);
  color: #f3e4cf;
  background:
    radial-gradient(circle at 73% 44%,rgba(239,110,74,.18),transparent 28%),
    linear-gradient(145deg,#391016,#1e090e 72%);
}
.tero-screen header,
.form-screen header,
.lumen-screen header {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tero-screen header strong {
  font: 600 19px var(--display);
  letter-spacing: -.08em;
}
.tero-screen header span,
.form-screen header span,
.lumen-screen header span {
  font: 500 7px var(--mono);
  letter-spacing: .08em;
}
.tero-copy {
  width: 53%;
  position: relative;
  z-index: 3;
  margin-top: clamp(72px,8vw,118px);
}
.tero-copy small,
.form-copy small,
.lumen-copy small {
  color: #f28c69;
  font: 600 8px var(--mono);
  letter-spacing: .12em;
}
.tero-copy h3 {
  margin: 20px 0 23px;
  font: 400 clamp(38px,4.2vw,68px)/.88 Georgia,serif;
  letter-spacing: -.065em;
}
.tero-copy h3 em {
  color: #ef704d;
  font-style: italic;
}
.tero-copy p {
  max-width: 310px;
  color: #cbb7a3;
  font-size: 12px;
}
.mock-cta {
  width: fit-content;
  margin-top: 28px;
  padding: 8px 8px 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font: 600 8px var(--mono);
  text-transform: uppercase;
}
.mock-cta i {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ef704d;
  color: #260b0f;
  font-style: normal;
}
.tero-dish {
  width: 42%;
  aspect-ratio: 1;
  position: absolute;
  right: 5%;
  top: 18%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(243,228,207,.22);
  border-radius: 50%;
  background: radial-gradient(circle,#eadbc5 0 34%,#a74e38 35% 38%,#291012 39% 60%,#60301f 61% 63%,#160a0c 64%);
  box-shadow: 0 35px 70px rgba(0,0,0,.38),inset 0 0 55px rgba(255,220,174,.1);
  transform: rotate(-8deg);
}
.tero-dish::before {
  content: "";
  width: 48%;
  height: 30%;
  border-radius: 48% 52% 40% 60%;
  background: linear-gradient(145deg,#6f261b,#e0774f);
  box-shadow: 15px 9px 0 -5px #202e21,-13px -12px 0 -8px #dfc855;
  transform: rotate(18deg);
}
.tero-dish i {
  width: 13px;
  height: 13px;
  position: absolute;
  border-radius: 50%;
  background: #e6cd55;
}
.tero-dish i:nth-child(1){left:28%;top:34%}.tero-dish i:nth-child(2){right:27%;bottom:31%;background:#ec815f}.tero-dish i:nth-child(3){left:40%;bottom:22%;width:7px;height:7px;background:#6b8f52}
.tero-dish b {
  position: absolute;
  right: 2%;
  top: -8%;
  color: #ef704d;
  font: 500 10px var(--mono);
}
.example-caption {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 58px;
  padding: 13px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  border-top: 1px solid rgba(255,255,255,.13);
  background: rgba(8,12,11,.72);
  backdrop-filter: blur(14px);
  color: white;
}
.example-caption span {
  color: var(--mint);
  font: 500 7px var(--mono);
  text-transform: uppercase;
}
.example-caption strong {
  max-width: 240px;
  text-align: right;
  font: 500 10px/1.25 var(--display);
}
.form-screen {
  padding: 20px 22px;
  color: #172127;
  background: #dad9d1;
}
.form-screen header strong {
  font: 700 16px var(--display);
  letter-spacing: -.09em;
}
.form-screen header span {
  color: #52605e;
}
.form-copy {
  width: 55%;
  position: relative;
  z-index: 3;
  margin-top: 35px;
}
.form-copy small {
  color: #f14e2f;
  font-size: 6px;
}
.form-copy h3 {
  margin: 11px 0 13px;
  font: 600 clamp(22px,2.2vw,34px)/.9 var(--display);
  letter-spacing: -.075em;
}
.form-copy > span {
  color: #54615e;
  font: 500 7px var(--mono);
  text-transform: uppercase;
}
.form-building {
  width: 45%;
  position: absolute;
  right: 0;
  top: 44px;
  bottom: 0;
  border-left: 1px solid rgba(23,33,39,.17);
  background: linear-gradient(120deg,#8d9996,#c8cbc4);
  clip-path: polygon(26% 12%,100% 0,100% 100%,0 100%,0 37%);
}
.form-building i {
  position: absolute;
  top: 17%;
  bottom: 0;
  width: 1px;
  background: rgba(23,33,39,.23);
}
.form-building i:nth-child(1){left:28%}.form-building i:nth-child(2){left:54%}.form-building i:nth-child(3){left:79%}
.form-building b {
  width: 42%;
  height: 38%;
  position: absolute;
  left: 32%;
  bottom: 18%;
  border: 1px solid rgba(23,33,39,.25);
  background: linear-gradient(135deg,rgba(255,255,255,.22),rgba(23,33,39,.08));
}
.form-screen .example-caption {
  color: #f3f5f0;
  background: rgba(23,33,39,.84);
}
.lumen-screen {
  padding: 20px 22px;
  color: #f6f7ff;
  background:
    radial-gradient(circle at 80% 15%,rgba(53,242,200,.16),transparent 25%),
    linear-gradient(135deg,#17172f,#27215d 63%,#15162d);
}
.lumen-screen header strong {
  color: #b8c9ff;
  font: 700 17px var(--body);
  letter-spacing: -.05em;
}
.lumen-screen header span {
  color: #b7bae1;
}
.lumen-copy {
  width: 56%;
  position: relative;
  z-index: 3;
  margin-top: 27px;
}
.lumen-copy small {
  color: var(--mint);
  font-size: 6px;
}
.lumen-copy h3 {
  margin: 9px 0 10px;
  font: 600 clamp(22px,2.2vw,35px)/.9 var(--display);
  letter-spacing: -.07em;
}
.lumen-copy h3 em {
  color: #a9c3ff;
  font-style: normal;
}
.lumen-copy p {
  max-width: 260px;
  margin-bottom: 11px;
  color: #b4b6dc;
  font-size: 8px;
}
.lumen-copy .mock-cta {
  margin-top: 0;
  color: #121329;
  background: var(--mint);
  border: 0;
}
.lumen-copy .mock-cta i {
  background: #121329;
  color: var(--mint);
}
.lumen-phone {
  width: 29%;
  position: absolute;
  z-index: 2;
  right: 9%;
  top: 47px;
  bottom: 26px;
  padding: 20px 14px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 22px 7px 22px 7px;
  background: linear-gradient(160deg,rgba(246,247,255,.2),rgba(12,13,36,.72));
  box-shadow: 0 22px 40px rgba(0,0,0,.27),inset 0 1px rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  transform: rotate(5deg);
}
.lumen-phone > span,
.lumen-phone > small {
  color: #b7bae1;
  font: 500 6px var(--mono);
}
.lumen-phone > strong {
  display: block;
  margin: 7px 0 15px;
  font: 600 clamp(13px,1.3vw,19px) var(--body);
}
.lumen-phone > i {
  display: block;
  height: 1px;
  background: rgba(255,255,255,.2);
}
.lumen-phone > div {
  height: 49px;
  margin: 13px 0 9px;
  display: flex;
  align-items: end;
  gap: 5px;
}
.lumen-phone b {
  flex: 1;
  height: 32%;
  border-radius: 3px 3px 0 0;
  background: #8177ff;
}
.lumen-phone b:nth-child(2){height:48%;background:#918cff}.lumen-phone b:nth-child(3){height:40%;background:#9dacff}.lumen-phone b:nth-child(4){height:70%;background:#91c8ea}.lumen-phone b:nth-child(5){height:62%;background:#6fe1d1}.lumen-phone b:nth-child(6){height:88%;background:var(--mint)}
.lumen-orbit {
  width: 220px;
  height: 220px;
  position: absolute;
  right: -90px;
  top: -110px;
  border: 1px solid rgba(169,195,255,.25);
  border-radius: 50%;
}
.examples-footer {
  margin-top: 28px;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  border-top: 1px solid var(--line);
}
.examples-footer p {
  max-width: 700px;
  margin: 0;
  color: #b5c0bc;
  font-size: 14px;
}
.examples-footer p span {
  margin-right: 15px;
  color: var(--mint);
  font: 600 9px var(--mono);
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .examples-wall {
    grid-template-rows: 520px 330px;
  }
  .example-tero {
    grid-column: 1 / -1;
    grid-row: span 1;
  }
  .example-form,
  .example-lumen {
    grid-column: span 6;
  }
  .tero-copy {
    margin-top: 70px;
  }
  .tero-dish {
    width: 35%;
    right: 9%;
  }
}
@media (max-width: 820px) {
  .examples {
    width: min(calc(100% - 22px),var(--max));
    padding: 72px 22px 24px;
  }
  .examples-heading {
    grid-template-columns: 1fr;
    gap: 23px;
  }
  .examples-heading .eyebrow {
    margin-bottom: 19px;
  }
  .examples-wall {
    grid-template-columns: 1fr;
    grid-template-rows: 520px 390px 390px;
  }
  .example-tero,
  .example-form,
  .example-lumen {
    grid-column: auto;
    grid-row: auto;
  }
  .examples-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .examples-footer .button {
    width: 100%;
  }
}
@media (max-width: 560px) {
  .examples-heading h2 {
    font-size: 34px;
  }
  .examples-wall {
    grid-template-rows: 460px 350px 350px;
    gap: 11px;
  }
  .example-frame {
    border-radius: 18px 5px 18px 5px;
  }
  .example-browser {
    grid-template-columns: 1fr auto;
  }
  .example-browser code {
    display: none;
  }
  .tero-screen {
    padding: 19px;
  }
  .tero-screen header span,
  .form-screen header span,
  .lumen-screen header span {
    display: none;
  }
  .tero-copy {
    width: 66%;
    margin-top: 54px;
  }
  .tero-copy h3 {
    font-size: 39px;
  }
  .tero-copy p {
    max-width: 190px;
    font-size: 10px;
  }
  .tero-dish {
    width: 52%;
    right: -16%;
    top: 24%;
  }
  .form-copy,
  .lumen-copy {
    width: 63%;
  }
  .form-copy h3,
  .lumen-copy h3 {
    font-size: 27px;
  }
  .form-building {
    width: 42%;
  }
  .lumen-phone {
    width: 33%;
    right: 5%;
  }
  .example-caption {
    min-height: 54px;
    padding: 12px 14px;
  }
  .example-caption strong {
    max-width: 170px;
    font-size: 9px;
  }
  .examples-footer p span {
    display: block;
    margin: 0 0 8px;
  }
}

/* Each example has its own site identity */
.project-brand {
  --project-accent: #ff8a4c;
  grid-column: span 5;
}

.project-brand > img {
  object-position: 64% center;
}

.project-brand::before {
  background: linear-gradient(90deg, rgba(37, 5, 3, .94) 0%, rgba(49, 7, 3, .78) 46%, rgba(49, 7, 3, .08) 82%);
}

.project-brand .project-copy {
  width: 58%;
  top: 26%;
  left: clamp(24px, 3vw, 50px);
}

.project-brand .project-copy h3 {
  font: 500 clamp(41px, 3.75vw, 61px)/.88 Georgia, serif;
  letter-spacing: -.065em;
}

.project-brand .project-copy h3 em {
  font-style: italic;
}

.project-brand .project-copy p {
  max-width: 360px;
  color: rgba(255, 238, 223, .78);
  font-size: clamp(12px, .9vw, 15px);
}

.arch-masthead {
  padding: 30px clamp(24px, 3vw, 48px) 23px;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: start;
  gap: 28px;
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  right: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  color: #f7f0e5;
}

.arch-masthead strong {
  font: 500 clamp(23px, 2.1vw, 34px) Georgia, serif;
  letter-spacing: -.06em;
}

.arch-masthead span,
.arch-masthead b {
  color: rgba(255, 255, 255, .72);
  font: 500 8px/1.45 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.arch-masthead b {
  justify-self: end;
  color: var(--project-accent);
}

.arch-nav {
  width: 76px;
  padding: 18px 11px;
  display: grid;
  gap: 18px;
  position: absolute;
  z-index: 4;
  top: 118px;
  right: 0;
  border: 1px solid rgba(255, 255, 255, .24);
  border-right: 0;
  color: rgba(255, 255, 255, .72);
  background: rgba(6, 9, 9, .34);
  backdrop-filter: blur(10px);
  font: 500 7px var(--mono);
  text-transform: uppercase;
}

.arch-nav i {
  color: var(--project-accent);
  font-style: normal;
}

.brand-masthead {
  padding: 18px clamp(18px, 2vw, 30px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  right: 0;
  color: #fff4e9;
}

.brand-masthead strong {
  font: 800 clamp(18px, 1.55vw, 25px) var(--display);
  letter-spacing: -.07em;
}

.brand-masthead sup {
  margin-left: 3px;
  color: var(--project-accent);
  font: 600 8px var(--mono);
}

.brand-masthead nav {
  padding: 9px 13px;
  display: flex;
  gap: 17px;
  border: 1px solid rgba(255, 244, 233, .52);
  border-radius: 999px;
  color: #fff4e9;
  background: rgba(53, 8, 3, .28);
  backdrop-filter: blur(12px);
  font: 500 6px var(--mono);
  text-transform: uppercase;
}

.brand-masthead b {
  justify-self: end;
  display: flex;
  gap: 4px;
}

.brand-masthead b i {
  width: 7px;
  height: 7px;
  border: 1px solid rgba(255, 244, 233, .72);
  border-radius: 50%;
}

.brand-masthead b i:first-child {
  background: var(--project-accent);
  border-color: var(--project-accent);
}

.brand-credit {
  padding: 13px 17px;
  position: absolute;
  z-index: 3;
  right: 24px;
  bottom: 68px;
  border-radius: 15px 4px 15px 4px;
  color: #36110a;
  background: #f6d7bb;
  box-shadow: 0 16px 34px rgba(32, 4, 2, .25);
  font: 600 8px/1.3 var(--mono);
  text-transform: uppercase;
  transform: rotate(-3deg);
}

.brand-credit span {
  display: block;
  font: 600 25px/1 var(--display);
}

.auto-masthead {
  padding: 26px clamp(24px, 4vw, 66px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  right: 0;
  color: #fff;
}

.auto-masthead nav {
  display: flex;
  gap: 32px;
  color: rgba(255, 255, 255, .65);
  font: 500 8px var(--mono);
  text-transform: uppercase;
}

.auto-masthead strong {
  color: #f9c6d9;
  font: 700 clamp(24px, 2.7vw, 43px) var(--display);
  letter-spacing: -.08em;
}

.auto-masthead sup {
  margin-left: 6px;
  color: var(--project-accent);
  font: 600 9px var(--mono);
}

.auto-masthead b {
  justify-self: end;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  color: #fff;
  font: 600 9px var(--mono);
  text-transform: uppercase;
}

.auto-masthead b i {
  margin-left: 14px;
  color: var(--project-accent);
  font-style: normal;
}

@media (max-width: 1100px) {
  .project-brand {
    grid-column: 1 / -1;
    min-height: 620px;
  }
  .project-brand .project-copy {
    width: min(50%, 560px);
  }
}

@media (max-width: 820px) {
  .project-brand {
    grid-column: auto;
    min-height: 620px;
  }
  .project-brand .project-copy {
    width: calc(100% - 44px);
    top: 19%;
    left: 22px;
  }
  .project-brand .project-copy h3 {
    font-size: clamp(43px, 10vw, 70px);
  }
  .project-brand .project-copy p {
    max-width: 470px;
    font-size: 14px;
  }
  .project-brand::before {
    background: linear-gradient(180deg, rgba(44, 7, 3, .9) 0%, rgba(44, 7, 3, .72) 56%, rgba(44, 7, 3, .34) 74%, rgba(44, 7, 3, .8) 100%);
  }
  .project-brand > img {
    object-position: 68% center;
  }
  .arch-masthead span,
  .arch-nav,
  .brand-masthead nav,
  .auto-masthead nav {
    display: none;
  }
  .arch-masthead,
  .brand-masthead,
  .auto-masthead {
    grid-template-columns: 1fr auto;
  }
  .auto-masthead strong {
    grid-column: 1;
    grid-row: 1;
  }
  .auto-masthead b {
    grid-column: 2;
  }
}

@media (max-width: 560px) {
  .project-brand {
    min-height: 570px;
  }
  .project-brand .project-copy {
    width: calc(100% - 34px);
    left: 17px;
  }
  .project-brand .project-copy h3 {
    font-size: clamp(39px, 12vw, 55px);
  }
  .project-brand .project-copy p {
    max-width: 330px;
    font-size: 12px;
  }
  .arch-masthead,
  .auto-masthead {
    padding: 20px 17px;
  }
  .brand-masthead {
    padding: 18px 17px;
  }
  .arch-masthead b,
  .auto-masthead b {
    font-size: 7px;
  }
  .brand-credit {
    right: 16px;
    bottom: 58px;
  }
}

/* Photographic examples must win over the retired mockup gallery above */
.examples {
  padding: clamp(88px, 9vw, 148px) clamp(20px, 4vw, 64px) clamp(34px, 5vw, 72px);
  border-color: rgba(190, 222, 212, .2);
  background: radial-gradient(circle at 88% 2%, rgba(53, 242, 200, .08), transparent 24%), #09100e;
}
.examples-heading {
  margin-bottom: clamp(46px, 6vw, 82px);
  grid-template-columns: minmax(0, 1.42fr) minmax(280px, .52fr);
}
.examples-heading h2 {
  max-width: 1050px;
  font-size: clamp(46px, 5.45vw, 88px);
}
.examples-heading > p {
  color: #c5cfcb;
  font-size: clamp(16px, 1.22vw, 19px);
}
.examples-footer {
  margin-top: clamp(30px, 4vw, 56px);
  padding-top: clamp(24px, 3vw, 38px);
}
.examples-footer p {
  color: #c7d0cd;
  font-size: 15px;
  line-height: 1.55;
}
@media (max-width: 820px) {
  .examples {
    width: min(calc(100% - 22px), var(--max));
    padding: 72px 14px 24px;
  }
  .examples-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .examples-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .examples-footer .button {
    width: 100%;
  }
}
@media (max-width: 560px) {
  .examples-heading h2 {
    font-size: 37px;
  }
}