/* Panel study: large full-width titles, bordered section panels with generous
   inner padding, a noise-grain gradient fill, and alternating panel brightness.
   Everything is scoped to html.study-on; without the class the Blueprint design
   renders exactly as before. */
.study-on{
  --s-page:#dcdcd5;
  --s-l1:#fbfbf8;           /* brightest panel */
  --s-l2:#f2f2ec;
  --s-l3:#e9e9e2;           /* dimmest light panel */
  --s-stroke:rgba(25, 27, 28,.11);
  --s-stroke-dark:rgba(238, 239, 235,.1);
  --s-outer:12px;           /* page edge to panel */
  --s-gap:12px;             /* between panels */
  --s-radius:28px;
  --s-pad-x:clamp(24px,4.6vw,76px);
  --s-pad-y:clamp(56px,7.5vw,120px);
  --s-hero:clamp(64px,10.4vw,172px);
  --s-title:clamp(52px,7.4vw,124px);
  --s-project:clamp(40px,5.6vw,92px);
  --s-lead:clamp(18px,1.45vw,22px);
  /* Grey fractal noise, tiled; layered over every panel's gradient. */
  --s-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
}
.study-on body{background:var(--s-noise),radial-gradient(90% 60% at 10% 0%,#efefea,transparent 70%),var(--s-page);overflow-x:clip}

/* ---------- Panels ---------- */
.study-on main>section,.study-on main>article{
  --panel:var(--s-l2);
  position:relative;
  width:auto;
  margin:0 var(--s-outer) var(--s-gap);
  padding:var(--s-pad-y) var(--s-pad-x);
  border:1px solid var(--s-stroke);
  border-radius:var(--s-radius);
  background:var(--s-noise),radial-gradient(120% 90% at 0% 0%,rgba(255, 255, 255,.75),transparent 55%),radial-gradient(90% 70% at 100% 100%,rgba(25, 27, 28,.035),transparent 60%),var(--panel);
  overflow:clip;
}
.study-on main>.v-hero{--panel:var(--s-l1);display:block;min-height:0;padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(36px,4vw,56px)}
.study-on main>.wo{--panel:var(--s-l3)}
.study-on main>.feature-cisty{--panel:var(--s-l1)}
.study-on main>.partner-feature{--panel:var(--s-l2)}
.study-on main>.fw{--panel:var(--s-l1)}
.study-on main>.other-work{--panel:var(--s-l3)}
.study-on main>.about-chapter{--panel:var(--s-l1)}
.study-on main>.v-contact{--panel:var(--s-l2);border-top:1px solid var(--s-stroke)}
.study-on main>.practice-chapter{--panel:#e6e9f9}
.study-on main>.hifive-chapter{border-color:var(--s-stroke-dark);background:var(--s-noise),radial-gradient(110% 80% at 0% 0%,rgba(255, 255, 255,.07),transparent 55%),radial-gradient(90% 70% at 100% 100%,rgba(36, 71, 236,.12),transparent 60%),#131519}
/* Inner frames fill their panel; the panel owns the padding. */
.study-on main>section>.frame,.study-on main>article>.frame{width:100%}
.study-on .feature-cisty>.ph,.study-on .partner-feature>.ph{padding-top:0}
.study-on .product-gallery{margin-bottom:0}
.study-on .product-gallery .gallery-viewport{border-radius:16px;border-color:var(--s-stroke)}
.study-on .hifive-chapter .gallery-viewport{border-color:var(--s-stroke-dark)}

/* Navigation and footer sit on the page, aligned with the panels. */
.study-on .v-nav{width:auto;margin:0 calc(var(--s-outer) + var(--s-pad-x))}
.study-on .v-footer{width:auto;margin:0 calc(var(--s-outer) + var(--s-pad-x));border-top:0}
.study-on .hero-foot{margin-top:clamp(40px,5vw,72px);padding-bottom:0}

/* ---------- Large, full-width titles ---------- */
.study-on .v-hero h1{font-size:var(--s-hero);font-weight:600;line-height:.9;letter-spacing:-.055em}
.study-on .hero-intro{margin-top:clamp(28px,3vw,44px)}
.study-on .hero-intro>p{font-size:var(--s-lead);line-height:1.5;max-width:44ch}
.study-on .overline{font-size:13px;letter-spacing:.07em;color:var(--v-muted)}
.study-on .hifive-chapter .overline{color:rgba(238, 239, 235,.6)}

.study-on .wo-title,.study-on .section-intro h2,.study-on .practice-heading h2,.study-on .about-intro h2{font-size:var(--s-title);font-weight:600;line-height:.95;letter-spacing:-.05em;max-width:none}
.study-on .v-contact h2{font-size:var(--s-hero);font-weight:600;line-height:.92;letter-spacing:-.055em}
.study-on .section-intro{display:block}
.study-on .section-intro>p{margin-top:28px;max-width:46ch;font-size:var(--s-lead)}
.study-on .about-intro{align-items:flex-end}

/* Section opening and Further work: title across the full width, intro beneath. */
.study-on main>.wo.work-opening,.study-on main>.fw.further-work{display:block;padding:var(--s-pad-y) var(--s-pad-x)}
.study-on .wo-top{border-bottom:0;padding-bottom:0}
.study-on .wo-title{margin-top:clamp(36px,4vw,64px)}
.study-on .wo .work-intro,.study-on .fw .work-intro{display:block;max-width:40ch;margin:clamp(28px,3vw,44px) 0 0 auto;padding:0;font-size:var(--s-lead);line-height:1.45;text-align:left}
.study-on .wo-index{margin-top:clamp(48px,5vw,80px)}
.study-on .wo-name{font-size:clamp(20px,1.8vw,28px)}
.study-on .wo-index a{min-height:72px}
.study-on .fw-head{display:block;margin:clamp(36px,4vw,64px) 0 clamp(40px,4.5vw,72px)}
.study-on .fw .wo-title{margin:0}
.study-on .fw .wo-title .ph-mask>span::after{content:"."}

/* Project names use full foreground contrast; subtitles keep the smaller scale. */
.study-on .ph{margin-bottom:clamp(40px,4.5vw,72px)}
.study-on .ph-grid{display:block;margin-top:clamp(32px,3.5vw,56px)}
.study-on .ph h3,.study-on .ph-premise{font-size:var(--s-project);font-weight:600;line-height:.98;letter-spacing:-.05em}
.study-on .ph h3{color:var(--ph-ink)}
.study-on .ph h3 .ph-mask>span::after{content:"."}
.study-on .ph .ph-premise{margin-top:18px;font-size:var(--s-lead);font-weight:450;line-height:1.4;letter-spacing:-.015em}
.study-on .ph-premise .ph-mask,.study-on .ph-premise .ph-mask:first-child{color:var(--ph-ink)}
.study-on .ph-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 56px;align-items:end;margin-top:clamp(32px,3.5vw,56px);padding-top:clamp(24px,2.5vw,36px);border-top:1px solid var(--ph-line)}
.study-on .ph-copy>p{max-width:52ch;font-size:var(--s-lead);line-height:1.5}
.study-on .ph-actions{margin-top:0;justify-content:flex-end}

/* ---------- Buttons: pills; the blue spread hover and arrows stay ---------- */
.study-on .action{min-height:46px;padding:0 22px;gap:16px;border-radius:999px;font-size:15px;font-weight:500}
.study-on .ph-actions .text-action,.study-on .hero-foot .text-action{min-height:46px;padding:0 22px;gap:14px;border:1px solid var(--s-stroke);border-radius:999px;font-weight:500;transition:border-color .3s,background-color .3s,color .3s}
.study-on .ph-actions .text-action:hover,.study-on .hero-foot .text-action:hover{border-color:var(--v-ink);background:rgba(25, 27, 28,.03)}
.study-on .ph-dark .ph-actions .text-action{border-color:var(--s-stroke-dark)}
.study-on .ph-dark .ph-actions .text-action:hover{border-color:#eeefeb;background:rgba(238, 239, 235,.06);color:#fff}
.study-on .v-nav .nav-email{min-height:44px;padding:0 18px;border-color:rgba(25, 27, 28,.2);border-radius:999px;font-weight:500}

/* Lists inside panels keep hairline rows. */
.study-on .fw .project-index-list,.study-on .wo-index,.study-on .wo-index li,.study-on .fw .fw-row{border-color:var(--s-stroke)}
.study-on .fw .fw-row h3{font-size:clamp(20px,1.7vw,26px)}
.study-on .fw .fw-row>p{font-size:16px}

@media(max-width:1050px){.study-on .ph-copy{grid-template-columns:1fr}.study-on .ph-actions{justify-content:flex-start}.study-on .about-intro{flex-direction:column;align-items:flex-start}}
@media(max-width:700px){
  .study-on{--s-outer:8px;--s-gap:8px;--s-radius:20px;--s-pad-x:20px;--s-pad-y:48px;--s-hero:clamp(52px,15vw,72px);--s-title:clamp(42px,12vw,60px);--s-project:clamp(36px,10.5vw,52px);--s-lead:17px}
  .study-on .wo .work-intro,.study-on .fw .work-intro{margin-left:0}
}

/* Study toggle (preview URL only). */

/* Rail lane in the panel study: featured panels stay full width (one background
   for card and rail); their content gets extra side space instead. */
@media(min-width:1200px) and (hover:hover){
.study-on main>.feature-cisty,.study-on main>.partner-feature,.study-on main>.insurance-feature,.study-on main>.hifive-chapter{padding-inline:calc(var(--s-pad-x) + var(--rail-lane) - var(--s-outer) - 24px)}
.study-on main>.feature-cisty.frame,.study-on main>.partner-feature.frame,.study-on main>.insurance-feature.frame{width:auto}
.study-on main>.hifive-chapter>.frame{width:100%}
}

/* Approved whitespace A — 1 October 2026. Desktop only. */
@media (min-width: 1051px) {
  .study-on {
    --s-hero: clamp(60px, 9.55vw, 158px);
    --s-title: clamp(48px, 6.8vw, 114px);
    --s-project: clamp(38px, 5.15vw, 85px);
    --s-pad-x: clamp(36px, 5.45vw, 90px);
    --s-pad-y: clamp(68px, 8.3vw, 132px);
    --s-media-inset: clamp(18px, 1.7vw, 28px);
  }
  .study-on main > .v-hero {
    padding-top: calc(clamp(40px, 5vw, 72px) + 12px);
    padding-bottom: calc(clamp(36px, 4vw, 56px) + 12px);
  }
  .study-on .product-gallery .gallery-media {
    padding: var(--s-media-inset);
  }
  .study-on .product-gallery .gallery-media:fullscreen {
    padding: 24px;
  }
}