/* Sard takes shape ? approved identity, September 2026. */
html { scroll-padding-top:100px; }
html body{background:#f3f0e9}
html #header{padding:18px 4vw;background:rgba(243,240,233,.94);border-bottom:1px solid #ded8ce;transform:none!important}
html #header .brand img{width:88px}
html #header nav{gap:26px}
.story-hero{height:auto;position:relative;isolation:isolate}
.story-stage{height:900px;min-height:680px;max-height:1100px;position:relative;overflow:hidden;background:#f3f0e9}
.story-topline{position:absolute;top:112px;inset-inline:4vw;display:flex;justify-content:space-between;font-size:13px;color:#57534c;border-bottom:1px solid #d8d0c3;padding-bottom:14px;z-index:5}
.story-drawing{position:absolute;width:55%;height:44%;top:22%;left:22.5%;will-change:transform,opacity}
.story-drawing img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.story-ghost{opacity:.055}
.story-mark{clip-path:inset(0 0 0 0)}
.story-line{position:absolute;width:110%;height:80px;left:-5%;top:70%;overflow:visible;opacity:.7}
.story-line path{fill:none;stroke:#b4552d;stroke-width:2}
.story-orbit{position:absolute;inset:0;pointer-events:none;opacity:0}
.orbit-card{position:absolute;width:18vw;max-width:250px;background:#f3f0e9;padding:7px;box-shadow:0 12px 35px #1a181521;border:1px solid #d8d0c3}
.orbit-card img{width:100%;height:auto;aspect-ratio:1.6;object-fit:cover;display:block}
.orbit-card figcaption{font-size:11px;padding:6px 4px 0;color:#57534c;text-align:start}
.orbit-one{top:21%;right:5%;transform:rotate(8deg)}
.orbit-two{top:32%;left:3%;transform:rotate(-9deg)}
.orbit-three{top:61%;left:19%;transform:rotate(5deg);width:15vw}
.story-intro{position:absolute;inset-inline:4vw;bottom:100px;display:flex;justify-content:space-between;align-items:end;gap:40px;z-index:4}
.story-kicker{color:#a34726;font-size:14px;line-height:1.8;margin-bottom:18px}
html .story-intro h1{font-size:clamp(35px,4.5vw,72px);font-weight:700;line-height:1.4}
.story-intro-aside{max-width:290px;font-size:17px;color:#57534c}
.story-link{display:inline-block;text-decoration:none;margin-top:18px;color:#1a1815;border-bottom:1px solid #b4552d;padding-bottom:6px}
.story-bottom{position:absolute;bottom:22px;inset-inline:4vw;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#57534c;gap:15px;z-index:8}
.story-count{direction:ltr}
.story-motion{font:inherit;border:0;border-bottom:1px solid #a79c8b;background:transparent;color:inherit;cursor:pointer;padding:5px}
.story-meter{position:absolute;bottom:0;left:0;right:0;height:3px;background:#e4d8c8;z-index:9}
.story-meter span{display:block;height:100%;background:#b4552d;transform:scaleX(0);transform-origin:right}
.story-portal{position:absolute;inset:160px 4vw 80px;overflow:hidden;opacity:0;pointer-events:none}
.portal-photo{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08)}
.portal-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(26,24,21,.90),rgba(26,24,21,0) 95%)}
.portal-caption{position:absolute;bottom:12%;inset-inline:7%;max-width:690px;color:#fff}
.portal-label{font-size:14px;display:block;margin-bottom:15px}
html .portal-caption h2{color:#fff;font-size:clamp(40px,5vw,78px);line-height:1.4;margin-bottom:14px}
.portal-caption p{max-width:430px;font-size:18px;line-height:1.9;color:#fff}
.portal-link{display:inline-block;color:#fff;text-decoration:none;border-bottom:1px solid #fff9;margin-top:25px;padding-bottom:7px;font-size:17px}
.portal-stamp{position:absolute;top:22px;inset-inline:28px;display:flex;justify-content:space-between;align-items:center;color:#1a1815;background:#f3f0e9;padding:12px 18px;font-size:12px}
.portal-stamp img{width:65px;height:28px;object-fit:contain}
html.story-ready:not(.story-reduced) .story-hero{height:290vh}
html.story-ready:not(.story-reduced) .story-stage{position:sticky;top:0;height:100svh;min-height:620px;max-height:none}
html.story-reduced .story-stage{height:850px}
html.story-reduced .story-motion{border-color:#b4552d}
.atelier-section{padding:140px 4vw;display:grid;grid-template-columns:0.85fr 1.45fr;gap:7vw;align-items:center;border-bottom:1px solid #d8d0c3;background:#eae3d8;position:relative}
html .atelier-heading h2{font-size:clamp(46px,5.4vw,84px);line-height:1.3;margin-bottom:30px}
.atelier-accent{color:#a34726}
.atelier-heading>p{max-width:345px;color:#57534c;font-size:18px}
.atelier-switch{display:inline-flex;margin:28px 0 18px;gap:4px;border:1px solid #b8ac99;padding:5px}
.atelier-switch button{font:inherit;background:transparent;color:#57534c;border:0;padding:11px 24px;cursor:pointer}
.atelier-switch button[aria-pressed=true]{background:#1a1815;color:#f3f0e9}
html .atelier-heading .atelier-note{font-size:13px;line-height:1.9}
.atelier-board{background:#f3f0e9;border:1px solid #b9ad99;box-shadow:0 25px 60px #1a181512;min-width:0}
.atelier-board-bar{display:flex;justify-content:space-between;padding:17px 22px;border-bottom:1px solid #d8d0c3;font-size:13px;color:#57534c}
.atelier-scene{position:relative;height:450px;overflow:hidden;padding:32px}
.atelier-scene>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:width .8s ease,height .8s ease,filter .8s ease;filter:brightness(.53)}
.atelier-scene-copy{position:absolute;inset-inline:32px;bottom:35px;color:white;transition:transform .8s ease,color .8s ease}
.atelier-scene-copy>span{font-size:13px}
html .atelier-scene-copy h3{font-size:clamp(30px,4vw,60px);margin:18px 0 10px;line-height:1.4;color:inherit;transition:font-size .8s ease}
.atelier-scene-copy p{font-size:16px}
.atelier-scene-copy a{display:inline-block;border-bottom:1px solid currentColor;padding-bottom:5px;margin-top:24px;text-decoration:none;font-size:14px}
.atelier-board[data-state=raw] .atelier-scene>img{width:100%;height:54%;filter:brightness(1)}
.atelier-board[data-state=raw] .atelier-scene-copy{color:#1a1815;bottom:24px}
html .atelier-board[data-state=raw] .atelier-scene-copy h3{font-size:26px;margin:4px 0}
.atelier-board[data-state=raw] .atelier-scene-copy a{margin-top:8px}
.atelier-explanation{font-size:13px;line-height:1.8;padding:18px 22px;border-top:1px solid #d8d0c3;color:#57534c;min-height:70px}
html .sec{border-radius:0!important;box-shadow:none!important;transform:none!important}
html .sec .wrap{max-width:1500px;padding-inline:4vw}
html #work{padding-block:115px;background:#f3f0e9}
html #work .sec-head h2{font-size:clamp(34px,5vw,68px);line-height:1.4;max-width:900px}
html #work .sec-head .lead{font-size:17px;max-width:620px!important}
html #work .work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:64px 38px;align-items:start}
html #work .work-card{border:0;background:transparent;overflow:visible;box-shadow:none;min-width:0}
html #work .work-card:nth-child(even){margin-top:95px}
html #work .work-card .thumb{border:1px solid #d8d0c3;border-radius:0;aspect-ratio:1.6}
html #work .work-card .meta{padding:20px 0;background:transparent;border-bottom:1px solid #d8d0c3}
html #work .work-card h3{font-size:30px;line-height:1.4}
html #work .work-card .meta p{font-size:16px}
html #work .work-card .yr{color:#57534c}
html #work .chips{margin:28px 0 45px}
html .chip{border-radius:0}
html #services{padding-block:100px;background:#ebe4da;border-top:1px solid #d8d0c3}
html #services .service-card{border-radius:0;box-shadow:none}
html #services .service-tracks a{border-radius:0}
html #services .service-card.package-featured{border:1px solid #a34726}
html .cta-mid{padding:90px 4vw!important;background:#1a1815!important;color:#f3f0e9}
html .cta-mid p{color:#f3f0e9;font-family:var(--font-display);font-size:clamp(27px,3.3vw,46px);line-height:1.7}
html .cta-mid .btn-ink{background:#f3f0e9;color:#1a1815}
html .torn,html .fold-dim,html #inkThread,html .sec-seam{display:none!important}
html #contact{border-top:1px solid #d8d0c3}
html #contact .sec-head h2{font-size:clamp(36px,5vw,70px);line-height:1.5}
.story-footer{padding:65px 4vw 104px;border-top:1px solid #d8d0c3;display:flex;align-items:end;justify-content:space-between;gap:30px}
.story-footer img{width:min(26vw,280px);height:auto}
.story-footer p{font-size:14px;color:#57534c}
.story-footer a{color:#a34726;text-decoration:none;display:block;margin-top:12px}
.story-footer .footer-legal{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:8px}
.story-footer .footer-legal a{display:inline-flex;align-items:center;min-height:44px;margin-top:0;font-size:14px;color:#57534c;text-decoration:underline;text-underline-offset:4px}
html a:focus-visible,html button:focus-visible{outline:2px solid #a34726;outline-offset:6px}
html[lang=en] .story-stage,html[lang=en] .atelier-section{direction:ltr}
@media(min-width:1600px){.story-drawing{width:48%;left:26%}}
@media(max-width:760px){
html #header{padding:15px 20px}
html #header .brand img{width:75px}
.story-stage{min-height:670px;height:780px}
html.story-ready:not(.story-reduced) .story-hero{height:240svh}
html.story-ready:not(.story-reduced) .story-stage{min-height:570px}
.story-topline{top:90px;inset-inline:22px;font-size:11px;gap:18px}
.story-topline span:last-child{max-width:110px;text-align:end}
.story-drawing{width:82%;left:9%;height:31%;top:25%}
.story-line{top:65%;height:50px}
.story-intro{inset-inline:23px;bottom:82px;display:block}
.story-kicker{font-size:12px;margin-bottom:12px}
html .story-intro h1{font-size:36px}
.story-intro-aside{margin-top:15px;max-width:300px;font-size:15px}
.story-link{margin-top:10px;font-size:14px}
.orbit-card{width:31vw;padding:4px}
.orbit-card figcaption{display:none}
.orbit-one{top:22%;right:-4%}
.orbit-two{top:35%;left:-5%}
.orbit-three{display:none}
.story-bottom{inset-inline:23px;bottom:17px;font-size:10px;gap:12px}
.story-count{display:none}
.story-portal{inset:142px 14px 67px}
.portal-caption{inset-inline:24px;bottom:9%}
html .portal-caption h2{font-size:38px}
.portal-caption p{font-size:16px}
.portal-label{font-size:12px}
.portal-stamp{inset-inline:14px;top:16px;padding:9px 12px}
.atelier-section{display:block;padding:75px 22px}
html .atelier-heading h2{font-size:52px}
.atelier-heading>p{font-size:17px}
.atelier-board{margin-top:35px}
.atelier-scene{height:380px}
.atelier-scene-copy{inset-inline:22px}
html .atelier-scene-copy h3{font-size:38px}
.atelier-explanation{font-size:12px}
html #work{padding-block:75px}
html .sec .wrap{padding-inline:22px}
html #work .work-grid{grid-template-columns:1fr;gap:35px}
html #work .work-card:nth-child(even){margin-top:0}
html #work .work-card .meta p{font-size:15px}
html #work .work-card h3{font-size:27px}
html #services{padding-block:70px}
.story-footer{padding:45px 22px 100px;align-items:start;flex-direction:column}
.story-footer img{width:155px}
}
@media(prefers-reduced-motion:reduce){.atelier-scene>img,.atelier-scene-copy,.atelier-scene-copy h3{transition:none!important}.orbit-card{transform:none!important}}

.portal-caption{background:#1a1815;padding:24px 30px;max-width:620px}
.portal-caption h2,.portal-caption p{background:#1a1815}
.atelier-board[data-state=composed] .atelier-scene-copy{background:#1a1815;padding:18px 22px;max-width:85%}
.atelier-board[data-state=raw] .atelier-scene-copy{background:#f3f0e9}
html.story-reduced .atelier-scene>img,html.story-reduced .atelier-scene-copy,html.story-reduced .atelier-scene-copy h3{transition:none}
@media(max-width:760px){.portal-caption{padding:20px;inset-inline:20px}.portal-caption h2{font-size:32px!important}.portal-caption p{font-size:14px}.portal-link{margin-top:14px}.atelier-board[data-state=composed] .atelier-scene-copy{inset-inline:18px;max-width:none}.atelier-scene-copy p{font-size:14px}}
@media(max-height:640px) and (min-width:761px){.story-drawing{height:35%;top:24%}.story-intro{bottom:74px}html .story-intro h1{font-size:38px}.story-topline{top:90px}}

html .atelier-scene-copy p{color:inherit;background:inherit}
.orbit-three{top:53%;width:14vw}

/* National Day: a direct route into the existing campaign. */
html #header .national-nav{color:#234b39;border-bottom:1px solid #234b39;padding-block:6px}
.national-invitation{position:relative;isolation:isolate;overflow:hidden;margin:30px 4vw 0;padding:clamp(34px,4vw,56px) clamp(26px,4.6vw,72px);display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.8fr);gap:clamp(38px,6vw,88px);align-items:center;background:#103e32;color:#f8f4ea;border-block:1px solid #577363;box-shadow:0 18px 50px rgba(9,44,35,.12)}
.national-invitation::before{content:"";position:absolute;z-index:-1;inset-inline-end:clamp(22px,4vw,62px);top:26px;width:132px;aspect-ratio:1;background:url('national96/courage-weave.svg') center/contain no-repeat;opacity:.16;transform:rotate(9deg);pointer-events:none}
.national-invitation::after{content:"";position:absolute;z-index:-1;inset:12px;border:1px solid rgba(230,200,145,.19);pointer-events:none}
.national-invitation-copy,.national-invitation-action{position:relative;z-index:1}
.national-invitation-lockup{display:inline-flex;max-width:100%;padding:15px 18px;margin-bottom:26px;background:#002728;border:1px solid rgba(230,200,145,.22);line-height:0}
.national-invitation-lockup img{display:block;width:180px;max-width:100%;height:auto}
.national-invitation p{color:#f4f1e7;background:transparent;font-size:17px;line-height:1.85;margin:0}
.national-invitation .national-invitation-kicker{color:#e6c891;background:transparent;font-size:13px;font-weight:500;margin-bottom:12px}
html .national-invitation h2{font-family:'El Messiri',serif;font-size:clamp(31px,3vw,48px);line-height:1.42;color:#f8f4ea;background:transparent;margin:0 0 12px}
.national-invitation-action{display:flex;align-items:flex-start;flex-direction:column;gap:16px;padding-inline-start:clamp(24px,3vw,42px);border-inline-start:1px solid rgba(230,200,145,.35)}
.national-invitation-price{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.national-invitation-price strong{font-family:'El Messiri',serif;font-size:34px;font-weight:600;line-height:1.3;color:#e6c891}
.national-invitation-price span{font-size:13px;color:#e1e4d6}
html .national-invitation-action>a{display:inline-flex;justify-content:space-between;align-items:center;min-height:52px;padding:12px 20px;background:#e6c891;color:#102e24;text-decoration:none;font-size:16px;font-weight:500;border:1px solid #e6c891;border-radius:3px;line-height:1.6;transition:background-color 180ms ease,color 180ms ease,box-shadow 180ms ease,border-color 180ms ease}
html .national-invitation-action>a:hover{background:#f0d8ac;border-color:#f0d8ac;box-shadow:0 6px 18px rgba(3,29,37,.28)}
html .national-invitation-action>a:focus-visible{outline:3px solid #f8f4ea;outline-offset:5px}
.national-invitation .national-invitation-note{font-size:12px;line-height:1.8;color:#d8e1d4;max-width:350px}
@media(max-width:760px){.national-invitation{margin:24px 22px 0;padding:30px 22px;grid-template-columns:1fr;gap:26px}.national-invitation::before{inset-inline-end:25px;top:24px;width:92px}.national-invitation::after{inset:9px}.national-invitation-lockup{padding:12px 15px;margin-bottom:22px}.national-invitation-lockup img{width:148px}.national-invitation p{font-size:15px}.national-invitation-action{padding-inline-start:0;padding-top:24px;border-inline-start:0;border-top:1px solid rgba(230,200,145,.35)}.national-invitation .national-invitation-note{font-size:12px}.national-invitation-action>a{width:100%;text-align:start;box-sizing:border-box}}
@media(max-width:420px){.national-invitation{margin-inline:14px;padding-inline:18px}.national-invitation::before{inset-inline-end:16px;width:76px;opacity:.12}html .national-invitation h2{font-size:30px}}
@media(prefers-reduced-motion:reduce){html .national-invitation-action>a{transition:none}}

/* Keep section headings and copy readable at narrow widths. */
html .sec-head{flex-wrap:wrap;min-width:0}
html .sec-head .lead{flex-basis:100%;min-width:0}
@media(prefers-reduced-motion:reduce){html .reveal{opacity:1!important;transform:none!important;transition:none!important}html *,html *::before,html *::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
html.story-reduced *,html.story-reduced *::before,html.story-reduced *::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}

/* Reserve space for the fixed chat launcher without covering motion controls. */
.story-bottom{padding-inline-end:180px}
@media(max-width:760px){.story-bottom{padding-inline-end:165px;flex-direction:column;align-items:flex-start;gap:2px}.story-cue{max-width:150px}.story-motion{white-space:nowrap}}
html .cta-mid a:focus-visible{outline-color:#f3f0e9}

.skip-content{position:fixed;top:8px;inset-inline-start:12px;z-index:210;background:#f3f0e9;color:#1a1815;padding:10px 18px;transform:translateY(-200%)}.skip-content:focus{transform:none}