/* ASTRA MOTION company page (WP4: spec §5, §9, §10.2, §4.3, §14.4). Loaded last. Hidden states live only
   under html.fx; page.js adds .is-in/.is-lit/.is-done. !important only in print. Upper bounds .98 (E-49). */

/* E-24: UA margins in the new markup (zero specificity). */
:where(.pg,.pg-footer) :where(figure,dl,dd,h4){margin:0}
:where(.pg,.pg-footer) :where(ol,ul){margin:0;padding:0;list-style:none}
/* E-29: the JA voice on the page at (0,1,0); component rules written later win. */
:where(.pg,.pg-footer) [lang=ja],.pg-ja{font-size:var(--fs-ja);line-height:var(--lh-cjk);letter-spacing:.06em;color:var(--text-3)}
.pg-ja{margin-top:12px}

/* §14.4: without the engine there is no inquiry dialog and no motion toggle. */
html:is(:not(.js),.static-fallback) [data-inquiry]{display:none}
html:is(:not(.js),.static-fallback) #motion,html:is(:not(.js),.static-fallback) .site-header #motion{display:none}
html:is(:not(.js),.static-fallback) .pg-howto{display:none}

/* §5: page grid */
.pg-wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
@media (min-width:900px){
  .pg-wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap)}
  .pg-wrap>*{grid-column:1/-1}
}

/* §9.1 sections; E-33 neutralises the contract classes at (0,2,0) */
.pg{position:relative;isolation:isolate;overflow:clip;padding:var(--section-y) 0;background:var(--stage);border-top:1px solid var(--line-1);scroll-margin-top:var(--header-h);text-align:left}
.pg.studio-section,.pg.contact-section,.pg.work-collection{position:relative;z-index:auto;isolation:isolate;overflow:clip;margin:0;padding:var(--section-y) 0;background:var(--stage);border-top:1px solid var(--line-1);text-align:left}
.pg::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--pg-light,none)}
.fx .pg::before{opacity:0;transition:opacity var(--d-7) var(--ease-std)}
.fx .pg.is-lit::before{opacity:1}
.pg-glance{--pg-light:radial-gradient(70% 55% at 12% 0%,rgba(243,241,233,.06),transparent 70%);border-top:0;padding-top:clamp(120px,14vw,200px)}
.pg-studio{--pg-light:radial-gradient(60% 50% at 0% 30%,rgba(117,191,232,.12),transparent 70%)}
.pg-work{--pg-light:radial-gradient(55% 40% at 90% 0%,rgba(227,203,145,.10),transparent 70%)}
.pg-services{--pg-light:radial-gradient(60% 50% at 100% 20%,rgba(219,238,255,.08),transparent 70%)}
.pg-process{--pg-light:radial-gradient(60% 50% at 100% 100%,rgba(255,207,137,.10),transparent 70%)}
/* E-32: focus. #bloom-featured keeps its legacy gold rings. */
:is(.pg,.pg-footer) :is(a,button,summary):not(.pg-feature *):focus-visible{outline:2px solid var(--focus);outline-offset:4px}
:is(.pg,.pg-feature,.pg-celea,.pg-reserved):focus{outline:none}
/* E-34: scroll margins (Lenis reads scroll-margin-top as its offset). */
.pg-reserved{scroll-margin-top:calc(var(--header-h) + 24px)}
@media (max-width:899.98px){html:not(.js) :is(.pg,.pg-reserved,.pg-celea,.pg-feature){scroll-margin-top:112px}}

/* §4.1: type roles */
.pg .pg-display{font:300 var(--fs-display)/var(--lh-display) var(--font-sans);letter-spacing:var(--tr-display);color:var(--text-1)}
.pg .pg-mega{font:300 var(--fs-mega)/.98 var(--font-sans);letter-spacing:-.05em;color:var(--text-1)}
:is(.pg-display,.pg-mega) em{font-family:var(--font-serif);font-weight:400;letter-spacing:var(--tr-serif)}
:is(.pg-display,.pg-mega)+.pg-ja{margin-top:20px}
/* Phones: the --fs-display (42px) and --fs-mega (56px) floors are wider than the column, so masked lines would re-wrap with orphans. */
@media (max-width:599.98px){.pg .pg-display{font-size:clamp(26px,8.4vw,42px)}.pg .pg-mega{font-size:clamp(36px,10.6vw,56px)}}
.slate,.pg-label{font:400 12px/1.5 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.pg-label [lang=ja]{margin-left:12px;font:400 13px/1.5 var(--font-ja);letter-spacing:.06em;text-transform:none}
.pg-lede{max-width:34em;font:400 var(--fs-lede)/1.6 var(--font-sans);color:var(--text-2);text-wrap:pretty}
.pg-body{max-width:38em;font:400 var(--fs-body)/var(--lh-body) var(--font-sans);color:var(--text-2);text-wrap:pretty}
.pg-fact{font:400 var(--fs-fact)/1.4 var(--font-sans);letter-spacing:-.015em;color:var(--text-1)}
.pg-gloss{font-size:13px;line-height:1.6;color:var(--text-3)}
/* E-30: Korean on the page; #bloom-featured (itself lang=ko) keeps its Manrope-first stack. */
.pg [lang=ko]:not(.pg-feature){font-family:var(--font-ko);word-break:keep-all;letter-spacing:-.01em}

/* §9.1: slate */
.slate{display:flex;align-items:center;gap:14px;margin-bottom:clamp(32px,4vw,56px)}
.slate-n{color:var(--text-1)}
.slate-rule{flex:0 0 clamp(48px,8vw,120px);height:1px;background:var(--line-2);transform-origin:0 50%}
.slate-ja{font:400 13px/1 var(--font-ja);letter-spacing:.06em;text-transform:none}

/* §9.1: masked headline lines (the member-name technique) */
.ln{display:block;overflow:hidden;padding:0 .04em .2em;margin-bottom:-.2em}
.ln>span{display:block}

/* §9.1: credits with end-credit leaders */
.pg-credits{margin:0}
.pg-credits>div{display:flex;align-items:baseline;gap:16px}
.pg-credits dt{flex:1;display:flex;align-items:baseline;gap:16px;font:400 12px/1.5 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.pg-credits dt::after{content:"";flex:1;border-bottom:1px dotted var(--line-2);transform:translateY(-4px)}
.pg-credits dd{margin:0;font:500 var(--fs-credit)/1.2 var(--font-sans);letter-spacing:var(--tr-credit);text-transform:uppercase;color:var(--text-1)}
@media (max-width:599.98px){.pg-credits>div{display:block}.pg-credits dt::after{display:none}.pg-credits dd{margin-top:6px}}

/* §4.2 actions (.pg-button is global: the menu sheet uses it) */
.pg-button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:56px;padding:0 28px;border:0;border-radius:var(--r-1);background:var(--text-1);color:var(--stage);font:600 15px/1 var(--font-sans);letter-spacing:0;white-space:nowrap;text-decoration:none;transition:background-color var(--d-1) var(--ease-std),transform var(--d-1) var(--ease-std)}
.pg-button:hover{background:#fff;transform:translateY(-2px)}
.pg-button:active{transform:none}
:is(.pg-service-cta,.pg-copy,.pg-textbtn){background:none;letter-spacing:inherit}
.pg-service-cta,.pg-copy{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--line-3);border-radius:var(--r-pill);color:var(--text-1);white-space:nowrap;transition:border-color var(--d-1) var(--ease-std),background-color var(--d-1) var(--ease-std)}
.pg-service-cta{gap:10px;padding:0 16px;font:500 14px/1 var(--font-sans)}
.pg-copy{gap:8px;min-width:44px;padding:0 14px;font:500 13px/1 var(--font-sans)}
:is(.pg-service-cta,.pg-copy):hover{border-color:var(--text-1);background:rgba(243,241,233,.06)}
.pg-link,.pg-card-film{display:inline-flex;gap:10px;align-items:center;min-height:44px;border-bottom:1px solid var(--line-3);color:var(--text-1);font:500 14px/1 var(--font-sans);text-decoration:none;transition:border-color var(--d-1) var(--ease-std)}
.pg-textbtn{padding:0;text-align:left}
:is(.pg-link,.pg-card-film):hover{border-bottom-color:var(--text-1)}
/* Arrow rule (§4.2): down/up moves on the page, north-east opens something */
:is(.pg-link,.pg-card-film,.pg-button,.pg-service-cta) .i{transition:transform var(--d-1) var(--ease-std)}
:is(.pg-button,.pg-service-cta):is(:hover,:focus-visible) .i{transform:translate(2px,-2px)}
:is(.pg-link,.pg-card-film):is(:hover,:focus-visible) .i:has(use[href="#i-ne"]){transform:translate(2px,-2px)}
:is(.pg-link,.pg-card-film):is(:hover,:focus-visible) .i:has(use[href="#i-down"]){transform:translateY(2px)}
:is(.pg-link,.pg-card-film):is(:hover,:focus-visible) .i:has(use[href="#i-up"]){transform:translateY(-2px)}

/* §9.2: At a glance */
.pg-sentinel{position:absolute;top:0;left:0;width:100%;height:1px;pointer-events:none}
.pg-aurora{position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--earth) 20%,var(--moon) 50%,var(--sun) 80%,transparent);opacity:.7;transform-origin:50% 50%;pointer-events:none}
.pg-glance-cols{display:grid;gap:40px;margin-top:var(--s-8)}
.pg-glance-col{position:relative;display:flex;flex-direction:column;gap:12px;padding-top:24px}
.pg-glance-col::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line-2);transform-origin:0 50%}
.pg-glance-col .pg-label{margin-bottom:4px}
.pg-glance-col>.pg-ja{margin-top:-4px}
.pg-glance-col>.pg-ja+.pg-body{margin-top:8px}
.pg-glance-col>.pg-link{align-self:flex-start;margin-top:auto;padding-top:12px}
.pg-award-ko{font-weight:600;color:var(--text-warm)}
.pg-celea-word{letter-spacing:.16em}
.pg-glance-actions{display:flex;flex-direction:column;align-items:stretch;gap:20px;margin-top:var(--s-8)}
.pg-glance-actions>.pg-link{align-self:flex-start}
@media (min-width:900px){
  .pg-glance .pg-display{grid-column:1/11}
  .pg-glance-ja{grid-column:1/9}
  .pg-glance-cols{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap);margin-top:var(--s-9)}
  .pg-glance-actions{flex-direction:row;align-items:center;gap:28px}
}

/* §9.3: 01 Studio */
.pg-studio-body .pg-body{margin-top:var(--s-5)}
.pg-studio-body .pg-credits{margin-top:var(--s-6)}
.pg-credits+.pg-ja{margin-top:8px}
.pg-photo{position:relative}
.pg-photo-frame{position:relative;aspect-ratio:1049/1500;overflow:hidden;background:var(--stage-2)}
.pg-photo-frame img{display:block;width:100%;height:100%;object-fit:cover}
.pg-photo figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin-top:16px;font:400 12px/1.5 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.pg-photo figcaption [lang=ja]{font:400 13px/1.5 var(--font-ja);letter-spacing:.06em;text-transform:none}
/* The LYRA window: the page's only clip-path animation. */
.pg-photo-diamond{position:absolute;left:100%;top:0;width:10px;height:10px;margin:-19px 0 0 9px;background:var(--text-1);transform:rotate(45deg)}
.fx .pg-photo:not(.is-in) .pg-photo-frame{clip-path:polygon(20% 64.95%,44.93% 35.05%,80% 35.05%,55.27% 64.95%)}
.fx .pg-photo .pg-photo-frame{clip-path:polygon(0% 100%,0% 0%,100% 0%,100% 100%);transition:clip-path 1200ms var(--ease-expo)}
.fx .pg-photo.is-done .pg-photo-frame{clip-path:none;transition:none}
.fx .pg-photo:not(.is-in) .pg-photo-frame img{opacity:.55}
.fx .pg-photo .pg-photo-frame img{transition:opacity 1200ms var(--ease-std)}
.fx .pg-photo:not(.is-in) .pg-photo-diamond{transform:translate(var(--lyra-dx,0px),var(--lyra-dy,0px)) rotate(45deg) scale(var(--lyra-s,1))}
.fx .pg-photo.is-in .pg-photo-diamond{transition:transform 1200ms var(--ease-expo) 120ms}
@media (max-width:899.98px){.pg-photo{margin-block:var(--s-7)}}
@media (min-width:900px){
  .pg-studio-grid{grid-template-rows:auto 1fr}
  .pg-photo{grid-column:1/7;grid-row:1/3;align-self:start}
  .pg-studio-head{grid-column:7/13;grid-row:1}
  .pg-studio-body{grid-column:7/13;grid-row:2;align-self:end}
  .pg-studio-body .pg-credits{margin-top:var(--s-7)}
}
@media (min-width:1200px){.pg-photo{grid-column:1/6}}

/* §9.4: 02 Work */
.pg-work-index{margin-top:var(--s-6)}
.pg-work-index a{display:grid;gap:4px;min-height:56px;padding:12px 0;border-top:1px solid var(--line-1);text-decoration:none;transition:border-color var(--d-2) var(--ease-std)}
.pg-work-index li:last-child a{border-bottom:1px solid var(--line-1)}
.pg-work-index-name{font:500 16px/1.4 var(--font-sans);color:var(--text-1)}
@media (hover:hover) and (pointer:fine){.pg-work-index a:hover{border-top-color:var(--line-3)}}
@media (min-width:900px){
  .pg-work-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap)}
  /* Cols 1–9 (spec: 1–8) so "The same imagination." fits its mask on one line at every width. */
  .pg-work-head>.pg-display{grid-column:1/10;grid-row:1}
  .pg-work-head>.pg-ja{grid-column:1/10;grid-row:2}
  .pg-work-index{grid-column:10/13;grid-row:1/3;align-self:end;margin-top:0}
}

/* §9.4a award film, scoped under .pg-feature to beat featured-film.css */
.featured-film.pg-feature{margin:var(--s-9) 0 0;padding:0 0 var(--s-8);border-bottom:1px solid var(--line-1);scroll-margin-top:calc(var(--header-h) + 24px)}
.pg-award{display:flex;align-items:center;gap:14px;color:var(--gold)}
.pg-award>span{display:grid;gap:4px;min-width:0}
.pg-award strong{font:600 17px/1.5 var(--font-ko);letter-spacing:-.01em;color:var(--text-warm)}
.pg-award .pg-gloss{font-family:var(--font-sans)}
.pg-gate{--tick:linear-gradient(var(--line-3),var(--line-3));position:relative;margin-top:var(--s-6);padding:12px;background:var(--tick) 0 0/16px 1px,var(--tick) 0 0/1px 16px,var(--tick) 100% 0/16px 1px,var(--tick) 100% 0/1px 16px,var(--tick) 0 100%/16px 1px,var(--tick) 0 100%/1px 16px,var(--tick) 100% 100%/16px 1px,var(--tick) 100% 100%/1px 16px;background-repeat:no-repeat}
.pg-frame{width:100%}
.pg-techline{margin-top:16px;font:400 12px/1.6 var(--font-mono);letter-spacing:.14em;color:var(--text-3)}
.pg-feature-credits{margin-top:var(--s-7)}
.pg-feature .film-category{margin:0 0 16px;font:400 12px/1.5 var(--font-mono);letter-spacing:.16em;color:var(--text-3)}
.pg-feature .featured-copy h3{font:400 var(--fs-ko-title)/1.2 var(--font-ko-title);letter-spacing:-.04em;color:var(--text-warm)}
.pg-feature .film-logline{margin-top:20px;font-size:18px;line-height:1.8;letter-spacing:-.01em;color:var(--text-1)}
.pg-feature .film-synopsis{margin-top:0;max-width:34em;font:400 var(--fs-body)/1.9 var(--font-ko);letter-spacing:-.01em;color:var(--text-2)}
.pg-feature .film-credits{margin:0;gap:20px 24px}
.pg-feature .film-credits dt{margin-bottom:6px;font:400 12px/1.5 var(--font-mono);letter-spacing:.14em;color:var(--text-3)}
.pg-feature .film-credits dd{font-size:15px;line-height:1.5;color:var(--text-1)}
.pg-feature .film-play-symbol{transition:opacity var(--d-1) var(--ease-std),background-color .16s ease}
/* §4.3 floors (E-31: every row prefixed with .pg-feature). */
.pg-feature :is(.film-poster-caption,.film-play-prompt,.note-label){font-size:12px}
.pg-feature :is(.note-spoiler,.film-new-tab,.film-player-source,.film-player-status){font-size:13px}
.pg-feature .film-watch>span:not([aria-hidden]):not(.film-action-label){font-size:13px}
.pg-feature .film-player-source{display:inline-flex;align-items:center;min-height:44px;padding-block:0}
@media (min-width:900px){
  .pg-feature-credits{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:start}
  .pg-feature .featured-copy{grid-column:1/6}
  .pg-feature-story{grid-column:6/10}
  .pg-feature .film-credits{grid-column:10/13;flex-direction:column;gap:20px}
}
@media (max-width:899.98px){
  .pg-gate{padding:0;background:none;margin-inline:calc(var(--gutter)*-1)}
  .pg-feature .pg-frame{border-inline-width:0}
  .pg-feature-credits{display:grid;gap:var(--s-6)}
  .pg-feature .featured-copy h3{font-size:40px}
  .pg-feature .film-credits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Projector gate (transform only). */
.fx .pg-gate::before,.fx .pg-gate::after{content:"";position:absolute;left:12px;right:12px;height:calc(50% - 11px);z-index:6;background:var(--stage);pointer-events:none;transition:transform 1100ms var(--ease-wipe) 150ms}
.fx .pg-gate::before{top:12px;transform-origin:50% 0}
.fx .pg-gate::after{bottom:12px;transform-origin:50% 100%}
.fx .pg-gate.is-in::before,.fx .pg-gate.is-in::after{transform:scaleY(0)}
@media (max-width:899.98px){.fx .pg-gate::before,.fx .pg-gate::after{left:0;right:0;height:50.5%}.fx .pg-gate::before{top:0}.fx .pg-gate::after{bottom:0}}
/* 재생 · PLAY cursor disc (page.js, fine pointers, .fx only) */
.pg-play-cursor{position:absolute;left:0;top:0;z-index:4;width:104px;height:104px;margin:-52px 0 0 -52px;pointer-events:none}
.pg-play-disc{display:grid;place-content:center;gap:2px;width:100%;height:100%;border-radius:50%;border:1px solid rgba(243,241,233,.5);background:rgba(5,6,8,.35);text-align:center;opacity:0;transform:scale(.6);transition:opacity 180ms,transform 450ms var(--ease-expo)}
.has-cursor .pg-play-disc{opacity:1;transform:scale(1)}
.pg-play-disc [lang=ko]{font:500 15px/1.2 var(--font-ko);color:var(--text-1)}
.pg-play-disc .pg-play-en{font:400 12px/1 var(--font-mono);letter-spacing:.16em;color:var(--text-2)}
.pg-feature .film-player-shell.has-cursor .film-play-symbol{opacity:0}
.pg-feature [data-player-state=open] .pg-play-cursor,.pg-feature [data-player-state=loading] .pg-play-cursor,html:not(.fx) .pg-play-cursor{display:none}
@media (hover:none),(pointer:coarse),(pointer:none){.pg-play-cursor{display:none}}

/* §9.4b: CELEA (E-25, E-26) */
.pg-celea{position:relative;isolation:isolate;margin-top:var(--s-9);scroll-margin-top:calc(var(--header-h) + 24px)}
.pg-celea-lights{position:absolute;inset:-8% 0;z-index:-1;pointer-events:none}
.pg-celea-lights>i{position:absolute;inset:0;opacity:0;transition:opacity var(--d-4) var(--ease-std)}
.pg-celea-lights>[data-for=trio]{opacity:1;background:radial-gradient(50% 40% at 10% 40%,rgba(117,191,232,.08),transparent 70%),radial-gradient(45% 40% at 92% 35%,rgba(255,207,137,.08),transparent 70%)}
.pg-celea-lights>[data-for=haruka]{background:radial-gradient(60% 50% at 50% 70%,rgba(117,191,232,.14),transparent 70%)}
.pg-celea-lights>[data-for=luna]{background:radial-gradient(60% 50% at 50% 70%,rgba(219,238,255,.10),transparent 70%)}
.pg-celea-lights>[data-for=sol]{background:radial-gradient(60% 50% at 50% 70%,rgba(255,207,137,.14),transparent 70%)}
.pg-celea[data-member-light=haruka] [data-for=haruka],.pg-celea[data-member-light=luna] [data-for=luna],.pg-celea[data-member-light=sol] [data-for=sol]{opacity:1}
.pg-celea[data-member-light] [data-for=trio]{opacity:.35}
/* The name is plain web text (§2 rule 7): no mark, orbit or SVG. */
.pg-celea-name{margin-top:12px;padding-left:.16em;font:300 var(--fs-title)/1 var(--font-sans);letter-spacing:.16em;color:var(--text-1)}
.pg-celea-def{margin-top:var(--s-5)}
.pg-celea-def .pg-body{margin-top:12px}
.pg-celea-key{margin-top:var(--s-7);overflow:hidden;aspect-ratio:16/9;background:var(--stage-2)}
.pg-wipe{position:relative;height:100%;overflow:hidden}
.pg-wipe img{display:block;width:100%;height:100%;object-fit:cover}
.pg-celea-cards{margin-top:var(--s-7)}
.pg-card{--member:var(--earth)}
.pg-card[data-member=luna]{--member:var(--moon)}
.pg-card[data-member=sol]{--member:var(--sun)}
.pg-card:nth-child(2){--card-delay:110ms}
.pg-card:nth-child(3){--card-delay:220ms}
.pg-card-media{position:relative;aspect-ratio:551/632;overflow:hidden;background:var(--stage-2)}
.pg-card-media img{object-position:50% 0}
.pg-card-media::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 60% at 50% 100%,color-mix(in srgb,var(--member) 32%,transparent),transparent 70%);opacity:0;pointer-events:none}
.fx .pg-card-media::after{transition:opacity var(--d-3)}
.pg-card.is-lit .pg-card-media::after,.pg-card:focus-within .pg-card-media::after{opacity:1}
@media (hover:hover) and (pointer:fine){.pg-card:hover .pg-card-media::after{opacity:1}}
.pg-card-index{display:flex;align-items:center;gap:10px;margin-top:20px;font:400 12px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.pg-card-index::before{content:"";flex:none;width:6px;height:6px;background:var(--member);transform:rotate(45deg)}
.pg-card-name{margin:10px 0 0;overflow:hidden;padding:.04em 0 .08em;font:600 clamp(30px,2.6vw,44px)/.94 var(--font-sans);letter-spacing:-.05em;color:var(--text-1)}
.pg-card-name>span{display:block}
.pg-card-line{margin-top:10px;font-size:var(--fs-body);line-height:1.6;color:var(--text-2)}
.pg-card .pg-ja{margin-top:6px}
.pg-card-film{margin-top:16px}
.pg-rail-now{color:var(--text-1)}
.pg-rail-count{display:none}
.pg-celea-aside{margin-top:var(--s-6)}
.pg-celea-aside .pg-body{margin-top:12px}
.pg-celea-aside .pg-link{margin-top:16px}
@media (max-width:899.98px){
  .pg-celea-key{margin-inline:calc(var(--gutter)*-1)}
  .pg-celea-cards{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,340px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);margin-inline:calc(var(--gutter)*-1);padding:0 var(--gutter) 8px;overscroll-behavior-x:contain;scrollbar-width:none}
  .pg-celea-cards::-webkit-scrollbar{display:none}
  .pg-card{scroll-snap-align:start}
  .pg-rail-count{display:block;margin-top:12px;font:400 12px/1 var(--font-mono);letter-spacing:.16em;color:var(--text-3)}
  html:not(.js) .pg-rail-count{display:none}
}
@media (min-width:900px){
  .pg-celea{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);margin-top:var(--s-10)}
  .pg-celea-head{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-columns:subgrid;column-gap:var(--grid-gap);align-items:end}
  .pg-celea-head>:first-child{grid-column:1/7}
  .pg-celea-def{grid-column:7/13;margin-top:0}
  .pg-celea-key{grid-column:1/-1;margin-top:var(--s-7)}
  /* Acceptance 4: cards never exceed 320px, so the 551-632px portraits stay sharp. */
  .pg-celea-cards{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,320px));gap:24px;margin-top:var(--s-7)}
  .pg-celea-aside{grid-column:1/7;margin-top:var(--s-6)}
}
@media (min-width:1200px){.pg-celea-cards{grid-column:1/10}.pg-celea-aside{grid-column:10/13;align-self:end;margin-top:0}}

/* §9.4c: the reserved slot (honest, no imagery) */
.pg-reserved{margin-top:var(--s-9);padding-top:var(--s-7);border-top:1px solid var(--line-1)}
.pg-reserved-frame{position:relative;aspect-ratio:2.39;background:var(--stage-3);border:1px solid var(--line-1);overflow:hidden}
.pg-reserved-frame>span{position:absolute;left:16px;bottom:14px;font:400 12px/1 var(--font-mono);letter-spacing:.16em;color:var(--text-4)}
.pg-reserved-copy{margin-top:var(--s-6)}
.pg-reserved-copy h3{margin-top:14px;font:400 var(--fs-h3)/1.1 var(--font-serif);letter-spacing:var(--tr-serif);color:var(--text-1)}
.pg-reserved-copy h3 em{color:var(--text-2)}
.pg-reserved-copy .pg-body{margin-top:16px}
.pg-reserved-copy .pg-textbtn{margin-top:24px}
.pg-reserved-scan{position:absolute;inset:0;display:none;pointer-events:none;background:linear-gradient(90deg,transparent 72%,rgba(243,241,233,.03))}
.pg-reserved-scan::after{content:"";position:absolute;top:0;bottom:0;right:0;width:1px;background:linear-gradient(transparent,rgba(243,241,233,.35),transparent)}
.fx .pg-reserved-scan{display:block;animation:pg-scan 6s linear infinite;animation-play-state:paused}
.fx .pg-reserved.is-onscreen .pg-reserved-scan{animation-play-state:running}
@keyframes pg-scan{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@media (min-width:900px){
  .pg-reserved{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);margin-top:var(--s-10);padding-top:var(--s-8)}
  .pg-reserved-frame{grid-column:1/7}
  .pg-reserved-copy{grid-column:8/13;align-self:center;margin-top:0}
}

/* §9.5: 03 Services */
.pg-services-head .pg-body{margin-top:var(--s-5)}
.pg-service-list{margin-top:var(--s-7)}
.pg-service{--accent:var(--text-1);position:relative;display:grid;grid-template-columns:24px minmax(0,1fr) auto;column-gap:clamp(16px,2vw,32px);align-items:start;padding:36px 0;border-top:1px solid var(--line-1)}
.pg-service:last-child{border-bottom:1px solid var(--line-1)}
.pg-service[data-accent=earth]{--accent:var(--earth)}
.pg-service[data-accent=moon]{--accent:var(--moon)}
.pg-service[data-accent=sun]{--accent:var(--sun)}
/* The dot sits on the centre of the title's first line (line-height 1.1). */
.pg-service-dot{display:block;width:8px;height:8px;margin-top:calc(var(--fs-h3)*.55 - 4px);border-radius:50%;background:var(--accent)}
.pg-service-quiet .pg-service-dot{margin-top:calc(clamp(22px,2vw,32px)*.55 - 4px)}
.pg-service h3{font:400 var(--fs-h3)/1.1 var(--font-serif);letter-spacing:var(--tr-serif);color:var(--text-1)}
.pg-service-quiet h3{font-size:clamp(22px,2vw,32px);color:var(--text-2)}
.pg-service-lede{margin-top:10px;font-size:var(--fs-lede);line-height:1.5;color:var(--text-1)}
.pg-service-copy .pg-body{margin-top:12px}
.pg-service-cta{align-self:center}
.pg-service::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--moon);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.fx .pg-service::before{transition:transform var(--d-4) var(--ease-expo)}
.fx .pg-service h3,.fx .pg-service-dot{transition:transform var(--d-3) var(--ease-expo)}
@media (hover:hover) and (pointer:fine){
  .pg-service:is(:hover,:focus-within)::before{transform:scaleX(1)}
  .fx .pg-service:is(:hover,:focus-within) h3{transform:translateX(8px)}
  .pg-service:is(:hover,:focus-within) .pg-service-dot{transform:scale(1.5)}
}
.pg-services-mail{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-top:var(--s-6);font-size:14px;line-height:1.5;color:var(--text-3)}
@media (max-width:899.98px){
  .pg-service{grid-template-columns:16px minmax(0,1fr);row-gap:16px}
  .pg-service-cta{grid-column:1/-1;width:100%;justify-content:center;min-height:48px}
}
@media (min-width:1200px){
  .pg-services-head{grid-column:1/6;align-self:start;position:sticky;top:calc(var(--header-h) + 48px)}
  .pg-service-list{grid-column:6/13;margin-top:0}
  .pg-services-mail{grid-column:6/13}
}

/* §9.6: 04 Process (not pinned; the line is painted by page.js) */
.pg-steps-track{position:relative;margin-top:clamp(48px,6vw,96px)}
.pg-steps-line{position:absolute;left:0;right:0;top:0;height:1px;background:var(--line-2)}
.pg-steps-line b{position:absolute;inset:0;transform-origin:0 50%;background:linear-gradient(90deg,var(--earth),var(--moon) 40%,var(--sun) 75%,var(--text-warm))}
.fx .pg-steps-line b{transform:scaleX(0)}
.pg-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:0;padding:0}
.pg-step{position:relative;padding:40px 24px 0}
.pg-step:first-child{padding-left:0}
.pg-step+.pg-step{border-left:1px solid var(--line-1)}
.pg-step-node{position:absolute;top:-4px;left:-4px;width:8px;height:8px;background:var(--stage);border:1px solid var(--text-3);transform:rotate(45deg);transition:background-color 450ms,border-color 450ms}
.pg-step:first-child .pg-step-node{left:0}
.pg-step h3{margin-top:14px;font:400 var(--fs-h3)/1.1 var(--font-serif);letter-spacing:var(--tr-serif);color:var(--text-1)}
.pg-step .pg-body{margin-top:12px}
.fx .pg-step :is(.pg-label,h3,.pg-body,.pg-ja){opacity:.38;transition:opacity 450ms var(--ease-std)}
.fx .pg-step.is-lit :is(.pg-label,h3,.pg-body,.pg-ja){opacity:1}
.pg-step.is-lit .pg-step-node,html:not(.fx) .pg-step-node{background:var(--sun);border-color:var(--sun)}
@media (max-width:899.98px){
  .pg-steps{grid-template-columns:1fr;row-gap:48px;padding-left:28px}
  .pg-steps-line{top:0;bottom:0;left:3.5px;right:auto;width:1px;height:auto}
  .pg-steps-line b{transform-origin:50% 0;background:linear-gradient(180deg,var(--earth),var(--moon) 40%,var(--sun) 75%,var(--text-warm))}
  .fx .pg-steps-line b{transform:scaleY(0)}
  .pg-step,.pg-step:first-child,.pg-step+.pg-step{padding:0;border:0}
  .pg-step-node,.pg-step:first-child .pg-step-node{left:-28px;top:4px}
}

/* §9.7: 05 Contact (house lights up) */
.pg-house{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(70% 60% at 50% 100%,rgba(255,242,218,.10),transparent 70%),var(--stage-2)}
.fx .pg-house{transition:opacity var(--d-house) var(--ease-std)}
.fx .pg-contact:not(.is-lit) .pg-house{opacity:0}
.pg-contact-main,.pg-howto{margin-top:var(--s-8)}
.pg-contact-actions{display:flex;flex-wrap:wrap;gap:20px 28px;align-items:center;margin-top:var(--s-6)}
.pg-mailrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.pg-copy-status{font-size:13px;line-height:1.5;color:var(--text-3)}
.pg-copy-status [lang=ja]{font-size:inherit;line-height:inherit;letter-spacing:.04em;color:inherit}
.pg-howto>div{padding-top:20px;border-top:1px solid var(--line-1)}
.pg-howto dt{font:400 12px/1.5 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.pg-howto dd{margin-top:12px;max-width:34em;font-size:14px;line-height:1.7;color:var(--text-2)}
.pg-howto dd [lang=ja]{display:block;margin-top:8px;font-size:13px;line-height:1.8}
@media (max-width:899.98px){.pg-contact-actions{flex-direction:column;align-items:stretch}.pg-contact-actions .pg-button{width:100%}}
@media (min-width:900px){.pg-contact-main{grid-column:1/8}.pg-howto{grid-column:8/13;align-self:end}}
@media (min-width:1200px){.pg-contact .pg-mega{grid-column:1/11}.pg-contact .pg-mega+.pg-ja{grid-column:1/9}.pg-howto{grid-column:9/13}}

/* §9.8: footer and end card */
.pg-footer{position:relative;overflow:clip;padding:var(--s-9) 0 0;background:var(--stage);border-top:1px solid var(--line-1)}
.pg-footer-grid{display:grid;row-gap:40px}
.pg-footer .brand{min-height:44px;font-size:13px;letter-spacing:.16em;color:var(--text-1)}
.pg-footer .brand svg{width:27px;height:27px}
.pg-footer-brand p{margin-top:16px;font-size:14px;line-height:1.6;color:var(--text-2)}
.pg-footer-brand [lang=ja]{margin-top:6px;font-size:13px;line-height:1.8}
.pg-footer-nav{columns:2;column-gap:var(--grid-gap)}
.pg-footer-nav a,.pg-footer-meta a{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px;line-height:1.3;color:var(--text-2);text-decoration:none;break-inside:avoid;transition:color var(--d-1) var(--ease-std)}
:is(.pg-footer-nav,.pg-footer-meta) a:hover{color:var(--text-1)}
.pg-footer-meta a .i{transition:transform var(--d-1) var(--ease-std)}
.pg-footer-meta a:is(:hover,:focus-visible) .i{transform:translateY(-2px)}
.pg-footer-meta p{margin-top:12px;font-size:12px;line-height:1.5;color:var(--text-3)}
@media (min-width:900px){.pg-footer-brand{grid-column:1/5}.pg-footer-nav{grid-column:5/9}.pg-footer-meta{grid-column:9/13}}
/* Centred by flex so any overflow is clipped evenly on both sides. */
.pg-endcard{display:flex;justify-content:center;margin:var(--s-8) 0 -1.5vw;font:300 clamp(56px,14.5vw,280px)/.8 var(--font-sans);letter-spacing:-.06em;color:#151b24;white-space:nowrap;text-align:center;user-select:none;-webkit-user-select:none}

/* §10.2: inquiry dialog skin and the §4.3 dialog floors */
dialog .dialog-close{display:grid;place-items:center;width:44px;height:44px;right:12px;top:12px;padding:0;font-size:18px;line-height:1;color:var(--text-3);transition:color var(--d-1) var(--ease-std)}
dialog .dialog-close:hover{color:var(--text-1)}
.dialog-intro{margin-top:14px;font-size:14px;line-height:1.7;color:var(--text-2)}
.dialog-intro span{display:block;margin-top:2px;font-size:13px;color:var(--text-3)}
dialog .eyebrow{font-size:12px}
dialog label>span{font-size:13px}
dialog .delivery-note{font-size:13px}
dialog .delivery-note>span{font-size:12px}
dialog .contact-button{gap:14px;min-height:52px;padding:0 24px;font:600 14px/1 var(--font-sans)}
dialog .contact-button .i{transition:transform var(--d-1) var(--ease-std)}
dialog .contact-button:is(:hover,:focus-visible) .i{transform:translate(2px,-2px)}
dialog #draft-download{display:flex;align-items:center;gap:12px}

/* §9.9 reveal catalogue */
.fx [data-reveal=slate] .slate-rule{transition:transform 1100ms var(--ease-expo)}
.fx [data-reveal=slate]>:not(.slate-rule){transition:opacity var(--d-3) var(--ease-std) 150ms}
.fx [data-reveal=slate]:not(.is-in) .slate-rule{transform:scaleX(0)}
.fx [data-reveal=slate]:not(.is-in)>:not(.slate-rule){opacity:0}
.fx [data-reveal=lines] .ln>span{transition:transform var(--d-5) var(--ease-expo)}
.fx [data-reveal=lines] .ln:nth-child(2)>span{transition-delay:90ms}
.fx [data-reveal=lines] .ln:nth-child(3)>span{transition-delay:180ms}
.fx [data-reveal=lines] .ln:nth-child(4)>span{transition-delay:270ms}
.fx [data-reveal=lines]:not(.is-in) .ln>span{transform:translate3d(0,112%,0)}
.fx [data-reveal=stagger]>*,.fx .pg-glance-col::before{transition:opacity var(--d-4) var(--ease-expo),transform var(--d-4) var(--ease-expo)}
.fx [data-reveal=stagger]>:nth-child(2),.fx .pg-glance-col:nth-child(2)::before{transition-delay:120ms}
.fx [data-reveal=stagger]>:nth-child(3),.fx .pg-glance-col:nth-child(3)::before{transition-delay:240ms}
.fx [data-reveal=stagger]>:nth-child(4),.fx .pg-glance-col:nth-child(4)::before{transition-delay:360ms}
.fx [data-reveal=stagger]:not(.is-in)>*{opacity:0;transform:translate3d(0,24px,0)}
.fx [data-reveal=stagger]:not(.is-in) .pg-glance-col::before{transform:scaleX(0)}
.fx [data-reveal=fade]{transition:opacity var(--d-4) var(--ease-expo),transform var(--d-4) var(--ease-expo)}
.fx [data-reveal=fade]:not(.is-in){opacity:0;transform:translate3d(0,16px,0)}
.fx [data-reveal=aurora]{transition:transform var(--d-7) var(--ease-expo)}
.fx [data-reveal=aurora]:not(.is-in){transform:scaleX(0)}
/* wipe: the mask travels left to right while the image holds still */
.fx [data-reveal=wipe] .pg-wipe,.fx [data-reveal=wipe] .pg-wipe img{transition:transform 1100ms var(--ease-expo)}
.fx .pg-celea-key:not(.is-in) .pg-wipe{transform:translate3d(-101%,0,0)}
.fx .pg-celea-key:not(.is-in) .pg-wipe img{transform:translate3d(101%,0,0)}
/* cards: vertical wipe at 0/110/220ms, names 200ms later. Hover zoom uses `scale`, so it never fights the wipe. */
.fx .pg-celea-cards .pg-wipe{transition:transform 1100ms var(--ease-expo) var(--card-delay,0ms)}
.fx .pg-celea-cards .pg-wipe img{transition:transform 1100ms var(--ease-expo) var(--card-delay,0ms),scale var(--d-5) var(--ease-expo)}
.fx .pg-celea-cards:not(.is-in) .pg-wipe{transform:translate3d(0,101%,0)}
.fx .pg-celea-cards:not(.is-in) .pg-wipe img{transform:translate3d(0,-101%,0)}
.fx .pg-celea-cards .pg-card-name>span{transition:transform var(--d-5) var(--ease-expo) calc(var(--card-delay,0ms) + 200ms)}
.fx .pg-celea-cards:not(.is-in) .pg-card-name>span{transform:translate3d(0,112%,0)}
.fx .pg-celea-cards.is-in .pg-card:focus-within .pg-card-media img{scale:1.035}
@media (hover:hover) and (pointer:fine){.fx .pg-celea-cards.is-in .pg-card:hover .pg-card-media img{scale:1.035}}
.fx [data-reveal=endcard]{transition:opacity 1100ms var(--ease-expo),transform 1100ms var(--ease-expo)}
.fx .pg-endcard:not(.is-in){opacity:0;transform:translateY(40px)}

@media print{
  [data-reveal],[data-reveal] *{opacity:1!important;transform:none!important;clip-path:none!important}
  .pg-photo-diamond{transform:rotate(45deg)!important}
  .pg-steps-line b{transform:none!important}
  .pg-gate::before,.pg-gate::after{content:none!important}
  .pg-glance-col::before{transform:none!important}
  .pg-step :is(.pg-label,h3,.pg-body,.pg-ja),.pg::before,.pg-house{opacity:1!important}
  .pg-play-cursor{display:none!important}
}