:root{
  --bg:#f2f0ea;
  --ink:#111111;
  --muted:#66635d;
  --line:rgba(17,17,17,.16);
  --dark:#111111;
  --dark-2:#191919;
  --light:#f5f2ea;
  --accent:#d6ff3f;
  --accent-2:#f05b36;
  --radius:28px;
  --pad:clamp(22px,4vw,64px);
  --max:1500px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Arial, Helvetica, sans-serif;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
::selection{background:var(--accent);color:var(--ink)}

.noise{
  position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  mix-blend-mode:multiply
}
.site-header{
  position:fixed;top:0;left:0;width:100%;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);
  background:rgba(242,240,234,.82);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(17,17,17,.08);
}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--ink);
  border-radius:50%;font-size:12px;font-weight:800;letter-spacing:-.04em
}
.brand-name{font-size:14px;font-weight:700}
.site-nav{display:flex;align-items:center;gap:26px;font-size:13px}
.site-nav a{opacity:.7;transition:.25s}
.site-nav a:hover{opacity:1}
.site-nav .nav-cta{
  opacity:1;background:var(--ink);color:#fff;padding:11px 16px;border-radius:999px
}
.menu-toggle{display:none;background:none;border:0;cursor:pointer}

.section{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.hero{padding-top:148px;max-width:none}
.hero-kicker{
  max-width:var(--max);margin:0 auto 34px;display:flex;gap:10px;align-items:center;
  text-transform:uppercase;font-size:11px;letter-spacing:.12em
}
.status-dot{width:8px;height:8px;background:var(--accent-2);border-radius:50%;box-shadow:0 0 0 5px rgba(240,91,54,.12)}
.hero-grid{
  max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 320px;
  gap:clamp(30px,6vw,100px);align-items:stretch
}
.display{
  margin:0;font-size:clamp(56px,8.4vw,145px);line-height:.84;letter-spacing:-.07em;
  font-weight:800;max-width:1100px
}
.display .outline{
  color:transparent;-webkit-text-stroke:1.5px var(--ink);display:block
}
.display .serif{
  display:block;font-family:Georgia, "Times New Roman", serif;font-style:italic;font-weight:400;letter-spacing:-.07em
}
.hero-bottom{
  display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-top:48px;max-width:1000px
}
.hero-bottom p{max-width:560px;font-size:clamp(18px,2vw,28px);line-height:1.25;letter-spacing:-.025em;margin:0}
.button{
  display:inline-flex;align-items:center;gap:34px;border-radius:999px;padding:16px 20px;font-size:13px;font-weight:700;
  transition:transform .25s,background .25s,color .25s
}
.button:hover{transform:translateY(-2px)}
.button-dark{background:var(--ink);color:white}
.button-dark:hover{background:var(--accent);color:var(--ink)}
.hero-panel{
  background:var(--dark);color:var(--light);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;
  min-height:540px
}
.panel-top{display:flex;justify-content:space-between;font-size:10px;text-transform:uppercase;letter-spacing:.1em;opacity:.55}
.discipline-list{list-style:none;padding:0;margin:42px 0 30px}
.discipline-list li{display:flex;align-items:baseline;gap:18px;padding:18px 0;border-top:1px solid rgba(255,255,255,.13)}
.discipline-list li:last-child{border-bottom:1px solid rgba(255,255,255,.13)}
.discipline-list span{font-size:10px;opacity:.45}
.discipline-list strong{font-size:22px;letter-spacing:-.035em}
.panel-note{margin-top:auto;padding:18px;background:var(--accent);color:var(--ink);border-radius:18px}
.tiny-label,.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.panel-note p{font-size:18px;line-height:1.1;letter-spacing:-.025em;margin:12px 0 0}
.hero-marquee{margin-top:84px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.marquee-track{
  display:flex;align-items:center;gap:24px;white-space:nowrap;padding:14px 0;width:max-content;
  animation:marquee 24s linear infinite;font-size:12px;font-weight:800;letter-spacing:.06em
}
.marquee-track b{font-size:10px;color:var(--accent-2)}
@keyframes marquee{to{transform:translateX(-50%)}}

.work-section{padding-top:140px;padding-bottom:140px}
.section-heading{display:grid;grid-template-columns:180px 1fr;gap:40px;margin-bottom:70px;align-items:start}
.section-heading h2{
  margin:0;font-size:clamp(46px,6vw,96px);line-height:.92;letter-spacing:-.06em;max-width:900px
}
.eyebrow{margin:8px 0 0}
.case{
  border-top:1px solid var(--line);padding-top:22px
}
.case-meta{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:28px}
.case-meta h3{font-size:clamp(28px,3.4vw,54px);margin:6px 0 0;letter-spacing:-.05em}
.case-meta p{margin:4px 0 0;color:var(--muted);font-size:13px}
.case-index{text-transform:uppercase!important;font-size:10px!important;letter-spacing:.1em}
.browser-mockup{
  background:#0f0f0f;border-radius:26px;overflow:hidden;box-shadow:0 38px 100px rgba(17,17,17,.18)
}
.browser-bar{
  height:46px;display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;padding:0 18px;
  color:#aaa;font-size:10px;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid #282828
}
.browser-dots{display:flex;gap:5px}
.browser-dots i{width:7px;height:7px;border-radius:50%;background:#555}
.browser-bar>span:nth-child(2){text-align:center}
.browser-live{text-align:right;color:var(--accent)}
.gartner-screen{
  min-height:650px;color:white;padding:26px;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 78% 28%, rgba(214,255,63,.16), transparent 19%),
    linear-gradient(135deg,#161616 0%,#222 50%,#0e0e0e 100%)
}
.gartner-screen:before{
  content:"";position:absolute;inset:0;opacity:.22;
  background:
   linear-gradient(90deg,transparent 48%,rgba(255,255,255,.13) 49%,transparent 50%) 0 0/120px 100%,
   linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px) 0 0/100% 120px;
}
.gartner-top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center}
.gartner-logo{width:54px;height:54px;border:1px solid rgba(255,255,255,.5);display:grid;place-items:center;border-radius:50%;font-weight:800}
.gartner-nav{display:flex;gap:24px;font-size:11px;opacity:.7}
.gartner-copy{position:relative;z-index:2;margin:105px 0 90px;max-width:900px}
.screen-label{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--accent)}
.gartner-copy h4{font-size:clamp(54px,7vw,110px);line-height:.86;letter-spacing:-.06em;margin:22px 0}
.gartner-copy p{max-width:470px;font-size:18px;line-height:1.4;color:#c6c6c6}
.screen-button{display:inline-block;margin-top:18px;padding:12px 15px;border:1px solid #777;border-radius:999px;font-size:11px}
.gartner-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mini-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(10px);padding:18px;border-radius:18px;min-height:150px}
.mini-card span{font-size:10px;color:var(--accent)}
.mini-card strong{display:block;font-size:18px;margin:34px 0 8px}
.mini-card small{color:#aaa;line-height:1.4}
.case-summary{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;padding:32px 0 0}
.case-lead{font-size:clamp(22px,2.5vw,34px);line-height:1.15;letter-spacing:-.03em;margin:0}
.case-tags{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;justify-content:flex-end}
.case-tags span{border:1px solid var(--line);border-radius:999px;padding:9px 12px;font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:110px}
.case-small{border-top:1px solid var(--line);padding-top:18px}
.case-small-visual{height:520px;border-radius:22px;margin:18px 0 24px;position:relative;overflow:hidden}
.visual-ui{background:#d8d3c8}
.floating-window{position:absolute;background:#111;color:#fff;border-radius:18px;padding:20px;box-shadow:0 25px 60px rgba(0,0,0,.2)}
.window-a{width:55%;left:8%;top:11%;height:58%}
.window-a small{font-size:9px;color:#aaa;letter-spacing:.1em}
.window-a strong{display:block;font-size:92px;letter-spacing:-.07em;margin-top:22px}
.window-a p{font-family:Georgia,serif;font-style:italic;font-size:20px;margin-top:0}
.window-b{width:51%;right:7%;bottom:9%;height:38%;background:var(--accent);color:#111;transform:rotate(-4deg)}
.ui-line{display:block;height:8px;border-radius:9px;background:#111;margin:20px 0 8px;width:80%}
.ui-line.short{width:48%}
.ui-button{position:absolute;bottom:18px;right:18px;background:#111;color:#fff;padding:11px;border-radius:999px;font-size:10px}
.visual-brand{background:#151515;color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:28px}
.brand-symbol{
  font-family:Georgia,serif;font-style:italic;font-size:150px;letter-spacing:-.14em;color:#d2a863
}
.brand-copy{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;border-top:1px solid #444;padding-top:16px}
.brand-copy small{color:#aaa;letter-spacing:.1em}
.brand-copy strong{font-size:22px;max-width:310px;text-align:right;line-height:1.1}
.case-small-copy>span{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.case-small-copy h3{font-size:clamp(28px,3vw,46px);line-height:1;letter-spacing:-.045em;margin:14px 0}
.case-small-copy p{max-width:560px;color:var(--muted);font-size:15px;line-height:1.5}

.services-section{
  max-width:none;background:var(--dark);color:var(--light);padding-top:130px;padding-bottom:120px
}
.services-section>*{max-width:var(--max);margin-left:auto;margin-right:auto}
.section-heading-light{border-bottom:1px solid rgba(255,255,255,.17);padding-bottom:54px}
.service-list{border-top:1px solid rgba(255,255,255,.13)}
.service-row{
  display:grid;grid-template-columns:60px minmax(220px,1.1fr) minmax(280px,1fr) 30px;
  gap:24px;align-items:center;padding:34px 0;border-bottom:1px solid rgba(255,255,255,.13)
}
.service-num{font-size:10px;color:#777}
.service-row h3{font-size:clamp(28px,3vw,48px);letter-spacing:-.05em;margin:0}
.service-row p{color:#aaa;line-height:1.5;margin:0}
.service-arrow{font-size:22px;color:var(--accent)}

.approach-section{padding-top:140px;padding-bottom:140px}
.approach-intro{display:grid;grid-template-columns:180px 1fr 360px;gap:40px;align-items:start}
.approach-intro h2{font-size:clamp(48px,6vw,94px);line-height:.9;letter-spacing:-.06em;margin:0}
.approach-intro>p:last-child{font-size:18px;line-height:1.45;color:var(--muted);margin:6px 0}
.process{display:grid;grid-template-columns:repeat(4,1fr);margin-top:90px;border-top:1px solid var(--line)}
.process-step{padding:22px 20px 30px 0;border-right:1px solid var(--line);min-height:310px}
.process-step:not(:first-child){padding-left:20px}
.process-step:last-child{border-right:0}
.process-step span{font-size:10px;color:var(--muted)}
.process-step h3{font-size:30px;letter-spacing:-.04em;margin:85px 0 20px}
.process-step p{font-size:14px;line-height:1.55;color:var(--muted);max-width:250px}

.seo-section{padding-bottom:140px}
.seo-card{background:var(--accent);border-radius:var(--radius);padding:clamp(24px,5vw,72px);display:grid;grid-template-columns:1fr 1fr;gap:70px}
.seo-copy h2{font-size:clamp(50px,6vw,90px);line-height:.9;letter-spacing:-.06em;margin:24px 0}
.seo-copy>p:last-child{max-width:560px;font-size:17px;line-height:1.55}
.seo-console{background:#111;color:#fff;border-radius:20px;align-self:center;padding:20px;box-shadow:0 35px 70px rgba(0,0,0,.18);transform:rotate(1.5deg)}
.console-top{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.1em;color:#999;padding:0 0 18px}
.console-top span:last-child{color:var(--accent)}
.console-row{display:grid;grid-template-columns:38px 1fr auto;gap:12px;padding:17px 0;border-top:1px solid #323232;align-items:center}
.console-row span{color:#777;font-size:10px}
.console-row strong{font-size:13px}
.console-row em{font-style:normal;color:var(--accent);font-size:10px}

.about-section{padding-top:50px;padding-bottom:150px}
.about-grid{display:grid;grid-template-columns:180px 1fr;gap:40px;border-top:1px solid var(--line);padding-top:28px}
.about-copy h2{font-size:clamp(46px,6vw,90px);line-height:.93;letter-spacing:-.06em;margin:0 0 60px;max-width:1050px}
.about-columns{display:grid;grid-template-columns:1fr 1fr;gap:50px;max-width:900px}
.about-columns p{font-size:17px;line-height:1.6;color:var(--muted);margin:0}

.contact-section{padding-bottom:70px}
.contact-card{background:var(--accent-2);color:#fff;border-radius:var(--radius);padding:clamp(28px,6vw,90px)}
.contact-card h2{font-size:clamp(54px,7vw,112px);line-height:.87;letter-spacing:-.065em;margin:34px 0 80px}
.contact-bottom{display:flex;justify-content:space-between;gap:30px;align-items:flex-end}
.button-light{background:#fff;color:#111}
.button-light:hover{background:var(--accent)}
.contact-bottom p{max-width:280px;font-size:13px;line-height:1.45;opacity:.8}

.site-footer{max-width:var(--max);margin:0 auto;padding:0 var(--pad) 34px;display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}

.reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .75s cubic-bezier(.2,.75,.25,1),transform .75s cubic-bezier(.2,.75,.25,1)
}
.reveal.is-visible{opacity:1;transform:none}

@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr}
  .hero-panel{min-height:auto}
  .discipline-list{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
  .approach-intro{grid-template-columns:140px 1fr}
  .approach-intro>p:last-child{grid-column:2}
  .process{grid-template-columns:1fr 1fr}
  .process-step:nth-child(2){border-right:0}
  .process-step:nth-child(3),.process-step:nth-child(4){border-top:1px solid var(--line)}
  .seo-card{grid-template-columns:1fr}
}
@media (max-width:780px){
  .site-header{padding:14px 18px}
  .brand-name{display:none}
  .menu-toggle{display:flex;align-items:center;gap:6px}
  .menu-toggle span{font-size:11px}
  .menu-toggle i{display:block;width:12px;height:1px;background:#111}
  .site-nav{
    position:fixed;top:68px;left:16px;right:16px;background:#111;color:white;border-radius:20px;padding:22px;
    flex-direction:column;align-items:stretch;gap:18px;transform:translateY(-20px);opacity:0;pointer-events:none;transition:.25s
  }
  .site-nav.open{transform:none;opacity:1;pointer-events:auto}
  .site-nav .nav-cta{text-align:center;background:var(--accent);color:#111}
  .hero{padding-top:110px}
  .hero-kicker{margin-bottom:24px}
  .display{font-size:clamp(50px,16vw,90px)}
  .hero-bottom{display:block}
  .hero-bottom p{font-size:18px;margin-bottom:28px}
  .hero-panel{margin-top:15px}
  .discipline-list{grid-template-columns:1fr}
  .section-heading{grid-template-columns:1fr;gap:12px}
  .section-heading h2{font-size:50px}
  .case-meta{display:block}
  .case-meta>p{margin-top:12px}
  .gartner-screen{min-height:650px;padding:18px}
  .gartner-nav{display:none}
  .gartner-copy{margin:70px 0}
  .gartner-copy h4{font-size:54px}
  .gartner-grid{grid-template-columns:1fr}
  .mini-card{min-height:110px}
  .case-summary{grid-template-columns:1fr;gap:28px}
  .case-tags{justify-content:flex-start}
  .work-grid{grid-template-columns:1fr}
  .case-small-visual{height:430px}
  .service-row{grid-template-columns:40px 1fr 24px}
  .service-row p{grid-column:2/4}
  .approach-intro{grid-template-columns:1fr}
  .approach-intro>p:last-child{grid-column:auto}
  .process{grid-template-columns:1fr}
  .process-step,.process-step:not(:first-child){padding:22px 0;border-right:0;border-top:1px solid var(--line);min-height:auto}
  .process-step h3{margin:36px 0 12px}
  .seo-card{padding:26px 18px}
  .seo-console{transform:none}
  .console-row{grid-template-columns:32px 1fr}
  .console-row em{grid-column:2}
  .about-grid{grid-template-columns:1fr}
  .about-columns{grid-template-columns:1fr}
  .contact-bottom{display:block}
  .contact-bottom p{margin-top:30px}
  .site-footer{flex-direction:column;gap:10px}
}


/* =========================
   V2 — portfolio architecture
   ========================= */

.section-intro{
  max-width:700px;
  margin:24px 0 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.55;
}

.mockup-kern{background:#111}
.kern-screen{
  min-height:680px;
  position:relative;
  overflow:hidden;
  padding:28px;
  color:#f1efe8;
  background:
    radial-gradient(circle at 84% 20%,rgba(214,255,63,.13),transparent 18%),
    linear-gradient(145deg,#101010,#1c1c1c 56%,#111);
}
.kern-screen:before{
  content:"";
  position:absolute;inset:0;
  opacity:.25;
  background:
    linear-gradient(90deg,transparent 49.5%,rgba(255,255,255,.08) 50%,transparent 50.5%) 0 0/150px 100%,
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/100% 120px;
}
.kern-top,.kern-copy,.kern-dashboard{position:relative;z-index:2}
.kern-top{display:flex;justify-content:space-between;align-items:center}
.kern-logo{font-size:25px;font-weight:900;letter-spacing:-.05em}
.kern-logo span{color:var(--accent)}
.kern-nav{display:flex;gap:28px;font-size:11px;color:#aaa}
.kern-copy{margin:110px 0 80px;max-width:940px}
.kern-copy h4{
  margin:20px 0;
  font-size:clamp(62px,8vw,118px);
  line-height:.84;
  letter-spacing:-.07em;
}
.kern-copy p{max-width:520px;color:#b8b8b8;line-height:1.5;font-size:17px}
.kern-dashboard{display:grid;grid-template-columns:.45fr .45fr 1.1fr;gap:10px}
.metric{
  min-height:150px;border:1px solid rgba(255,255,255,.14);border-radius:18px;
  background:rgba(255,255,255,.045);padding:18px;position:relative;overflow:hidden
}
.metric small{font-size:9px;color:#999;letter-spacing:.1em}
.metric strong{display:block;font-size:64px;letter-spacing:-.06em;margin-top:28px}
.metric-wide{min-height:150px}
.map-lines{
  position:absolute;inset:42px 18px 18px;
  opacity:.38;
  background:
    linear-gradient(28deg,transparent 49%,#aaa 49.5%,#aaa 50.5%,transparent 51%) 0 0/70px 70px,
    linear-gradient(-20deg,transparent 49%,#777 49.5%,#777 50.5%,transparent 51%) 0 0/95px 90px;
}
.map-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(214,255,63,.11)}
.d1{left:32%;top:53%}.d2{left:64%;top:68%}.d3{left:76%;top:40%}

.concept-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:110px
}
.concept-card{border-top:1px solid var(--line);padding-top:18px}
.concept-visual{
  height:560px;border-radius:22px;overflow:hidden;position:relative;margin:18px 0 24px
}
.concept-copy>span{
  font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)
}
.concept-copy h3{font-size:38px;letter-spacing:-.05em;margin:12px 0}
.concept-copy p{margin:0;color:var(--muted);line-height:1.5;max-width:540px}

.concept-nocturne{
  background:#e8e4dc;color:#161616;padding:24px;
}
.nocturne-nav{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.08em}
.nocturne-copy{position:absolute;left:24px;top:95px;z-index:2}
.nocturne-copy small{text-transform:uppercase;letter-spacing:.12em}
.nocturne-copy h3{
  margin:18px 0;font-family:Georgia,serif;font-weight:400;font-style:italic;
  font-size:64px;line-height:.9;letter-spacing:-.045em
}
.nocturne-image{
  position:absolute;right:7%;bottom:7%;width:56%;height:61%;
  border-radius:50% 50% 6% 6% / 38% 38% 6% 6%;
  background:
    radial-gradient(circle at 55% 38%,rgba(255,255,255,.5),transparent 7%),
    linear-gradient(155deg,#59605c 0 35%,#929c8f 36% 47%,#332c29 48% 61%,#c7baa8 62%);
  box-shadow:0 35px 70px rgba(0,0,0,.15);
}
.nocturne-image:before{
  content:"";position:absolute;inset:12%;border:1px solid rgba(255,255,255,.42);border-radius:50%
}
.nocturne-image span{
  position:absolute;left:-28px;bottom:35px;font-size:10px;transform:rotate(-90deg);letter-spacing:.1em
}

.concept-vertex{
  background:#c8d5ff;color:#0d1730;padding:24px;
  background:
    linear-gradient(rgba(13,23,48,.07) 1px,transparent 1px) 0 0/100% 48px,
    linear-gradient(90deg,rgba(13,23,48,.07) 1px,transparent 1px) 0 0/48px 100%,
    #c8d5ff;
}
.vertex-header{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.1em}
.vertex-object{
  position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);
  width:230px;height:300px;border-radius:120px 120px 26px 26px;
  background:linear-gradient(145deg,#101827,#2f3c5b);
  box-shadow:0 45px 70px rgba(13,23,48,.28), inset -25px -20px 55px rgba(255,255,255,.05)
}
.vertex-object:before{
  content:"";position:absolute;width:96px;height:96px;border:2px solid #86ffcc;border-radius:50%;
  left:50%;top:34%;transform:translate(-50%,-50%);
  box-shadow:0 0 40px rgba(134,255,204,.24)
}
.vertex-object i{
  position:absolute;display:block;height:2px;background:#8692b1;width:120px;left:55px
}
.vertex-object i:nth-child(1){bottom:78px}.vertex-object i:nth-child(2){bottom:62px;width:82px}.vertex-object i:nth-child(3){bottom:46px;width:96px}
.vertex-object b{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);color:#86ffcc;font-size:18px}
.vertex-bottom{position:absolute;left:24px;right:24px;bottom:24px;display:flex;justify-content:space-between;align-items:end}
.vertex-bottom small{font-size:9px;letter-spacing:.1em}
.vertex-bottom span{font-size:28px;font-weight:800;letter-spacing:-.04em}

.graphic-section{padding-top:130px;padding-bottom:140px}
.archive-note{
  display:grid;grid-template-columns:180px 1fr;gap:40px;
  padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:38px
}
.archive-note span{font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--accent-2)}
.archive-note p{margin:0;max-width:780px;color:var(--muted);line-height:1.5}
.graphic-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.graphic-card{min-width:0}
.archive-media{
  height:520px;border-radius:22px;position:relative;overflow:hidden;background:#111
}
.archive-media img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:2}
.archive-fallback{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:24px;color:white
}
.archive-fallback span{font-size:10px;letter-spacing:.1em}
.archive-fallback strong{font-size:54px;line-height:.9;letter-spacing:-.06em}
.archive-media-1{background:linear-gradient(145deg,#131313,#583e2c)}
.archive-media-2{background:radial-gradient(circle at 66% 28%,#e45e41 0 9%,transparent 10%),linear-gradient(140deg,#1a1a1a,#45413b)}
.archive-media-3{background:linear-gradient(135deg,#20182d,#6e5489)}
.archive-media-4{background:linear-gradient(155deg,#223943,#b8a67b)}
.graphic-caption{display:flex;justify-content:space-between;gap:20px;padding:15px 4px 30px;border-bottom:1px solid var(--line)}
.graphic-caption span{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.graphic-caption strong{font-size:14px}

.about-layout{
  display:grid;grid-template-columns:minmax(310px,.72fr) 1.28fr;gap:70px;
  border-top:1px solid var(--line);padding-top:28px
}
.portrait-wrap{
  position:relative;height:min(720px,74vw);min-height:520px;border-radius:26px;overflow:hidden;background:#161616
}
.portrait-wrap img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:2;filter:grayscale(100%) contrast(1.05)}
.portrait-fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:white;
  background:
    radial-gradient(circle at 60% 30%,rgba(214,255,63,.18),transparent 23%),
    linear-gradient(145deg,#1d1d1d,#0b0b0b)
}
.portrait-fallback span{font-size:clamp(120px,20vw,260px);font-weight:900;letter-spacing:-.1em;opacity:.12}
.portrait-fallback small{position:absolute;left:24px;top:24px;font-size:9px;letter-spacing:.12em;color:#aaa}
.portrait-label{
  position:absolute;z-index:3;left:18px;right:18px;bottom:18px;display:flex;justify-content:space-between;
  padding:12px 14px;border-radius:999px;background:rgba(17,17,17,.72);backdrop-filter:blur(12px);
  color:white;font-size:9px;letter-spacing:.09em
}
.about-layout .about-copy h2{
  font-size:clamp(46px,5.3vw,86px);line-height:.93;letter-spacing:-.06em;margin:24px 0 60px
}
.about-layout .about-columns{grid-template-columns:1fr 1fr}

@media (max-width:980px){
  .concept-grid,.graphic-grid,.about-layout{grid-template-columns:1fr}
  .portrait-wrap{height:680px}
}
@media (max-width:780px){
  .kern-dashboard{grid-template-columns:1fr 1fr}
  .metric-wide{grid-column:1/3}
  .concept-visual{height:470px}
  .archive-note{grid-template-columns:1fr;gap:8px}
  .archive-media{height:430px}
  .about-layout .about-columns{grid-template-columns:1fr}
  .portrait-wrap{height:560px;min-height:0}
  .portrait-label{flex-direction:column;gap:5px;border-radius:16px}
}


/* =========================================================
   V3 INTEGRATED — WEB / UI DEVICE PLAYER
   Uses user-prepared desktop and mobile artwork directly.
   ========================================================= */

.digital-showcase-section{
  padding-top:140px;
  padding-bottom:140px;
}

.device-player{
  border-top:1px solid var(--line);
  padding-top:30px;
}

.device-stage{
  display:grid;
  grid-template-columns:minmax(0,1fr) 250px;
  gap:56px;
  align-items:end;
  padding:26px 0 54px;
}

.device-label{
  margin:0 0 14px;
  color:var(--muted);
  font-size:9px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}

/* Desktop device */
.portfolio-laptop{
  position:relative;
  width:100%;
}

.portfolio-laptop-lid{
  position:relative;
  padding:11px 11px 14px;
  border-radius:20px 20px 10px 10px;
  background:linear-gradient(145deg,#2b2b2b,#090909 55%,#242424);
  box-shadow:
    0 24px 65px rgba(0,0,0,.21),
    inset 0 0 0 1px rgba(255,255,255,.14);
}

.portfolio-camera{
  position:absolute;
  z-index:5;
  top:4px;
  left:50%;
  width:5px;
  height:5px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#162432;
  box-shadow:0 0 0 1px #050505;
}

.portfolio-laptop-screen{
  position:relative;
  aspect-ratio:930 / 702;
  overflow:hidden;
  padding:2px;
  border-radius:7px;
  background:#080808;
}

.portfolio-laptop-screen .portfolio-screen-stack{
  position:absolute;
  inset:2px;
  overflow:hidden;
  border-radius:4px;
  background:#fff;
}

.portfolio-screen-stack{
  background:#fff;
}

.portfolio-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  opacity:0;
  transition:opacity .7s cubic-bezier(.2,.75,.25,1);
}

.portfolio-slide.active{
  opacity:1;
}

.portfolio-screen-glare,
.portfolio-phone-glare{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(
    118deg,
    rgba(255,255,255,.075),
    transparent 23% 76%,
    rgba(255,255,255,.02)
  );
  mix-blend-mode:screen;
}

.portfolio-laptop-base{
  position:relative;
  left:-3%;
  width:106%;
  height:22px;
  border-radius:2px 2px 24px 24px;
  background:linear-gradient(
    #aaa,
    #5e5e5e 45%,
    #232323 54%,
    #878787 74%,
    #595959
  );
  box-shadow:0 15px 24px rgba(0,0,0,.18);
}

.portfolio-laptop-base:after{
  content:"";
  position:absolute;
  left:9%;
  right:9%;
  bottom:-7px;
  height:7px;
  border-radius:0 0 90% 90%;
  background:#3c3c3c;
}

.portfolio-laptop-notch{
  position:absolute;
  top:0;
  left:50%;
  width:17%;
  height:6px;
  transform:translateX(-50%);
  border-radius:0 0 8px 8px;
  background:#777;
}

/* Mobile device */
.phone-block{
  min-width:0;
}

.portfolio-phone{
  width:min(100%,200px);
  margin-left:auto;
}

.portfolio-phone-shell{
  position:relative;
  padding:7px;
  overflow:hidden;
  border-radius:38px;
  background:#080808;
  box-shadow:
    0 18px 28px rgba(0,0,0,.21),
    inset 0 0 0 1px rgba(255,255,255,.15);
}

.portfolio-phone-screen{
  position:relative;
  aspect-ratio:268 / 599;
  overflow:hidden;
  padding:2px;
  border-radius:30px;
  background:#080808;
}

.portfolio-phone-screen .portfolio-screen-stack{
  position:absolute;
  inset:2px;
  overflow:hidden;
  border-radius:inherit;
  background:#fff;
}

.portfolio-phone-button{
  position:absolute;
  right:-3px;
  width:3px;
  border-radius:2px;
  background:#2b2b2b;
}

.portfolio-phone-button.button-one{
  top:28%;
  height:44px;
}

.portfolio-phone-button.button-two{
  top:42%;
  height:68px;
}

/* Controls */
.device-player-footer{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:36px;
  padding-top:22px;
  border-top:1px solid var(--line);
}

.device-project-meta{
  display:grid;
  grid-template-columns:72px auto;
  gap:18px;
  align-items:start;
}

.device-counter{
  margin-top:5px;
  color:var(--muted);
  font-size:10px;
  letter-spacing:.1em;
}

.device-project-meta h3{
  margin:0 0 5px;
  font-size:clamp(26px,2.6vw,42px);
  line-height:1;
  letter-spacing:-.045em;
}

.device-project-meta p{
  margin:0;
  color:var(--muted);
  font-size:10px;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.device-controls{
  display:flex;
  align-items:center;
  gap:16px;
}

.device-arrow{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:transparent;
  color:var(--ink);
  font-size:16px;
  cursor:pointer;
  transition:.2s ease;
}

.device-arrow:hover{
  background:var(--ink);
  color:white;
}

.device-dots{
  display:flex;
  align-items:center;
  gap:8px;
}

.device-dot{
  width:7px;
  height:7px;
  padding:0;
  border:0;
  border-radius:999px;
  background:#aaa69e;
  cursor:pointer;
  transition:.25s ease;
}

.device-dot.active{
  width:27px;
  background:var(--ink);
}

.device-progress{
  height:2px;
  margin-top:18px;
  overflow:hidden;
  background:rgba(17,17,17,.1);
}

.device-progress span{
  display:block;
  width:0;
  height:100%;
  background:var(--ink);
}

.device-progress span.run{
  animation:deviceProgress 5.6s linear forwards;
}

@keyframes deviceProgress{
  from{width:0}
  to{width:100%}
}

/* Problem-first positioning */
.problem-first{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:40px;
  margin-top:80px;
  padding:28px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.problem-first-label{
  margin:2px 0 0;
  color:var(--accent-2);
  font-size:10px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.problem-first-copy{
  max-width:940px;
  margin:0;
  font-size:clamp(23px,2.5vw,38px);
  line-height:1.16;
  letter-spacing:-.035em;
}

.concept-disclaimer{
  margin:15px 0 0;
  color:#8c887f;
  font-size:9px;
  letter-spacing:.11em;
  text-transform:uppercase;
}

@media (max-width:980px){
  .device-stage{
    grid-template-columns:1fr;
    gap:36px;
    align-items:start;
  }

  .phone-block{
    max-width:250px;
  }

  .portfolio-phone{
    margin-left:0;
  }
}

@media (max-width:780px){
  .digital-showcase-section{
    padding-top:100px;
    padding-bottom:100px;
  }

  .device-stage{
    padding-bottom:40px;
  }

  .portfolio-laptop-lid{
    padding:7px 7px 9px;
    border-radius:13px 13px 7px 7px;
  }

  .portfolio-laptop-base{
    height:14px;
  }

  .phone-block{
    max-width:180px;
  }

  .portfolio-phone-shell{
    padding:5px;
    border-radius:29px;
  }

  .portfolio-phone-screen{
    border-radius:22px;
  }

  .device-player-footer{
    align-items:center;
  }

  .device-project-meta{
    grid-template-columns:1fr;
    gap:7px;
  }

  .device-counter{
    margin:0;
  }

  .device-project-meta h3{
    font-size:25px;
  }

  .device-dots{
    display:none;
  }

  .device-controls{
    gap:8px;
  }

  .device-arrow{
    width:39px;
    height:39px;
  }

  .problem-first{
    grid-template-columns:1fr;
    gap:10px;
    margin-top:60px;
  }
}


/* =========================================================
   V4 — Saga Egmont, AI integrations, portraits, contact
   ========================================================= */

/* Hero now has five disciplines */
.discipline-list li strong{
  line-height:1.05;
}

/* ---------- Saga Egmont ---------- */
.saga-section{
  padding-top:130px;
  padding-bottom:145px;
  overflow:hidden;
}

.saga-section .section-intro strong{
  color:var(--ink);
}

.saga-intro{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:70px;
  padding:30px 0 52px;
  border-top:1px solid var(--line);
}

.saga-kicker{
  color:var(--accent-2);
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
}

.saga-company h3{
  margin:10px 0 8px;
  font-size:clamp(38px,4.2vw,68px);
  line-height:.95;
  letter-spacing:-.055em;
}

.saga-company p,
.saga-description{
  color:var(--muted);
  line-height:1.55;
}

.saga-company p{
  margin:0;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.saga-description{
  max-width:700px;
  margin:3px 0 0;
  font-size:17px;
}

.cover-marquee{
  width:100vw;
  margin-left:calc(50% - 50vw);
  overflow:hidden;
  padding:10px 0 30px;
}

.cover-marquee-track{
  display:flex;
  align-items:center;
  gap:18px;
  width:max-content;
  padding-left:var(--pad);
  animation:sagaCovers 62s linear infinite;
  will-change:transform;
}

.cover-marquee:hover .cover-marquee-track{
  animation-play-state:paused;
}

.saga-cover{
  flex:0 0 auto;
  height:clamp(290px,29vw,455px);
  margin:0;
  overflow:hidden;
  border-radius:8px;
  background:#ddd8ce;
  box-shadow:0 14px 30px rgba(17,17,17,.12);
  transition:transform .25s ease;
}

.saga-cover:hover{
  transform:translateY(-7px);
}

.saga-cover img{
  display:block;
  width:auto;
  height:100%;
  object-fit:contain;
}

@keyframes sagaCovers{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 9px))}
}

.saga-foot{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:40px;
  padding:22px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.saga-foot span{
  color:var(--accent-2);
  font-size:9px;
  font-weight:800;
  letter-spacing:.11em;
}

.saga-foot p{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

/* ---------- AI ---------- */
.ai-section{
  padding-top:140px;
  padding-bottom:140px;
}

.ai-shell{
  padding:clamp(28px,5vw,72px);
  border-radius:var(--radius);
  background:#c8d5ff;
  color:#10192d;
  overflow:hidden;
}

.ai-heading{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:65px;
  align-items:end;
}

.ai-heading h2{
  margin:24px 0 0;
  font-size:clamp(50px,6vw,94px);
  line-height:.9;
  letter-spacing:-.065em;
}

.ai-heading h2 em{
  font-family:Georgia, "Times New Roman", serif;
  font-weight:400;
}

.ai-heading > p{
  margin:0 0 8px;
  max-width:500px;
  font-size:17px;
  line-height:1.55;
}

.ai-flow{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  gap:12px;
  align-items:stretch;
  margin-top:72px;
}

.ai-flow > i{
  align-self:center;
  font-style:normal;
  font-size:22px;
  opacity:.45;
}

.ai-node{
  min-height:170px;
  padding:18px;
  border:1px solid rgba(16,25,45,.18);
  border-radius:18px;
  background:rgba(255,255,255,.34);
  backdrop-filter:blur(8px);
}

.ai-node span{
  font-size:9px;
  letter-spacing:.11em;
  opacity:.55;
}

.ai-node strong{
  display:block;
  margin:48px 0 8px;
  font-size:21px;
  letter-spacing:-.035em;
}

.ai-node small{
  display:block;
  max-width:150px;
  line-height:1.4;
  opacity:.65;
}

.ai-capabilities{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:14px;
}

.ai-capabilities article{
  min-height:220px;
  padding:20px;
  border-radius:18px;
  background:#10192d;
  color:#f4f2eb;
}

.ai-capabilities article > span{
  color:#93ffcf;
  font-size:9px;
  font-weight:800;
  letter-spacing:.1em;
}

.ai-capabilities h3{
  margin:55px 0 10px;
  font-size:23px;
  line-height:1.02;
  letter-spacing:-.04em;
}

.ai-capabilities p{
  margin:0;
  color:#bfc5d1;
  font-size:13px;
  line-height:1.5;
}

.ai-security-note{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:40px;
  margin-top:14px;
  padding:18px 20px;
  border-radius:14px;
  background:rgba(255,255,255,.48);
}

.ai-security-note span{
  font-size:9px;
  font-weight:800;
  letter-spacing:.11em;
}

.ai-security-note p{
  margin:0;
  font-size:13px;
}

/* ---------- About visual ---------- */
.about-layout-new{
  grid-template-columns:minmax(360px,.82fr) 1.18fr;
  align-items:start;
}

.about-visual{
  position:relative;
  min-height:760px;
}

.about-photo-stage{
  position:relative;
  height:720px;
  overflow:hidden;
  border-radius:28px;
  background:
    radial-gradient(circle at 72% 18%,rgba(214,255,63,.25),transparent 22%),
    #151515;
}

.about-fullbody{
  position:absolute;
  left:50%;
  bottom:-2%;
  width:auto;
  height:96%;
  transform:translateX(-52%);
  object-fit:contain;
  filter:saturate(.85) contrast(1.02);
}

.about-photo-label{
  position:absolute;
  z-index:3;
  left:18px;
  right:18px;
  bottom:18px;
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:12px 14px;
  border-radius:999px;
  background:rgba(15,15,15,.78);
  color:white;
  backdrop-filter:blur(12px);
  font-size:8px;
  letter-spacing:.1em;
}

.sketch-card{
  position:absolute;
  z-index:5;
  right:-30px;
  bottom:-18px;
  width:46%;
  margin:0;
  padding:8px 8px 28px;
  transform:rotate(3deg);
  background:#f7f4ea;
  box-shadow:0 20px 50px rgba(0,0,0,.22);
}

.sketch-card img{
  display:block;
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
}

.sketch-card figcaption{
  position:absolute;
  left:12px;
  bottom:8px;
  color:#58544e;
  font-size:8px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.about-signature{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin-top:55px;
  padding-top:20px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
}

.about-signature i{
  color:var(--accent-2);
  font-style:normal;
}

/* ---------- Contact ---------- */
.contact-links{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:55px;
}

.contact-link{
  display:grid;
  grid-template-columns:50px 1fr auto;
  gap:16px;
  align-items:center;
  padding:18px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:18px;
  background:rgba(255,255,255,.08);
  transition:transform .2s ease, background .2s ease;
}

.contact-link:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.14);
}

.contact-icon{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background:#fff;
  color:#111;
  font-size:19px;
}

.whatsapp-icon{
  background:#fff;
  color:#25D366;
}

.whatsapp-icon svg{
  width:27px;
  height:27px;
}

.contact-link small{
  display:block;
  margin-bottom:3px;
  opacity:.62;
  font-size:8px;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.contact-link strong{
  font-size:clamp(14px,1.45vw,20px);
  letter-spacing:-.025em;
}

.contact-link b{
  font-size:18px;
  font-weight:400;
}

.contact-bottom-new{
  justify-content:flex-end;
}

.contact-bottom-new p{
  max-width:380px;
}

/* ---------- Responsive ---------- */
@media (max-width:1050px){
  .ai-heading{
    grid-template-columns:1fr;
    gap:25px;
  }

  .ai-flow{
    grid-template-columns:1fr 1fr;
  }

  .ai-flow > i{
    display:none;
  }

  .ai-capabilities{
    grid-template-columns:1fr 1fr;
  }

  .about-layout-new{
    grid-template-columns:1fr;
  }

  .about-visual{
    width:min(650px,100%);
  }
}

@media (max-width:780px){
  .saga-intro,
  .saga-foot,
  .ai-security-note{
    grid-template-columns:1fr;
    gap:12px;
  }

  .saga-cover{
    height:310px;
  }

  .ai-section{
    padding-top:100px;
    padding-bottom:100px;
  }

  .ai-flow,
  .ai-capabilities{
    grid-template-columns:1fr;
  }

  .ai-node{
    min-height:145px;
  }

  .ai-node strong{
    margin-top:32px;
  }

  .about-visual{
    min-height:620px;
  }

  .about-photo-stage{
    height:580px;
  }

  .sketch-card{
    right:8px;
    bottom:-12px;
    width:43%;
  }

  .about-photo-label{
    flex-direction:column;
    border-radius:15px;
  }

  .contact-links{
    grid-template-columns:1fr;
  }
}

@media (prefers-reduced-motion:reduce){
  .cover-marquee-track{
    animation-play-state:paused;
  }
}


/* =========================================================
   V5 — personal intro + Le Muse collaboration
   ========================================================= */

/* ---------- Transparent personal intro ---------- */
.digital-personal-intro{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,.42fr);
  gap:40px;
  align-items:end;
  min-height:670px;
  margin-bottom:34px;
  border-bottom:1px solid var(--line);
}

.digital-intro-copy{
  align-self:center;
  padding:80px 0 90px;
  position:relative;
  z-index:2;
}

.digital-intro-copy h2{
  max-width:900px;
  margin:0;
  font-size:clamp(54px,6.6vw,104px);
  line-height:.88;
  letter-spacing:-.065em;
}

.digital-intro-copy .section-intro{
  max-width:710px;
  margin-top:32px;
  font-size:18px;
}

.digital-intro-signature{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:42px;
  padding-top:18px;
  border-top:1px solid var(--line);
  max-width:620px;
}

.digital-intro-signature strong{
  font-size:13px;
}

.digital-intro-signature span{
  color:var(--muted);
  font-size:9px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.digital-person{
  position:relative;
  align-self:stretch;
  min-height:650px;
}

.digital-person img{
  position:absolute;
  right:0;
  bottom:0;
  width:auto;
  height:100%;
  max-width:100%;
  object-fit:contain;
  object-position:right bottom;
  filter:drop-shadow(0 28px 30px rgba(17,17,17,.12));
}

.digital-person-index{
  position:absolute;
  z-index:2;
  right:-2px;
  top:42px;
  color:var(--muted);
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
  writing-mode:vertical-rl;
  text-orientation:mixed;
}

.digital-work-intro{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:40px;
  padding:23px 0 34px;
}

.digital-work-intro span{
  color:var(--accent-2);
  font-size:9px;
  font-weight:800;
  letter-spacing:.11em;
}

.digital-work-intro p{
  max-width:770px;
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}

/* ---------- Long-term collaborations / Le Muse ---------- */
.collaboration-divider{
  margin-top:110px;
  padding:20px 0;
  border-top:1px solid var(--line);
}

.collaboration-divider span{
  color:var(--accent-2);
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
}

.muse-heading{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:70px;
  align-items:end;
  padding:20px 0 58px;
}

.muse-heading h3{
  margin:12px 0 0;
  font-size:clamp(46px,5.5vw,88px);
  line-height:.9;
  letter-spacing:-.06em;
}

.muse-heading > p{
  max-width:720px;
  margin:0 0 6px;
  color:var(--muted);
  font-size:17px;
  line-height:1.55;
}

.muse-stream-group{
  margin:0 0 58px;
}

.muse-stream-heading{
  display:grid;
  grid-template-columns:48px 1fr 1fr;
  gap:16px;
  align-items:end;
  max-width:var(--max);
  margin:0 auto 16px;
  padding:0 var(--pad);
}

.muse-stream-heading span{
  color:var(--accent-2);
  font-size:9px;
  font-weight:800;
}

.muse-stream-heading strong{
  font-size:18px;
  letter-spacing:-.025em;
}

.muse-stream-heading small{
  justify-self:end;
  color:var(--muted);
  font-size:9px;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.muse-marquee{
  width:100vw;
  margin-left:calc(50% - 50vw);
  overflow:hidden;
}

.muse-track{
  display:flex;
  width:max-content;
  align-items:center;
  gap:18px;
  will-change:transform;
}

.muse-track-left{
  animation:museLeft 44s linear infinite;
}

.muse-track-right{
  animation:museRight 52s linear infinite;
}

.muse-track-slow{
  animation:museLeft 68s linear infinite;
}

.muse-track:hover{
  animation-play-state:paused;
}

.muse-item{
  flex:0 0 auto;
  margin:0;
  overflow:hidden;
  border-radius:10px;
  background:#ebe7df;
  box-shadow:0 14px 28px rgba(17,17,17,.10);
}

.muse-item img{
  display:block;
  width:auto;
  height:100%;
  object-fit:contain;
}

.muse-marquee-programmes .muse-item{
  height:270px;
}

.muse-marquee-publications .muse-item{
  height:320px;
}

.muse-marquee-campaigns .muse-item{
  height:380px;
}

@keyframes museLeft{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 9px))}
}

@keyframes museRight{
  from{transform:translateX(calc(-50% - 9px))}
  to{transform:translateX(0)}
}

.muse-foot{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:40px;
  margin-top:28px;
  padding:22px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.muse-foot span{
  color:var(--accent-2);
  font-size:9px;
  font-weight:800;
  letter-spacing:.11em;
}

.muse-foot p{
  max-width:760px;
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

/* ---------- About: sketch only ---------- */
.about-layout-sketch{
  display:grid;
  grid-template-columns:minmax(300px,.68fr) 1.32fr;
  gap:74px;
  align-items:start;
  border-top:1px solid var(--line);
  padding-top:28px;
}

.about-sketch-visual{
  position:relative;
}

.about-sketch-main{
  position:relative;
  margin:0;
  padding:12px 12px 48px;
  transform:rotate(-2deg);
  background:#f8f4e7;
  box-shadow:0 24px 55px rgba(17,17,17,.14);
}

.about-sketch-main img{
  display:block;
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
}

.about-sketch-main figcaption{
  position:absolute;
  left:16px;
  right:16px;
  bottom:13px;
  display:flex;
  justify-content:space-between;
  color:#555149;
  font-size:8px;
  font-weight:800;
  letter-spacing:.1em;
}

.about-layout-sketch .about-copy h2{
  margin:24px 0 60px;
  font-size:clamp(46px,5.3vw,86px);
  line-height:.93;
  letter-spacing:-.06em;
}

/* ---------- Responsive ---------- */
@media (max-width:1050px){
  .digital-personal-intro{
    grid-template-columns:1fr 320px;
    min-height:610px;
  }

  .digital-person{
    min-height:590px;
  }

  .muse-heading{
    grid-template-columns:1fr;
    gap:25px;
  }

  .about-layout-sketch{
    grid-template-columns:minmax(280px,.75fr) 1.25fr;
    gap:45px;
  }
}

@media (max-width:780px){
  .digital-personal-intro{
    grid-template-columns:1fr;
    min-height:auto;
    overflow:hidden;
  }

  .digital-intro-copy{
    padding:60px 0 10px;
  }

  .digital-person{
    min-height:500px;
    width:100%;
  }

  .digital-person img{
    right:50%;
    height:490px;
    transform:translateX(50%);
  }

  .digital-person-index{
    right:4px;
    top:30px;
  }

  .digital-work-intro,
  .muse-foot{
    grid-template-columns:1fr;
    gap:10px;
  }

  .muse-stream-heading{
    grid-template-columns:35px 1fr;
  }

  .muse-stream-heading small{
    grid-column:2;
    justify-self:start;
  }

  .muse-marquee-programmes .muse-item{
    height:205px;
  }

  .muse-marquee-publications .muse-item{
    height:245px;
  }

  .muse-marquee-campaigns .muse-item{
    height:290px;
  }

  .about-layout-sketch{
    grid-template-columns:1fr;
  }

  .about-sketch-visual{
    width:min(520px,92%);
    margin:0 auto;
  }
}

@media (prefers-reduced-motion:reduce){
  .muse-track{
    animation-play-state:paused;
  }
}


/* =========================================================
   V6 — opening portrait + expertise beside Different needs
   ========================================================= */

.hero-grid{
  grid-template-columns:minmax(0,1fr) minmax(280px,390px);
  align-items:end;
}

.hero-person{
  position:relative;
  align-self:stretch;
  min-height:620px;
  overflow:visible;
}

.hero-person img{
  position:absolute;
  right:-12px;
  bottom:-1px;
  width:auto;
  height:100%;
  max-width:100%;
  object-fit:contain;
  object-position:right bottom;
  filter:drop-shadow(0 30px 32px rgba(17,17,17,.13));
}

.hero-person-label{
  position:absolute;
  z-index:3;
  right:2px;
  top:4px;
  color:var(--muted);
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
  writing-mode:vertical-rl;
  text-orientation:mixed;
}

.digital-personal-intro{
  grid-template-columns:minmax(0,1fr) minmax(290px,360px);
  align-items:stretch;
  min-height:650px;
}

.digital-expertise-panel{
  align-self:stretch;
  min-height:560px;
  margin:34px 0;
}

.digital-expertise-panel .discipline-list{
  margin-top:36px;
}

@media (max-width:1100px){
  .hero-grid{
    grid-template-columns:minmax(0,1fr) 310px;
  }

  .hero-person{
    min-height:560px;
  }

  .digital-personal-intro{
    grid-template-columns:1fr 320px;
  }
}

@media (max-width:780px){
  .hero-grid{
    grid-template-columns:1fr;
  }

  .hero-person{
    min-height:480px;
    margin-top:15px;
  }

  .hero-person img{
    right:50%;
    height:470px;
    transform:translateX(50%);
  }

  .hero-person-label{
    right:4px;
    top:30px;
  }

  .digital-personal-intro{
    grid-template-columns:1fr;
  }

  .digital-expertise-panel{
    min-height:auto;
    margin:18px 0 38px;
  }
}


/* =========================================================
   V7 — unified orange accent + refined Design / AI / SEO
   ========================================================= */

:root{
  --accent:#f05b36;
}

.display .outline{
  color:var(--accent-2);
  -webkit-text-stroke:0;
}

.panel-note{
  background:var(--accent-2);
  color:white;
}

.panel-note .tiny-label{
  color:rgba(255,255,255,.72);
}

.ai-capabilities article > span{
  color:var(--accent-2);
}

/* tighten Web -> Design transition */
.digital-showcase-section{
  padding-bottom:48px;
}

.saga-section{
  padding-top:72px;
}

.concept-disclaimer{
  margin-bottom:0;
}

/* Graphic heading visual */
.graphic-heading{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(310px,.55fr);
  gap:70px;
  align-items:center;
  margin-bottom:78px;
}

.graphic-heading-copy h2{
  margin:20px 0 0;
  font-size:clamp(46px,6vw,96px);
  line-height:.92;
  letter-spacing:-.06em;
  max-width:850px;
}

.graphic-heading-copy .section-intro{
  max-width:760px;
}

.graphic-heading-visual{
  position:relative;
  min-height:430px;
}

.mini-cover{
  position:absolute;
  width:38%;
  overflow:hidden;
  border-radius:8px;
  background:#ddd;
  box-shadow:0 20px 44px rgba(17,17,17,.18);
}

.mini-cover img{
  display:block;
  width:100%;
  height:auto;
}

.mini-cover-a{
  top:20px;
  left:3%;
  transform:rotate(-8deg);
}
.mini-cover-b{
  top:0;
  left:31%;
  z-index:2;
  transform:rotate(2deg);
}
.mini-cover-c{
  top:30px;
  right:2%;
  transform:rotate(8deg);
}

.graphic-heading-card{
  position:absolute;
  z-index:5;
  left:12%;
  right:5%;
  bottom:4px;
  padding:22px;
  border-radius:18px;
  background:#111;
  color:#f5f2ea;
  box-shadow:0 20px 48px rgba(17,17,17,.22);
}

.graphic-heading-card span{
  color:var(--accent-2);
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
}

.graphic-heading-card strong{
  display:block;
  margin:30px 0 20px;
  font-size:clamp(25px,2.7vw,40px);
  line-height:.92;
  letter-spacing:-.045em;
}

.graphic-heading-card small{
  color:#aaa;
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* AI workflow icons */
.ai-node{
  position:relative;
}

.ai-node-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

.ai-node-top > span{
  font-size:9px;
  letter-spacing:.11em;
  opacity:.55;
}

.ai-node-icon{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:14px;
  background:#10192d;
  color:#fff;
}

.ai-node-icon svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.ai-node strong{
  margin-top:34px;
}

/* Purple SEO */
.seo-section-v2{
  padding-top:20px;
  padding-bottom:140px;
}

.seo-card-v2{
  display:block;
  padding:clamp(28px,5vw,72px);
  border-radius:var(--radius);
  background:
    radial-gradient(circle at 87% 12%,rgba(255,255,255,.16),transparent 23%),
    linear-gradient(135deg,#6f52d9,#4f35b3 55%,#392483);
  color:white;
}

.seo-v2-top{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:70px;
  align-items:end;
}

.seo-v2-copy h2{
  margin:24px 0 28px;
  font-size:clamp(52px,6vw,94px);
  line-height:.88;
  letter-spacing:-.065em;
}

.seo-v2-copy h2 em{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  color:#ded6ff;
}

.seo-v2-copy > p:last-child{
  max-width:590px;
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:16px;
  line-height:1.58;
}

.search-ecosystem{
  padding:22px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:22px;
  background:rgba(20,10,62,.32);
  backdrop-filter:blur(10px);
}

.ecosystem-label{
  display:block;
  margin-bottom:18px;
  color:rgba(255,255,255,.62);
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
}

.brand-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.brand-chip{
  display:flex;
  align-items:center;
  gap:7px;
  padding:10px 12px;
  border-radius:999px;
  background:white;
  color:#19152a;
  font-size:12px;
  font-weight:700;
  box-shadow:0 6px 16px rgba(22,10,60,.14);
}

.brand-google b{
  display:flex;
  letter-spacing:-.06em;
  font-size:13px;
}

.brand-google b i{font-style:normal}
.brand-google b i:nth-child(1){color:#4285F4}
.brand-google b i:nth-child(2){color:#EA4335}
.brand-google b i:nth-child(3){color:#FBBC05}
.brand-google b i:nth-child(4){color:#4285F4}
.brand-google b i:nth-child(5){color:#34A853}
.brand-google b i:nth-child(6){color:#EA4335}

.bing-symbol{
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  border-radius:6px;
  background:linear-gradient(135deg,#008373,#21b7a8);
  color:white;
  font-family:Georgia,serif;
  font-size:17px;
}

.brand-chatgpt .brand-symbol{
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#111;
  color:white;
  font-size:13px;
}

.gemini-symbol{color:#7a62ff;font-size:18px}
.claude-symbol{color:#d97757;font-size:18px}

.ranking-pulse{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.15);
}

.ranking-pulse > span{
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
  color:rgba(255,255,255,.55);
}

.rank-bars{
  display:flex;
  align-items:end;
  gap:6px;
  height:90px;
  margin:16px 0 12px;
}

.rank-bars i{
  flex:1;
  height:var(--h);
  border-radius:5px 5px 2px 2px;
  background:linear-gradient(#e7e0ff,#a998ff);
}

.ranking-pulse strong{
  font-size:14px;
  letter-spacing:-.02em;
}

.seo-pillars{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:48px;
}

.seo-pillars article{
  min-height:225px;
  padding:20px;
  border-radius:18px;
  background:rgba(20,10,62,.5);
  border:1px solid rgba(255,255,255,.12);
}

.seo-pillars span{
  color:#cbbfff;
  font-size:8px;
  font-weight:800;
  letter-spacing:.1em;
}

.seo-pillars h3{
  margin:62px 0 10px;
  font-size:23px;
  line-height:1;
  letter-spacing:-.04em;
}

.seo-pillars p{
  margin:0;
  color:rgba(255,255,255,.7);
  font-size:13px;
  line-height:1.48;
}

.seo-ai-note{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:36px;
  margin-top:10px;
  padding:18px 20px;
  border-radius:14px;
  background:rgba(255,255,255,.12);
}

.seo-ai-note span{
  color:#ded6ff;
  font-size:8px;
  font-weight:800;
  letter-spacing:.11em;
}

.seo-ai-note p{
  max-width:820px;
  margin:0;
  color:rgba(255,255,255,.8);
  font-size:13px;
  line-height:1.5;
}

@media (max-width:1050px){
  .graphic-heading,
  .seo-v2-top{
    grid-template-columns:1fr;
  }
  .graphic-heading-visual{
    width:min(580px,100%);
  }
  .seo-pillars{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:780px){
  .digital-showcase-section{padding-bottom:36px}
  .saga-section{padding-top:58px}

  .graphic-heading{
    gap:36px;
    margin-bottom:58px;
  }

  .graphic-heading-visual{
    min-height:365px;
  }

  .seo-section-v2{
    padding-bottom:100px;
  }

  .seo-pillars{
    grid-template-columns:1fr;
  }

  .seo-pillars article{
    min-height:170px;
  }

  .seo-pillars h3{
    margin-top:36px;
  }

  .seo-ai-note{
    grid-template-columns:1fr;
    gap:10px;
  }
}


/* =========================================================
   V8 — final refinements
   ========================================================= */

.display .ai-accent-text{
  color:#c8d5ff;
}

/* clickable discipline panel */
.clickable-discipline-list li a{
  display:flex;
  justify-content:space-between;
  gap:16px;
  color:inherit;
  text-decoration:none;
  transition:transform .18s ease, color .18s ease, opacity .18s ease;
}

.clickable-discipline-list li a:hover{
  transform:translateX(3px);
  color:var(--accent-2);
}

.clickable-discipline-list li a span,
.clickable-discipline-list li a strong{
  color:inherit;
}

/* thicker arrows in AI chain */
.ai-flow > i{
  align-self:center;
  font-style:normal;
  font-size:34px;
  line-height:1;
  font-weight:800;
  opacity:.92;
  color:#10192d;
  text-shadow:0 1px 0 rgba(255,255,255,.22);
}

/* SEO: keep purple but remove the bluish tone */
.seo-card-v2{
  background:
    radial-gradient(circle at 87% 12%,rgba(255,255,255,.13),transparent 23%),
    linear-gradient(135deg,#7a4a86,#5d2c67 55%,#341739);
}

.search-ecosystem{
  background:rgba(38,14,46,.34);
}

.seo-pillars article{
  background:rgba(40,14,50,.48);
}

/* Le Muse mockups */
.muse-marquee-mockups .muse-track{
  gap:24px;
}

.muse-item-mockup{
  background:#f3eee6;
  border-radius:14px;
  box-shadow:0 18px 34px rgba(17,17,17,.14);
}

.muse-item-mockup img{
  display:block;
  width:auto;
  height:100%;
}

.muse-marquee-mockups .muse-item{
  height:300px;
}

@media (max-width:780px){
  .muse-marquee-mockups .muse-item{
    height:220px;
  }
  .display .ai-accent-text{
    color:#b9c8ff;
  }
}


/* =========================================================
   V10 — hero identity + true seamless ticker + programmes
   ========================================================= */

/* Hero copy no longer needs the CTA layout balance */
.hero-bottom{
  grid-template-columns:1fr !important;
}

.hero-bottom p{
  max-width:690px;
}

/* Personal signature: larger and readable */
.hero-person-label{
  top:16px !important;
  right:0 !important;
  writing-mode:horizontal-tb !important;
  text-orientation:initial !important;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:7px;
  max-width:260px;
  color:var(--ink) !important;
  font-size:11px !important;
  font-weight:800;
  line-height:1.25;
  letter-spacing:.09em !important;
  text-align:right;
}

.hero-person-label em{
  color:var(--accent-2);
  font-style:normal;
  font-weight:900;
}

/* Slightly tilted red platform under the standing figure */
.hero-person::before{
  content:"";
  position:absolute;
  z-index:0;
  left:50%;
  bottom:3px;
  width:78%;
  height:54px;
  transform:translateX(-48%) rotate(-7deg);
  border-radius:50%;
  background:var(--accent-2);
  opacity:.96;
}

.hero-person img{
  z-index:2;
}

/* Truly seamless hero ticker */
.hero-marquee{
  overflow:hidden;
}

.marquee-track{
  display:flex !important;
  align-items:center;
  gap:0 !important;
  width:max-content;
  padding:0 !important;
  animation:heroMarqueeContinuous 34s linear infinite !important;
  will-change:transform;
}

.marquee-sequence{
  display:flex;
  align-items:center;
  flex:none;
  gap:24px;
  padding:14px 24px 14px 0;
  white-space:nowrap;
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
}

.marquee-sequence b{
  color:var(--accent-2);
  font-size:10px;
}

@keyframes heroMarqueeContinuous{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* Give the new wide programme spreads enough presence */
.muse-marquee-programmes .muse-item{
  height:285px;
}

@media (max-width:780px){
  .hero-person-label{
    top:12px !important;
    right:4px !important;
    max-width:210px;
    font-size:9px !important;
  }

  .hero-person::before{
    width:68%;
    height:40px;
    bottom:5px;
  }

  .muse-marquee-programmes .muse-item{
    height:215px;
  }
}


/* =========================================================
   V11 — stronger Web Design positioning + AI visual
   ========================================================= */

/* Darker blue for better contrast in the opening headline */
.display .ai-accent-text{
  color:#7183bd !important;
}

/* Personal label: vertical beside the figure, larger and more legible */
.hero-person-label{
  top:50% !important;
  right:-10px !important;
  max-width:none !important;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:10px !important;
  transform:translateY(-50%) rotate(90deg);
  transform-origin:center;
  writing-mode:horizontal-tb !important;
  text-orientation:initial !important;
  white-space:nowrap;
  color:var(--ink) !important;
  font-size:14px !important;
  font-weight:900 !important;
  letter-spacing:.105em !important;
}

.hero-person-label em{
  color:var(--accent-2) !important;
  font-style:normal;
  font-weight:900;
}

/* Main commercial message before the website mockups */
.web-design-title{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:18px;
  margin:34px 0 6px;
  padding:36px 0 28px;
  border-top:1px solid var(--line);
}

.web-design-title > span{
  font-size:clamp(68px,10.5vw,172px);
  line-height:.72;
  font-weight:900;
  letter-spacing:-.075em;
}

.web-design-title .web-design-serif{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  font-style:italic;
  color:var(--accent-2);
}

.web-design-title small{
  position:absolute;
  right:0;
  bottom:22px;
  color:var(--muted);
  font-size:9px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}

/* AI right-side graphic */
.ai-heading{
  align-items:start;
}

.ai-heading-side{
  display:flex;
  flex-direction:column;
  gap:26px;
}

.ai-heading-side > p{
  margin:0;
  max-width:500px;
  font-size:17px;
  line-height:1.55;
}

.ai-orbit-graphic{
  position:relative;
  width:min(100%,430px);
  aspect-ratio:1.35 / 1;
  margin-left:auto;
  overflow:hidden;
  border:1px solid rgba(16,25,45,.16);
  border-radius:26px;
  background:
    radial-gradient(circle at 50% 48%,rgba(255,255,255,.88),rgba(255,255,255,.16) 33%,transparent 60%),
    linear-gradient(135deg,rgba(16,25,45,.05),rgba(255,255,255,.24));
}

.ai-orbit-graphic::before,
.ai-orbit-graphic::after{
  content:"";
  position:absolute;
  width:160px;
  height:160px;
  border-radius:50%;
  filter:blur(22px);
  opacity:.45;
}

.ai-orbit-graphic::before{
  left:-34px;
  top:-38px;
  background:var(--accent-2);
}

.ai-orbit-graphic::after{
  right:-28px;
  bottom:-42px;
  background:#7b8fda;
}

.ai-orbit-ring{
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid rgba(16,25,45,.28);
  border-radius:50%;
  transform:translate(-50%,-50%);
}

.ring-one{
  width:36%;
  aspect-ratio:1;
}

.ring-two{
  width:61%;
  aspect-ratio:1;
}

.ring-three{
  width:86%;
  aspect-ratio:1;
}

.ai-core{
  position:absolute;
  z-index:5;
  left:50%;
  top:50%;
  display:grid;
  place-items:center;
  width:102px;
  height:102px;
  transform:translate(-50%,-50%);
  border-radius:28px;
  background:#10192d;
  color:white;
  box-shadow:0 18px 45px rgba(16,25,45,.23);
}

.ai-core span{
  font-size:31px;
  font-weight:900;
  letter-spacing:-.06em;
}

.ai-core small{
  margin-top:-18px;
  color:#c8d5ff;
  font-size:7px;
  font-weight:800;
  letter-spacing:.15em;
}

.ai-orbit-node{
  position:absolute;
  z-index:4;
  width:12px;
  height:12px;
  border:3px solid #10192d;
  border-radius:50%;
  background:var(--accent-2);
  box-shadow:0 0 0 6px rgba(255,255,255,.56);
}

.node-a{left:23%;top:26%}
.node-b{right:19%;top:35%}
.node-c{left:16%;bottom:24%}
.node-d{right:28%;bottom:17%}
.node-e{left:49%;top:11%}

.ai-tag{
  position:absolute;
  z-index:5;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.84);
  color:#10192d;
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
  box-shadow:0 8px 22px rgba(16,25,45,.08);
}

.tag-api{left:7%;top:11%}
.tag-llm{right:7%;top:13%}
.tag-data{left:6%;bottom:9%}
.tag-vision{right:5%;bottom:10%}

@media (max-width:1050px){
  .ai-orbit-graphic{
    margin-left:0;
  }
}

@media (max-width:780px){
  .hero-person-label{
    right:-38px !important;
    font-size:10px !important;
  }

  .web-design-title{
    flex-direction:column;
    gap:0;
  }

  .web-design-title > span{
    font-size:clamp(62px,18vw,105px);
  }

  .web-design-title small{
    position:static;
    margin-top:20px;
  }

  .ai-orbit-graphic{
    width:100%;
  }
}


/* =========================================================
   V12 — label placed beside figure without overlap
   ========================================================= */

.hero-person{
  padding-right:72px;
}

.hero-person-label{
  top:30px !important;
  bottom:34px !important;
  right:-6px !important;
  left:auto !important;
  height:auto !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:10px !important;
  writing-mode:vertical-rl !important;
  text-orientation:mixed !important;
  transform:none !important;
  white-space:normal !important;
  font-size:15px !important;
  line-height:1 !important;
  letter-spacing:.11em !important;
}

.hero-person-label em{
  display:inline-block;
  margin-top:8px;
}

.hero-person img{
  right:42px;
}

@media (max-width:780px){
  .hero-person{
    padding-right:44px;
  }

  .hero-person img{
    right:50%;
  }

  .hero-person-label{
    right:-2px !important;
    top:22px !important;
    bottom:24px !important;
    font-size:11px !important;
  }
}


/* =========================================================
   V14 — personal quote + SEO/GEO + Brand Identity
   ========================================================= */

.problem-first-quote{
  align-items:start;
}

.problem-first-quote .problem-first-copy{
  position:relative;
  max-width:980px;
  padding:12px 44px 10px 34px;
  font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  font-size:clamp(22px,2.55vw,38px);
  font-weight:400;
  line-height:1.42;
  letter-spacing:-.035em;
}

.problem-first-quote .problem-first-copy::before,
.problem-first-quote .problem-first-copy::after{
  position:absolute;
  color:var(--accent-2);
  font-family:Georgia,"Times New Roman",serif;
  font-size:72px;
  line-height:1;
  opacity:.9;
}

.problem-first-quote .problem-first-copy::before{
  content:"“";
  left:-6px;
  top:-8px;
}

.problem-first-quote .problem-first-copy::after{
  content:"”";
  right:0;
  bottom:-18px;
}

/* SEO + GEO */
.seo-pretitle{
  display:grid;
  grid-template-columns:150px 1fr auto;
  gap:28px;
  align-items:end;
  margin-bottom:24px;
  padding:0 4px 20px;
  border-bottom:1px solid var(--line);
}

.seo-pretitle > span{
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}

.seo-pretitle strong{
  font-size:clamp(64px,9vw,144px);
  line-height:.72;
  letter-spacing:-.075em;
}

.seo-pretitle strong i{
  color:var(--accent-2);
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  font-weight:400;
}

.seo-pretitle small{
  max-width:250px;
  color:var(--muted);
  font-size:9px;
  font-weight:800;
  line-height:1.45;
  letter-spacing:.1em;
  text-align:right;
  text-transform:uppercase;
}

/* Brand Identity */
.brand-identity-section{
  padding-top:125px;
  padding-bottom:135px;
}

.brand-identity-heading{
  display:grid;
  grid-template-columns:1.15fr .65fr;
  gap:70px;
  align-items:end;
  margin-bottom:46px;
}

.brand-identity-heading h2{
  margin:22px 0 0;
  max-width:940px;
  font-size:clamp(48px,6vw,94px);
  line-height:.92;
  letter-spacing:-.062em;
}

.brand-identity-heading > p{
  max-width:520px;
  margin:0 0 8px;
  color:var(--muted);
  font-size:16px;
  line-height:1.58;
}

.brand-services{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:13px;
  padding:17px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.brand-services i{
  color:var(--accent-2);
  font-style:normal;
  font-size:8px;
}

.brand-mockups{
  display:grid;
  grid-template-columns:1.08fr .96fr .82fr;
  gap:14px;
  margin-top:34px;
}

.brand-mockup{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:24px;
  background:#ebe8e1;
}

.brand-mockup-copy{
  padding:22px;
  background:var(--paper);
}

.brand-mockup-copy > span{
  color:var(--accent-2);
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
}

.brand-mockup-copy h3{
  margin:23px 0 10px;
  font-size:clamp(23px,2vw,31px);
  line-height:1;
  letter-spacing:-.045em;
}

.brand-mockup-copy p{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}

.stationery-scene{
  position:relative;
  min-height:390px;
  overflow:hidden;
  background:
    radial-gradient(circle at 80% 20%,rgba(240,91,54,.16),transparent 30%),
    #d8d4cd;
}

.stationery-sheet,
.stationery-envelope,
.stationery-card{
  position:absolute;
  background:#f9f7f1;
  box-shadow:0 18px 38px rgba(17,17,17,.14);
}

.stationery-sheet{
  left:15%;
  top:10%;
  width:52%;
  height:73%;
  padding:28px;
  transform:rotate(-5deg);
}

.stationery-logo{
  display:block;
  font-family:Georgia,"Times New Roman",serif;
  font-size:35px;
  letter-spacing:.08em;
}

.stationery-sheet small{
  display:block;
  margin-top:5px;
  color:#79746c;
  font-size:8px;
  letter-spacing:.08em;
}

.stationery-lines{
  height:105px;
  margin-top:80px;
  background:repeating-linear-gradient(to bottom,rgba(17,17,17,.14) 0 1px,transparent 1px 19px);
}

.stationery-envelope{
  right:7%;
  top:19%;
  width:42%;
  height:37%;
  transform:rotate(8deg);
}

.stationery-envelope::before{
  content:"";
  position:absolute;
  inset:0;
  clip-path:polygon(0 0,50% 58%,100% 0);
  background:#e9e5dc;
}

.stationery-envelope span{
  position:absolute;
  z-index:2;
  right:18px;
  bottom:15px;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--accent-2);
  color:white;
  font-family:Georgia,serif;
}

.stationery-card{
  right:12%;
  bottom:11%;
  z-index:5;
  width:43%;
  height:25%;
  padding:19px;
  transform:rotate(-3deg);
  background:#151515;
  color:white;
}

.stationery-card strong{
  display:block;
  font-family:Georgia,serif;
  font-size:27px;
  letter-spacing:.08em;
}

.stationery-card small{
  color:#aaa;
  font-size:8px;
}

.presentation-frame{
  min-height:390px;
  padding:18px;
  background:#232225;
}

.presentation-toolbar{
  display:flex;
  align-items:center;
  gap:6px;
  height:34px;
  padding:0 11px;
  border-radius:8px 8px 0 0;
  background:#343238;
  color:#bbb;
  font-size:8px;
}

.presentation-toolbar i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#777;
}

.presentation-toolbar span{
  margin-left:auto;
}

.presentation-slide{
  position:relative;
  min-height:320px;
  padding:31px;
  overflow:hidden;
  background:
    radial-gradient(circle at 88% 25%,rgba(240,91,54,.28),transparent 26%),
    #f4efe5;
  color:#111;
}

.presentation-slide small{
  color:var(--accent-2);
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
}

.presentation-slide strong{
  display:block;
  margin-top:72px;
  max-width:330px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:39px;
  line-height:.95;
}

.presentation-chart{
  position:absolute;
  right:24px;
  bottom:24px;
  display:flex;
  align-items:end;
  gap:7px;
  width:34%;
  height:105px;
}

.presentation-chart i{
  flex:1;
  height:var(--v);
  border-radius:4px 4px 0 0;
  background:var(--accent-2);
}

.email-device{
  min-height:390px;
  padding:16px;
  background:#1c1c1c;
  color:white;
}

.email-top{
  display:flex;
  justify-content:space-between;
  padding:12px 10px 18px;
  border-bottom:1px solid rgba(255,255,255,.14);
}

.email-top span{
  font-family:Georgia,serif;
  font-size:18px;
  letter-spacing:.09em;
}

.email-top small{
  color:#999;
  font-size:7px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.email-hero{
  padding:34px 16px 28px;
}

.email-hero small{
  color:var(--accent-2);
  font-size:7px;
  font-weight:900;
  letter-spacing:.12em;
}

.email-hero strong{
  display:block;
  margin:24px 0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:32px;
  line-height:.98;
}

.email-hero button{
  padding:11px 15px;
  border:0;
  border-radius:999px;
  background:var(--accent-2);
  color:white;
  font-size:9px;
  font-weight:800;
}

.email-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  padding:10px 16px 18px;
}

.email-cards i{
  height:68px;
  border-radius:8px;
  background:linear-gradient(145deg,rgba(255,255,255,.17),rgba(255,255,255,.04));
}

@media (max-width:1050px){
  .seo-pretitle{
    grid-template-columns:120px 1fr;
  }

  .seo-pretitle small{
    grid-column:2;
    text-align:left;
  }

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

  .brand-mockups{
    grid-template-columns:1fr 1fr;
  }

  .brand-email{
    grid-column:1 / -1;
  }
}

@media (max-width:780px){
  .problem-first-quote .problem-first-copy{
    padding:10px 24px 8px 24px;
    font-size:23px;
  }

  .seo-pretitle{
    grid-template-columns:1fr;
    gap:10px;
  }

  .seo-pretitle strong{
    font-size:72px;
  }

  .seo-pretitle small{
    grid-column:auto;
  }

  .brand-identity-section{
    padding-top:90px;
    padding-bottom:100px;
  }

  .brand-mockups{
    grid-template-columns:1fr;
  }

  .brand-email{
    grid-column:auto;
  }
}


/* =========================================================
   V15 — quote typography + AI title + brand emphasis
   ========================================================= */

/* Return quote to the site's typographic language; only italicize it. */
.problem-first-quote .problem-first-copy{
  font-family:inherit !important;
  font-style:italic;
  font-weight:400;
  letter-spacing:-.035em;
  line-height:1.34;
}

/* AI title: same family as SEO + GEO */
.ai-pretitle{
  display:grid;
  grid-template-columns:150px 1fr auto;
  gap:28px;
  align-items:end;
  margin-bottom:24px;
  padding:0 4px 20px;
  border-bottom:1px solid var(--line);
}

.ai-pretitle > span{
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}

.ai-pretitle strong{
  display:flex;
  align-items:baseline;
  gap:18px;
  flex-wrap:wrap;
  font-size:clamp(64px,8.6vw,138px);
  line-height:.72;
  letter-spacing:-.075em;
}

.ai-pretitle strong i{
  color:var(--accent-2);
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  font-weight:400;
  font-size:.58em;
  letter-spacing:-.05em;
}

.ai-pretitle small{
  max-width:250px;
  color:var(--muted);
  font-size:9px;
  font-weight:800;
  line-height:1.45;
  letter-spacing:.1em;
  text-align:right;
  text-transform:uppercase;
}

/* Brand identity emphasis */
.brand-accent-word{
  color:var(--accent-2);
}

@media (max-width:1050px){
  .ai-pretitle{
    grid-template-columns:120px 1fr;
  }

  .ai-pretitle small{
    grid-column:2;
    text-align:left;
  }
}

@media (max-width:780px){
  .ai-pretitle{
    grid-template-columns:1fr;
    gap:10px;
  }

  .ai-pretitle strong{
    font-size:68px;
    gap:10px;
  }

  .ai-pretitle small{
    grid-column:auto;
  }
}


/* =========================================================
   V16 — aligned section titles + tighter vertical rhythm
   ========================================================= */

/* Less empty space after the opening ticker */
.digital-showcase-section{
  padding-top:42px !important;
}

/* Tighten the transition before AI */
.saga-section{
  padding-bottom:38px !important;
}

.ai-section{
  padding-top:40px !important;
}

/* Tighten About -> Brand Identity */
.about-section{
  padding-bottom:38px !important;
}

.brand-identity-section{
  padding-top:42px !important;
}

/* Slightly tighter Different needs intro */
.digital-personal-intro{
  min-height:560px !important;
}

.digital-intro-copy{
  padding-top:46px !important;
  padding-bottom:50px !important;
}

/* AI and SEO titles now follow the same left alignment as WEB DESIGN */
.ai-pretitle-aligned,
.seo-pretitle-aligned{
  display:flex !important;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:24px;
  padding:34px 0 24px;
  border-top:1px solid var(--line);
  border-bottom:0 !important;
}

.ai-pretitle-aligned strong,
.seo-pretitle-aligned strong{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:14px;
  margin:0;
  font-size:clamp(68px,10.5vw,172px);
  line-height:.72;
  letter-spacing:-.075em;
}

.ai-pretitle-aligned strong > span,
.seo-pretitle-aligned strong > span{
  font-family:inherit;
  font-style:normal;
  font-weight:900;
}

.ai-pretitle-aligned strong i,
.seo-pretitle-aligned strong i{
  color:var(--accent-2);
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  font-weight:400;
}

.ai-pretitle-aligned strong i{
  font-size:.48em;
  letter-spacing:-.045em;
}

.seo-pretitle-aligned strong i{
  font-size:.74em;
}

.ai-pretitle-aligned small,
.seo-pretitle-aligned small{
  max-width:255px;
  padding-bottom:2px;
  color:var(--muted);
  font-size:9px;
  font-weight:800;
  line-height:1.45;
  letter-spacing:.1em;
  text-align:right;
  text-transform:uppercase;
}

/* Refine the three starter Brand Identity mockups */
.brand-mockups{
  gap:18px !important;
}

.brand-mockup{
  box-shadow:0 18px 42px rgba(17,17,17,.07);
  transition:transform .25s ease, box-shadow .25s ease;
}

.brand-mockup:hover{
  transform:translateY(-5px);
  box-shadow:0 26px 52px rgba(17,17,17,.11);
}

.stationery-scene,
.presentation-frame,
.email-device{
  min-height:410px !important;
}

@media (max-width:780px){
  .digital-showcase-section{ padding-top:26px !important; }
  .saga-section{ padding-bottom:26px !important; }
  .ai-section{ padding-top:30px !important; }
  .about-section{ padding-bottom:26px !important; }
  .brand-identity-section{ padding-top:30px !important; }

  .ai-pretitle-aligned,
  .seo-pretitle-aligned{
    display:block !important;
    padding-top:26px;
  }

  .ai-pretitle-aligned strong,
  .seo-pretitle-aligned strong{
    font-size:clamp(58px,17vw,94px);
    gap:8px;
  }

  .ai-pretitle-aligned small,
  .seo-pretitle-aligned small{
    display:block;
    margin-top:18px;
    text-align:left;
  }
}


/* =========================================================
   V17 — desktop mockup screen ratio test
   ========================================================= */

/* Make the laptop screen less tall and more rectangular */
.portfolio-laptop-screen{
  aspect-ratio:930 / 582 !important;
}

/* Keep desktop website mockups anchored to the top.
   When the screen becomes shorter, the bottom is what gets cropped. */
.portfolio-laptop-screen .portfolio-slide{
  top:0 !important;
  left:0 !important;
  right:0 !important;
  bottom:auto !important;
  width:100% !important;
  height:auto !important;
  min-height:100% !important;
  object-fit:cover !important;
  object-position:top center !important;
}



/* =========================================================
   V19 — real Brand Identity mockups
   ========================================================= */

.brand-mockups{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:18px !important;
}

.brand-image-window{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  overflow:hidden;
  background:#ddd8cf;
}

.brand-image-window img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .45s cubic-bezier(.2,.75,.25,1);
}

.brand-mockup:hover .brand-image-window img{
  transform:scale(1.025);
}

/* The new real images replace the old CSS mockups */
.stationery-scene,
.presentation-frame,
.email-device{
  display:none !important;
}

@media (max-width:1050px){
  .brand-mockups{
    grid-template-columns:1fr 1fr !important;
  }

  .brand-email{
    grid-column:1 / -1;
    max-width:calc(50% - 9px);
  }
}

@media (max-width:780px){
  .brand-mockups{
    grid-template-columns:1fr !important;
  }

  .brand-email{
    grid-column:auto;
    max-width:none;
  }
}


/* =========================================================
   V21 — image protection, mobile centering, uninterrupted Muse
   ========================================================= */

/* Discourage normal image saving/opening interactions */
img{
  -webkit-user-drag:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

/* Le Muse carousels never pause on mouse hover */
.muse-track:hover,
.muse-track:focus,
.muse-track:focus-within{
  animation-play-state:running !important;
}

/* Center the phone below the laptop on tablet/mobile layouts */
@media (max-width:980px){
  .phone-block{
    width:100%;
    max-width:250px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .portfolio-phone{
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .phone-block .device-label{
    text-align:center;
  }
}

@media (max-width:780px){
  .phone-block{
    max-width:180px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .portfolio-phone{
    margin-left:auto !important;
    margin-right:auto !important;
  }
}


/* =========================================================
   V23 final review: clarity, proof, mobile rhythm, credibility
   ========================================================= */

/* Concept to launch proof */
.launch-strip{
  display:grid;
  grid-template-columns:minmax(240px,.72fr) 1.6fr;
  gap:42px;
  margin:34px 0 22px;
  padding:28px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.launch-strip-intro > span{
  color:var(--accent-2);
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
}
.launch-strip-intro p{
  max-width:430px;
  margin:16px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}
.launch-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.launch-steps article{
  min-height:126px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.28);
}
.launch-steps article > span{
  display:block;
  color:var(--accent-2);
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
}
.launch-steps strong{
  display:block;
  margin:27px 0 6px;
  font-size:15px;
  line-height:1.05;
}
.launch-steps small{
  color:var(--muted);
  font-size:9px;
  line-height:1.35;
}

/* Practical AI example */
.ai-practical-example{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:26px;
  margin-top:22px;
  padding:24px;
  border:1px solid rgba(16,25,45,.16);
  border-radius:22px;
  background:rgba(255,255,255,.28);
}
.ai-example-copy > span{
  color:var(--accent-2);
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
}
.ai-example-copy h3{
  margin:24px 0 10px;
  font-size:clamp(28px,3vw,44px);
  line-height:.95;
  letter-spacing:-.045em;
}
.ai-example-copy p{
  margin:0;
  max-width:420px;
  font-size:13px;
  line-height:1.55;
}
.ai-example-ui{
  padding:14px;
  border-radius:18px;
  background:#10192d;
  color:white;
  box-shadow:0 18px 34px rgba(16,25,45,.14);
}
.ai-example-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:4px 5px 12px;
  color:#c8d5ff;
  font-size:8px;
  font-weight:800;
  letter-spacing:.11em;
}
.ai-example-top i{
  color:#85d6b4;
  font-style:normal;
}
.ai-message{
  max-width:84%;
  margin:8px 0;
  padding:11px 13px;
  border-radius:13px;
}
.ai-message small{
  display:block;
  margin-bottom:5px;
  font-size:7px;
  letter-spacing:.1em;
  opacity:.62;
  text-transform:uppercase;
}
.ai-message p{
  margin:0;
  font-size:11px;
  line-height:1.42;
}
.ai-message-user{
  margin-left:auto;
  background:rgba(255,255,255,.1);
}
.ai-message-bot{
  background:#fff;
  color:#10192d;
}
.ai-example-sources{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  padding-top:7px;
}
.ai-example-sources span{
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  color:#c8d5ff;
  font-size:6px;
  font-weight:800;
  letter-spacing:.09em;
}

/* More disciplined page rhythm */
.graphic-heading{ margin-bottom:58px !important; }
.saga-section{ padding-top:58px !important; padding-bottom:28px !important; }
.ai-section{ padding-top:28px !important; padding-bottom:96px !important; }
.seo-section-v2{ padding-bottom:96px !important; }
.about-section{ padding-top:32px !important; padding-bottom:22px !important; }
.brand-identity-section{ padding-top:28px !important; padding-bottom:96px !important; }
.contact-section{ padding-bottom:52px !important; }

/* Mobile refinement */
@media (max-width:780px){
  .hero-person{
    min-height:390px !important;
    margin-top:0 !important;
    padding-right:38px !important;
  }
  .hero-person img{
    height:380px !important;
  }
  .hero-person-label{
    font-size:9px !important;
  }

  .launch-strip{
    grid-template-columns:1fr;
    gap:18px;
    margin-top:24px;
  }
  .launch-steps{
    grid-template-columns:1fr 1fr;
  }
  .launch-steps article{
    min-height:116px;
  }

  /* Compact the AI workflow into two columns */
  .ai-flow{
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }
  .ai-flow > i{
    display:none !important;
  }
  .ai-node{
    min-height:125px !important;
    padding:15px !important;
  }
  .ai-node strong{
    margin-top:20px !important;
  }

  /* Capabilities become a horizontal swipe row instead of a long stack */
  .ai-capabilities{
    display:flex !important;
    gap:12px !important;
    overflow-x:auto;
    padding:4px 1px 12px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .ai-capabilities::-webkit-scrollbar{ display:none; }
  .ai-capabilities article{
    flex:0 0 82%;
    min-height:190px;
    scroll-snap-align:start;
  }
  .ai-practical-example{
    grid-template-columns:1fr;
    padding:18px;
  }
  .ai-example-ui{
    min-height:250px;
  }

  .ai-section{ padding-bottom:68px !important; }
  .seo-section-v2{ padding-bottom:70px !important; }
  .brand-identity-section{ padding-bottom:78px !important; }
  .contact-section{ padding-bottom:34px !important; }
}

@media (max-width:520px){
  .launch-steps{ grid-template-columns:1fr 1fr; }
  .launch-steps strong{ font-size:13px; }
  .launch-steps small{ font-size:8px; }
}


/* =========================================================
   V24 — Saga carousel never pauses on hover
   ========================================================= */

.cover-marquee-track,
.cover-marquee-track:hover,
.cover-marquee-track:focus,
.cover-marquee-track:focus-within,
.cover-marquee:hover .cover-marquee-track,
.cover-marquee:focus-within .cover-marquee-track{
  animation-play-state:running !important;
}