:root{--ink:#080808;--panel:#111112;--line:rgba(255,255,255,.12);--muted:#9c9ca3;--paper:#f4f1ea;--red:#ff354d;--page:min(1180px,calc(100vw - 48px))}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--ink)}body{margin:0;background:transparent;color:var(--paper);font-family:"DM Sans",sans-serif;line-height:1.6;overflow-x:hidden}body:before{content:"";position:fixed;z-index:0;inset:0;pointer-events:none;opacity:.28;background-image:linear-gradient(rgba(255,255,255,.038) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.038) 1px,transparent 1px),radial-gradient(circle,rgba(255,255,255,.08) 1px,transparent 1.2px);background-size:64px 64px,64px 64px,18px 18px;mask-image:linear-gradient(#000,transparent 94%)}.ambient-canvas{position:fixed;z-index:0;inset:0;width:100%;height:100%;pointer-events:none;opacity:.82;filter:drop-shadow(0 0 3px rgba(255,70,95,.45))}.ambient-field{position:fixed;z-index:0;inset:0;pointer-events:none;background:radial-gradient(circle at 88% 14%,rgba(255,53,77,.13),transparent 28%),radial-gradient(circle at 12% 78%,rgba(118,84,170,.08),transparent 30%),linear-gradient(115deg,transparent 0 46%,rgba(255,255,255,.022) 46.1% 46.25%,transparent 46.4%);box-shadow:inset 0 0 180px rgba(0,0,0,.72)}.ambient-field:before{content:"";position:absolute;width:min(54vw,760px);aspect-ratio:1;right:-18vw;top:8vh;border:1px solid rgba(255,84,106,.12);border-radius:50%;box-shadow:0 0 0 54px rgba(255,255,255,.012),0 0 0 130px rgba(255,53,77,.018)}main{position:relative;z-index:1}a{color:inherit}.cursor-glow{position:fixed;z-index:0;width:520px;height:520px;border-radius:50%;background:rgba(255,53,77,.1);filter:blur(88px);transform:translate(-50%,-50%);pointer-events:none;transition:opacity .3s}.skip-link{position:fixed;z-index:100;left:18px;top:12px;padding:11px 15px;border-radius:10px;background:#fff;color:#080808;font:700 .75rem Manrope;text-decoration:none;transform:translateY(-160%);transition:transform .2s}.skip-link:focus{transform:none}.reading-progress{position:fixed;z-index:90;left:0;right:0;top:0;height:3px;background:rgba(255,255,255,.04);pointer-events:none}.reading-progress span{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--red),#ff8290);transform:scaleX(0);transform-origin:left;will-change:transform}
.site-header{position:fixed;z-index:20;top:18px;left:50%;transform:translateX(-50%);width:var(--page);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;padding:12px 14px;background:rgba(8,8,8,.78);border:1px solid var(--line);border-radius:18px;backdrop-filter:blur(18px);box-shadow:0 18px 60px rgba(0,0,0,.28)}.brand{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:var(--paper);color:var(--ink);font:800 .9rem/1 Manrope;text-decoration:none}.site-header nav{display:flex;justify-content:center;gap:30px}.site-header nav a,.back-link{font-size:.76rem;font-weight:600;text-decoration:none;color:#c7c7cc;transition:.2s}.site-header nav a:hover,.site-header nav a.active,.back-link:hover{color:#fff}.site-header nav a.active{position:relative}.site-header nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:var(--red)}.back-link{padding:9px 12px;border:1px solid var(--line);border-radius:10px}
.hero{width:var(--page);min-height:100svh;margin:auto;padding:160px 0 64px;display:grid;grid-template-columns:1fr 300px;align-items:end;position:relative;isolation:isolate}.hero-orbit{position:absolute;z-index:-1;width:min(63vw,820px);aspect-ratio:1;right:-14vw;top:5vh;border-radius:50%;background:conic-gradient(from 215deg,transparent 0 31%,var(--red) 43%,#3c0710 56%,transparent 72%);box-shadow:inset 0 0 140px #000,0 0 100px rgba(255,53,77,.2);opacity:.75;animation:orbit 12s ease-in-out infinite}.hero-orbit:after{content:"";position:absolute;inset:8%;border:1px solid rgba(255,255,255,.16);border-radius:50%;box-shadow:0 0 0 34px rgba(255,255,255,.018),0 0 0 94px rgba(255,255,255,.01)}@keyframes orbit{50%{transform:translate(-28px,18px) rotate(10deg)}}.hero-video{position:absolute;z-index:-1;right:0;top:12vh;width:min(48vw,620px);aspect-ratio:16/9;border-radius:22px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12)}.hero-video video{width:100%;height:100%;object-fit:cover;display:block}@media(max-width:800px){.hero-video{position:relative;top:auto;right:auto;width:100%;margin:32px 0;z-index:1}}.kicker,.section-number,.case-label{margin:0;color:var(--red);font:700 .72rem/1.3 Manrope;letter-spacing:.15em;text-transform:uppercase}.hero h1,h2,h3{font-family:Manrope,sans-serif}.hero h1{max-width:940px;margin:22px 0 28px;font-size:clamp(4rem,10.5vw,9rem);line-height:.91;letter-spacing:-.085em}.hero h1 span,h2 em{color:transparent;-webkit-text-stroke:1px rgba(244,241,234,.76);font-style:normal}.hero-intro{max-width:580px;margin:0;color:#c7c7cc;font-size:clamp(1rem,1.7vw,1.18rem)}.hero-actions{display:flex;align-items:center;gap:24px;margin-top:34px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 20px;border-radius:12px;text-decoration:none;font-size:.82rem;font-weight:700}.button-primary{background:var(--red);color:#fff}.button-primary:hover{background:#ff5267}.text-link{font-size:.82rem;font-weight:700;text-decoration:none}.text-link span{color:var(--red)}.hero-index{align-self:end;display:grid;grid-template-columns:auto 1fr;gap:10px 18px;padding:24px;border-left:1px solid var(--line)}.hero-index span{color:var(--red);font:700 .7rem Manrope}.hero-index p{margin:0;color:#c4c4ca;font-size:.84rem}.scroll-cue{position:absolute;bottom:26px;left:0;margin:0;color:#66666e;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase}
.section{width:var(--page);margin:auto;padding:130px 0;border-top:1px solid var(--line);content-visibility:auto;contain-intrinsic-size:900px}.section-head{display:grid;grid-template-columns:1fr 2.1fr;gap:60px;align-items:start;margin-bottom:62px}.section h2{margin:0;font-size:clamp(3rem,7vw,6.8rem);line-height:.94;letter-spacing:-.07em}.profile{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px}.profile .section-head{display:block}.profile .section-number{margin-bottom:34px}.profile h2{font-size:clamp(3.4rem,6.2vw,6rem)}.profile-copy{padding-top:40px}.profile-copy .lead{margin:0 0 28px;color:#fff;font:600 clamp(1.55rem,3vw,2.5rem)/1.28 Manrope;letter-spacing:-.04em}.profile-copy>p:not(.lead){max-width:680px;color:#b9b9c0}.focus-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}.focus-list span,.tool-list span{padding:10px 13px;border:1px solid var(--line);border-radius:999px;color:#b9b9c0;font-size:.75rem}
.manifesto{padding:95px max(24px,calc((100vw - 1180px)/2));background:var(--red)}.manifesto p{max-width:1180px;margin:0;font:700 clamp(2.8rem,7vw,6.8rem)/.98 Manrope;letter-spacing:-.065em}.manifesto span{color:#37070e}
.case-study{padding:clamp(24px,5vw,62px);border:1px solid var(--line);border-radius:30px;background:radial-gradient(circle at 95% 5%,rgba(190,76,24,.22),transparent 35rem),#111}.case-copy{display:grid;grid-template-columns:1.1fr 1.3fr;gap:40px;align-items:end;margin-bottom:42px}.case-copy h3{margin:14px 0 0;font-size:clamp(3rem,6vw,6rem);line-height:.95;letter-spacing:-.065em}.case-copy>p:not(.case-label){margin:0;color:#bdbdc4}.bio-toggle{width:max-content;margin-top:20px;padding:0;border:0;background:none;color:#fff;font:700 .78rem Manrope;cursor:pointer}.bio-toggle span{display:inline-block;margin-left:8px;color:var(--red);transition:transform .25s}.bio-toggle[aria-expanded=true] span{transform:rotate(45deg)}.author-bio{grid-column:2;padding:19px;border-left:2px solid #b64d25;background:rgba(190,76,24,.08)}.author-bio p{margin:0!important;font-size:.83rem}.book-gallery{display:grid;grid-template-columns:.72fr 1.25fr .72fr;gap:16px;align-items:center}.book-shot{margin:0;position:relative;transform-style:preserve-3d;transition:transform .25s ease}.book-shot img{width:100%;display:block;border-radius:15px;box-shadow:0 25px 60px rgba(0,0,0,.46)}.book-shot figcaption{padding:12px 3px 0;color:#85858d;font-size:.7rem}.book-front img,.book-back img{aspect-ratio:4/5;object-fit:cover}.book-spread img{aspect-ratio:16/10;object-fit:cover}
.channel-grid{display:grid;gap:18px;margin-top:18px}.channel-card{display:grid;grid-template-columns:1.4fr .6fr;min-height:390px;overflow:hidden;border:1px solid var(--line);border-radius:26px;background:var(--panel)}.channel-card:nth-child(even){grid-template-columns:.6fr 1.4fr}.channel-card:nth-child(even) .channel-image{order:2}.channel-image{overflow:hidden;background:#050505}.channel-image img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .6s ease,filter .6s}.channel-card:hover img{transform:scale(1.035);filter:saturate(1.08)}.channel-copy{padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;justify-content:center}.channel-copy h3{margin:23px 0 12px;font-size:clamp(2rem,4vw,3.3rem);line-height:1;letter-spacing:-.055em}.channel-copy p:not(.case-label){margin:0 0 28px;color:#aaaab1;font-size:.88rem}.channel-cta{width:max-content;display:inline-flex;align-items:center;gap:14px;min-height:48px;padding:0 18px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:var(--red);color:#fff;font:700 .78rem Manrope;text-decoration:none;box-shadow:0 12px 28px rgba(255,53,77,.2);transition:transform .25s,background .25s,box-shadow .25s}.channel-cta span{font-size:1rem;transition:transform .25s}.channel-cta:hover{background:#ff5267;box-shadow:0 16px 36px rgba(255,53,77,.3);transform:translateY(-2px)}.channel-cta:hover span{transform:translate(2px,-2px)}
.method-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:22px;overflow:hidden}.method-grid article{min-height:275px;padding:28px;border-right:1px solid var(--line);background:var(--panel);transition:background .3s,transform .3s}.method-grid article:last-child{border:0}.method-grid article:hover{background:#171719;transform:translateY(-5px)}.method-grid span{color:var(--red);font:700 .72rem Manrope}.method-grid h3{margin:78px 0 11px;font-size:1.45rem}.method-grid p{margin:0;color:#97979e;font-size:.82rem}.toolkit{display:grid;grid-template-columns:1fr 1.1fr;gap:80px}.toolkit .section-head{display:block;margin:0}.toolkit .section-number{margin-bottom:34px}.toolkit h2{font-size:clamp(3.4rem,6.2vw,6rem)}.tool-list{display:flex;flex-wrap:wrap;align-content:center;gap:11px}.tool-list span{padding:15px 18px;border-radius:13px;background:#111}.tool-list span:hover{border-color:var(--red);transform:translateY(-2px)}
.credential-card{display:grid;grid-template-columns:1.1fr .9fr;gap:42px;padding:28px;border:1px solid var(--line);border-radius:26px;background:var(--panel)}.credential-card img{width:100%;border-radius:17px}.credential-card>div{align-self:center}.credential-card h3{margin:25px 0 12px;font-size:clamp(2.5rem,5vw,4.5rem);line-height:.96;letter-spacing:-.06em}.credential-card p:not(.case-label){color:#b8b8bf}.credential-card span{color:#777780;font-size:.72rem}.contact{padding-bottom:40px}.contact-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:70px;align-items:end;margin-top:40px}.contact-copy p{margin:0 0 24px;color:#b8b8bf}.contact-details{display:grid;border-top:1px solid var(--line)}.contact-detail{display:grid;grid-template-columns:72px 1fr;gap:18px;align-items:center;padding:17px 3px;border-bottom:1px solid var(--line);text-decoration:none;transition:padding .25s,background .25s}.contact-detail span{color:#74747c;font:700 .66rem Manrope;letter-spacing:.11em;text-transform:uppercase}.contact-detail strong{color:#f4f1ea;font:600 .82rem Manrope;overflow-wrap:anywhere}.contact-detail b{color:var(--red)}.contact-detail:hover{padding-left:10px;background:linear-gradient(90deg,rgba(255,53,77,.1),transparent)}.contact-detail:hover strong{color:#fff}.channel-cta:focus-visible,.contact-detail:focus-visible{outline:2px solid #fff;outline-offset:4px}footer{display:flex;justify-content:space-between;margin-top:100px;padding-top:30px;border-top:1px solid var(--line);color:#686870;font-size:.72rem}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .75s ease,transform .75s ease}.reveal.in{opacity:1;transform:none}.mobile-back{display:none}.back-to-top{position:fixed;z-index:40;right:22px;bottom:22px;width:52px;height:52px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);border-radius:16px;background:rgba(15,12,17,.86);color:#fff;box-shadow:0 14px 38px rgba(0,0,0,.38),0 0 24px rgba(255,53,77,.18);backdrop-filter:blur(18px);font:700 1rem Manrope;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(16px) scale(.92);transition:opacity .25s,transform .25s,visibility .25s,background .25s}.back-to-top.visible{opacity:1;visibility:visible;transform:none}.back-to-top:hover{background:var(--red);transform:translateY(-3px)}.back-to-top:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media(max-width:800px){:root{--page:min(100% - 28px,1180px)}.cursor-glow{display:none}.ambient-canvas{opacity:.75}.ambient-field{opacity:.82}.site-header{top:10px;padding:10px}.site-header nav,.back-link{display:none}.site-header{grid-template-columns:auto 1fr}.site-header:after{content:"GEN AI PORTFOLIO";justify-self:end;color:#777780;font:700 .66rem Manrope;letter-spacing:.13em}.hero{min-height:860px;grid-template-columns:1fr;padding-top:135px}.hero h1{font-size:clamp(4rem,19vw,6.5rem)}.hero-index{display:none}.hero-orbit{width:110vw;right:-55vw;top:18vh}.section{padding:88px 0}.section-head,.profile,.case-copy,.book-gallery,.channel-card,.channel-card:nth-child(even),.toolkit,.credential-card,.contact-grid{grid-template-columns:1fr;gap:34px}.profile-copy{padding-top:0}.manifesto{padding-top:70px;padding-bottom:70px}.author-bio{grid-column:auto}.book-gallery{gap:28px}.book-shot img{max-height:none}.book-front img,.book-back img{aspect-ratio:auto}.book-spread{order:3}.book-spread img{aspect-ratio:4/3}.channel-card{min-height:0}.channel-card:nth-child(even) .channel-image{order:0}.channel-image{aspect-ratio:16/10}.channel-cta{min-height:50px;padding:0 20px}.method-grid{grid-template-columns:1fr 1fr}.method-grid article{min-height:210px;border-bottom:1px solid var(--line)}.method-grid h3{margin-top:52px}.contact-detail{grid-template-columns:64px 1fr}.mobile-back{position:fixed;z-index:30;left:14px;bottom:calc(14px + env(safe-area-inset-bottom));display:inline-flex;padding:12px 15px;border:1px solid var(--line);border-radius:999px;background:rgba(8,8,8,.9);backdrop-filter:blur(16px);font:700 .72rem Manrope;text-decoration:none}.back-to-top{z-index:80;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));width:50px;height:50px;display:grid;border-color:rgba(255,255,255,.38);border-radius:15px;background:rgba(255,53,77,.96);box-shadow:0 12px 34px rgba(0,0,0,.48),0 0 22px rgba(255,53,77,.32)}footer{margin-top:70px;gap:16px;flex-direction:column}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}.ambient-canvas{display:none}.ambient-field{transform:none}}

/* AI hero video — matched to the Professional Portfolio hero proportions */
.hero {
  width: 100%;
  max-width: 1536px;
  min-height: 100svh;
  margin: 0 auto;
  padding: 150px 80px 72px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas:
    "copy video"
    "index video";
  grid-template-rows: auto auto;
  column-gap: 48px;
  row-gap: 34px;
  align-content: center;
  align-items: center;
}

.hero-copy {
  grid-area: copy;
  min-width: 0;
  position: relative;
  z-index: 3;
}

.hero h1,
.hero-title {
  max-width: 100%;
  margin: 22px 0 28px;
  font-size: clamp(4rem, 4.35vw, 4.85rem);
  line-height: .92;
  letter-spacing: -.065em;
}

.hero-intro,
.hero p {
  max-width: 620px;
}

.hero-video {
  grid-area: video;
  position: relative;
  z-index: 2;
  top: auto;
  right: auto;
  width: 100%;
  max-width: none;
  aspect-ratio: auto;
  margin: 0;
  align-self: center;
  justify-self: stretch;
  overflow: visible;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.video-frame {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  background: #050505;
  box-shadow: 0 28px 76px rgba(0,0,0,.5);
}

.video-frame video {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #050505;
}

.video-controls {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  display: grid;
  grid-template-columns: auto auto auto minmax(180px,1fr) auto auto;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,.1);
  border-radius: 0;
  background: rgba(12,10,12,.98);
  backdrop-filter: none;
  opacity: 1;
  transform: none;
  transition: none;
}

.video-frame:hover .video-controls,
.video-frame:focus-within .video-controls {
  opacity: 1;
  transform: none;
}

.video-controls button {
  min-width: 42px;
  width: auto;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 9px;
  background: rgba(255,255,255,.07);
  color: #fff;
  font: 700 .7rem/1 Manrope, sans-serif;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}

.video-controls button:hover {
  background: rgba(255,53,77,.18);
  border-color: rgba(255,82,103,.55);
  transform: translateY(-1px);
}

.video-controls button:focus-visible,
.video-controls input:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.video-controls .play-control {
  background: var(--red);
  border-color: var(--red);
}

.video-controls .play-control:hover {
  background: #ff5267;
}

.video-controls .icon-control {
  padding: 0;
  width: 38px;
}

.video-timeline {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(80px,1fr) auto;
  align-items: center;
  gap: 8px;
}

.video-controls input[type="range"] {
  width: 100%;
  min-width: 80px;
  margin: 0;
  accent-color: var(--red);
  cursor: pointer;
}

.video-time {
  color: #a8a8af;
  font: 600 .64rem/1 Manrope, sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hero-index {
  grid-area: index;
  align-self: start;
  max-width: 390px;
}

.video-frame:fullscreen {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: #000;
}

.video-frame:fullscreen video {
  width: 100%;
  max-height: calc(100vh - 58px);
  object-fit: contain;
}

.video-frame:fullscreen .video-controls {
  flex: 0 0 auto;
}

@media (min-width: 1280px) and (max-width: 1535px) {
  .hero {
    max-width: 1280px;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .hero {
    max-width: 1024px;
    padding-left: 48px;
    padding-right: 48px;
  }
  .hero h1,
  .hero-title {
    font-size: clamp(3.4rem, 5.35vw, 4.15rem);
  }
  .video-controls {
    grid-template-columns: auto auto auto minmax(130px,1fr) auto auto;
  }
  .expand-control .control-label {
    display: none;
  }
}

@media (max-width: 1023px) {
  .hero {
    width: min(768px, 100%);
    max-width: none;
    min-height: auto;
    padding: 135px 24px 72px;
    grid-template-columns: minmax(0,1fr);
    grid-template-areas:
      "copy"
      "video"
      "index";
    row-gap: 30px;
  }
  .hero h1,
  .hero-title {
    font-size: clamp(3.7rem, 10vw, 5.5rem);
  }
  .hero-video {
    margin: 4px 0 0;
  }
  .video-controls {
    grid-template-columns: auto auto auto minmax(150px,1fr) auto auto;
  }
}

@media (max-width: 700px) {
  .hero {
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }
  .hero h1,
  .hero-title {
    font-size: clamp(3.5rem, 17vw, 5.25rem);
  }
  .video-frame {
    border-radius: 16px;
  }
  .video-controls {
    grid-template-columns: repeat(5, auto);
    gap: 7px;
    padding: 9px;
  }
  .video-timeline {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .expand-control .control-label,
  .play-control .control-label,
  .skip-control span {
    display: none;
  }
  .video-controls button {
    min-width: 40px;
    padding: 0 8px;
  }
  .video-controls .icon-control {
    width: 40px;
  }
}
