/* Shared visual refinement across Home, Stories, Projects, About, Explore, Contact & Booking */
@font-face{font-family:Anton;src:url('assets/anton.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}

/* 1. Header, Navigation & Focus Reset */
main:focus,main:focus-visible{outline:none}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:28px}
.site-header #site-nav{display:flex;align-items:center;justify-content:flex-end;gap:22px;flex:1;min-width:0;width:auto}
.site-header #site-nav a[aria-current=page]{color:var(--blue);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:10px}
.nav-contact,.footer-contact,.site-footer>a:last-of-type{border:1px solid #009dd5;background:rgba(0,175,240,.08);color:var(--blue);padding:8px 20px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.nav-contact:hover,.footer-contact:hover,.site-footer>a:last-of-type:hover{background:rgba(0,175,240,.18)}
#motion-toggle{position:fixed;z-index:50;right:16px;bottom:16px;min-height:32px;padding:6px 10px;background:#071923eb;color:#d6e5ee;border:1px solid #7893a3;font:600 11px/1.4 var(--font);white-space:nowrap;margin:0}

@media(max-width:1180px) and (min-width:861px){
  .site-header{gap:16px;padding-inline:var(--edge)}
  .site-header .menu-toggle{display:none}
  .site-header #site-nav{display:flex;position:static;padding:0;border:0;background:transparent;gap:14px;justify-content:flex-end;flex-wrap:nowrap}
  .site-header #site-nav a{font-size:12.5px}
  .site-header #site-nav .nav-contact{padding:7px 14px}
}
@media(max-width:860px){
  .site-header{min-height:72px;padding-block:16px;justify-content:space-between}
  .menu-toggle{display:block;min-height:38px;padding:7px 12px;background:none;color:white;border:1px solid #738e9f;font-size:13px}
  .site-header #site-nav{display:none;position:absolute;top:100%;left:0;right:0;padding:24px var(--gutter);background:var(--ink);gap:22px;justify-content:flex-start;flex-wrap:wrap;border-bottom:1px solid #45606f}
  .site-header.menu-open #site-nav{display:flex}
  .site-header #site-nav a{font-size:14px}
  .site-header #site-nav .resume-link{font-size:13px}
}

/* 2. Home Hero Slogan, Gradients & Imagery */
.home-hero{min-height:650px}
.home-hero .hero-media{object-position:72% 28%}
.home-hero .hero-content{padding-block:36px 42px}
.home-hero .hero-content>p{font-size:21px;max-width:470px;line-height:1.42}
.slogan{max-width:760px;margin:0 0 22px;line-height:1}
.slogan .line,.slogan .line:nth-child(2){display:block;margin-bottom:4px;margin-left:0;padding-left:0}
.slogan .phrase{display:block;font:700 13px/1.3 var(--font);letter-spacing:.18em;margin-bottom:4px;margin-left:0;padding-left:0;text-transform:uppercase;color:#fff}
.slogan .key{display:block;font-family:Anton,Impact,sans-serif;font-size:clamp(92px,11vw,156px);line-height:.9;letter-spacing:-.02em;text-transform:uppercase;margin-left:0;padding-left:0}
.slogan .metal{color:#e4eef6}
.slogan .business{color:#f04875;margin-left:0}
.slogan .cloud{color:#1fc2ff;margin-left:0}
.illustration-note{background:#071923cc;padding:2px 7px;border-radius:2px}

/* 3. Home Intro, Layer Intro, Layer Bands & 3-Slice Interaction */
.section.intro{padding-block:44px}
.intro .section-bar{display:none}
.intro h2{font-size:clamp(31px,3.3vw,47px)}
.intro h2::before{content:"";display:block;width:36px;height:4px;background:#94a9b7;margin-bottom:14px}
.intro-visual{margin:0;padding:0;min-height:0;background:#dce5ec;position:relative}
.intro-visual img{width:100%;height:280px;object-fit:cover}
.intro-visual figcaption{position:absolute;bottom:8px;right:10px;background:#071923c9;color:white;font-size:10px;padding:2px 6px}

.layer-intro{display:block;position:relative;border-top:1px solid var(--line);padding-block:24px 28px;padding-left:52px}
.layer-intro::before{content:"";position:absolute;left:0;top:40px;width:32px;height:4px;background:var(--raspberry)}
.layer-intro h2{margin:0 0 6px;font-size:clamp(28px,2.7vw,40px);max-width:850px}
.layer-intro p{margin:0;max-width:none;font-size:15px;color:var(--muted)}

.layer-band{--layer-accent:var(--blue);--slant:clamp(28px,3.2vw,46px);height:380px}
.layer-band.business{--layer-accent:var(--raspberry)}
.layer-band.cloud{--layer-accent:var(--blue)}
.layer-copy{padding:38px var(--edge) 96px}
.layer-copy .layer-bar{display:none}
.layer-copy h2{font-family:Anton,Impact,sans-serif;font-size:clamp(56px,5.8vw,84px);line-height:.96;letter-spacing:-.02em;margin:0 0 14px;text-transform:uppercase}
.layer-copy h2::before{content:"";display:block;width:36px;height:4px;background:var(--silver);margin-bottom:12px}
.layer-band.business .layer-copy h2::before{background:var(--raspberry)}
.layer-band.cloud .layer-copy h2::before{background:var(--blue)}
.layer-copy .layer-lead{font:800 22px/1.25 var(--font);color:#fff;margin:0 0 10px}
.layer-badge{display:inline-block;margin:0 0 12px;padding:4px 12px;background:rgba(0,175,240,.14);border:1px solid rgba(0,175,240,.45);border-radius:4px;color:#55d4ff;font:700 12px/1.3 var(--font)}

.open-slices{left:var(--edge);bottom:24px;min-height:40px;padding:9px 18px;background:var(--blue);color:var(--ink);border:1px solid var(--blue);font-size:13px;font-weight:800;letter-spacing:.01em;transition:opacity 180ms ease,background-color 180ms ease}
.layer-band.business .open-slices{background:var(--raspberry);border-color:var(--raspberry);color:#fff}
.open-slices:hover{filter:brightness(1.08)}
.all-stories{right:var(--edge);bottom:28px;font-size:14px;font-weight:700;color:#64d7ff;text-decoration:none;transition:top 180ms ease,bottom 180ms ease}
.all-stories:hover{text-decoration:underline}

.layer-band.is-open::after{opacity:.18}
.layer-band.is-open .open-slices:not(:focus-visible){opacity:0;pointer-events:none}
.layer-band.is-open .open-slices:focus-visible{top:16px;bottom:auto;left:var(--edge);z-index:10;background:var(--ink);color:#fff}
.layer-band.is-open .all-stories{top:20px;bottom:auto;right:calc(var(--edge) + 88px);z-index:9;color:#64d7ff}

.slice-panel{padding-bottom:0;background:rgba(7,25,35,.18);transition:opacity 240ms ease-out,visibility 240ms ease-out}
.slice-band-title{position:absolute;top:18px;left:var(--edge);z-index:9;font:400 28px/.95 Anton,Impact,sans-serif;text-transform:uppercase;color:#fff;padding-bottom:6px;border-bottom:2px solid var(--layer-accent);pointer-events:none}
.slice-band-title small{display:block;font:800 10px/1.3 var(--font);letter-spacing:.16em;margin-bottom:2px}

.slice{position:relative;justify-content:flex-end;padding:72px 44px 28px;margin-inline:calc(var(--slant) * -.5);clip-path:polygon(var(--slant) 0,100% 0,calc(100% - var(--slant)) 100%,0 100%);background-color:rgba(7,25,35,.28);background-image:linear-gradient(180deg,rgba(7,25,35,.12) 0%,rgba(7,25,35,.36) 52%,rgba(7,25,35,.94) 100%);transition:background-color 240ms ease,box-shadow 240ms ease}
.slice:first-of-type{margin-left:0;padding-left:var(--edge);clip-path:polygon(0 0,100% 0,calc(100% - var(--slant)) 100%,0 100%)}
.slice:last-of-type{margin-right:0;padding-right:var(--edge);clip-path:polygon(var(--slant) 0,100% 0,100% 100%,0 100%)}
.slice::after{content:"";position:absolute;top:0;bottom:0;right:0;width:var(--slant);transform:none;background:linear-gradient(to bottom right,transparent calc(50% - 1.5px),#00aff0 calc(50% - 1px),#00aff0 calc(50% + 1px),transparent calc(50% + 1.5px));pointer-events:none}
.slice:last-of-type::after{display:none}
.slice::before{content:"";position:absolute;top:0;bottom:0;left:0;width:var(--slant);opacity:0;transition:opacity 240ms ease;background:linear-gradient(to bottom right,transparent calc(50% - 1.5px),#3ecbff calc(50% - 1px),#3ecbff calc(50% + 1px),transparent calc(50% + 1.5px));pointer-events:none}
.slice:first-of-type::before{width:2px;background:#3ecbff}
.slice:hover,.slice:focus-visible{z-index:6;box-shadow:inset 0 2px 0 #3ecbff,inset 0 -2px 0 #3ecbff;background-color:rgba(0,145,205,.24)}
.slice:hover::before,.slice:focus-visible::before{opacity:1}
.slice-num{font:700 13px/1.2 var(--font);color:#64d7ff;margin-bottom:4px}
.slice h3{font:800 clamp(20px,1.9vw,26px)/1.16 var(--font);letter-spacing:-.025em;margin:0 0 10px;max-width:280px;color:#fff}
.slice .slice-cta{font-size:14px;font-weight:700;color:#3ecbff}

.workshop-kicker{font:800 clamp(22px,2.2vw,28px)/1.1 var(--display);text-transform:uppercase;letter-spacing:-.02em;color:var(--ink);margin:0 0 8px}
.workshop-kicker::before{content:"";display:block;width:36px;height:4px;background:#94a9b7;margin-bottom:12px}
.workshop-badge{display:inline-block;padding:5px 14px;background:#dce6ee;color:#3b5362;border-radius:4px;font:700 12px/1.3 var(--font);margin:4px 16px 14px 0}
.workshop-cta{display:inline-flex;align-items:center;gap:6px;font:800 15px/1.3 var(--font);color:#0077c8;text-decoration:none;margin-top:6px}
.workshop-cta:hover{text-decoration:underline}

/* 4. Stories, Projects & Detail CSS */
.hero-eyebrow{display:inline-flex;align-items:center;gap:16px;font:800 13px/1.4 var(--font);letter-spacing:.18em;text-transform:uppercase;color:#fff;margin:0 0 14px}
.hero-eyebrow::after{content:"";display:inline-block;width:72px;height:1px;background:rgba(255,255,255,.45)}
.page-hero h1{font-size:clamp(48px,5.8vw,82px);line-height:.98;letter-spacing:-.035em;margin-bottom:18px}
.hero-layers,.hero-layer-key{display:flex;flex-wrap:wrap;gap:28px;margin-top:24px;font:800 15px/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase}
.hero-layers span,.hero-layer-key span{display:inline-flex;align-items:center;gap:8px}
.hero-layers i{font-style:normal;font-size:20px;font-weight:800}
.hero-layers .metal,.hero-layer-key .metal{color:#e2ecf2}
.hero-layers .metal i{color:#9eb2c2}
.hero-layers .business,.hero-layer-key .business{color:var(--raspberry)}
.hero-layers .business i{color:var(--raspberry)}
.hero-layers .cloud,.hero-layer-key .cloud{color:var(--blue)}
.hero-layers .cloud i{color:var(--blue)}

.cat-container{width:min(var(--content),calc(100% - (2 * var(--gutter))))}
.cat-controls{padding-block:20px 16px;border-bottom:1px solid #d5e1e9;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:14px 20px}
.cat-filters{order:1;display:flex;gap:10px;flex-wrap:wrap}
.cat-search{order:2;margin-left:auto;border-radius:4px;border:1px solid #afc1ce;background:#fff;padding:9px 14px;min-height:42px;max-width:320px}
.cat-result-count{order:3;flex-basis:auto;font-size:13px;font-weight:600;color:#526673}
.cat-filters button{display:inline-flex;align-items:center;gap:9px;border-radius:4px;padding:9px 16px;font-size:14px;font-weight:700;border:1px solid #cdd9e1;background:#e6eef4;color:#071923;min-height:40px}
.cat-filters button:not([data-cat-filter="All"])::before{content:"";width:13px;height:13px;border-radius:50%;flex-shrink:0;background:#a5b5c1;box-shadow:inset 0 0 0 1px rgba(7,25,35,.18)}
.cat-filters button.business{background:#f5d0dc;border-color:#e89ab4}
.cat-filters button.business::before{background:#c81e58}
.cat-filters button.cloud{background:#d6f0fc;border-color:#93d7f8}
.cat-filters button.cloud::before{background:#00aff0}
.cat-filters button.workshop::before{background:#5b6d7a}
.cat-filters button[aria-pressed="true"]{background:#071923;border-color:#071923;color:#fff}
.cat-filters button.business[aria-pressed="true"]{background:#e83c78;border-color:#e83c78;color:#071923}
.cat-filters button.cloud[aria-pressed="true"]{background:#00aff0;border-color:#00aff0;color:#071923}

.cat-group-heading{border-top:0;padding-top:18px;margin:8px 0 18px}
.cat-group-heading h2{display:inline-flex;align-items:center;gap:12px;font:800 16px/1.2 var(--font);letter-spacing:.16em}
.cat-group-heading h2::before{content:"";width:34px;height:4px;background:#a5b6c2}
.cat-story-group.business .cat-group-heading h2::before{background:#e83c78}
.cat-story-group.cloud .cat-group-heading h2::before{background:#00aff0}
.cat-story-group.workshop .cat-group-heading h2::before{background:#748694}
.cat-group-heading a,.cat-text-link{text-decoration:none;color:#0077a8;font-size:14px;font-weight:800}
.cat-group-heading a:hover,.cat-text-link:hover{text-decoration:underline}

.cat-story-grid{gap:28px}
.cat-story{background:#fff;border:1px solid #dbe5ed;display:flex;flex-direction:column}
.cat-story-image{height:220px}
.cat-story-image.is-diagram{background:#071923}
.cat-story-image.is-diagram img{object-fit:contain;padding:7px}
.cat-story-image.is-diagram .cat-image-label{display:none}
.cat-story-copy{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.cat-story-copy .cat-status{min-height:0;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#526673;margin-bottom:6px}
.cat-story-copy h3{font:800 20px/1.22 var(--font);letter-spacing:-.02em;min-height:0;margin:0 0 10px}
.cat-story-copy>p:not(.cat-status){font-size:14px;line-height:1.55;color:#465d6b;margin:0 0 16px}
.cat-story-copy>.cat-text-link{margin-top:auto}
.cat-source-link{margin-top:12px;padding-top:10px;border-top:1px solid #e5edf3;font-size:12px;font-weight:600;color:#465d6b;text-decoration:none}
.cat-source-link:hover{color:#0077a8;text-decoration:underline}

.cat-story-group.metal .cat-story{background:#071923;border-color:#1c3848;color:#fff;position:relative;overflow:hidden}
.cat-story-group.metal .cat-story::after{content:"";position:absolute;top:0;right:14px;bottom:0;width:2px;background:#00aff0;transform:skewX(-10deg);pointer-events:none}
.cat-story-group.metal .cat-story-copy h3{font:400 clamp(22px,2.1vw,28px)/1.12 var(--display);color:#fff}
.cat-story-group.metal .cat-story-copy>p:not(.cat-status){color:#c2d5e2}
.cat-story-group.metal .cat-story-copy .cat-status{color:#9ab2c1}
.cat-story-group.metal .cat-text-link{color:#00aff0}

@media(min-width:901px){
  .cat-story-group.cloud .cat-story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat-story-group.cloud .cat-story:first-child{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1.15fr;background:#071923;border-color:#173749;color:#fff;align-items:center}
  .cat-story-group.cloud .cat-story:first-child .cat-story-copy{order:1;padding:32px 36px}
  .cat-story-group.cloud .cat-story:first-child .cat-story-image{order:2;height:250px;box-shadow:-2px 0 0 #00aff0}
  .cat-story-group.cloud .cat-story:first-child h3{font:400 clamp(28px,2.8vw,38px)/1.08 var(--display);color:#fff}
  .cat-story-group.cloud .cat-story:first-child .cat-story-copy>p:not(.cat-status){color:#c8dbe7;font-size:16px}
  .cat-story-group.cloud .cat-story:first-child .cat-status{display:inline-flex;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:3px 12px;color:#d8eefb;margin-bottom:12px}
  .cat-story-group.cloud .cat-story:first-child .cat-text-link{color:#00aff0}
}

.cat-story.workshop{position:relative}
.cat-story.workshop .cat-story-image img{object-position:center 32%}
.cat-story.workshop .cat-status{position:absolute;top:12px;left:12px;z-index:2;background:rgba(7,25,35,.84);color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:4px 12px 4px 10px;font-size:11px;font-weight:700;text-transform:none;letter-spacing:0;display:inline-flex;align-items:center;gap:7px}
.cat-story.workshop .cat-status::before{content:"";width:8px;height:8px;border-radius:50%;background:#9eb0bd}

.cat-editorial-note{background:#0b2230;color:#d5e4ee;border-top:1px solid #1e3b4d;padding-block:26px;margin-top:28px}
.cat-record-band{display:flex;align-items:center;justify-content:space-between;gap:24px 36px;flex-wrap:wrap}
.cat-record-copy h2{font:800 17px/1.2 var(--font);color:#fff;margin:0 0 6px;display:flex;align-items:center;gap:16px}
.cat-record-copy h2::after{content:"";width:110px;height:1px;background:rgba(255,255,255,.3)}
.cat-record-copy p{font-size:13px;color:#9cb4c3;margin:0}
.cat-record-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cat-record-links a{color:#3ecbff;font-size:14px;font-weight:700;text-decoration:none}
.cat-record-links a:hover{text-decoration:underline}
.cat-record-sep{color:#e83c78;font-weight:800;font-size:20px}

.cat-project:not(.is-compact):not(.workshop){padding-block:36px;gap:48px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cat-project h2{font:400 clamp(30px,3vw,42px)/1.1 var(--display);letter-spacing:-.035em}
.cat-project.is-compact h2{font-size:clamp(24px,2.2vw,31px);margin:4px 0 12px}
.cat-project-copy>p:not(.cat-layer,.cat-status){font-size:17px}
.cat-project.cloud{margin:18px 0 0;padding:36px}
.cat-project-visual{padding:22px 12px}
.cat-project-visual:has(.semantic-diagram){padding:0;background:transparent}
.cat-tags li{font-size:12px}
.cat-project-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cat-project-photos figure{margin:0;min-width:0}
.cat-project-photos img{width:100%;height:170px;object-fit:cover}
.cat-project-photos figcaption{font-size:11px;line-height:1.55;color:var(--muted);padding-top:8px}

.semantic-diagram{width:100%;overflow:hidden;background:#071923}
.semantic-diagram-canvas,.cat-detail-aside .semantic-diagram-canvas,.cat-project .semantic-diagram-canvas{min-width:0;width:100%}
.semantic-diagram svg{display:block;width:100%;height:auto}
.diagram-mobile-hint{display:none}

.cat-detail h1{font:400 clamp(38px,4.6vw,66px)/1.08 var(--display);max-width:1000px}
.cat-detail-kicker::after{display:none}
.cat-detail .cat-layer{display:flex;align-items:center;gap:12px}
.cat-detail .cat-layer::before{content:"";width:28px;height:4px;background:#a5b6c2}
.cat-detail.business .cat-layer::before{background:#e83c78}
.cat-detail.cloud .cat-layer::before{background:#00aff0}
.cat-detail .cat-standfirst{font-size:20px;line-height:1.55}
.cat-detail-grid{gap:56px;padding-block:44px 56px;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr)}
.cat-reading{font-size:17px;line-height:1.8}
.cat-reading h2{font:800 26px/1.22 var(--font);letter-spacing:-.025em}
.cat-reading h3{font:800 20px/1.3 var(--font);letter-spacing:-.015em}
.cat-detail-aside h2{font-family:var(--display);font-weight:400}
.cat-next>a{font-family:var(--display);font-weight:400;white-space:normal;overflow-wrap:anywhere;font-size:22px}
.cat-next{flex:none}
@media(min-width:900px){
  .cat-detail-aside{position:sticky;top:28px;align-self:start}
}

/* 5. About Page CSS */
.about-hero{min-height:410px}
.about-slogan{margin:0 0 18px;line-height:.94;letter-spacing:-.025em;text-transform:uppercase}
.about-slogan span{display:block;font-family:Anton,Impact,sans-serif}
.about-slogan-top{font-size:clamp(64px,7.8vw,108px);color:#dce8f0}
.about-slogan-mid{font-size:clamp(44px,5vw,68px);color:#e8f1f6;margin-block:4px}
.about-slogan-bot{font-size:clamp(58px,7vw,96px);color:var(--blue)}
.about-hero .about-hero-sub{font-size:clamp(18px,1.8vw,25px);line-height:1.35;max-width:520px;color:#eef5f9}

.eyebrow{display:inline-flex;align-items:center;gap:14px;margin:0 0 12px;font:700 13px/1.2 var(--font);letter-spacing:.18em;text-transform:uppercase;color:#3b5362}
.eyebrow-bar{display:inline-block;width:42px;height:3px;background:#6b8496}
.eyebrow-bar.raspberry-bar{background:var(--raspberry)}

.about-summary{display:grid;grid-template-columns:235px 1fr;gap:52px;align-items:center;border-bottom:1px solid var(--line)}
.portrait-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:270px;padding:24px 18px;background:#4a6478;border:2px solid #6c879b;border-radius:4px;color:#d0dfe9;text-align:center;font-size:13px;line-height:1.4}
.portrait-card svg{width:120px;height:100px}
.about-summary h2{font-size:clamp(32px,3.4vw,46px);margin-bottom:14px}
.about-lead{font-size:clamp(19px,1.7vw,23px);line-height:1.4;color:#3d5564;max-width:40ch;margin-bottom:22px}
.about-facts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 0;font-size:15px;font-weight:500;color:#263d4b}
.about-facts span+span::before{content:"/";color:var(--raspberry);font-weight:800;margin-inline:22px}

.about-journey{border-bottom:1px solid var(--line)}
.journey-header,.how-header{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:end;margin-bottom:28px}
.journey-header h2,.how-header h2{margin-bottom:0;font-size:clamp(30px,3.2vw,44px)}
.journey-intro,.how-intro{margin:0;font-size:14.5px;line-height:1.48;color:#3d5564}
.chapter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}
.chapter{position:relative;min-height:330px;padding:34px 38px 32px;color:white;background-image:linear-gradient(180deg,#071923aa 0%,#071923f2 100%),url('assets/layer-scenes.png');background-size:100% 100%,300% 300%;background-position:center,left top;clip-path:polygon(8% 0,100% 0,92% 100%,0 100%)}
.chapter.business{background-position:center,center center;border-top:2px solid var(--raspberry)}
.chapter.cloud{background-position:center,right bottom;border-top:2px solid var(--blue)}
.chapter-num{display:inline-block;font:700 17px/1 var(--font);padding-bottom:10px;margin-bottom:16px;border-bottom:2px solid #d8e3ea;color:#d8e3ea}
.chapter.business .chapter-num{color:var(--raspberry);border-bottom-color:var(--raspberry)}
.chapter.cloud .chapter-num{color:var(--blue);border-bottom-color:var(--blue)}
.chapter h3{font-size:clamp(26px,2.3vw,33px);line-height:1.08;margin-bottom:16px}
.chapter.business h3{color:#f55b91}
.chapter.business h3 .white{color:#fff}
.chapter.cloud h3{color:#3ecbff}
.chapter p{font-size:14.5px;line-height:1.5;color:#dce7ee;margin-bottom:12px}
.chapter .chapter-orgs{color:#fff;font-weight:500;margin-bottom:0}

.about-how{border-bottom:1px solid var(--line)}
.how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:32px}
.how-card{display:grid;grid-template-columns:60px 1fr;gap:18px;align-items:start;padding-inline:28px;border-left:1px solid var(--line)}
.how-card:first-child{padding-left:0;border-left:none}
.how-card:last-child{padding-right:0}
.how-icon{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.how-icon svg{width:30px;height:30px}
.how-icon.blue-tint,.how-icon.blue-icon{background:#e5f1f8;color:#0078c8}
.how-icon.raspberry-tint,.how-icon.raspberry-icon{background:#fcebf1;color:#e83c78}
.how-icon.cyan-tint{background:#e1f4fc;color:#0078c8}
.how-card h3{font:800 18px/1.25 var(--font);letter-spacing:-.02em;margin-bottom:8px;color:var(--ink)}
.how-card p{font-size:14.5px;line-height:1.48;color:#3d5564;margin:0}

.about-bottom-split{display:grid;grid-template-columns:1.35fr 1fr;gap:48px;align-items:stretch;padding-block:44px 56px}
.workbench-panel{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:250px;padding:28px 32px 28px 0}
.workbench-copy{position:relative;z-index:2;max-width:340px}
.workbench-copy h2{font-size:clamp(28px,2.6vw,36px);margin-bottom:12px}
.workbench-copy p{font-size:15px;line-height:1.5;color:#3d5564;margin:0 0 12px}
.workbench-copy .workshop-badge{display:table;margin:0 0 8px}
.workbench-img,.workbench-panel>img{position:absolute;z-index:1;right:0;top:0;width:62%;height:100%;object-fit:cover;mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.85) 45%,#000 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.85) 45%,#000 100%)}
.education-panel{padding-block:28px}
.education-body,.edu-layout{display:grid;grid-template-columns:60px 1fr;gap:18px;align-items:start;margin-top:18px}
.edu-icon{width:60px;height:60px;border-radius:50%;background:#e5f1f8;color:#1b4359;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.edu-icon svg{width:30px;height:30px}
.edu-item+.edu-item{margin-top:14px}
.edu-item h3{font:800 16px/1.3 var(--font);letter-spacing:-.01em;margin:0 0 2px;color:var(--ink)}
.edu-item p{font-size:14px;line-height:1.42;color:#3d5564;margin:0}

/* 6. Explore Hero & Experience Demo Alignment */
.explore-hero{min-height:430px;border-bottom:2px solid var(--blue)}
.explore-hero .hero-eyebrow{font:700 14px/1.5 var(--font);letter-spacing:.22em;text-transform:uppercase;color:#fff;margin:0 0 8px}
.explore-hero .hero-eyebrow::after{display:none}
.explore-hero-title{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:clamp(54px,7.2vw,98px);line-height:.95;letter-spacing:-.025em;text-transform:uppercase;margin:0 0 18px}
.explore-hero-silver{display:block;color:var(--silver)}
.explore-hero-blue{display:block;color:var(--blue)}
.experience-demo{width:min(var(--content),calc(100% - (2 * var(--gutter))));margin:40px auto 56px}
.experience-demo__diagram{margin:14px 0;font-size:13px}
.experience-demo__diagram summary{font-weight:700;color:#006b93;cursor:pointer}
.experience-demo__diagram .semantic-diagram{margin-top:12px}

/* 7. Contact & Booking CSS */
.contact-hero{min-height:420px}
.contact-slogan{margin:0 0 18px;font-family:Anton,Impact,sans-serif;font-size:clamp(58px,7.5vw,104px);line-height:.94;letter-spacing:-.02em;text-transform:uppercase}
.contact-slogan .line{display:block;font-family:Anton,Impact,sans-serif}
.contact-slogan .metal{color:#f2f6f9}
.contact-slogan .business{color:var(--raspberry)}
.contact-slogan .cloud{color:var(--blue)}
.contact-hero .hero-content>p{font-size:clamp(18px,1.6vw,23px);line-height:1.4;color:#e8f1f6;max-width:520px}

.section-bar{display:block;width:44px;height:5px;background:#8fa3b0;margin-bottom:14px}
.contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.contact-info{padding-right:48px;border-right:1px solid var(--line)}
.contact-info h2{display:inline-flex;align-items:baseline;gap:6px;font-size:clamp(38px,3.8vw,54px);margin-bottom:16px}
.contact-info>p{font-size:18px;line-height:1.55;color:var(--muted);max-width:46ch;margin-bottom:28px}
.contact-details{display:flex;flex-direction:column;gap:22px;margin:0 0 28px;padding:0 0 28px;border-bottom:1px solid var(--line);list-style:none}
.contact-details li{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:center;border:0;padding:0}
.contact-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:#e6f2fa;border:1px solid #c2dcf0;color:#0078c8}
.contact-icon svg{width:22px;height:22px}
.contact-details small{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:2px}
.contact-details li span{font-size:17px;font-weight:600;color:var(--ink)}
.contact-email{font-size:clamp(20px,2vw,28px);font-weight:800;color:#0066dc;text-decoration:none}
.contact-email:hover{text-decoration:underline}

.contact-online h3,.find-online h3{font-family:var(--font);font-size:15px;font-weight:800;margin:0 0 12px;letter-spacing:-.01em}
.contact-online .actions,.find-online .actions{margin-top:0;gap:10px}
.button.contact-pill{background:#fff;border:1px solid #a9c8e2;border-radius:6px;padding:9px 15px;min-height:42px;color:#0062cc;font-weight:700;font-size:14px;gap:8px}
.button.contact-pill:hover{background:#eef6fc;border-color:#0078d4}
.resume-pending{margin:12px 0 0;font-size:12px}

.contact-form{background:#ebf2f7;border:1px solid #d8e4ee;border-radius:8px;padding:34px 36px}
.contact-form h2{font-size:32px;margin-bottom:20px}
.contact-form .field label{font-size:14px;font-weight:700;margin-bottom:6px}
.contact-form .field input,.contact-form .field select,.contact-form .field textarea{border:1px solid #cbd8e3;border-radius:5px;padding:11px 14px;font-size:15px}
.contact-form .field input::placeholder,.contact-form .field textarea::placeholder{color:#7c909e}
.contact-submit{width:100%;min-height:50px;margin-top:6px;border-radius:6px;background:#0066ff;border-color:#0066ff;color:#fff;font-size:16px;font-weight:800}
.contact-submit:hover{background:#0052cc;border-color:#0052cc}
.contact-form .form-note{text-align:center;margin:12px 0 0;font-size:12.5px}

.contact-help{padding-top:24px}
.contact-help h2{font-size:clamp(38px,4vw,56px);margin-bottom:10px}
.contact-help-lead{font-size:18px;color:var(--muted);max-width:72ch;margin-bottom:32px}
.process-row{gap:28px}
.help-card{display:flex;flex-direction:column}
.help-visual{height:176px;border-radius:6px;margin-bottom:18px;background-color:#071923;background-size:cover;background-position:center;border:1px solid #d5e2ec}
.help-visual--arch,.help-visual-arch{background-image:url('assets/layer-scenes.png');background-size:100% 300%;background-position:center top}
.help-visual--ins,.help-visual-ins{background-image:url('assets/layer-scenes.png');background-size:100% 300%;background-position:center center}
.help-visual--ai,.help-visual-ai{background-image:url('assets/layer-scenes.png');background-size:100% 300%;background-position:center bottom}
.help-bar{display:block;width:36px;height:4px;margin-bottom:10px}
.blue-bar{background:var(--blue)}
.raspberry-bar{background:var(--raspberry)}
.help-eyebrow{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.help-card h3{font-size:26px;line-height:1.14;margin-bottom:10px}
.help-card p{font-size:16px;line-height:1.55;color:var(--muted);margin:0}

.explore-first{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:44px;padding-top:32px;border-top:1px solid var(--line)}
.explore-first h3{font-size:28px;margin-bottom:6px}
.explore-first p{margin:0;color:var(--muted);font-size:16px}
.explore-first .actions{margin-top:0}

.booking{width:min(var(--content),calc(100% - (2 * var(--gutter))));margin:0 auto 56px;background:#ebf2f7;border:1px solid #d5e2ec;border-radius:8px;padding:32px 36px}
.booking h2,.booking h3{font-family:var(--display);font-weight:400}

/* 8. Responsive Breakpoints (Tablet 1032x1376 & Mobile 390x844) */
@media(max-width:1180px) and (min-width:681px){
  .slogan .key{font-size:clamp(84px,10.5vw,136px)}
  .home-hero{min-height:640px}
  .home-hero .hero-content>p{max-width:440px}
}
@media(max-width:960px){
  .journey-header,.how-header,.about-bottom-split{grid-template-columns:1fr;gap:20px}
  .how-grid{grid-template-columns:1fr;gap:24px}
  .how-card{padding-inline:0;border-left:none;border-top:1px solid var(--line);padding-top:20px}
  .how-card:first-child{border-top:none;padding-top:0}
}
@media(max-width:900px){
  .cat-detail-grid{grid-template-columns:1fr;gap:32px}
  .cat-project:not(.is-compact):not(.workshop){gap:30px}
  .cat-story-grid{gap:24px}
  .contact-grid{grid-template-columns:1fr;gap:36px}
  .contact-info{padding-right:0;border-right:0;border-bottom:1px solid var(--line);padding-bottom:32px}
}
@media(max-width:680px){
  .page-hero h1{font-size:clamp(30px,8vw,40px)}
  .projects-hero h1{font-size:clamp(28px,7.5vw,36px)}
  .slogan .key{font-size:clamp(68px,18vw,116px)}
  .slogan .phrase{font-size:12px;line-height:1.5}
  .slogan .line,.slogan .line:nth-child(2){padding-left:0;margin-left:0}
  .home-hero .hero-content{padding-block:32px 50px}
  .home-hero{min-height:620px}
  .intro-visual img{height:220px}
  .section.intro{padding-block:36px}
  .intro h2{font-size:32px}
  .layer-intro{padding-left:0}
  .layer-intro::before{position:static;display:block;margin-bottom:10px}
  .layer-band{height:auto;min-height:360px}
  .layer-band.is-open{min-height:460px}
  .layer-band.is-open .layer-copy{display:none}
  .open-slices{left:22px;bottom:16px;padding:7px 12px;font-size:11.5px}
  .all-stories{right:22px;bottom:23px;font-size:12px}
  .slice-panel{position:relative;inset:auto;min-height:460px;padding:54px 0 52px;grid-template-columns:1fr;grid-template-rows:repeat(3,minmax(0,1fr));background:rgba(7,25,35,.88)}
  .layer-band:not(.is-open) .slice-panel{position:absolute;inset:0;min-height:0}
  .slice,.slice:first-of-type,.slice:last-of-type{margin:0;padding:16px 22px;clip-path:none;border-bottom:1px solid #1e4d66}
  .slice::before,.slice::after{display:none}
  .layer-band.is-open .all-stories{top:auto;bottom:14px;right:22px}
  .cat-container{width:calc(100% - 44px)}
  .cat-story-grid{grid-template-columns:1fr;gap:28px}
  .cat-story-image{height:220px}
  .cat-story-image.is-diagram{height:235px}
  .cat-project:not(.is-compact):not(.workshop){grid-template-columns:1fr;gap:22px;padding-block:30px}
  .cat-project h2{font-size:31px}
  .cat-project.cloud{padding:28px 22px}
  .cat-project-visual{padding:18px 8px;min-width:0}
  .cat-project-photos{gap:8px}
  .cat-project-photos img{height:135px}
  .cat-detail h1{font-size:37px}
  .cat-detail .cat-standfirst{font-size:18px}
  .cat-reading{font-size:16px;line-height:1.8}
  .cat-reading h2{font-size:24px}
  .cat-reading h3{font-size:20px}
  .cat-next>a{font-size:22px}
  .about-summary{grid-template-columns:1fr;gap:24px}
  .portrait-card{max-width:210px;min-height:220px}
  .about-facts span+span::before{margin-inline:10px}
  .chapter-grid{grid-template-columns:1fr;gap:12px}
  .chapter{clip-path:polygon(3% 0,100% 0,97% 100%,0 100%);min-height:240px;padding:26px}
  .workbench-panel{flex-direction:column;align-items:flex-start;padding-right:0}
  .workbench-img,.workbench-panel>img{position:static;width:100%;height:200px;margin-top:16px;mask-image:none;-webkit-mask-image:none}
  .experience-demo{margin-block:30px 42px}
  .contact-form,.booking{padding:24px 20px}
  .explore-first{flex-direction:column;align-items:flex-start}
}

/* Audit fixes: consistent hit areas, visible input boundaries, unobstructed copy. */
:root{--control-border:#6b8595;--control-min:44px}
.site-header .wordmark,.site-footer .wordmark{min-height:var(--control-min);align-items:baseline;padding-block:8px}
.site-header #site-nav a{display:inline-flex;align-items:center;min-height:var(--control-min)}
.site-header .menu-toggle,.site-footer .footer-contact{min-height:var(--control-min)}
#motion-toggle{position:static;inset:auto;z-index:auto;min-height:var(--control-min);flex:none;background:transparent}
.open-slices,.slice-close{min-height:var(--control-min)}
.all-stories{display:inline-flex;align-items:center;min-height:var(--control-min);bottom:16px}
.intro a:not(.button),.workshop-cta,.cat-group-heading>a,.cat-story-copy .cat-text-link,.cat-story-copy .cat-source-link,.cat-back,.cat-sources a,.cat-next>a,.cat-detail-aside>.cat-text-link,.experience-chat__record>a,.experience-chat__alternatives>a,.experience-chat__all,.contact-email{display:inline-flex;align-items:center;min-height:var(--control-min);padding-block:8px}
.cat-project h2>a{display:inline-block;min-height:var(--control-min)}
.cat-filters button,.button.contact-pill{min-height:var(--control-min)}
.cat-search{min-height:var(--control-min);padding-block:0;border-color:var(--control-border)}
.cat-search input{min-height:var(--control-min);padding-block:10px;font-size:16px}
.contact-form .field input,.contact-form .field select,.contact-form .field textarea,.booking input:not([type=checkbox]),.booking select,.experience-chat__composer{border-color:var(--control-border)}
.contact-form .field input::placeholder,.contact-form .field textarea::placeholder{color:#526673;opacity:1}
.workshop-cta{color:#006b93}
.contact-help .blue{color:#0077a8}
@media(max-width:960px){
  .site-header{justify-content:space-between}
  .site-header .menu-toggle{display:block}
  .site-header #site-nav{display:none;position:absolute;top:100%;left:0;right:0;padding:20px var(--gutter);background:var(--ink);gap:12px 20px;justify-content:flex-start;flex-wrap:wrap;border-bottom:1px solid #45606f}
  .site-header.menu-open #site-nav{display:flex}
  .site-header #site-nav a{font-size:14px}
  .site-header #site-nav .resume-link{font-size:13px}
}
@media(max-width:680px){
  .slice-panel{padding-bottom:74px}
  .layer-band.is-open .all-stories{bottom:14px}
}
@media(max-width:380px){
  .layer-band:not(.is-open) .layer-copy{padding-bottom:128px}
  .layer-band:not(.is-open) .open-slices{bottom:62px}
  .layer-band:not(.is-open) .all-stories{left:22px;right:auto;bottom:12px}
}


/* Approved workbench composition: full-bleed right image, only its left edge fades. */
.section.wrap.intro{position:relative;isolation:isolate;display:block;overflow:hidden;width:100%;margin:0;min-height:340px;padding:40px var(--edge);background:#fff}
.section.intro>div:first-child{position:relative;z-index:2;width:42%;max-width:530px}
.intro-visual{position:absolute;z-index:1;inset:0 0 0 auto;width:64%;margin:0;padding:0;display:block;background:transparent}
.intro-visual img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;
  -webkit-mask-image:linear-gradient(70deg,transparent 14%,#000 32%,#000 100%);
  mask-image:linear-gradient(70deg,transparent 14%,#000 32%,#000 100%)}
.intro-visual figcaption{right:var(--gutter);bottom:10px;padding:2px 6px;background:rgba(255,255,255,.9);color:var(--muted);font-size:11px;line-height:1.5}
/* Keep the other improved crops crisp; no all-edge masks. */
.section.workshop>img{width:min(100%,390px);height:430px;justify-self:center;object-fit:cover;object-position:50% 45%}
@media(max-width:900px){
  .section.wrap.intro{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;min-height:0;padding:36px var(--gutter) 20px}
  .section.intro>div:first-child{width:100%;max-width:620px}
  .intro-visual{position:static;width:calc(100% + 2 * var(--gutter));margin-inline:calc(-1 * var(--gutter))}
  .intro-visual img{height:auto;aspect-ratio:1.8;object-position:50% 55%;-webkit-mask-image:none;mask-image:none}
  .intro-visual figcaption{position:static;margin-top:8px;padding:0 var(--gutter);background:none;text-align:right}
}
@media(max-width:680px){
  .intro-visual img{aspect-ratio:1.5}
  .section.workshop>img{width:min(100%,330px);height:auto;aspect-ratio:1807 / 2400;object-fit:contain}
  .workbench-panel>img{height:auto;aspect-ratio:2400 / 1807;object-position:center}
}

/* Intro-only type, rhythm and seamless transition to the layer introduction. */
@font-face{font-family:"Manrope Intro";src:url('assets/manrope-extrabold.ttf') format('truetype');font-style:normal;font-weight:800;font-display:swap}
.section.intro h2{font:800 clamp(31px,3.2vw,46px)/1.06 "Manrope Intro",Manrope,Helvetica,sans-serif;letter-spacing:-.035em;margin-bottom:12px}
.section.intro h2::before{margin-bottom:12px}
.section.intro p{margin-bottom:12px;line-height:1.55}
.section.intro+.layer-intro{width:100%;margin-inline:0;border-top:0;background:#fff;padding:22px var(--edge) 26px;padding-left:calc(var(--edge) + 52px)}
.section.intro+.layer-intro::before{left:var(--edge);top:36px}
@media(max-width:900px){
  .section.wrap.intro{padding-block:28px 16px;gap:14px}
}
@media(max-width:680px){
  .section.intro+.layer-intro{padding:20px var(--gutter) 24px}
}


/* Larger tall condensed Home keywords; exact slogan/colors and tight tracking retained. */
.home-hero .slogan{max-width:860px}
.home-hero .slogan .key{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:clamp(100px,13.6vw,196px);line-height:.9;letter-spacing:-.02em}
@media(max-width:680px){
  .home-hero .slogan .key{font-size:clamp(68px,23.6vw,124px)}
}
/* A stable clipped link contains its own image; only the image moves during reveal. */
.layer-band{--slice-y:0%}
.layer-band.business{--slice-y:50%}
.layer-band.cloud{--slice-y:100%}
.slice{isolation:isolate;overflow:hidden;background-image:none}
.slice-1{--slice-x:35%}
.slice-2{--slice-x:65%}
.slice-3{--slice-x:100%}
.slice .slice-media{position:absolute;z-index:-2;inset:0 -24px;pointer-events:none;background-image:var(--story-image);background-size:cover;background-position:var(--story-position,50% 50%);background-repeat:no-repeat;opacity:0;transform:translateX(-22px);transition:transform 380ms cubic-bezier(.16,1,.3,1),opacity 180ms ease-out}
.slice-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,25,35,.5),rgba(7,25,35,.64) 45%,rgba(7,25,35,.96))}
.layer-band.is-open .slice-media{opacity:1;transform:translateX(0)}
.layer-band.is-open .slice-2 .slice-media{transition-delay:35ms}
.layer-band.is-open .slice-3 .slice-media{transition-delay:70ms}
.slice::before,.slice::after{z-index:3}
.motion-paused .slice-media{transition:none;transform:none;opacity:1}
@media(prefers-reduced-motion:reduce){
  .slice .slice-media{transition:none;transform:none;opacity:1}
}


/* Compact alternating workbench bands: right image above, left image below. */
.section.wrap.intro{min-height:310px;padding-block:32px}
.section.workshop{position:relative;isolation:isolate;display:block;overflow:hidden;min-height:310px;padding:32px var(--edge);background:#fff}
.section.workshop>.wrap{position:relative;z-index:2;width:42%;max-width:530px;margin:0 0 0 auto}
.section.workshop h2{margin-bottom:12px}
.section.workshop p:not(.workshop-kicker){margin-bottom:12px;line-height:1.55}
.section.workshop>img{position:absolute;z-index:1;inset:0 auto 0 0;width:64%;max-width:none;height:100%;margin:0;object-fit:cover;object-position:50% 44%;
  -webkit-mask-image:linear-gradient(290deg,transparent 14%,#000 32%,#000 100%);
  mask-image:linear-gradient(290deg,transparent 14%,#000 32%,#000 100%)}
@media(max-width:900px){
  .section.wrap.intro{min-height:0;padding-block:24px 12px;gap:12px}
  .section.workshop{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-height:0;padding:28px var(--gutter) 20px}
  .section.workshop>.wrap{width:100%;max-width:620px;margin:0}
  .section.workshop>img{position:static;inset:auto;width:calc(100% + 2 * var(--gutter));height:auto;aspect-ratio:1.8;margin-inline:calc(-1 * var(--gutter));object-position:50% 44%;-webkit-mask-image:none;mask-image:none}
}
@media(max-width:680px){
  .section.workshop>img{aspect-ratio:1.5}
}


/* Frosted layer tones retain crisp glyphs and a localized dark ground for legibility. */
.home-hero .slogan .metal{color:#edf3f6}
.home-hero .slogan .business{color:#e8c6d3}
.home-hero .slogan .cloud{color:#c5e5f2}
.home-hero.home-hero:after{background:linear-gradient(90deg,rgba(7,25,35,.76),rgba(7,25,35,.62) 52%,rgba(7,25,35,.24) 68%,transparent 84%)}
.home-hero.home-hero[data-journey-state=playing]:after,.home-hero.home-hero[data-journey-state=paused]:after{opacity:1}
@media(max-width:680px){
  .home-hero.home-hero:after{background:linear-gradient(90deg,rgba(7,25,35,.8),rgba(7,25,35,.68) 85%,rgba(7,25,35,.35))}
}


/* Metal: restrained vertical frost, with a solid near-white fallback. */
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .home-hero .slogan .metal{background-image:linear-gradient(180deg,#f2f6f8 0%,#d9e4ea 55%,#b3bfc8 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;padding-bottom:.14em;margin-bottom:-.14em}
}


/* Measured against approved/01_Home.png: native broad heavy glyphs, not stretched Anton. */
@font-face{font-family:"Portfolio Display";src:url('assets/portfolio-display.woff2') format('woff2');font-style:normal;font-weight:900;font-stretch:70% 90%;font-display:swap}
.home-hero .slogan .key{font-family:"Portfolio Display",Manrope,sans-serif;font-weight:900;font-stretch:90%;font-variation-settings:"wdth" 90;font-size:clamp(80px,12.55vw,184px);line-height:.86;letter-spacing:-.02em;background-image:none;-webkit-text-fill-color:currentColor;padding-bottom:0;margin-bottom:0;text-shadow:none}
.home-hero .slogan .business{font-stretch:70%;font-variation-settings:"wdth" 70;font-size:clamp(75px,11.8vw,172px);color:#ef5685}
.home-hero .slogan .cloud{font-size:clamp(90px,14.3vw,210px);color:#2cc2f3}
.home-hero .slogan .metal{color:#d5e1e9}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .home-hero .slogan .key{background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.12em;margin-bottom:-.12em}
  .home-hero .slogan .metal{background-image:linear-gradient(180deg,#f3f7fa 0%,#c4d4df 50%,#8199aa 100%)}
  .home-hero .slogan .business{background-image:linear-gradient(180deg,#ff6a96 0%,#ed4e80 55%,#cf3868 100%)}
  .home-hero .slogan .cloud{background-image:linear-gradient(180deg,#38caff 0%,#23c0f5 55%,#0aa9db 100%)}
}
@media(max-width:680px){
  .home-hero .slogan .key{font-size:clamp(48px,18.5vw,100px)}
  .home-hero .slogan .business{font-size:clamp(50px,19.4vw,106px)}
  .home-hero .slogan .cloud{font-size:clamp(56px,21.2vw,116px)}
}


/* User correction: one shared cap height/weight/width setting, fit to BUSINESS. */
.home-hero .slogan{container-type:inline-size}
.home-hero .slogan .key{font-size:clamp(56px,calc(12vw + 20px),168px);font-stretch:90%;font-variation-settings:"wdth" 90}
@supports(font-size:1cqw){
  .home-hero .slogan .key{font-size:clamp(56px,19cqw,168px)}
}

/* Approved indirect working scenes, with a quiet reading zone for each index. */
.stories-hero .hero-media{object-position:70% 45%}
.projects-hero .hero-media{object-position:70% 45%}
.about-hero .hero-media{object-position:72% 45%}
.contact-hero .hero-media{object-position:72% 45%}
.stories-hero::after,.projects-hero::after,.about-hero::after,.contact-hero::after{background:linear-gradient(90deg,#071923f5 0%,#071923d9 42%,#07192373 66%,#07192326 100%)}
.contact-grid{align-items:start}
.contact-info .find-online{margin-top:28px}
.contact-form .field{margin-bottom:18px}
.contact-form .form-note{max-width:48ch}
@media(max-width:680px){
 .stories-hero::after,.projects-hero::after,.about-hero::after,.contact-hero::after{background:linear-gradient(90deg,#071923eb,#071923c7 65%,#071923a6)}
 .contact-grid{gap:36px}
 .contact-form{padding:24px 20px}
}

/* Intro foreground may cross the section boundary. */
.section.wrap.intro{overflow:visible;z-index:1}
.contact-form-first .contact-form{grid-column:1;grid-row:1}
.contact-form-first .contact-info{grid-column:2;grid-row:1}
@media(max-width:900px){
  .contact-form-first .contact-form,.contact-form-first .contact-info{grid-column:1;grid-row:auto}
 .contact-form-first{display:flex;flex-direction:column}
 .contact-form-first .contact-form{order:-1;width:100%}
 .contact-form-first .contact-info{width:100%}
}

.projects-hero h1{max-width:920px;font-size:clamp(25px,5.3vw,76px);line-height:1.08;letter-spacing:-.035em}.projects-hero .project-hero-line{display:block;text-wrap:balance}
/* Project artwork is a compact backdrop, while workflow nodes remain crisp. */
.cat-project-artwork{position:relative;isolation:isolate;overflow:hidden}
.cat-project-artwork .cat-project-backdrop{position:absolute;inset:0;z-index:-2;display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.cat-project-artwork::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(7,25,35,.76);pointer-events:none}
.cat-project-artwork .cat-project-diagram{position:relative;padding:16px;background:transparent}
.cat-project-artwork .semantic-diagram,.cat-project-artwork .semantic-diagram-canvas{background:transparent}
.cat-project-artwork .semantic-diagram svg>rect:first-of-type{fill:transparent}
@media(max-width:680px){.cat-project-artwork .cat-project-diagram{padding:10px}}

.about-hero{min-height:360px}
.about-slogan .about-slogan-row{display:flex;align-items:baseline;gap:clamp(10px,1vw,16px)}
.about-slogan-row .about-slogan-mid{font-size:clamp(22px,2.5vw,34px);line-height:1;margin:0;white-space:nowrap}
.about-slogan-row .about-slogan-bot{font-size:clamp(44px,6.5vw,90px);line-height:1;white-space:nowrap}
.cat-photo-credit{font-size:12px;margin-top:14px;color:#d3e7f2}
.cat-photo-credit a{color:#bfeeff;text-underline-offset:4px}
.cat-construction-photo{margin:28px 0}
.cat-construction-photo img{display:block;width:100%;height:auto}
.cat-construction-photo figcaption{font-size:13px;line-height:1.6;color:#405966;margin-top:9px}
@media(max-width:680px){.about-hero{min-height:300px}.about-slogan .about-slogan-row{gap:8px}.about-slogan-row .about-slogan-mid{font-size:17px}.about-slogan-row .about-slogan-bot{font-size:clamp(32px,8.7vw,50px)}}
@media(max-width:360px){.projects-hero h1{font-size:23px;letter-spacing:-.035em}}
/* Confirmed placement: IS THE starts at the top of the second line, under C/U. */
.about-slogan .about-slogan-row{align-items:flex-start}
/* Narrow story bands keep copy and both actions in normal flow. */
@media(max-width:680px){
 .layer-band:not(.is-open){display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:0;height:auto;min-height:0;padding:32px var(--gutter) 24px}
 .layer-band:not(.is-open) .layer-copy{width:100%;min-width:0;max-width:none;padding:0}
 .layer-band:not(.is-open) .layer-copy p{width:100%;max-width:42ch;word-break:normal;overflow-wrap:normal;margin-bottom:18px}
 .layer-band:not(.is-open) .open-slices{position:relative;inset:auto;justify-self:start;margin:4px 0 6px;min-height:44px}
 .layer-band:not(.is-open) .all-stories{position:relative;inset:auto;justify-self:start;margin-top:6px;min-height:44px;display:inline-flex;align-items:center}
}

/* Different owned workshop photograph: complete prototype and work-mat context. */
.section.workshop>img{object-position:50% 52%}

/* Separate clean mat and true-alpha pencil; copy always sits above the object. */
.section.intro>div:first-child{z-index:4}
.intro-visual .intro-mat{display:block}
.intro-visual .intro-pencil{position:absolute;z-index:3;right:2vw;top:50%;width:clamp(680px,53vw,780px);max-width:none;height:auto;aspect-ratio:1446 / 1087;object-fit:contain;object-position:center;transform:translateY(-50%);-webkit-mask-image:none;mask-image:none;pointer-events:none;filter:drop-shadow(1px 3px 2px rgba(7,25,35,.18))}
.section.intro+.layer-intro>h2,.section.intro+.layer-intro>p,.section.intro+.layer-intro::before{position:relative;z-index:2}
.section.intro+.layer-intro::before{position:absolute}
@media(max-width:900px){
 .intro-visual{position:relative}
 .intro-visual .intro-pencil{right:0;top:65%;width:100%}
 .section.wrap.intro{padding-bottom:12px}
}
@media(max-width:680px){
 .section.intro+.layer-intro::before{position:static}
}

/* About: contextual institution marks retain their native proportions. */
.about-journey .role-row{grid-template-columns:160px minmax(0,1fr) 170px;align-items:center;column-gap:32px}
.career-logo{display:block;justify-self:end;width:auto;height:auto;max-width:160px;max-height:48px;object-fit:contain}
.education-logo{display:block;width:128px;height:auto;max-width:100%;margin-top:10px;object-fit:contain}
.education-logo.scrum-badge{width:64px}
/* The first chapter now has the same readable photographic treatment as its peers. */
.about-journey .chapter:first-child{background-image:linear-gradient(180deg,#071923aa 0%,#071923f2 100%),url('assets/story-slices/virtualization-natural.webp');background-size:100% 100%,cover;background-position:center,60% 45%}
@media(max-width:680px){
 .about-journey .role-row{grid-template-columns:minmax(0,1fr) 120px;gap:8px 16px}
 .about-journey .role-row>strong{grid-column:1;grid-row:1}
 .about-journey .role-row>div{grid-column:1 / -1;grid-row:2}
 .career-logo{grid-column:2;grid-row:1;max-width:120px;max-height:38px}
}

/* Approved portrait keeps the full composition and natural aspect ratio. */
.portrait-card.has-portrait{padding:0;border:0;border-radius:0;min-height:0;background:none;overflow:hidden}
.portrait-card.has-portrait img{display:block;width:100%;height:auto;object-fit:contain}

/* Mobile navigation: primary list, then two purposeful thumbnail actions. */
.site-header .nav-primary,.site-header .nav-primary li,.site-header .nav-features{display:contents;list-style:none;margin:0;padding:0}
.site-header .nav-feature>img,.site-header .nav-feature small,.site-header .nav-feature-arrow{display:none}
.site-header #site-nav .nav-explore{order:1}.site-header #site-nav .resume-link{order:2}.site-header #site-nav .nav-contact{order:3}.site-header #motion-toggle{order:4}
@media(max-width:860px){
 body.mobile-menu-open{overflow:hidden}
 .site-header.menu-open #site-nav{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:20px;padding:16px var(--gutter) 24px;max-height:calc(100dvh - 88px);overflow-y:auto;overscroll-behavior:contain;box-shadow:0 20px 24px rgba(0,0,0,.2)}
 .site-header #site-nav .nav-primary{display:flex;flex-direction:column;gap:0}
 .site-header #site-nav .nav-primary li{display:block}
 .site-header #site-nav .nav-primary a{display:flex;width:100%;min-height:44px;padding:10px 2px;border:0;background:none;color:#f4f8fa;font-size:16px;line-height:1.4;text-decoration:none}
 .site-header #site-nav .nav-primary a[aria-current=page]{color:var(--blue);text-decoration:underline;text-underline-offset:5px}
 .site-header #site-nav .nav-features{display:grid;gap:12px}
 .site-header #site-nav .nav-feature{display:grid;grid-template-columns:76px minmax(0,1fr) 20px;gap:14px;align-items:center;min-height:88px;padding:0 16px 0 0;border:1px solid #365666;background:#112e3e;color:#f4f8fa;font-size:15px;white-space:normal;text-decoration:none;overflow:hidden}
 .site-header #site-nav .nav-feature:hover{border-color:var(--blue);background:#163a4e}
 .site-header .nav-feature>img{display:block;width:76px;height:88px;object-fit:cover;object-position:65% 50%}
 .site-header .resume-link>img{object-position:50% 22%}
 .site-header .nav-feature-label{display:block;font-weight:800;line-height:1.35}
 .site-header .nav-feature small{display:block;margin-top:4px;color:#c1d3de;font-size:12px;font-weight:400;line-height:1.4}
 .site-header .nav-feature-arrow{display:block;color:var(--blue);font-size:20px;text-align:right}
 .site-header #site-nav .nav-explore,.site-header #site-nav .resume-link,.site-header #site-nav .nav-contact,.site-header #motion-toggle{order:0}
 .site-header #motion-toggle{align-self:flex-start;margin:0;min-height:44px}
}

@media(max-width:860px){.site-header #site-nav .nav-primary,.site-header #site-nav .nav-features{flex:0 0 auto}}

/* About introduction: quiet heading zone; the greeting and whole head remain visible. */
.about-hero .hero-media{object-position:72% 45%}
@media(max-width:900px){
 .about-hero{display:flex;flex-direction:column;min-height:0}
 .about-hero .hero-content{order:1;padding-block:28px 30px}
 .about-hero .hero-media{position:relative;inset:auto;order:2;z-index:0;width:100%;height:clamp(200px,62.5vw,340px);object-fit:cover;object-position:100% 45%}
 .about-hero::after{background:none}
}

/* Mobile pencil: visually centered within the mat, with the complete tip raised. */
@media(max-width:900px){.intro-visual .intro-pencil{left:48.5%;right:auto;top:46%;width:92%;transform:translate(-50%,-50%)}}

/* Sparse blueprint fragments sit in the Stories margins, behind opaque cards. */
.catalogue[data-cat-kind="stories"]{position:relative;isolation:isolate;overflow:hidden}
.catalogue[data-cat-kind="stories"]::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22900%22%20viewBox%3D%220%200%201200%20900%22%20fill%3D%22none%22%3E%3Cg%20stroke%3D%22%2366889c%22%20stroke-width%3D%221.4%22%20opacity%3D%22.36%22%3E%3Cpath%20d%3D%22M24%2076h24v38h30m-42-8v45h24M1120%2038v24h-34v36m34-25h40M20%20468h48v28h24m-60%2022h32m1070-156h-38v42h32v22m-30%20324h-25v35h54m-1101-33v31h28%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%22114%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%221086%22%20cy%3D%22102%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2296%22%20cy%3D%22496%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%221134%22%20cy%3D%22426%22%20r%3D%224%22%2F%3E%3Cpath%20stroke-dasharray%3D%223%207%22%20d%3D%22M45%20182v64m1100-78v56M58%20577v58m1038-52v50%22%2F%3E%3Cpath%20d%3D%22m112%20308%204%204-4%204m-30%200-4-4%204-4m1030%20280%205%205-5%205m-37%200-5-5%205-5M36%20702h22m-11-11v22%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M33%20350h32m-16-8v16M1136%20648h29%22%20stroke%3D%22%2300aff0%22%20opacity%3D%22.27%22%2F%3E%3Cpath%20d%3D%22M1158%20256h-25m12-7v14M22%20838h30%22%20stroke%3D%22%23e83c78%22%20opacity%3D%22.24%22%2F%3E%3C%2Fsvg%3E");background-size:max(100%,1200px) auto;background-repeat:repeat-y;background-position:center top}
/* Booking belongs beside Talk to Josh, with its existing honest connection state. */
.contact-info>.booking{width:100%;margin:24px 0 28px;padding:22px 24px;border-radius:0}
.contact-info>.booking h2{font-size:26px;line-height:1.15;margin-bottom:12px}
.contact-info>.booking .booking__intro>p{font-size:14px;line-height:1.6}
.contact-info>.booking .booking__disclosure{margin-top:16px;padding-top:8px}
.contact-info>.booking .booking__fields{grid-template-columns:minmax(0,1fr);gap:16px}
.contact-info>.booking .booking__review dl>div{grid-template-columns:minmax(0,1fr);gap:4px}
@media(max-width:680px){
 .catalogue[data-cat-kind="stories"]::before{background-size:900px 675px;opacity:.7}
 .contact-info>.booking{padding:20px;margin-block:20px 24px}
 .contact-info>.booking h2{font-size:24px}
}

/* Final responsive audit: readable chapter measure and full-size tap targets. */
.cat-story h3>a,.cat-related li>a{display:inline-flex;align-items:center;min-height:44px}
.career-mark{display:block;position:relative;justify-self:end;width:fit-content}
.career-logo[src$="dell-official.svg"]{width:84px}
@media(max-width:900px){
 .about-journey .chapter-grid{grid-template-columns:minmax(0,1fr)}
 .about-journey .chapter{min-height:220px;padding:28px 34px;clip-path:polygon(3% 0,100% 0,97% 100%,0 100%)}
 .about-journey .chapter p{max-width:60ch}
 .semantic-diagram{overflow-x:auto;overscroll-behavior-x:contain}
 .semantic-diagram>.semantic-diagram-canvas{min-width:500px}
 .diagram-mobile-hint{display:block;font-size:12px;line-height:1.5;margin:8px 0 0;color:var(--muted)}
 .cat-project-artwork .diagram-mobile-hint{color:#d8e3ea}
}
@media(max-width:680px){.career-mark{grid-column:2;grid-row:1}.career-logo[src$="dell-official.svg"]{width:66px}}

/* Wide bands use the outer gutter once; descriptions and CTAs retain normal flow. */
@media(min-width:681px){
 .layer-band{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 44px;align-content:center;gap:0 28px;height:auto;min-height:380px;padding:32px var(--edge) 24px}
 .layer-band .layer-copy{grid-column:1 / -1;width:100%;max-width:800px;padding:0}
 .layer-band .open-slices{position:relative;inset:auto;grid-column:1;grid-row:2;justify-self:start;align-self:end;margin:0;min-height:44px}
 .layer-band .all-stories{position:relative;inset:auto;grid-column:2;grid-row:2;justify-self:end;align-self:end;min-height:44px}
 .layer-band.is-open .open-slices,.layer-band.is-open .all-stories{position:absolute}
 .layer-band.is-open .all-stories{top:20px;bottom:auto;right:calc(var(--edge) + 88px)}
}
@media(max-width:1100px){
 .semantic-diagram{overflow-x:auto;overscroll-behavior-x:contain}
 .semantic-diagram>.semantic-diagram-canvas{min-width:500px}
 .diagram-mobile-hint{display:block;font-size:12px;line-height:1.5;margin:8px 0 0;color:var(--muted)}
 .cat-project-artwork .diagram-mobile-hint{color:#d8e3ea;background:#071923;padding:6px 8px}
}

/* This viewBox-only source needs an explicit preferred width inside its mark wrapper. */
.career-logo[src$="medavie-official.svg"]{width:160px;aspect-ratio:146 / 17;height:auto}

/* Plain-language notices use the same reading surfaces in either theme. */
.privacy-page{max-width:820px;padding-block:48px 64px;color:var(--theme-text,var(--ink))}
.privacy-page h1{font-size:clamp(34px,5vw,56px);line-height:1.1;margin:0 0 18px}
.privacy-page .privacy-lead{font-size:19px;line-height:1.6}
.privacy-page .privacy-updated{font-size:13px;color:var(--muted)}
.privacy-page h2{font:800 25px/1.25 var(--font);letter-spacing:-.025em;margin:34px 0 14px}
.privacy-page p,.privacy-page li{font-size:16px;line-height:1.75}
.privacy-summary{border-left:4px solid var(--blue);padding:8px 20px;margin:28px 0;background:var(--theme-raised,#eaf1f6)}
.privacy-summary ul{padding-left:20px;margin:8px 0}
.privacy-page a:not(.button),.privacy-notice a,.contact-form .form-note a{color:var(--theme-link,#006b93);text-underline-offset:4px}
.privacy-page>a.button{margin-top:20px}
.site-footer .footer-privacy{display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:#63d4ff;white-space:nowrap}
.privacy-notice{font-size:13px;line-height:1.65;color:var(--muted);margin:14px 0}
.contact-info>.booking .booking__storage-note{font-size:12px;line-height:1.65;margin-bottom:0}
@media(max-width:680px){.privacy-page{padding-block:32px 44px}.privacy-page h2{font-size:23px}.privacy-summary{padding-inline:14px}}


/* Center the Home section artwork as well as its text; hero and footer stay full width. */
.home-sections{--edge:clamp(20px,3vw,40px);width:min(var(--content),calc(100% - 2 * var(--gutter)));margin-inline:auto;position:relative}
.home-sections>.section.wrap.intro,.home-sections>.layer-intro,.home-sections>.layer-band,.home-sections>.section.workshop{width:100%;margin-inline:0}
.home-sections .all-stories{width:max-content;max-width:none}

/* Projects working scene: preserve the whole person and workflow on narrow screens. */
.projects-hero .hero-media{object-position:70% 60%}
@media(max-width:900px){.projects-hero{display:flex;flex-direction:column;min-height:0}.projects-hero .hero-content{order:1}.projects-hero .hero-media{position:relative;inset:auto;order:2;z-index:0;width:100%;height:clamp(200px,62.5vw,340px);object-fit:cover;object-position:75% 60%}.projects-hero::after{background:none}}

/* Compact project diagrams retain their relationships and centered foreground spacing. */
.cat-project-artwork .cat-project-diagram{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;min-height:320px}
.cat-project-artwork .semantic-diagram{max-width:760px}
.cat-project-artwork .diagram-mobile-hint{align-self:stretch;margin-bottom:0}
@media(max-width:680px){.cat-project-artwork .cat-project-diagram{padding:20px;min-height:0}}

/* Home leads with current AI and automation work; the origin story remains on the workbench. */
.home-facts{justify-content:center;text-align:center;gap:48px;font-size:14px}.home-facts span{position:relative}.home-facts span+span::before{position:absolute;left:-28px;margin:0}
.home-spotlight{width:100%;padding:36px var(--edge) 32px;background:var(--theme-surface,#fff);color:var(--theme-text,var(--ink))}
.home-spotlight-heading{margin-bottom:24px;max-width:850px}.home-spotlight h2{font:800 clamp(30px,3.2vw,42px)/1.1 "Manrope Intro",Manrope,sans-serif;letter-spacing:-.035em;margin:0 0 12px}.home-spotlight-heading p{font-size:17px;color:var(--theme-muted,var(--muted));margin:0}
.home-spotlight-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:32px;align-items:start}
.spotlight-nexus{border:1px solid var(--theme-line,var(--line));background:var(--theme-raised,#f4f8fb)}.spotlight-nexus>img{display:block;width:100%;height:190px;object-fit:cover;object-position:50% 45%}.spotlight-copy{padding:24px}
.home-spotlight h3{font:800 clamp(21px,2vw,25px)/1.22 var(--font);letter-spacing:-.025em;margin:0 0 12px}.home-spotlight article p{font-size:15px;line-height:1.65;margin-bottom:14px;max-width:65ch}.home-spotlight .spotlight-status{font-size:12px;font-weight:700;color:var(--theme-link,#006b93);margin-bottom:14px}.home-spotlight .spotlight-result{font-weight:700}.home-spotlight article a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--theme-link,#006b93);font-size:14px;font-weight:800}
.spotlight-delivery article+article{margin-top:18px;padding-top:24px;border-top:1px solid var(--theme-line,var(--line))}
.home-spotlight+.layer-intro{padding:24px var(--edge) 28px;padding-left:calc(var(--edge) + 52px);border-top:0;background:var(--theme-surface,#fff)}.home-spotlight+.layer-intro::before{left:var(--edge);top:38px}
.section.workshop.workshop-pencil{overflow:visible;min-height:360px}.workshop-pencil>.wrap{z-index:4}.workshop-visual{position:absolute;z-index:1;inset:0 auto 0 0;width:64%;margin:0;pointer-events:none}.workshop-mat{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%;mask-image:linear-gradient(290deg,transparent 14%,#000 32%,#000 100%);-webkit-mask-image:linear-gradient(290deg,transparent 14%,#000 32%,#000 100%)}
.workshop-pencil-object{position:absolute;left:2%;top:50%;width:clamp(520px,48vw,680px);max-width:none;height:auto;transform:translateY(-50%);filter:drop-shadow(1px 3px 2px rgba(7,25,35,.18));pointer-events:none}
@media(max-width:900px){.home-spotlight-grid{grid-template-columns:minmax(0,1fr);gap:28px}.spotlight-nexus{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}.spotlight-nexus>img{height:100%;min-height:250px}.section.workshop.workshop-pencil{min-height:0}.workshop-visual{position:relative;inset:auto;width:calc(100% + 2 * var(--gutter));aspect-ratio:1.8;margin-inline:calc(-1 * var(--gutter))}.workshop-mat{height:100%;mask-image:none;-webkit-mask-image:none}.workshop-pencil-object{left:48.5%;top:46%;width:92%;transform:translate(-50%,-50%)}}
@media(max-width:680px){.home-facts{gap:28px;font-size:12px}.home-facts span{flex:1;min-width:0}.home-facts span+span::before{left:-18px}.home-spotlight{padding:28px var(--gutter)}.home-spotlight-heading p{font-size:15px}.spotlight-nexus{display:block}.spotlight-nexus>img{height:180px;min-height:0}.spotlight-copy{padding:20px}.home-spotlight+.layer-intro{padding:20px var(--gutter) 24px}.home-spotlight+.layer-intro::before{position:static}.workshop-visual{aspect-ratio:1.5}}

/* Thinking uses the existing article reading architecture, with drafts shown only in local review. */
.thinking-hero h1{max-width:980px;font-size:clamp(34px,4.3vw,62px);line-height:1.1;text-wrap:balance}.thinking-hero .hero-content>p{max-width:70ch}
.thinking-back{display:inline-flex;align-items:center;min-height:44px;margin-bottom:12px;font-size:14px;font-weight:800;color:var(--theme-link,#006b93)}.thinking-hero .thinking-back{color:#63d4ff}
.thinking-index{padding-block:36px 64px;max-width:900px}.thinking-list{list-style:none;margin:0;padding:0}.thinking-list>li{padding:28px 0;border-bottom:1px solid var(--theme-line,var(--line))}.thinking-list h2{font:800 clamp(25px,3vw,34px)/1.18 var(--font);letter-spacing:-.03em;margin:12px 0 14px}.thinking-list h2 a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}.thinking-list h2 a:hover{text-decoration:underline;text-underline-offset:5px}.thinking-list p{max-width:70ch;font-size:16px;line-height:1.75;color:var(--theme-muted,var(--muted))}.thinking-meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 20px;font-size:13px;line-height:1.6;color:var(--theme-muted,var(--muted))}.thinking-hero .thinking-meta{margin-top:22px;color:#d3e5ee}.thinking-read{display:inline-flex;align-items:center;min-height:44px;font-weight:800;font-size:14px;color:var(--theme-link,#006b93)}
.thinking-reading{max-width:780px;padding-block:32px 64px}.thinking-reading .cat-reading{font-size:17px;line-height:1.85}.thinking-reading .cat-reading>p{max-width:70ch}.thinking-reading .cat-reading h2{font-size:clamp(25px,3vw,32px);margin-block:32px 14px}.thinking-reading>.thinking-back{margin-top:28px}.thinking-review-notice{padding:14px 18px;margin:0 0 24px;background:var(--theme-raised,#eaf2f7);border:1px solid var(--theme-control,#6b8595);color:var(--theme-text,var(--ink));font-size:14px;line-height:1.6}.thinking-empty{padding-block:24px 36px}.thinking-empty h2{font-size:30px}.thinking-empty p{color:var(--theme-muted,var(--muted))}.thinking-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:680px){.thinking-index{padding-block:24px 40px}.thinking-list>li{padding-block:24px}.thinking-reading{padding-block:24px 40px}.thinking-reading .cat-reading{font-size:16px;line-height:1.8}.thinking-meta{gap:6px 14px}}

/* Editorial artwork: full compositions remain intact, with readable independent copy. */
.thinking-index-hero .hero-media{object-position:70% center}
.thinking-index-hero::after{background:linear-gradient(90deg,#071923ee,#071923bb 42%,#07192320 75%)}
.thinking-editorial-image{width:100%;height:auto;aspect-ratio:1672/941;object-fit:contain;background:#071923}
.thinking-reading>.thinking-editorial-image{margin:0 0 32px}
.thinking-list>li:has(.thinking-card-image){display:grid;grid-template-columns:minmax(180px,32%) minmax(0,1fr);gap:28px;align-items:start}
.thinking-entry-copy{min-width:0}
.thinking-entry-copy h2{margin-top:10px}
@media(max-width:680px){.thinking-list>li:has(.thinking-card-image){grid-template-columns:minmax(0,1fr);gap:20px}.thinking-reading>.thinking-editorial-image{margin-bottom:24px}}

/* Full-width section grounds, with the existing centered content and pencil geometry. */
.home-sections{width:100%;margin-inline:0}
.home-band-inner{position:relative;width:min(var(--content),calc(100% - 2 * var(--gutter)));margin-inline:auto}
.home-sections>.home-spotlight{padding:0}
.home-spotlight-inner{padding:36px var(--edge) 32px}
.home-sections>.layer-intro{padding:0}
.home-spotlight+.layer-intro::before{display:none}
.home-layer-intro-inner{padding:24px var(--edge) 28px;padding-left:calc(var(--edge) + 52px)}
.home-layer-intro-inner::before{content:"";position:absolute;left:var(--edge);top:38px;width:32px;height:4px;background:var(--raspberry)}
.home-sections>.layer-band{display:block;height:auto;min-height:0;padding:0}
.home-layer-inner{z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 44px;align-content:center;gap:0 28px;min-height:380px;padding:32px var(--edge) 24px}
.home-sections>.section.workshop{padding:0;min-height:0}
.home-workshop-inner{min-height:360px;padding:32px var(--edge)}
.home-workshop-inner>.wrap{position:relative;z-index:4;width:42%;max-width:530px;margin:0 0 0 auto}
@media(max-width:900px){.home-workshop-inner{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-height:0;padding:28px var(--gutter) 20px}.home-workshop-inner>.wrap{width:100%;max-width:620px;margin:0}}
@media(max-width:680px){
 .home-spotlight-inner{padding:28px var(--gutter)}
 .home-layer-intro-inner{padding:20px var(--gutter) 24px}
 .home-layer-intro-inner::before{position:static;display:block;margin-bottom:10px}
 .home-layer-inner{grid-template-columns:minmax(0,1fr);grid-template-rows:none;align-content:start;gap:0;min-height:0;padding:32px var(--gutter) 24px}
 .layer-band.is-open .home-layer-inner{padding:0;min-height:460px}
}
/* Extend only the workshop mat ground; its transparent foreground object keeps its bounds. */
@media(min-width:901px){
 .home-sections>.workshop-pencil::before{content:"";position:absolute;z-index:0;inset:0 auto 0 0;width:calc((100% - min(var(--content),calc(100% - 2 * var(--gutter)))) / 2 + min(var(--content),calc(100% - 2 * var(--gutter))) * .64);background:url('assets/workmat-clean.webp') center 45% / cover no-repeat;mask-image:linear-gradient(290deg,transparent 14%,#000 32%,#000 100%);-webkit-mask-image:linear-gradient(290deg,transparent 14%,#000 32%,#000 100%);pointer-events:none}
 .home-workshop-inner .workshop-mat{visibility:hidden}
}
@media(max-width:900px){.home-workshop-inner .workshop-mat{width:calc(100% + 2 * var(--gutter));max-width:none;margin-inline:calc(-1 * var(--gutter))}}