/* PSEUDOCODE: Use the screen for composition, while keeping each paragraph short.
   This is responsive layout, never browser zoom or a scaled document. */
:root { --page-gutter: clamp(20px, 3.8vw, 96px); }
.container { width: min(2240px, calc(100% - var(--page-gutter) * 2)); }
.header nav { font-size: 15px; gap: clamp(22px, 2vw, 42px); }
.header-cta, .button, .text-link { font-size: 15px; }
.header-monogram { width: 61px; height: 56px; }
.brand-lockup-name { font-size: clamp(20px, 1.65vw, 28px); }
.brand-lockup .wordmark-sub { font-size: 8px; }
.hero { gap: clamp(40px, 4vw, 110px); padding-block: clamp(44px, 5vh, 72px); min-height: min(1000px, calc(100svh - 104px)); }
.hero h1 { font-size: clamp(48px, 5vw, 108px); }
.hero .lede { max-width: 55ch; }
.lede { font-size: clamp(18px, 1.25vw, 23px); max-width: 60ch; line-height: 1.65; }
.eyebrow, .journey-number, .detail-index { font-size: 11px; }
.price-note { font-size: 14px; }
.section { padding-block: clamp(72px, 6.5vw, 132px); }
h2 { font-size: clamp(36px, 3.6vw, 76px); }
.page-intro { padding-block: clamp(60px, 6vw, 115px) clamp(48px, 4vw, 80px); }
.page-intro h1 { max-width: 18ch; font-size: clamp(52px, 5.5vw, 116px); }
.page-intro .lede { max-width: 59ch; }
.section-heading > p, .service-grid p, .steps p, .split p,
.about-section > div > p:not(.eyebrow), .candidate-grid p,
.featured-work p:not(.eyebrow), .service-detail p, .service-overview p,
.experience-step p:not(.eyebrow), .journey-step p { font-size: clamp(16px, 1.05vw, 20px); max-width: 62ch; }
.service-detail h2, .service-overview h2, .featured-work h2 { font-size: clamp(36px, 3vw, 64px); }
.service-grid h3, .candidate-grid h3 { font-size: clamp(28px, 2.25vw, 46px); }
.journey-step h3, .experience-step h3 { font-size: clamp(32px, 3vw, 64px); }
.journey-step p, .experience-step p:not(.eyebrow) { max-width: 42ch; }
.journey-grid { grid-template-columns: .9fr 1.25fr; gap: clamp(40px, 5vw, 130px); }
.experience-layout { grid-template-columns: .8fr 1.3fr; gap: clamp(38px, 4vw, 100px); }
.about-section, .featured-work, .contact-layout { gap: clamp(42px, 5vw, 128px); }
.contact-layout { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.contact-layout > *, .hero > *, .about-section > *, .featured-work > * { min-width: 0; }
.contact-details h2 { font-size: clamp(30px, 2.4vw, 46px); }
.contact-details > p, .contact-details > a { font-size: clamp(16px, 1.1vw, 21px); }
.contact-details > p { max-width: 48ch; }
.form-panel { padding: clamp(28px, 3vw, 64px); }
.form-panel p { max-width: 60ch; }
.values p, .story-path p { font-size: clamp(15px, 1vw, 19px); max-width: 48ch; }

/* PSEUDOCODE: Remove outer decoration, but retain actual browser and prototype UI.
   The approved logo pixels and proportions remain unchanged. */
.cinematic-page .hero-art.brand-hero { border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; height: auto; min-height: 440px; max-width: none; padding: 0; }
.hero-art.brand-hero::before, .hero-art.brand-hero::after { display: none; }
.primary-brand-logo { width: 100%; max-height: none; box-shadow: none; border-radius: 0; }
.logo-stage { width: 100%; }
.brand-hero-caption { flex-wrap: wrap; justify-content: center; text-align: center; font-size: 9px; gap: 6px 20px; }
.logo-light-trace { opacity: .55; }
.world-vignette { background: linear-gradient(90deg,#09080e9e, #09080e22 50%,transparent 85%),linear-gradient(0deg,#09080e70,transparent 22%,transparent 88%,#09080e50); }
.journey-stage { height: clamp(520px, 42vw, 720px); border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.journey-stage::after { display: none; }
.journey-stage .scene-grid { opacity: .18; }
.journey-stage .scene-halo { width: 78%; height: auto; aspect-ratio: 1; left: 11%; top: 8%; border-color: #b79af73b; }
.journey-network { overflow: visible; }
.journey-stage .scene-shell { top: 18%; height: 64%; }
.experience-stage { border: 0; border-radius: 0; box-shadow: none; background: transparent; overflow: visible; }
.experience-stage figcaption { background: linear-gradient(90deg,#100c17d9,#100c1770); border: 0; border-radius: 0; }
.design-visual, .development-visual { background: transparent; }
.page-about .studio-story { border: 0; border-radius: 0; box-shadow: none; padding: clamp(40px, 5vw, 100px); }
.page-work .featured-work { border-radius: 0; padding: clamp(28px, 3vw, 64px); }
.page-about .about-monogram { min-height: clamp(430px, 33vw, 700px); border: 0; border-radius: 0; background: radial-gradient(ellipse at 50% 40%,#7c4dcc2b,transparent 72%); }
.page-about .about-monogram > p:not(.eyebrow) { font-size: clamp(40px, 3.8vw, 76px); }
.gallery-frame { box-shadow: none; }
.page-contact .digital-world { background: radial-gradient(ellipse at 65% 42%,#352044,#09080e 76%); }
.page-contact .world-vignette { background: linear-gradient(90deg,#09080e88,transparent 90%),linear-gradient(0deg,#09080e40,transparent 70%); }
.page-contact .contact-details, .page-contact .form-panel { background: #100c18e8; }

@media (min-width: 1600px) {
 .design-visual { height: 520px; }
 .design-canvas { top: 130px; height: 325px; padding: 26px; }
 .development-visual { height: 560px; }
 .computer { height: 420px; }
 .gallery-frame .own-site-art { min-height: 440px; }
 .service-grid article, .service-grid article + article { padding: 42px; }
}
@media (max-width: 1100px) {
 .header nav { gap: 18px; font-size: 14px; }
 .hero h1 { font-size: clamp(46px, 5.2vw, 66px); }
 .experience-layout { grid-template-columns: .8fr 1.2fr; gap: 30px; }
}
@media (max-width: 900px) {
 .header-monogram { width: 48px; height: 44px; }
 .brand-lockup-name { font-size: 21px; }
 .hero { grid-template-columns: 1fr; min-height: auto; gap: 30px; }
 .hero h1 { font-size: clamp(44px, 7.5vw, 70px); }
 .hero .lede { max-width: 57ch; }
 .cinematic-page .hero-art.brand-hero { min-height: 0; width: 100%; max-width: 800px; margin-inline: auto; }
 .primary-brand-logo { max-height: 380px; }
 .journey-grid { display: block; }
 .journey-stage { height: 360px; max-width: none; overflow: hidden; }
 .journey-stage .scene-shell { top: 47px; height: 265px; }
 .experience-layout { display: flex; flex-direction: column; }
 .experience-stage { width: 100%; overflow: hidden; }
 .about-section, .featured-work { gap: 38px; }
 .contact-layout { grid-template-columns: 1fr; gap: 34px; }
 .page-intro h1 { font-size: clamp(44px, 7.5vw, 72px); }
 .header nav { gap: 10px 24px; }
}
@media (max-width: 600px) {
 :root { --page-gutter: 20px; }
 .brand-lockup-name { font-size: 18px; }
 .brand-lockup .wordmark-sub { font-size: 6px; }
 .header-monogram { width: 40px; height: 38px; }
 .hero { padding-block: 32px 38px; }
 .hero h1 { font-size: clamp(40px, 10.6vw, 54px); }
 .hero .lede, .lede { font-size: 17px; }
 .hero .eyebrow { font-size: 9px; }
 .hero .price-note { margin-top: 22px; }
 .brand-hero-caption { font-size: 7px; }
 .section { padding-block: 58px; }
 .page-intro { padding-block: 42px 38px; }
 .page-intro h1 { font-size: clamp(42px, 10.5vw, 60px); }
 h2 { font-size: 36px; }
 .service-detail h2, .service-overview h2, .featured-work h2 { font-size: 33px; }
 .journey-stage { height: 300px; }
 .journey-stage .scene-shell { height: 215px; }
 .experience-stage figcaption { background: #100c18e8; }
 .form-panel { padding: 24px 20px; }
 .page-work .featured-work { padding: 26px 20px; }
 .page-about .studio-story { padding: 40px 20px; }
 .page-about .about-monogram { min-height: 350px; }
 .page-contact .contact-details > a { font-size: 16px; }
}
@media (max-height: 720px) {
 .hero { min-height: auto; }
 .experience-layout { display: flex; flex-direction: column; }
 .experience-stage { position: relative; top: 0; width: 100%; }
}
@media (max-width: 370px) {
 .brand-lockup { gap: 8px; }
 .brand-lockup-name { font-size: 16px; }
 .header-monogram { width: 34px; height: 34px; }
 .brand-lockup .wordmark-sub { font-size: 5.5px; letter-spacing: .04em; }
}