/* PHOS case: original identity shown within the portfolio's existing layout. */
:root{--phos-blue:#0a3b7e}
.phos-card-cover{background:var(--phos-blue)}
.phos-card-cover>img:first-child{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.phos-card-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,27,65,.68),rgba(0,27,65,.2) 75%)}
.phos-card-mark{position:relative;z-index:1;width:54%;height:auto;max-height:55%;object-fit:contain;align-self:flex-start;margin-left:8%;filter:drop-shadow(0 2px 12px rgba(0,28,65,.16))}
/* The opening follows the typographic covers used throughout the portfolio. */
.phos-page .pw-detail-bar{color:var(--ink);border-color:rgba(31,32,36,.3)}
.phos-cover{background:var(--paper);color:var(--ink);align-items:center;min-height:100svh;overflow:visible}
.phos-cover .pw-case-cover-inner{display:flex;flex-direction:column;justify-content:space-between;min-height:calc(100svh - clamp(170px,20vh,260px) - 65px);gap:clamp(35px,6vh,70px)}
.phos-cover .pw-hero-meta,.phos-cover .pw-hero-foot{line-height:1.55;flex-wrap:wrap}
.phos-cover-heading{margin:auto 0;min-width:0}
.phos-cover-heading .pw-kicker{color:var(--mute)}
.phos-cover-heading .pw-case-title{font-size:clamp(125px,24vw,360px);line-height:.96;letter-spacing:-.035em;text-align:left;margin:clamp(18px,3vw,40px) 0 20px;white-space:nowrap}
.phos-cover-heading p{font:400 clamp(17px,1.55vw,23px)/1.55 var(--f-body);max-width:560px;margin:0}
.phos-cover .pw-hero-foot{align-items:center;border-top:1px solid rgba(31,32,36,.3);padding-top:18px}
.phos-cover .pw-hero-foot a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding:8px 0;white-space:nowrap}
.phos-photo{margin:0;padding:clamp(22px,4vw,60px) var(--gut) clamp(55px,7vw,105px);background:#e4e4e4;scroll-margin-top:90px}
.phos-photo-stage{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:3/2;background:#0a3b7e}
.phos-photo-image{width:100%;height:100%;object-fit:cover;display:block}
.phos-photo-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,27,65,.86),rgba(0,27,65,.56) 43%,rgba(0,27,65,.03) 84%)}
.phos-photo-logo{position:absolute;top:8%;left:6%;transform:none;width:min(34%,520px);color:#fff}
.phos-photo-logo img{display:block;width:100%;height:auto;filter:drop-shadow(0 2px 10px rgba(0,20,45,.28))}

.phos-photo figcaption{display:flex;justify-content:space-between;gap:12px 25px;flex-wrap:wrap;padding-top:15px;font:500 11px/1.6 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
/* phos.html does not load cheers.css, so the shared chapter-nav rules are
   repeated here: same padding, gap and hairlines as Cheers and DiVARAS. */
.phos-case .cheers-chapters{margin:0 var(--gut);padding:25px 0;display:flex;flex-wrap:wrap;gap:22px 35px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.phos-case .cheers-chapters a{display:flex;align-items:center;min-height:44px;color:inherit;font:400 13px/1.7 var(--f-body);text-underline-offset:5px}
.phos-case section[id]{scroll-margin-top:110px}
.phos-switch button:focus-visible,.phos-case .cheers-chapters a:focus-visible{outline:2px solid var(--red);outline-offset:5px}
.phos-page .pw-case-copy>div{min-width:0}
/* Scoped to the case copy only: the shared closing block (.pw-exit) keeps the
   site-wide heading size, so "LET'S TALK." matches Cheers and DiVARAS. */
.phos-page .pw-case-copy h2{font-size:clamp(43px,6vw,105px);line-height:1.04;text-wrap:balance;overflow-wrap:break-word}
.phos-page .pw-exit h2{line-height:1.04;text-wrap:balance;overflow-wrap:break-word}
@media(max-width:760px){.phos-page .pw-exit h2{font-size:clamp(55px,15vw,100px)}} /* same phone size as the other case studies */
.phos-credit{margin-top:35px;border-top:1px solid var(--line);padding-top:15px;font:500 11px/1.6 var(--f-body);letter-spacing:.1em}
.phos-brand-section,.phos-apps{padding:clamp(65px,8vw,120px) var(--gut);border-top:1px solid var(--line);scroll-margin-top:110px}
.phos-section-heading{display:grid;grid-template-columns:1fr 1fr;gap:15px 7vw;margin-bottom:42px}
.phos-section-heading .pw-kicker{grid-column:1/-1}
.phos-section-heading h2{font:800 clamp(42px,5.8vw,95px)/1.02 var(--f-display);margin:0;overflow-wrap:break-word;text-wrap:balance}
.phos-section-heading p{font:400 clamp(15px,1.35vw,20px)/1.75 var(--f-body);max-width:580px;margin:0;align-self:end}
.phos-switch{display:flex;gap:8px 24px;flex-wrap:wrap;border-top:1px solid var(--line);padding:13px 0}
.phos-switch button{font:500 12px/1.5 var(--f-body);color:var(--mute);background:none;border:0;border-bottom:2px solid transparent;padding:10px 0;min-height:44px;cursor:pointer} /* matches .cc-segment inactive */
.phos-switch button[aria-pressed=true]{color:var(--ink);border-color:var(--red)}
.phos-logo-stage{background:#fff;min-height:clamp(300px,42vw,560px);display:grid;place-items:center;padding:clamp(28px,6vw,85px);transition:background .35s}
.phos-logo-stage[data-surface=blue]{background:var(--phos-blue)}
.phos-logo-stage img{width:min(100%,600px);max-height:490px;height:auto;object-fit:contain}
.phos-caption{font:400 12px/1.7 var(--f-body);color:var(--mute);margin:13px 0 0}
.phos-colour-copy{padding-bottom:60px}
.phos-palette{display:grid;grid-template-columns:1fr 1fr;margin:0 var(--gut) clamp(48px,6vw,80px)}
.phos-swatch{min-height:clamp(220px,28vw,340px);padding:25px;display:flex;flex-direction:column;justify-content:space-between;font:500 12px/1.5 var(--f-body);letter-spacing:.1em}
.phos-swatch strong{font:800 clamp(30px,5vw,70px)/1 var(--f-display);letter-spacing:0}
.phos-swatch-blue{background:var(--phos-blue);color:#fff}.phos-swatch-white{background:#fff;color:var(--phos-blue)}
.phos-app-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2vw,26px)}
.phos-app-grid figure{min-width:0;margin:0}.phos-app-grid img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;display:block;background:#f3f1ed}.phos-app-grid figcaption{font:400 12px/1.6 var(--f-body);color:var(--mute);padding-top:12px}
@media(max-width:900px){.phos-app-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.phos-app-grid figure:last-child{grid-column:1/-1;max-width:calc(50% - 10px);justify-self:center}}
@media(max-width:760px){.phos-cover{padding-top:185px;min-height:100svh}.phos-cover .pw-case-cover-inner{min-height:calc(100svh - 185px - 80px);gap:32px}.phos-cover-heading .pw-case-title{font-size:clamp(104px,27vw,180px);margin:25px 0 17px}.phos-cover-heading p{font-size:16px;max-width:30ch}.phos-photo{padding:18px var(--gut) 60px}.phos-photo-stage{aspect-ratio:4/5}.phos-photo-image{object-position:58% center}.phos-photo-shade{background:linear-gradient(180deg,rgba(0,27,65,.44),rgba(0,27,65,.14) 42%,transparent 70%)}.phos-photo-logo{top:6%;bottom:auto;left:6%;transform:none;width:58%}.phos-page .pw-case-copy h2{font-size:clamp(43px,10vw,74px)}.phos-section-heading{grid-template-columns:1fr;gap:18px}.phos-section-heading .pw-kicker{grid-column:auto}.phos-section-heading h2{font-size:clamp(42px,10vw,68px)}.phos-app-grid figcaption{font-size:12px}.phos-swatch{min-height:200px;padding:15px}.phos-swatch strong{font-size:clamp(20px,5vw,40px)}}
@media(max-width:440px){.phos-card-mark{width:54%}.phos-cover{padding-top:195px}.phos-cover .pw-case-cover-inner{min-height:calc(100svh - 195px - 80px)}.phos-cover-heading .pw-case-title{font-size:clamp(100px,27vw,145px)}.phos-cover .pw-hero-foot a{white-space:normal}.phos-palette{grid-template-columns:1fr}.phos-swatch{min-height:190px}.phos-app-grid{grid-template-columns:1fr;gap:24px}.phos-app-grid figure:last-child{grid-column:auto;max-width:none}.phos-app-grid img{aspect-ratio:1/1}}
@media(prefers-reduced-motion:reduce){.phos-logo-stage{transition:none}}


.phos-app-media{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:#f3f1ed}.phos-app-grid .phos-app-media>img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}

@media(max-width:760px){.phos-photo-logo{top:6%;left:6%;width:58%}}

/* The original PHOS motif follows the palette; physical product mockups are limited to tag and label concepts. */
.phos-pattern{padding:0 var(--gut) clamp(65px,8vw,120px);scroll-margin-top:110px}
.phos-pattern-intro{border-top:1px solid var(--line);padding:clamp(30px,4vw,55px) 0 28px;display:grid;grid-template-columns:1fr 1fr;gap:12px 7vw}
.phos-pattern-intro .pw-kicker{grid-column:1/-1}
.phos-pattern-intro h2{font:800 clamp(42px,5.8vw,95px)/1.02 var(--f-display);margin:0;overflow-wrap:break-word}
.phos-pattern-intro p{font:400 clamp(15px,1.35vw,20px)/1.75 var(--f-body);max-width:580px;margin:0;align-self:end}
.phos-pattern-art{background-color:var(--phos-blue);background-image:url("../phos/pattern-white.svg");background-repeat:repeat;background-position:center;background-size:465px 129px;height:clamp(205px,27vw,340px)}
.phos-app-grid figure{min-width:0}
.phos-app-grid img{object-fit:cover}
.phos-app-grid .phos-white-tag>img.phos-tag-logo{position:absolute;left:32.7%;top:40.2%;width:34.7%;height:auto;aspect-ratio:1186/603;object-fit:contain;background:transparent;pointer-events:none}
@media(max-width:760px){.phos-pattern-intro{grid-template-columns:1fr;gap:17px}.phos-pattern-intro .pw-kicker{grid-column:auto}.phos-pattern-intro h2{font-size:clamp(42px,10vw,68px)}.phos-pattern-art{background-size:310px 86px;height:215px}}
@media(max-width:440px){.phos-pattern-art{height:200px}}

/* Instagram profile mockup: a recreated phone screen, not a live embed.
   Reuses the device-frame language from the Aelia case (dark bezel, camera
   notch, home indicator) scaled down for a single static illustration. */
.phos-insta .phos-section-heading{margin-bottom:28px}
.phos-insta-stage{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(28px,4vw,64px)}
.phos-insta-device{position:relative;width:260px;height:520px;flex:none;box-sizing:border-box;border:2px solid #303033;background:#202023;border-radius:28px;padding:12px 7px 14px;box-shadow:0 18px 40px rgba(31,32,36,.18)}
.phos-insta-camera{position:absolute;width:22px;height:4px;border-radius:4px;background:#09090a;top:8px;left:calc(50% - 11px)}
.phos-insta-home{position:absolute;width:58px;height:3px;border-radius:3px;background:#a4a4a6;bottom:7px;left:calc(50% - 29px)}
.phos-insta-viewport{width:100%;height:100%;overflow:hidden;border-radius:14px;background:#141414}
.phos-insta-shot{display:block;width:100%;height:auto}
.phos-insta-note{max-width:400px}
.phos-insta-note .phos-caption{margin:0}
.phos-insta-link{display:inline-block;margin-top:14px;font:500 13px/1.5 var(--f-body);color:inherit;border-bottom:1px solid currentColor;padding-bottom:2px}
.phos-insta-link:hover{color:var(--red)}
@media(max-width:760px){.phos-insta-stage{justify-content:center;align-items:center;text-align:center}.phos-insta-note{max-width:320px}}