/* Four isolated studies cloned from Fieldwork. This file is not loaded by 03. */
.direction .hero-geometries{mask-image:linear-gradient(90deg,transparent 5%,#00000030 35%,#000 68%)}
.direction .hero-geometry{opacity:.7}
.direction .focus-area .text-link{margin-top:auto;align-self:flex-start}
.direction .focus-area{display:flex;flex-direction:column;align-items:flex-start}
.direction .focus-area>p:not(.eyebrow){margin-bottom:18px}

/* 01: CSS colour washes, with SVG distortion and fine pigment granulation. */
.sage.report.watercolour{--bg:#fdfaf7;--ink:#384e4b;--muted:#64746e;--accent:#796785;--line:#e0dcd7;--wash:#f0e9ef}
.watercolour .pigment-washes{filter:url(#pigment);mix-blend-mode:multiply}
.watercolour .hero-geometries{mask-image:linear-gradient(90deg,transparent 5%,#00000060 38%,#000 70%)}
.watercolour .wash-art{opacity:1}
.sage.report.watercolour .hero-brand{font-family:'Newsreader',serif;font-size:clamp(48px,6vw,76px);letter-spacing:-2px;line-height:.96}
.watercolour .hero-brand span{font-style:italic;color:#796785}
.watercolour .focus-area h3,.watercolour .working-strip h2,.watercolour .news h2{font-family:'Newsreader',serif}
.watercolour .focus-area h3{font-size:29px}
.watercolour .eyebrow{color:#806a83}
.watercolour .news{background:linear-gradient(105deg,#e9f1e780,#f4e5dd60 50%,#ede7f260);padding:26px;border:0;border-radius:5px}
.sage.report.watercolour .btn{border-radius:5px}
.watercolour .section-index{color:#a87862}
.watercolour .focus-area{position:relative;isolation:isolate}
.watercolour .focus-area::before{content:'';position:absolute;z-index:-1;width:120px;height:55px;right:12px;top:0;background:radial-gradient(ellipse,#e7d6ee80,transparent 70%);filter:blur(7px);pointer-events:none}
.watercolour .focus-area:nth-child(even)::before{background:radial-gradient(ellipse,#cddfd980,transparent 70%)}

/* 02: precise blue typography and structured service panels. */
.sage.report.precision{--bg:#f8fbff;--ink:#16365b;--muted:#536982;--accent:#235ac2;--line:#d4dfed;--wash:#eaf0fa}
.sage.report.precision .hero-brand{font-weight:500;letter-spacing:-3px}
.precision .hero-brand span{color:var(--accent)}
.precision .news{padding:24px;background:#edf3fc;border:1px solid var(--line);border-left:3px solid var(--accent)}
.report.precision #services .focus-areas{gap:0;padding-top:24px;border:0}
.report.precision .focus-area{padding:23px;border:1px solid var(--line);margin-right:-1px;margin-bottom:-1px;background:#ffffff80}
.precision .section-index{background:var(--wash);color:var(--accent);padding:3px 6px}
.precision .focus-area h3{font-size:24px}
.sage.report.precision .hero-actions .btn:first-child{background:var(--accent);border-color:var(--accent)}
.precision .hero-geometry{opacity:.6}

/* 04: a softer contemporary studio, with modular shapes and tonal panels. */
.sage.report.atelier{--sans:'Manrope',sans-serif!important;--bg:#faf8fd;--ink:#423453;--muted:#70637c;--accent:#7e5c97;--line:#e2dbe9;--wash:#eee8f4;font-family:'Manrope',sans-serif}
.sage.report.atelier .hero-brand{font-family:'Manrope',sans-serif;font-weight:500;letter-spacing:-3.5px;font-size:clamp(43px,5vw,64px)}
.atelier .hero-geometries{mask-image:linear-gradient(90deg,transparent 20%,#00000060 48%,#000 80%)}
.atelier .hero-geometry{opacity:.75}
.atelier .hero-brand span{color:#9477a9}
.sage.report.atelier .btn.primary{border-radius:24px;font-family:'Manrope',sans-serif}
.atelier .news{background:#f0ebf6;border:0;border-radius:16px;padding:26px}
.report.atelier #services .focus-areas{gap:18px;border:0}
.report.atelier .focus-area{border:0;padding:26px;border-radius:16px;background:#eee9f4}
.atelier .focus-area:nth-child(2){background:#f5eae3}
.atelier .focus-area:nth-child(3){background:#e9efea}
.atelier .focus-area:nth-child(4){background:#eeeaf5}
.atelier .focus-area h3{font-family:'Manrope',sans-serif;font-size:24px;letter-spacing:-.7px}
.atelier .eyebrow{font-family:'Manrope',sans-serif;font-size:9px;font-weight:600}

/* 05: a typographic folio with a single column of concise service entries. */
.sage.report.folio{--bg:#faf8f1;--ink:#39362e;--muted:#746f61;--accent:#887044;--line:#d9d4c5;--wash:#ece8dc}
.sage.report.folio .page{max-width:1180px}
.sage.report.folio .hero-brand{font-family:'IBM Plex Mono',monospace;font-size:clamp(40px,5vw,61px);line-height:1.08;letter-spacing:-1.2px}
.folio .hero-brand span{font-style:normal}
.folio .focus-area h3,.folio .working-strip h2,.folio .news h2{font-family:'IBM Plex Mono',monospace}
.folio .working-strip h2{font-size:20px;letter-spacing:-.5px}
.folio .news h2{font-size:19px;letter-spacing:-.5px}
.report.folio #services .focus-areas{display:block;padding-top:20px}
.report.folio .focus-area{display:grid;grid-template-columns:145px 1fr 1.2fr 90px;gap:22px;padding:22px 0;align-items:start}
.report.folio .focus-area h3{margin:0;font-size:26px}
.folio .focus-area .eyebrow{font-size:9px;padding-top:5px}
.folio .section-index{display:block;margin-bottom:7px}
.folio .focus-area>p:not(.eyebrow){font-size:13px;margin:0}
.folio .focus-area .text-link{margin-top:3px;font-size:11px}
.folio .focus-area .text-link span{margin-left:7px}
.folio .news{padding-block:25px}
.sage.report.folio .hero-actions .btn:first-child{background:transparent;color:var(--ink)}
.folio .hero-geometry{opacity:.5}

@media(max-width:1000px){
 .report.folio .focus-area{grid-template-columns:120px 1fr 1fr;gap:18px}
 .folio .focus-area .text-link{grid-column:2}
}
@media(max-width:640px){
 .direction .hero-geometries{mask-image:linear-gradient(90deg,#00000008,#00000035 55%,#000000a0)}
 .watercolour .hero-geometries{mask-image:linear-gradient(90deg,#00000010,#00000050 55%,#000)}
 .sage.report.watercolour .hero-brand{font-size:clamp(43px,12vw,58px)}
 .sage.report.folio .hero-brand{font-size:clamp(38px,10.5vw,52px)}
 .sage.report.precision .hero-brand,.sage.report.atelier .hero-brand{font-size:clamp(39px,10.8vw,52px);letter-spacing:-2px}
 .watercolour .news,.precision .news,.atelier .news{padding:22px}
 .report.precision .focus-area,.report.atelier .focus-area{padding:22px}
 .report.folio .focus-area{grid-template-columns:1fr;gap:10px}
 .folio .section-index{display:inline;margin-right:12px}
 .folio .focus-area .text-link{grid-column:1;margin-top:2px}
 .folio .focus-area h3{font-size:25px}
 .direction .direction-bar nav a{padding-inline:7px}
}

/* Essential: an asymmetric printed composition, with one vermilion plane. */
.sage.report.folio .poster-hero{min-height:420px;padding:54px 0 42px;isolation:isolate}
.poster-hero::before{content:'';position:absolute;inset:0 -64px;background:url('paper-grain.svg') repeat;opacity:.25;mix-blend-mode:multiply;pointer-events:none;z-index:2}
.folio .poster-hero .intro-copy{max-width:510px}
.poster-art{position:absolute;inset:0 -64px 0 51%;overflow:hidden;pointer-events:none;z-index:0}
.poster-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:left center}
.folio .poster-hero .lead{max-width:440px}
@media(min-width:641px) and (max-width:1000px){
 .sage.report.folio .poster-hero{min-height:390px}
 .folio .poster-hero .intro-copy{max-width:54%}
 .sage.report.folio .poster-hero .hero-brand{font-size:clamp(40px,5.2vw,55px)}
 .poster-art{left:58%;right:-35px}
 .poster-hero::before{inset-inline:-35px}
}
@media(max-width:640px){
 .sage.report.folio .poster-hero{padding:30px 0 226px;min-height:0}
 .folio .poster-hero .intro-copy{max-width:none}
 .poster-art{inset:auto -23px 0;height:200px}
 .poster-art img{object-fit:cover;object-position:center 43%}
 .poster-hero::before{inset-inline:-23px}
}

/* A measured modular composition and two footer information groups. */
.folio .poster-art img{object-fit:contain;object-position:center}
.folio .company-footer{grid-template-columns:1fr auto;align-items:start}
.company-footer .company-name{font-weight:400;color:var(--muted);margin:0 0 7px}
.company-footer .legal{grid-column:auto}
@media(max-width:640px){
 .folio .poster-art img{object-fit:contain;object-position:right center}
 .folio .company-footer{grid-template-columns:1fr;gap:20px}
}

/* The geometry is a full-hero print, cropped rather than fitted as a figure. */
.sage.report.folio .poster-hero{min-height:400px;padding:48px 0 36px}
.folio .poster-art{inset:0 -64px;overflow:hidden}
.folio .poster-art img{width:100%;height:100%;object-fit:cover;object-position:center}
.folio .poster-hero .intro-copy{max-width:510px}
@media(min-width:641px) and (max-width:1000px){
 .folio .poster-art{inset:0 -35px}
 .folio .poster-art img{object-position:42% center;opacity:.75}
 .folio .poster-hero .intro-copy{max-width:57%}
 .folio .poster-art{mask-image:linear-gradient(90deg,#00000010 0%,#00000025 42%,#000 72%)}
}
@media(max-width:640px){
 .sage.report.folio .poster-hero{padding:32px 0 30px;min-height:0}
 .folio .poster-art{inset:0 -23px;height:auto;mask-image:linear-gradient(90deg,#00000008,#00000018 58%,#00000065)}
 .folio .poster-art img{width:100%;height:100%;object-fit:cover;object-position:53% center}
 .folio .poster-hero .intro-copy{max-width:none}
}

/* A LOGO drawing surface beneath an independent text layer. */
.folio .turtle-paper{position:absolute;inset:0 -64px;background:#ede9dd;overflow:hidden;pointer-events:none;z-index:0}
.folio .turtle-drawing{display:block;width:100%;height:100%;mask-image:linear-gradient(90deg,#00000010 5%,#00000020 38%,#000000c0 65%,#000 100%)}
.turtle-cursor[hidden]{display:none}
.folio .poster-hero .intro-copy{z-index:3}
.folio .poster-hero::before{z-index:1}
@media(min-width:641px) and (max-width:1000px){.folio .turtle-paper{inset-inline:-35px}}
@media(max-width:640px){
 .folio .turtle-paper{inset-inline:-23px}
 .folio .turtle-drawing{mask-image:linear-gradient(90deg,#00000010,#00000018 55%,#00000060)}
}

/* Extend the paper colour to both viewport edges without enlarging the drawing. */
.folio .poster-hero::after{content:'';position:absolute;inset:0;z-index:-1;background:#ede9dd;box-shadow:0 0 0 100vmax #ede9dd;clip-path:inset(0 -100vmax);pointer-events:none}

/* Keep mobile geometry visible, reaching full strength beyond the text area. */
@media(max-width:640px){
 .folio .turtle-drawing{mask-image:linear-gradient(90deg,#00000035 0%,#00000070 40%,#000000c0 68%,#000 85%)}
}

/* The live page has no fixed design selector to make space for. */
.production .company-footer{padding-bottom:40px}

/* Draw link arrows directly so their shape does not depend on a font glyph. */
.link-arrow{display:inline-block;width:1em;height:1em;vertical-align:-.08em;fill:none;stroke:currentColor;stroke-width:.8;stroke-linecap:butt;stroke-linejoin:miter}