@font-face{font-family:OverusedGrotesk;src:url('assets/overused-grotesk/OverusedGrotesk-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:OverusedGrotesk;src:url('assets/overused-grotesk/OverusedGrotesk-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
:root{--paper:#f8f7f2;--ink:#243c33;--sage:#84aa97;--pale:#e5eee7;--rule:rgba(36,60,51,.35)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:300 20px/1.5 OverusedGrotesk,Arial,sans-serif}body::before{content:"";position:fixed;inset:0;background:url('assets/imgFooter.avif') center/cover;opacity:.045;z-index:-1;pointer-events:none}h1,h2,p,figure,dl,dd{margin:0}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:5px}a:focus-visible{outline:2px solid var(--ink);outline-offset:5px}.skip{position:absolute;top:-100px}.skip:focus{top:12px;left:12px;padding:12px;background:var(--paper);z-index:20}.shell{width:min(1160px,calc(100% - 12vw));margin-inline:auto}
.site-header{width:min(1310px,calc(100% - 9vw));margin:auto;min-height:98px;display:flex;align-items:flex-start;justify-content:space-between;padding-top:27px;font-size:20px;font-weight:600}.site-header nav{display:flex;gap:clamp(25px,4.2vw,65px)}.site-header nav span{cursor:default}.site-name{white-space:nowrap}.eyebrow,.topline,.section-index,.facts dt,figcaption,.footer-inner>div>span{font:600 15px/1.3 OverusedGrotesk,Arial,sans-serif;letter-spacing:.06em}.section-index{color:#668b79}
.hero{padding-top:105px}.topline{display:flex;justify-content:space-between;border-top:1px solid var(--rule);padding-top:18px}.hero-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:5%;align-items:center;padding:100px 0 105px}.hero-copy{padding:35px 0}.hero-copy .eyebrow{color:#668b79}.hero h1{font:700 clamp(67px,7vw,105px)/.96 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:-.065em;margin:27px 0 38px}.hero h1 span{color:var(--sage)}.hero-copy p{max-width:400px;font-size:22px;line-height:1.5}.hero-art img{width:100%;height:auto}.hero-art figcaption{text-align:right;margin-top:17px}.facts{display:grid;grid-template-columns:.7fr 1.65fr 1fr .8fr;gap:30px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:25px 0 29px}.facts dt{color:#668b79;margin-bottom:13px}.facts dd{font-size:18px;line-height:1.35}
.intro{display:grid;grid-template-columns:210px 1fr;gap:42px;padding-top:225px;padding-bottom:230px}.intro .section-index{padding-top:14px}.intro>div{max-width:830px}.intro h2,.section-heading h2,.detail h2{font:700 clamp(44px,5vw,68px)/1.12 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:-.045em}.intro h2 span{color:var(--sage)}.intro p{max-width:610px;font-size:23px;line-height:1.55;margin-top:39px}
.final-design,.variations,.detail{border-top:1px solid var(--rule);padding-top:145px;padding-bottom:170px}.section-heading{display:grid;grid-template-columns:210px 1fr;gap:42px;margin-bottom:83px}.section-heading .section-index{padding-top:14px}.section-heading>div{max-width:820px}.section-heading p{max-width:630px;margin-top:30px;font-size:21px;line-height:1.52}.hero-final{width:100%;background:#e7ece7}.hero-final img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}.hero-final figcaption{display:flex;justify-content:space-between;gap:20px;padding:17px 2px}
.variations{padding-bottom:185px}.variation-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px 35px}.variation-grid figure{min-width:0}.variation-grid img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}.variation-grid figcaption{display:flex;align-items:baseline;gap:18px;border-top:1px solid var(--rule);margin-top:20px;padding-top:15px}.variation-grid figcaption b{font:700 28px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--sage)}.variation-grid figcaption span{font-size:14px}.variation-grid figure:nth-child(even){transform:translateY(55px)}
.detail{display:grid;grid-template-columns:.76fr 1.24fr;gap:9%;align-items:center;padding-bottom:225px}.detail-copy .section-index{display:block;margin-bottom:45px}.detail h2{font-size:clamp(37px,3.8vw,53px)}.detail-copy p{max-width:440px;margin-top:32px;font-size:20px;line-height:1.55}.detail figure img{width:100%;height:auto}.detail figcaption{text-align:right;margin-top:15px}.page-footer{border-top:1px solid var(--rule)}.footer-inner{min-height:245px;display:flex;align-items:center;justify-content:space-between}.footer-inner>div{display:grid;gap:18px}.footer-inner a{font:700 clamp(26px,3vw,42px)/1.2 "Helvetica Neue",Helvetica,Arial,sans-serif}.footer-inner a span{margin-left:18px}.footer-mark{font:700 58px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:-.08em;color:var(--sage)}.footer-mark span{font-size:.55em;vertical-align:middle;margin:0 .15em}.copyright{background:#dce7de;text-align:right;padding:22px 7vw;font-size:18px}
@media(max-width:900px){.shell{width:calc(100% - 60px)}.hero-grid{gap:25px}.hero h1{font-size:clamp(55px,7vw,80px)}.hero-copy p{font-size:19px}.facts{grid-template-columns:1fr 1.4fr;gap:24px}.intro,.section-heading{grid-template-columns:165px 1fr;gap:24px}.detail{gap:5%}}
@media(max-width:620px){body{font-size:18px}.shell{width:calc(100% - 42px)}.site-header{width:calc(100% - 42px);min-height:76px;padding-top:19px;font-size:12px}.site-header nav{gap:14px}.site-header nav a:nth-child(3),.site-header nav span{display:none}.hero{padding-top:55px}.topline{font-size:11px;gap:18px}.topline span:last-child{text-align:right}.hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:55px;padding:70px 0 80px}.hero-copy{padding:0}.hero h1{font-size:clamp(57px,14vw,80px)}.hero-copy p{font-size:20px}.hero-art figcaption{font-size:11px}.facts{grid-template-columns:1fr 1fr;gap:25px 20px}.facts dd{font-size:15px}.intro{display:block;padding-top:145px;padding-bottom:150px}.section-index{display:block;padding:0;margin-bottom:25px}.intro h2,.section-heading h2{font-size:clamp(39px,9.5vw,58px)}.intro p{font-size:20px;margin-top:26px}.final-design,.variations,.detail{padding-top:95px;padding-bottom:115px}.section-heading{display:block;margin-bottom:48px}.section-heading p{font-size:19px;margin-top:24px}.hero-final figcaption{font-size:10px}.variation-grid{grid-template-columns:1fr;gap:55px}.variation-grid figure:nth-child(even){transform:none}.variation-grid figcaption{margin-top:15px}.detail{display:block}.detail h2{font-size:40px}.detail-copy .section-index{margin-bottom:25px}.detail-copy p{font-size:19px;margin-top:25px}.detail figure{margin-top:60px}.detail figcaption{font-size:10px}.footer-inner{min-height:180px}.footer-mark{font-size:37px}.copyright{font-size:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Match the portfolio's type scale and blue/pink system; keep Festal's sage in the artwork. */
:root{--paper:#f9f6f1;--ink:#1f61a9;--sage:#eeb5bc;--rule:rgba(31,97,169,.62)}
body{color:var(--ink);line-height:1.55}
body::before{opacity:.12}
.eyebrow,.topline,.section-index,.facts dt,figcaption,.footer-inner>div>span{font-size:16px;letter-spacing:.015em}
.section-index,.hero-copy .eyebrow{color:var(--sage)}
.facts dt{color:var(--ink)}
.hero-copy p{font-size:20px;line-height:1.55}
.facts dd{font-size:19px}
.intro h2,.section-heading h2,.detail h2{font-size:clamp(42px,4.3vw,58px);letter-spacing:-.04em}
.intro p,.section-heading p{font-size:20px;line-height:1.55}
.hero-final{background:var(--paper)}
.footer-star{display:block;width:65px;height:90px;background:var(--sage);-webkit-mask:url('assets/imgVector4.svg') center/contain no-repeat;mask:url('assets/imgVector4.svg') center/contain no-repeat}
.copyright{background:#e3cccc}
@media(max-width:900px){.hero-copy p{font-size:19px}}
@media(max-width:620px){.topline,.hero-art figcaption{font-size:11px}.hero-copy p,.intro p{font-size:20px}.facts dd{font-size:15px}.intro h2,.section-heading h2{font-size:clamp(39px,9.5vw,58px)}.section-heading p,.detail-copy p{font-size:19px}.hero-final figcaption,.detail figcaption{font-size:10px}.footer-star{width:37px;height:55px}}

/* Shared case-study landing layout, retaining Festal's palette. */
.site-header{font-size:18px;min-height:97px}
.hero{padding-top:0}
.hero-grid{min-height:745px;grid-template-columns:minmax(0,1fr) minmax(0,1.03fr);gap:clamp(55px,8vw,120px);align-items:center;padding:50px 0 105px}
.hero-copy{padding:0;min-width:0}
.hero-copy .eyebrow{display:flex;align-items:center;gap:14px}
.hero-copy .eyebrow{color:var(--ink)}
.hero-star{display:inline-block;flex:none;width:15px;height:22px;background:currentColor;-webkit-mask:url('assets/imgVector2.svg') center/contain no-repeat;mask:url('assets/imgVector2.svg') center/contain no-repeat}
.hero h1{font-size:clamp(64px,5.5vw,88px);line-height:1;letter-spacing:-.065em;margin:38px 0 35px;white-space:nowrap;color:var(--ink)}
.hero h1::after{content:"";display:block;width:74px;height:8px;margin-top:22px;background:var(--sage)}
.hero-copy>p{font-size:20px;line-height:1.5;max-width:490px}
.hero-art{min-width:0}.hero-art img{aspect-ratio:4/3;object-fit:cover}
.hero-art figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--rule);margin-top:18px;padding-top:13px;text-align:left;color:var(--ink)}
.hero-art figcaption .hero-star{width:14px;height:20px}
.facts{margin-top:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding:28px 0 34px}
.intro h2 span{color:var(--ink)}
@media(max-width:900px){.hero-grid{gap:35px}.hero h1{font-size:clamp(52px,6vw,72px)}.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.site-header{font-size:12px;min-height:76px}.hero{padding-top:0}.hero-grid{display:block;min-height:0;padding:50px 0 90px}.hero h1{font-size:clamp(58px,14vw,76px);white-space:normal}.hero-art{margin-top:55px}.hero-art figcaption{font-size:11px}.facts{margin-top:0;gap:25px 20px}}

/* Let the project name and the design deliverables lead the case study. */
.hero h1{white-space:normal;font-size:clamp(56px,4.7vw,76px)}
.hero h1 .hero-title-sub{display:block;color:var(--ink);font:inherit;letter-spacing:inherit}

.section-index{color:#1f61a9}
.variation-grid{grid-template-columns:1fr;gap:82px}
.variation-grid figure:nth-child(even){transform:none}
.variation-grid img{aspect-ratio:4/3;object-fit:cover}
.variations{padding-bottom:140px}
.final-design{padding-top:140px}
@media(max-width:620px){.hero h1{font-size:clamp(53px,12vw,70px)}.variation-grid{gap:48px}.variations{padding-bottom:105px}.final-design{padding-top:95px}}

/* Show the supplied card mockup directly with the project brief. */
.intro{padding-top:145px;padding-bottom:145px;row-gap:72px}
.intro .brief-image{grid-column:1/-1;width:min(100%,760px);justify-self:center;margin:0}
.intro .brief-image img{display:block;width:100%;height:auto}
@media(max-width:620px){.intro{padding-top:105px;padding-bottom:105px}.intro .brief-image{margin-top:50px}}