/* 3D Logo Maker — Portfolio V32
   Page-local styles are scoped to main.portfolioMain only.
   Shared header/footer/theme controls remain owned by global.css/layout-loader. */

.portfolioSkipLink{
  position:fixed;left:16px;top:-80px;z-index:9999;
  padding:10px 14px;border-radius:10px;background:#111;color:#fff;
  font:inherit;font-size:14px;font-weight:700;line-height:1;text-decoration:none;
  transition:top .18s ease;
}
.portfolioSkipLink:focus{top:14px}

.portfolioMain{
  --pf-bg:#f7f2e8;--pf-bg-2:#efe3cc;--pf-card:#fffdf8;--pf-ink:#141412;
  --pf-muted:#625f58;--pf-line:rgba(20,20,18,.14);--pf-gold:#b87918;
  --pf-gold-2:#e0b45d;--pf-dark:#11110f;--pf-dark-2:#181712;
  --pf-dark-card:#201e18;--pf-light:#fffaf0;--pf-shadow:0 16px 42px rgba(31,24,11,.08);
  --pf-radius:20px;--pf-max:1180px;
  margin:0;color:var(--pf-ink);background:var(--pf-bg);
  overflow-x:clip;
}
.portfolioMain.portfolioThemeDark{
  --pf-bg:#0f100e;--pf-bg-2:#171711;--pf-card:#171814;--pf-ink:#f5f0e6;
  --pf-muted:#aaa397;--pf-line:rgba(255,255,255,.12);--pf-shadow:0 18px 44px rgba(0,0,0,.32);
  color-scheme:dark;
}
.portfolioMain *{box-sizing:border-box}
.portfolioMain img,.portfolioMain video{display:block;max-width:100%;height:auto}
.portfolioMain a{color:inherit;text-decoration:none}
.portfolioMain button{font:inherit}
.portfolioMain .container{width:min(calc(100% - 48px),var(--pf-max));margin-inline:auto}
.portfolioMain .eyebrow{margin:0 0 12px;font-size:.76rem;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--pf-gold)}
.portfolioMain h1,.portfolioMain h2,.portfolioMain h3,.portfolioMain p{margin-top:0;text-wrap:pretty}
.portfolioMain h1{letter-spacing:-.062em}
.portfolioMain h2{letter-spacing:-.048em}
.portfolioMain h3{letter-spacing:-.035em}
.portfolioMain p{color:var(--pf-muted);line-height:1.58}
/* Shared button components are owned by global.css, matching the locked About page.
   Portfolio only adds focus reinforcement and section-specific contrast where required. */
.portfolioMain .buttonPrimary:focus-visible,.portfolioMain .buttonSecondary:focus-visible,.portfolioMain summary:focus-visible,.portfolioMain button:focus-visible,.portfolioMain a:focus-visible{outline:3px solid var(--pf-gold-2);outline-offset:3px}
/* Portfolio CTA controls mirror the locked About-page interaction language. */
.portfolioMain .portfolioHeroActions .buttonPrimary,.portfolioMain .portfolioHeroActions .buttonSecondary,.portfolioMain .decisionActions .buttonPrimary,.portfolioMain .decisionActions .buttonSecondary{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:13px 22px;border:1px solid currentColor;border-radius:2px;font-size:.94rem;font-weight:750;line-height:1;text-decoration:none;transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.portfolioMain .portfolioHeroActions{margin-top:clamp(26px,2.5vw,36px)}
.portfolioMain .portfolioHeroActions .buttonPrimary{background:var(--pf-ink);color:var(--pf-bg);border-color:var(--pf-ink)}
.portfolioMain .portfolioHeroActions .buttonSecondary{background:transparent;color:var(--pf-ink);border-color:var(--pf-ink)}
@media (hover:hover){.portfolioMain .portfolioHeroActions .buttonPrimary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.14)}.portfolioMain .portfolioHeroActions .buttonSecondary:hover{background:var(--pf-ink);color:var(--pf-bg);transform:translateY(-2px)}}


/* Hero */
.portfolioHero{padding:72px 0 34px;background:radial-gradient(circle at 78% 22%,rgba(196,147,43,.16),transparent 30%),var(--pf-bg)}
.portfolioHeroGrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(440px,1.1fr);gap:58px;align-items:center}
.portfolioHeroCopy h1{font-size:clamp(48px,5.55vw,78px);line-height:.92;max-width:660px;margin-bottom:18px}
.portfolioLead{max-width:620px;font-size:16px;margin-bottom:22px}
.portfolioHeroActions{display:flex;gap:10px;flex-wrap:wrap}
.portfolioHeroReel{margin:0}
.portfolioHeroReelFrame{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#111;box-shadow:0 22px 54px rgba(0,0,0,.18);border:1px solid var(--pf-line)}
.portfolioHeroReelFrame video{width:100%;height:100%;object-fit:cover}
.portfolioHeroReelBadge{position:absolute;left:14px;bottom:14px;padding:7px 11px;border-radius:999px;background:rgba(13,13,11,.8);color:#fff;font-size:10px;font-weight:900;backdrop-filter:blur(8px)}
.portfolioHeroReel figcaption{display:flex;justify-content:space-between;gap:18px;margin-top:10px;font-size:11px;color:var(--pf-muted)}
.portfolioHeroReel figcaption strong{color:var(--pf-ink)}

/* Highlights — major proof points, not micro-copy. */
.portfolioHighlights{padding:0 0 48px;background:var(--pf-bg)}
.portfolioHighlightsGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.portfolioHighlight{position:relative;min-height:176px;padding:24px 22px 22px;background:var(--pf-card);border:1px solid var(--pf-line);border-radius:16px;box-shadow:var(--pf-shadow);overflow:hidden;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.portfolioHighlight::after{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--pf-gold),var(--pf-gold-2));transform:scaleX(.18);transform-origin:left;transition:transform .3s ease}
.portfolioHighlight::before{content:'✓';position:absolute;right:18px;top:20px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(196,147,43,.42);color:var(--pf-gold);font-weight:900;font-size:13px}
.portfolioHighlightKicker{display:block;color:var(--pf-gold);font-size:clamp(20px,1.7vw,28px);font-weight:900;line-height:1;margin-bottom:14px;padding-right:38px;letter-spacing:-.035em}
.portfolioHighlight strong{display:block;font-size:16px;line-height:1.25;padding-right:22px}
.portfolioHighlight p{font-size:13px;line-height:1.52;margin:9px 0 0;max-width:28ch}
@media (hover:hover){.portfolioHighlight:hover{transform:translateY(-4px);border-color:rgba(184,121,24,.38);box-shadow:0 18px 34px rgba(31,24,11,.12)}.portfolioHighlight:hover::after{transform:scaleX(1)}}
.portfolioMain.js-ready .portfolioHighlights .portfolioHighlight{opacity:0;transform:translateY(16px)}
.portfolioMain.js-ready .portfolioHighlights.is-visible .portfolioHighlight{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease,border-color .25s ease,box-shadow .25s ease}
.portfolioMain.js-ready .portfolioHighlights.is-visible .portfolioHighlight:nth-child(2){transition-delay:.07s}.portfolioMain.js-ready .portfolioHighlights.is-visible .portfolioHighlight:nth-child(3){transition-delay:.14s}.portfolioMain.js-ready .portfolioHighlights.is-visible .portfolioHighlight:nth-child(4){transition-delay:.21s}

/* 01 — lead identity system. Preserve this as the main case-study chapter. */
.featureCase{padding:78px 0;background:var(--pf-dark);color:var(--pf-light)}
.featureCaseGrid{display:grid;grid-template-columns:.82fr 1.18fr;gap:54px;align-items:center}
.featureCaseCopy h2{font-size:clamp(44px,4.7vw,68px);line-height:.94;margin-bottom:18px;max-width:520px}
.featureCaseCopy p{color:#bbb4a8;font-size:14px;max-width:520px}
.caseMicroProof{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 18px}
.caseMicroProof span{padding:7px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.16);font-size:10px;color:#ddd5c7}
.clientSiteLink{font-size:12px;font-weight:850;color:var(--pf-gold-2)}
.featureCaseMedia{margin:0;background:#f8f3e9;border-radius:20px;padding:14px;box-shadow:0 22px 60px rgba(0,0,0,.34)}
.featureCaseMedia img{width:100%;height:auto;border-radius:12px}

/* 02 — selected work: controlled exhibition, no duplicate String Production tile. */
.workWallSection{padding:82px 0 74px;background:var(--pf-bg)}
.workWallIntro{display:grid;grid-template-columns:minmax(0,.92fr) minmax(300px,.52fr);gap:44px;align-items:end;margin-bottom:28px}
.workWallIntroTitle h2{font-size:clamp(42px,4.45vw,64px);line-height:.95;max-width:650px;margin-bottom:0}
.workWallIntroNote{align-self:end;background:var(--pf-card);border:1px solid var(--pf-line);border-radius:16px;padding:18px 20px;box-shadow:var(--pf-shadow)}
.workWallIntroNote span{display:block;color:var(--pf-gold);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px}
.workWallIntroNote p{font-size:14px;line-height:1.55;margin:0}
.workWall{width:min(calc(100% - 48px),var(--pf-max));margin-inline:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;grid-auto-flow:dense}
.workTile{margin:0;display:grid;grid-template-rows:auto auto;min-width:0;min-height:0;background:var(--pf-card);border:1px solid var(--pf-line);border-radius:16px;overflow:hidden;box-shadow:0 9px 22px rgba(0,0,0,.05);transition:transform .25s ease,box-shadow .25s ease}
.workTile:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(0,0,0,.1)}
.workSurface{display:grid;place-items:center;min-height:0;aspect-ratio:1/1;padding:20px;background:#fff}
.workSurface img{width:auto;height:auto;max-width:88%;max-height:88%;object-fit:contain!important;object-position:center}
.workSurface.warm{background:#6d352e}.workSurface.dark{background:#151515}.workSurface.soft{background:#fbfbf7}.workSurface.charcoal{background:#363636}.workSurface.luxe{background:linear-gradient(145deg,#111,#7d5a17)}.workSurface.black{background:#050505}.workSurface.blue{background:#eef5ff}.workSurface.cool{background:#edf7f8}
.workTile figcaption{display:flex;justify-content:space-between;gap:10px;padding:12px 13px 13px;font-size:11px}
.workTile figcaption strong{font-size:12px}.workTile figcaption span{color:var(--pf-muted);text-align:right}
.tileBeans{grid-column:span 2}
.tileBeans .workSurface{padding:22px;aspect-ratio:2/1}
.tileBeans .workSurface img{max-width:74%;max-height:82%}
.workWallFooter{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:18px;padding-top:15px;border-top:1px solid var(--pf-line);font-size:11px}
.workWallFooter p{margin:0}.workWallFooter a{font-weight:850}

/* 03 — development: one dominant board, two supporting boards below. */
.developmentSection{padding:82px 0;background:var(--pf-bg)}
.developmentIntro{display:grid;grid-template-columns:1fr .72fr;gap:46px;align-items:end;margin-bottom:26px}
.developmentIntroTitle h2{font-size:clamp(42px,4.4vw,64px);line-height:.96;max-width:680px;margin-bottom:0}
.developmentIntroNote{border-left:2px solid var(--pf-gold);padding-left:18px}
.developmentIntroNote strong{display:block;font-size:14px;margin-bottom:6px}.developmentIntroNote p{font-size:12px;margin:0}
.developmentRail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
.developmentRail figure{margin:0;background:var(--pf-card);border:1px solid var(--pf-line);border-radius:16px;overflow:hidden;box-shadow:var(--pf-shadow)}
.developmentRail figure:first-child{grid-column:auto}
.developmentRail img{width:100%;aspect-ratio:16/9;object-fit:contain;background:#fff}
.developmentRail figure:first-child img{max-height:none}
.developmentRail figcaption{display:flex;justify-content:space-between;gap:12px;padding:11px 13px;font-size:10px}.developmentRail figcaption span{color:var(--pf-muted)}

/* 04 — motion: controlled cinematic stage */
.motionSection{padding:86px 0;background:var(--pf-dark);color:var(--pf-light)}
.motionHeader{display:grid;grid-template-columns:1fr .62fr;gap:48px;align-items:end;margin-bottom:26px}
.motionHeader h2{font-size:clamp(44px,4.6vw,66px);line-height:.95;margin-bottom:0;max-width:680px}.motionHeader>p{color:#c2baae;font-size:15px;line-height:1.62;margin:0 0 6px;max-width:430px;justify-self:end}
.motionGrid{display:grid;grid-template-columns:1.5fr .5fr;gap:16px;align-items:stretch}
.motionCard{margin:0}.motionFrame{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#060606;border:1px solid rgba(255,255,255,.1)}
.motionFrame video{width:100%;height:100%;object-fit:contain;background:#050505}.motionToggle{position:absolute;right:12px;bottom:12px;border:0;border-radius:999px;background:#fff;color:#111;padding:7px 11px;font-size:10px;font-weight:900;cursor:pointer}
.motionMeta{display:flex;justify-content:space-between;gap:18px;padding:10px 3px 0;font-size:10px}.motionMeta span{color:#aaa398}
.motionPrinciples{background:var(--pf-dark-card);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:24px;display:flex;flex-direction:column}
.motionPrinciples h3{font-size:30px;line-height:1;letter-spacing:-.035em;margin:0 0 14px}.motionPrinciples>p:not(.eyebrow){color:#c1b9ad;font-size:14px;line-height:1.55}
.motionPrincipleSteps{display:grid;gap:9px;margin-top:8px}.motionPrincipleSteps>div{display:grid;grid-template-columns:24px 1fr;gap:3px 8px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1)}.motionPrincipleSteps span{grid-row:1/3;color:var(--pf-gold);font-size:10px;font-weight:900}.motionPrincipleSteps strong{font-size:14px}.motionPrincipleSteps small{color:#a69e92;font-size:12px;line-height:1.45}
.motionBackLink{margin-top:auto;padding-top:18px;color:var(--pf-gold-2);font-size:13px;font-weight:850}

/* 05 — application: title + explanation above, media gets the visual weight. */
.applicationSection{padding:82px 0;background:var(--pf-bg-2)}
.applicationGrid{display:block}
.applicationCopy{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:end;margin-bottom:26px}
.applicationHeading h2{font-size:clamp(42px,4.45vw,64px);line-height:.96;margin-bottom:0;max-width:570px}
.applicationDetail{max-width:650px;justify-self:end}.applicationDetail p{font-size:13px;margin-bottom:16px}.applicationNotes{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--pf-line);border-bottom:1px solid var(--pf-line)}
.applicationNotes li{padding:12px 12px;font-size:11px;font-weight:750}.applicationNotes li+li{border-left:1px solid var(--pf-line)}
.applicationMedia{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.applicationPresentation{margin:0;background:var(--pf-card);border:1px solid var(--pf-line);border-radius:16px;overflow:hidden;box-shadow:var(--pf-shadow)}
.applicationPresentation img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff}.applicationPresentation figcaption{padding:11px 13px 13px}.applicationPresentation figcaption strong{display:block;font-size:11px;margin-bottom:3px}.applicationPresentation figcaption span{font-size:10px;color:var(--pf-muted)}

/* 06 — decision guidance: compact, wide, balanced. */
.portfolioQuestions{padding:78px 0;background:var(--pf-bg)}
.portfolioQuestionsGrid{display:block}
.portfolioQuestionsIntro{display:grid;grid-template-columns:.85fr 1.15fr;gap:54px;align-items:end;margin-bottom:24px}
.portfolioQuestionsIntro h2{font-size:clamp(40px,4.15vw,60px);line-height:.96;margin-bottom:0;max-width:620px}.portfolioQuestionsIntro p{font-size:12px;margin:0}.portfolioQuestionsIntro>a{display:inline-block;margin-top:8px;font-size:11px;font-weight:850;border-bottom:1px solid currentColor}
.portfolioQuestionList{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.portfolioQuestionList details{background:var(--pf-card);border:1px solid var(--pf-line);border-radius:13px;overflow:hidden}.portfolioQuestionList details:last-child{grid-column:1/-1}.portfolioQuestionList summary{cursor:pointer;list-style:none;padding:14px 40px 14px 15px;font-size:12px;font-weight:850;position:relative}.portfolioQuestionList summary::-webkit-details-marker{display:none}.portfolioQuestionList summary::after{content:'+';position:absolute;right:15px;top:12px;color:var(--pf-gold);font-size:17px}.portfolioQuestionList details[open] summary::after{content:'–'}.portfolioQuestionList details p{padding:0 15px 14px;margin:0;font-size:11px;line-height:1.5}

/* Final CTA — one centered conclusion, no large dead left/right zones. */
.portfolioDecision{padding:24px 0 68px;background:var(--pf-bg)}
.portfolioDecisionPanel{background:var(--pf-dark);color:var(--pf-light);border-radius:22px;padding:38px;box-shadow:0 22px 50px rgba(0,0,0,.12)}
.decisionLead{display:grid;justify-items:center;text-align:center;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.12)}
.decisionLeadCopy{max-width:820px}.decisionLead h2{font-size:clamp(38px,4.1vw,56px);line-height:.96;margin-bottom:12px}.decisionLead p{color:#c0b8ac;margin:0 auto;max-width:760px;font-size:15px;line-height:1.55}.decisionActions{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:18px}.portfolioDecision .buttonPrimary{background:#fff;color:#111;border-color:#fff}.portfolioDecision .buttonSecondary{background:transparent;border-color:rgba(255,255,255,.46);color:#fff}@media (hover:hover){.portfolioDecision .buttonPrimary:hover{background:var(--pf-gold-2);border-color:var(--pf-gold-2);transform:translateY(-2px)}.portfolioDecision .buttonSecondary:hover{background:#fff;color:#111;transform:translateY(-2px)}}
.decisionFacts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:20px;border:1px solid rgba(255,255,255,.12);border-radius:14px;overflow:hidden}.decisionFacts>div{padding:15px}.decisionFacts>div+div{border-left:1px solid rgba(255,255,255,.12)}.decisionFacts span,.decisionFacts small{display:block;color:#a69e92;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.decisionFacts strong{display:block;font-size:17px;line-height:1.25;margin-top:7px}.decisionFacts small{margin-top:6px;text-transform:none;letter-spacing:0;line-height:1.45;font-size:11px}
.portfolioOffers{margin-top:14px;border-top:1px solid rgba(255,255,255,.1);padding-top:12px}.portfolioOffers summary{cursor:pointer;font-size:13px;font-weight:850;color:#eee7dc}.portfolioOffers div{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}.portfolioOffers p{font-size:12px;line-height:1.5;color:#b4ac9f;margin:0}.decisionPolicy{font-size:12px;margin:12px 0 0}.decisionPolicy a{color:var(--pf-gold-2)}

/* Dark theme: presentation surfaces adapt while original artwork stays unchanged. */
.portfolioMain.portfolioThemeDark .portfolioHero,.portfolioMain.portfolioThemeDark .portfolioHighlights,.portfolioMain.portfolioThemeDark .workWallSection,.portfolioMain.portfolioThemeDark .developmentSection,.portfolioMain.portfolioThemeDark .portfolioQuestions,.portfolioMain.portfolioThemeDark .portfolioDecision{background:var(--pf-bg)}
.portfolioMain.portfolioThemeDark .applicationSection{background:var(--pf-bg-2)}
.portfolioMain.portfolioThemeDark .workSurface.soft,.portfolioMain.portfolioThemeDark .workSurface.blue,.portfolioMain.portfolioThemeDark .workSurface.cool{background:#f7f7f3}

/* Reveal */
.portfolioMain.js-ready [data-reveal-section]{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}.portfolioMain.js-ready [data-reveal-section].is-visible{opacity:1;transform:none}

@media (max-width:980px){
  .portfolioHeroGrid,.featureCaseGrid,.motionHeader{grid-template-columns:1fr;gap:30px}
  .portfolioHeroReel{max-width:760px}.portfolioHeroCopy h1{max-width:700px}
  .portfolioHighlightsGrid{grid-template-columns:1fr 1fr}.portfolioHighlight{min-height:160px}
  .workWallIntro,.developmentIntro,.applicationCopy,.portfolioQuestionsIntro{grid-template-columns:1fr;gap:20px}
  .applicationDetail{justify-self:start;max-width:none}
  .workWall{grid-template-columns:repeat(2,minmax(0,1fr))}.tileBeans{grid-column:1/-1}.tileBeans .workSurface{aspect-ratio:2/1}
  .developmentRail{grid-template-columns:1fr 1fr}.developmentRail figure:first-child{grid-column:1/-1}
  .motionGrid{grid-template-columns:1fr}.motionPrinciples{min-height:auto}.motionBackLink{margin-top:16px}
  .decisionFacts{grid-template-columns:1fr 1fr}.decisionFacts>div:nth-child(3){border-left:0;border-top:1px solid rgba(255,255,255,.12)}.decisionFacts>div:nth-child(4){border-top:1px solid rgba(255,255,255,.12)}
}

@media (max-width:680px){
  .portfolioMain .container,.workWall{width:min(calc(100% - 28px),var(--pf-max))}
  .portfolioHero{padding:50px 0 26px}.portfolioHeroCopy h1{font-size:48px}.portfolioLead{font-size:14px}.portfolioHeroActions{gap:8px}
  .portfolioHighlights{padding-bottom:30px}.portfolioHighlightsGrid{grid-template-columns:1fr}.portfolioHighlight{min-height:0;padding:20px}.portfolioHighlightKicker{font-size:24px}
  .featureCase,.motionSection{padding:68px 0}.featureCaseCopy h2,.motionHeader h2{font-size:44px}.featureCaseMedia{padding:9px;border-radius:14px}
  .workWallSection,.developmentSection,.applicationSection,.portfolioQuestions{padding:62px 0}.workWallIntroTitle h2,.developmentIntroTitle h2,.applicationHeading h2,.portfolioQuestionsIntro h2{font-size:42px}
  .workWall{grid-template-columns:1fr 1fr;gap:9px}.tileBeans{grid-column:1/-1}.workSurface{padding:12px}.tileBeans .workSurface{aspect-ratio:2/1}.workTile figcaption{display:block}.workTile figcaption span{display:block;text-align:left;margin-top:3px}.workWallFooter{align-items:flex-start;flex-direction:column}
  .developmentRail{grid-template-columns:1fr}.developmentRail figure:first-child{grid-column:auto}
  .motionHeader{gap:16px}.motionGrid{gap:10px}.motionPrinciples{padding:20px}.motionPrinciples h3{font-size:28px}
  .applicationNotes{grid-template-columns:1fr}.applicationNotes li+li{border-left:0;border-top:1px solid var(--pf-line)}.applicationMedia{grid-template-columns:1fr}
  .portfolioQuestionList{grid-template-columns:1fr}.portfolioQuestionList details:last-child{grid-column:auto}
  .portfolioDecision{padding:16px 0 48px}.portfolioDecisionPanel{padding:24px 18px;border-radius:18px}.decisionLead h2{font-size:38px}.decisionFacts{grid-template-columns:1fr}.decisionFacts>div+div{border-left:0;border-top:1px solid rgba(255,255,255,.12)}.portfolioOffers div{grid-template-columns:1fr}
}


/* V32 — consistency with the locked About/global visual system. */
.workWall,.developmentRail,.applicationMedia{align-items:stretch}
.applicationPresentation{display:grid;grid-template-rows:minmax(0,1fr) auto}
.applicationPresentation img{height:100%;min-height:0}
.motionPrinciples{height:100%}

@media (prefers-reduced-motion:reduce){
  .portfolioMain *{scroll-behavior:auto!important;animation:none!important;transition:none!important}.portfolioMain.js-ready [data-reveal-section]{opacity:1;transform:none}.portfolioMain.js-ready .portfolioHighlights .portfolioHighlight{opacity:1;transform:none}
}

/* V31 final visual QA — density, alignment and cross-theme polish. */
@media (min-width:981px){
  .workWallSection{padding:70px 0 64px}
  .developmentSection{padding:70px 0 72px}
  .motionSection{padding:74px 0}
  .applicationSection{padding:70px 0 72px}
  .portfolioQuestions{padding:68px 0 58px}
  .portfolioDecision{padding:12px 0 58px}

  .workWallIntro{grid-template-columns:minmax(0,1.05fr) minmax(320px,.58fr);margin-bottom:22px}
  .workWallIntroNote{max-width:430px;justify-self:end}

  .developmentIntro{grid-template-columns:minmax(0,1fr) minmax(330px,.56fr);margin-bottom:20px}
  .developmentIntroNote{max-width:430px;justify-self:end}
  .developmentRail{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .developmentRail figure{min-width:0}
  .developmentRail figure:first-child{grid-column:auto;grid-row:auto}
  .developmentRail figure:first-child img{height:auto;min-height:0;max-height:none;object-fit:contain}
  .developmentRail figure:nth-child(2),.developmentRail figure:nth-child(3){grid-column:auto;grid-row:auto}

  .motionHeader{margin-bottom:20px}
  .motionGrid{grid-template-columns:minmax(0,1.62fr) minmax(270px,.38fr)}
  .motionPrinciples{padding:21px}

  .applicationCopy{grid-template-columns:.72fr 1.28fr;gap:48px;margin-bottom:20px}
  .applicationDetail{max-width:720px}
  .applicationMedia{gap:12px}

  .portfolioQuestionsIntro{grid-template-columns:minmax(330px,.68fr) minmax(0,1.32fr);gap:42px;align-items:start;margin-bottom:20px}
  .portfolioQuestionsIntro .eyebrow{grid-column:1;grid-row:1;margin-bottom:5px}
  .portfolioQuestionsIntro h2{grid-column:1;grid-row:2;max-width:470px;font-size:clamp(38px,3.65vw,54px)}
  .portfolioQuestionsIntro p:not(.eyebrow){grid-column:1;grid-row:3;max-width:450px}
  .portfolioQuestionsIntro>a{grid-column:1;grid-row:4;justify-self:start}
  .portfolioQuestionList{grid-column:2;grid-row:1/5;align-self:stretch}
  .portfolioQuestionsGrid{display:grid;grid-template-columns:minmax(330px,.68fr) minmax(0,1.32fr);gap:42px;align-items:start}
  .portfolioQuestionsGrid>.portfolioQuestionsIntro{display:contents}
  .portfolioQuestionList details:last-child{grid-column:auto}

  .portfolioDecisionPanel{padding:32px 36px}
  .decisionLead{padding-bottom:20px}
  .decisionLead h2{max-width:820px}
  .decisionFacts{margin-top:16px}
}

/* Keep the dark theme intentional: artwork stays original, UI surfaces gain separation. */
.portfolioMain.portfolioThemeDark .workTile,
.portfolioMain.portfolioThemeDark .workWallIntroNote,
.portfolioMain.portfolioThemeDark .developmentRail figure,
.portfolioMain.portfolioThemeDark .applicationPresentation,
.portfolioMain.portfolioThemeDark .portfolioQuestionList details{
  border-color:rgba(255,255,255,.13);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}
.portfolioMain.portfolioThemeDark .developmentIntroNote{border-left-color:var(--pf-gold)}
.portfolioMain.portfolioThemeDark .portfolioDecisionPanel{border:1px solid rgba(255,255,255,.08)}

@media (max-width:980px){
  .workWallSection,.developmentSection,.applicationSection,.portfolioQuestions{padding:58px 0}
  .motionSection{padding:62px 0}
  .portfolioDecision{padding:12px 0 46px}
  .portfolioQuestionsIntro{margin-bottom:18px}
}

@media (max-width:680px){
  .portfolioHero{padding-top:42px}
  .portfolioHeroGrid{gap:22px}
  .portfolioHeroCopy h1{font-size:clamp(39px,12vw,48px);line-height:.94;margin-bottom:13px}
  .portfolioHeroReel figcaption{font-size:9px}
  .portfolioHighlightsGrid{border-bottom:0}
  .portfolioHighlight{padding:14px 8px 15px}
  .featureCase,.motionSection{padding:54px 0}
  .featureCaseCopy h2,.motionHeader h2{font-size:clamp(37px,11vw,44px)}
  .featureCaseGrid{gap:22px}
  .workWallSection,.developmentSection,.applicationSection,.portfolioQuestions{padding:50px 0}
  .workWallIntro,.developmentIntro,.applicationCopy,.portfolioQuestionsIntro{margin-bottom:18px}
  .workWallIntroTitle h2,.developmentIntroTitle h2,.applicationHeading h2,.portfolioQuestionsIntro h2{font-size:clamp(35px,10.6vw,42px);line-height:.96}
  .workWallIntroNote{padding:14px 15px}
  .workWall{gap:7px}
  .developmentRail{gap:9px}
  .motionGrid{gap:12px}
  .motionPrinciples{padding:18px}
  .applicationMedia{gap:9px}
  .portfolioQuestionList{gap:7px}
  .portfolioQuestionList summary{padding:12px 36px 12px 13px;font-size:11px}
  .portfolioDecisionPanel{padding:22px 16px}
  .decisionLead h2{font-size:clamp(31px,9.5vw,38px)}
  .decisionActions{width:100%}
  .decisionActions .buttonPrimary,.decisionActions .buttonSecondary{width:100%}
}