/* Cendavo homepage (Liquid Glass, Task 37), loaded only on /, like home.js. Tokens, buttons and the glass panel (.lg)
   come from site.css and glass.css. Nothing is hidden outside the guarded block at the end, and only while .ph-wait. */
.band-warm{background:var(--warm)}
/* Task 43: homepage sections meet edge to edge, so each gets a little under the site-wide --section; two together no
   longer leave a 240px gap. */
:root{--home-sec:clamp(52px,6.4vw,92px)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
/* The glass nav pill floats over the hero instead of pushing it down. */
.site-header{margin-bottom:-76px}

/* Hero: the WebGL glass logo (glass-scene.js) where capable, the still render as the host's background otherwise, under
   a light veil. On motion-capable wide screens the hero is taller than the screen and its stage is sticky. */
.hero{position:relative}
/* A column, so where its height is released the copy still fills the screen and the tag adds height (Task 46). */
.hero-pin{position:relative;display:flex;flex-direction:column;height:100svh;min-height:640px;overflow:hidden}
/* Task 44: the scene (and the still) feathers out at its foot into the page, never a hard edge over a flat band. */
.hero-gl{position:absolute;inset:0;background:#F6F5F1 url("/assets/glass/hero-glass-poster.jpg") 50% 50%/cover no-repeat;-webkit-mask-image:linear-gradient(180deg,#000 74%,transparent);mask-image:linear-gradient(180deg,#000 74%,transparent)}
.hero-gl::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(246,245,241,.92) 0%,rgba(246,245,241,.6) 34%,rgba(246,245,241,0) 58%)}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-gl:not(.is-live) .hero-canvas{display:none}
.hero-in{position:relative;z-index:2;flex:1 0 auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;height:100%;padding-block:120px clamp(56px,9vh,104px)}
.hero-copy{grid-column:1/7;grid-row:1}
.hero-h{margin:0;font-size:clamp(2.75rem,.5rem + 6vw,6.6rem);font-weight:820;font-stretch:84%;line-height:.9;letter-spacing:-.035em}
.ln{display:block;overflow:hidden;padding:0 .08em .06em 0;margin-bottom:-.06em}
.ln>span{display:block}
.hero-sub{margin:clamp(24px,3.4vh,40px) 0 0;max-width:30rem;color:var(--ink-2);font-size:1.1875rem;line-height:1.5}
/* Illustrative glass cards over the scene (aria-hidden; the host's label describes the hero). Their static state is the
   end of the opening: 10:30 is picked and booked. Wide screens only. */
.hero-cards{position:absolute;inset:0;pointer-events:none}
.gcard{position:absolute;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:20px;font-size:15px;line-height:1.2}
.c-enq{left:45%;top:25%}
.c-book{left:42%;top:74%;width:262px;flex-direction:column;align-items:stretch;gap:9px}
.gc-t{display:flex;flex-direction:column;gap:4px;white-space:nowrap}
.gc-t b{font:700 1em/1.1 var(--font-display);font-stretch:96%}
.gc-t small{font-size:.82em;color:var(--ink-soft)}
.tag{padding:.3em .6em;border-radius:999px;background:rgba(255,255,255,.8);font:600 .72em/1 var(--font-display);color:var(--amber-ink)}
.ava{display:grid;place-items:center;width:2.5em;height:2.5em;border-radius:50%;background:var(--amber);font:760 1em/1 var(--font-display)}
.when{align-self:flex-start;font-size:.78em;color:var(--ink-soft)}
.book-top{display:flex;align-items:center;justify-content:space-between}
.book-title{font:740 1.05em/1.1 var(--font-display);font-stretch:94%}
.c-book:not(.booked) :is(.bt-b,.bb-b),.c-book.booked :is(.bt-a,.bb-a){display:none}
.book-day{margin:0;font-size:.82em;color:var(--ink-soft)}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.slots span{display:grid;place-items:center;height:2.2em;border-radius:10px;background:rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(14,14,13,.12) inset;font:600 .85em/1 var(--font-display);font-variant-numeric:tabular-nums}
.slots .slot-pick.on{background:var(--ink);color:#fff;box-shadow:none}
.book-btn{display:grid;place-items:center;height:2.6em;border-radius:999px;background:var(--amber);font:680 .9em/1 var(--font-display)}
.c-book.booked .book-btn{background:var(--ok);color:#fff}
.bb-b{display:inline-flex;align-items:center;gap:.4em}
.gcard svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* Text only: it never takes a click meant for a hero button (Task 46). */
.hero-cap{position:absolute;z-index:2;right:var(--gut);bottom:88px;display:flex;align-items:baseline;gap:10px;margin:0;padding:10px 16px;border-radius:999px;font:640 .875rem/1.3 var(--font-display);pointer-events:none}
.hero-cap span{font:400 .82rem/1.4 var(--font-text);color:var(--ink-soft)}

/* Showreel: the frame opens from a glass lens as it scrolls in (home.js, clip-path); no box, its edges feather into the
   page; the chapters sit below the film; one glass Pause/Play chip in the top corner (reel.js). */
.reel{padding-block:var(--home-sec)}
.reel-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:start}
.reel-head{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:16px 32px;margin-bottom:clamp(32px,4vw,56px)}
.reel-head h2{margin:0;font-size:clamp(2.25rem,1.2rem + 3vw,4.25rem);font-weight:780;font-stretch:86%;letter-spacing:-.03em}
.reel-head p{justify-self:end;max-width:46ch;margin:0;color:var(--ink-2);font-size:1rem}
.reel-fig{grid-column:1/-1;position:relative;margin:0}
.reel-frame{position:relative;width:min(100%,calc(62svh * 16 / 9));aspect-ratio:16/9;margin-inline:auto;overflow:hidden;border-radius:0;background:var(--warm-2);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent);mask-composite:intersect}
.reel-video{display:block;width:100%;height:100%;object-fit:cover}
.reel-toggle{position:absolute;right:7%;top:10%;min-height:44px;padding:0 16px;border:1px solid rgba(255,255,255,.9);border-radius:var(--radius-pill);background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);box-shadow:inset 0 1px 0 #fff,0 10px 24px -14px rgba(14,14,13,.45);color:var(--ink);font:600 .9375rem/1 var(--font-display);cursor:pointer}
.reel-toggle:hover{background:#fff}
.reel-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px #fff}
.reel-panel{width:min(100%,calc(62svh * 16 / 9));margin:18px auto 0}
.reel-panel:has(.chapters[hidden]){display:none}
.chapters{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 16px}
.chapters button{display:grid;gap:6px;align-content:start;width:100%;min-height:64px;padding:14px 0 16px;border:0;border-top:2px solid var(--line-2);background:none;color:var(--mute);text-align:left;font:600 .9375rem/1.2 var(--font-display)}
.chapters button:hover,.chapters button[aria-current="true"]{color:var(--ink)}
.chapters button[aria-current="true"]{border-top-color:var(--amber)}
.ch-t{font:500 .8125rem/1 var(--font-text);font-variant-numeric:tabular-nums}
.reel-cap{width:min(100%,calc(62svh * 16 / 9));margin:14px auto 0;color:var(--mute);font-size:.92rem}

/* Marquee: the words cut out of the footage loop (an SVG mask), then glass pills over a strip of photos. Decorative and
   aria-hidden (a visually hidden line says the same); home.js moves them and Pause motion stops them. */
.marq{overflow:hidden;padding-block:clamp(56px,7vw,112px)}
/* Task 45: white frosted-glass type on the light base: a light fill with the footage only faintly through it, over a
   separate rim layer (the same letters as an outline, the same --mqx) that gives the edges contrast. No filter on the
   moving layers, so nothing repaints a blur every frame. */
.mq-word{--mqx:0px;position:relative;height:clamp(64px,10vw,150px)}
.mq-rim,.mq-type{position:absolute;inset:0;overflow:hidden}
.mq-rim{background:linear-gradient(180deg,rgba(112,100,84,.6),rgba(36,30,22,.82));-webkit-mask:url("/assets/glass/marquee-type-rim.svg") var(--mqx) calc(50% + 1px)/auto 100% repeat-x;mask:url("/assets/glass/marquee-type-rim.svg") var(--mqx) calc(50% + 1px)/auto 100% repeat-x}
.mq-type{background:linear-gradient(180deg,#FFFFFF,#EEF1F4 55%,#F8F9FA);-webkit-mask:url("/assets/glass/marquee-type.svg") var(--mqx) 50%/auto 100% repeat-x;mask:url("/assets/glass/marquee-type.svg") var(--mqx) 50%/auto 100% repeat-x}
.mq-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.18}
.mq-strip{position:relative;height:clamp(150px,16vw,210px);margin-top:clamp(20px,3vw,36px)}
/* one strip: each pill rides centred on its own photo tile, so it never straddles a gap */
.mq-photos{position:absolute;left:0;top:0;bottom:0;display:flex;gap:10px;width:max-content}
.mq-tile{position:relative;flex:none;height:100%}
.mq-photos img{display:block;flex:none;width:auto;height:100%;aspect-ratio:3/2;object-fit:cover;border-radius:18px}
.mq-tile .mq-pill{position:absolute;left:50%;top:50%;max-width:calc(100% - 24px);transform:translate(-50%,-50%);padding-block:8px;line-height:1.15;text-align:center;white-space:normal}
.mq-pill{display:inline-flex;align-items:center;min-height:52px;padding:0 22px;border-radius:999px;font:620 1rem/1 var(--font-display);white-space:nowrap}

/* Concept projects: a wide lead card and two tall ones; the photo turns into the concept's loop on hover or when centred
   (reel.js); the text sits on a frosted glass body; the title link covers the card. */
.work{padding-block:var(--home-sec)}
.work-head{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:32px;padding-bottom:clamp(40px,4vw,64px)}
.work-head h2{margin:0;font-size:clamp(2.75rem,1rem + 5.4vw,6.6rem);font-weight:780;font-stretch:78%;letter-spacing:-.03em}
.work-head div{justify-self:end;max-width:42ch}
.work-head p{margin:0 0 8px;color:var(--ink-2)}
.work-head .ulink+.ulink{margin-left:28px}
.teaser{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px var(--col-gap);align-items:start}
.teaser-card{position:relative;isolation:isolate;grid-column:span 3}
.teaser-card:first-child{grid-column:1/span 6}
.teaser-card:last-child{margin-top:72px}
.teaser-img{position:relative;z-index:-1;margin:0;aspect-ratio:3/4;overflow:hidden;border-radius:18px;background:var(--warm-2)}
.teaser-card:first-child .teaser-img{aspect-ratio:16/11;border-radius:22px}
.teaser-img img{width:100%;height:100%;object-fit:cover}
.teaser-img::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.42) 50%,rgba(255,255,255,0) 65%);transform:translateX(var(--sweep,-120%));pointer-events:none}
.hover-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.teaser-body{margin:-64px 14px 0;padding:0 20px 20px;border:1px solid rgba(255,255,255,.85);border-radius:20px;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,.72));box-shadow:inset 0 1px 0 #fff,0 20px 40px -24px rgba(58,40,12,.4)}
.teaser-card h3{margin:20px 0 0;font-weight:760;font-stretch:88%;font-size:clamp(1.4rem,1rem + 1vw,2rem);line-height:1;letter-spacing:-.02em}
.teaser-card:first-child h3{font-size:clamp(1.7rem,1rem + 1.8vw,2.8rem)}
.teaser-card h3 a{text-decoration:none}
.teaser-card h3 a::after{content:"";position:absolute;inset:0}
.teaser-card h3 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}
.teaser-label{margin:10px 0 0;color:var(--amber-ink);font-size:.9rem;font-weight:700}
.teaser-line{margin:12px 0 0;max-width:46ch;color:var(--ink-2);font-size:1rem}

/* Before/after section */
.ba{padding-block:var(--home-sec)}
.ba-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:center}
.ba-copy{grid-column:1/span 4}
.ba-copy h2{font-size:clamp(2.1rem,1.2rem + 2.6vw,3.75rem);font-weight:780;font-stretch:86%;letter-spacing:-.03em}
.ba-copy p{color:var(--ink-2);font-size:1rem;max-width:40ch}

/* Before/after comparison (fictional business illustration) */
.compare{--pos:50%;grid-column:6/-1}
/* The comparison sits in a glass browser frame (.lg) that swings in once (home.js). */
.compare-frame{padding:10px;border-radius:24px}
.compare-frame .browser-bar{border-radius:14px 14px 0 0}
.compare-frame .compare-stage{border-radius:0 0 14px 14px}
.browser-bar{display:flex;align-items:center;gap:14px;height:38px;padding:0 10px;background:#F4F3EF;border-bottom:1px solid var(--line-dark)}
.browser-url{flex:0 1 340px;min-width:0;margin:0 auto;padding:2px 12px;border-radius:3px;background:#fff;color:var(--mute);font-size:12px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.compare-tag{flex:none;padding:3px 9px;border-radius:var(--radius-pill);background:var(--ink);color:#fff;font:650 12px/1.3 var(--font-display)}
/* Task 46: draggable (home.js sets the range, still the accessible control); vertical swipes still scroll. */
.compare-stage{position:relative;isolation:isolate;aspect-ratio:16/10;overflow:hidden;container-type:inline-size;touch-action:pan-y;cursor:ew-resize;-webkit-user-select:none;user-select:none}
.mock{position:absolute;inset:0;pointer-events:none}
.mock-before{background:#BDBDBD}
.mock-after{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.compare-seam{position:absolute;z-index:2;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none}
/* The grip stops its radius short of each edge, so it shows whole at 0 and 100. */
.compare-stage::after{content:"";position:absolute;z-index:3;top:50%;left:clamp(18px,var(--pos),calc(100% - 18px));width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:linear-gradient(90deg,transparent 14px,var(--ink) 14px 16px,transparent 16px 20px,var(--ink) 20px 22px,transparent 22px) #fff;box-shadow:0 6px 18px rgba(0,0,0,.35);pointer-events:none}
.compare-controls{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 20px;margin-top:18px}
.compare-label{flex:1 1 220px;display:grid;gap:4px;font:600 1rem/1.3 var(--font-display)}
.compare-label input{width:100%;min-height:44px;margin:0;accent-color:var(--ink)}
.compare-buttons{display:inline-flex;overflow:hidden;border:1px solid var(--ink);border-radius:var(--radius-pill)}
.compare-button{min-height:46px;min-width:96px;padding:0 18px;border:0;background:transparent;font:600 1rem/1 var(--font-display)}
.compare-button+.compare-button{border-left:1px solid var(--ink)}
.compare-button:hover{background:rgba(14,14,13,.06)}
.compare-button[aria-pressed="true"]{background:var(--ink);color:#fff}
.compare figcaption{margin-top:14px;max-width:70ch;color:var(--mute);font-size:.92rem}

/* The dated "before" site */
.old{display:flex;flex-direction:column;background:#BDBDBD;color:#111;font-family:"Times New Roman",Times,serif}
.old-top{padding:.7em 1em .6em;background:linear-gradient(#4A7FE6,#0E2F78);border-bottom:.35em ridge #8FB0E8;text-align:center}
.old-title{color:#FF2B2B;font:italic bold 2.5em/1.05 "Comic Sans MS","Chalkboard SE",cursive;text-shadow:.07em .07em 0 #FE0,-.03em -.03em 0 #000}
.old-sub{margin-top:.2em;color:#FE0;font:bold .8em Arial,sans-serif}
.old-marq{padding:.3em .5em;background:#FE0;color:#C40000;font:bold .85em Arial,sans-serif;white-space:nowrap;overflow:hidden;border-bottom:.15em solid #C40000}
.old-body{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:9.5em 1fr 9.5em;gap:.6em;padding:.6em .6em 2.2em}
.old-box{display:flex;flex-direction:column;gap:.2em;padding:.5em .6em;background:#fff;border:.18em outset #E2E2E2;font:.82em Arial,sans-serif}
.old-box u,.old-p u,.old-news u{color:#00E}
.old-box small{font-weight:bold;text-align:center;font-size:.9em}
.old-main{padding:.7em .9em;background:#fff;border:.18em inset #E2E2E2}
.old-h{color:#039;font-size:1.5em;font-weight:bold;text-decoration:underline}
.old-p{margin-top:.5em;color:#555;font:.8em/1.35 Arial,sans-serif}
.ms .old-img{width:11em;height:7.4em;margin-top:.7em;border:.2em solid #000;filter:saturate(1.6) contrast(.85) brightness(1.1)}
.old-cols{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9em;align-items:start}
.old-news{display:flex;flex-direction:column;gap:.35em;margin-top:.7em;padding:.45em .6em;background:#FFC;border:.15em dashed #C40000;font:.72em/1.3 Arial,sans-serif}
.old-news b{color:#039;text-decoration:underline}
.old-news i{color:#C40000;font-weight:bold}
.old-ph{margin-top:.5em;color:#D00;font:bold 1.05em Arial,sans-serif}
.old-tbl{margin-top:.6em;border-collapse:collapse;border:.15em outset #ddd;font:.72em Arial,sans-serif}
.old-tbl th,.old-tbl td{padding:.15em .6em;border:1px solid #888;text-align:left}
.old-tbl th{background:#039;color:#FE0}
.old-count{align-self:flex-start;margin-top:.4em;padding:.15em .4em;background:#000;color:#2F2;font-family:"Courier New",monospace;letter-spacing:.1em}
.old-uc{height:1.3em;margin-top:.5em;background:repeating-linear-gradient(-45deg,#FC0 0 .6em,#111 .6em 1.2em)}
.compare-stage .ms{font-size:1.5cqw}
.old-foot{position:absolute;inset:auto 0 0;padding:.45em;background:#9C9C9C;border-top:.15em solid #777;color:#222;text-align:center;font:.7em Arial,sans-serif}
@container (max-width:560px){
.compare-stage .ms{font-size:2.9cqw}
.old-body{grid-template-columns:1fr}
.old-box:first-child{flex-flow:row wrap;gap:0 .8em}
.old-box:last-child{display:none}
.old-title{font-size:1.9em}
}


/* What we do: three still glass cards, each with a still illustration (aria-hidden) above its heading. Its text is drawn in cqw so
   it scales with the column. */
.services{padding-block:var(--home-sec)}
.services-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(32px,4vw,56px)}
.services-head h2{margin:0;font-size:clamp(2.75rem,1rem + 5.4vw,6.6rem);font-weight:780;font-stretch:78%;letter-spacing:-.03em}
.svc-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap);list-style:none;margin:0;padding:0}
.svc-row{padding:12px 12px 28px;border:1px solid rgba(255,255,255,.8);border-radius:26px;background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,255,255,.46));-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);box-shadow:inset 0 1px 0 #fff,0 24px 50px -30px rgba(58,40,12,.4)}
.svc-row h3{margin:26px 12px 12px;font-size:clamp(2rem,1rem + 2.2vw,3rem);font-weight:780;font-stretch:86%;line-height:.95;letter-spacing:-.03em}
.svc-row h3 a{text-decoration:none}
.svc-row h3 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}
.svc-row p{margin:0 12px;color:var(--ink-2);max-width:40ch}
.vig{position:relative;aspect-ratio:4/3.3;overflow:hidden;border-radius:18px;background:var(--warm);container-type:inline-size}
.vig-tag{position:absolute;left:4cqw;bottom:4cqw;z-index:2;padding:.5em .85em;border-radius:999px;background:rgba(255,255,255,.94);font:600 max(11px,1.7cqw)/1 var(--font-display);color:var(--amber-ink)}
.vb-win,.log{position:absolute;left:7%;right:7%;top:8%;bottom:-2%;overflow:hidden;border-radius:2.4cqw 2.4cqw 0 0;background:#fff;box-shadow:var(--shadow-lift)}
.vb-win{background:#F7F5EF}
.vb-bar{display:flex;gap:1cqw;align-items:center;height:5.6cqw;padding:0 2.6cqw;background:#F4F3EF;border-bottom:1px solid var(--line-dark)}
.vb-bar i{width:1.6cqw;height:1.6cqw;border-radius:50%;background:#D6D3CC}
.vb-page{padding:3cqw 4cqw}
.vb-nav{display:flex;align-items:center;justify-content:space-between;height:5cqw}
.vb-nav b{font:600 3.2cqw/1 Georgia,serif;color:#1F3B2C}
.vb-nav em{padding:1.2cqw 2.2cqw;border-radius:99px;background:#24412F;color:#fff;font:600 2cqw/1 var(--font-text);font-style:normal}
.vb-h{margin-top:3cqw;max-width:62cqw;font:400 6.6cqw/1.08 Georgia,"Times New Roman",serif;color:#1D2A22}
.vb-p{margin:2cqw 0 0;font-size:2.5cqw;color:#4A5049}
.vb-btn{display:inline-grid;place-items:center;height:6.4cqw;margin-top:2.4cqw;padding:0 3cqw;border-radius:99px;background:#24412F;color:#fff;font:600 2.3cqw/1 var(--font-text)}
.vb-page img{width:100%;height:30cqw;margin-top:3cqw;object-fit:cover;border-radius:.8cqw}
.vr-old{position:absolute;left:6%;top:9%;width:54%;padding:3cqw;background:#FFFFE0;border:.7cqw outset #CCC;font:2.6cqw/1.3 "Times New Roman",serif;color:#000;transform:rotate(-4deg)}
.vr-old b{display:block;font:bold 4cqw/1.1 "Comic Sans MS",cursive;color:#C00;text-align:center}
.vr-marq{display:block;margin:1.2cqw 0;background:#00F;color:#FF0;font:bold 2.4cqw/1.6 Arial,sans-serif;text-align:center}
.vr-old p{margin:0 0 1.4cqw;font-size:inherit}
.vr-old u{color:#00E}
.vr-new{position:absolute;right:5%;top:30%;width:66%;height:58%;display:grid;grid-template-columns:1.1fr 1fr;overflow:hidden;border-radius:2cqw;background:#141312;color:#fff;box-shadow:var(--shadow-lift)}
.vr-new img{grid-column:2;grid-row:1;width:100%;height:100%;object-fit:cover}
.vr-copy{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2cqw;padding:3.4cqw}
.vr-copy small{display:flex;align-items:center;gap:1cqw;font-size:2cqw;color:rgba(255,255,255,.82)}
.vr-copy small i{width:1.4cqw;height:1.4cqw;border-radius:50%;background:#4EC27F}
.vr-copy b{font:800 5.4cqw/.95 var(--font-display);font-stretch:68%;text-transform:uppercase}
.vr-btn{display:grid;place-items:center;height:6.4cqw;border-radius:.8cqw;background:#A3341F;font:650 2.2cqw/1 var(--font-display)}
.log{padding:4cqw 4.4cqw}
.log-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:3cqw;border-bottom:1px solid var(--line-dark);font-size:2.3cqw;color:var(--mute)}
.log-head b{font:740 3.6cqw/1 var(--font-display);color:var(--ink)}
.log-list{list-style:none;margin:0;padding:0}
.log-list li{display:grid;grid-template-columns:5.4cqw 1fr auto;align-items:center;gap:2cqw;height:10cqw;border-bottom:1px solid var(--line-dark);font:500 2.9cqw/1.2 var(--font-text)}
.log-list span+span{font-size:2.3cqw;color:var(--mute)}
.log-list svg{width:5cqw;height:5cqw;padding:1cqw;border-radius:50%;background:rgba(30,107,71,.1);fill:none;stroke:var(--ok);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}


/* Closing call to action: a dark glass panel over the footage loop (a still photo underneath until it plays, and for
   everyone without motion), with two glass phones playing concept loops flying in on wide screens (home.js). */
/* Task 43: less dead black under the closing card (the bottom no longer matches the 190px top). */
.band{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(110px,13vw,190px) clamp(56px,6vw,96px);background:var(--ink);color:#fff}
.band-media{position:absolute;inset:0;z-index:-1;opacity:.6}
.band-media img,.band-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.band-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--ink) 0%,rgba(14,14,13,.4) 35%,rgba(14,14,13,.55) 70%,var(--ink) 100%)}
.band-phones{position:absolute;inset:0;z-index:0;display:none;pointer-events:none}
.gphone{position:absolute;width:clamp(150px,13vw,210px);aspect-ratio:390/844;padding:8px;border-radius:36px;background:linear-gradient(160deg,rgba(255,255,255,.34),rgba(255,255,255,.08))}
.gphone video{display:block;width:100%;height:100%;object-fit:cover;border-radius:28px;background:#1A1917}
.gp-1{right:7%;top:12%}
.gp-2{right:21%;top:30%}
.band .wrap{position:relative;z-index:1}
.band-panel{max-width:min(100%,960px);padding:clamp(28px,4vw,56px);border-radius:32px}
.band h2{max-width:14ch;margin:0;font-size:clamp(2.75rem,1rem + 5vw,7rem);font-weight:820;font-stretch:84%;line-height:.92;letter-spacing:-.035em}
.band-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px;margin-top:clamp(32px,4vw,56px);padding-top:28px;border-top:1px solid rgba(255,255,255,.18)}
.band-foot p{margin:0;max-width:42ch;color:rgba(255,255,255,.86)}
.band :focus-visible{outline-color:#fff}

/* Responsive */
/* Task 60: a 20svh sticky exit (was 60svh: a near-empty screen). */
@media(min-width:761px){
.motion .hero{height:120svh}
.motion .hero-pin{position:sticky;top:0}
}
@media(min-width:961px){
/* Task 44: full-bleed. The film spans the screen's width (as tall as 92% of the screen allows) and stays centred on the
   column; the body clips any sideways overflow (site.css). */
.reel-frame{width:min(100vw,calc(92svh * 16 / 9));margin-inline:calc(50% - min(50vw,46svh * 16 / 9))}
.reel-panel,.reel-cap{width:min(100%,calc(84svh * 16 / 9))}
.js .band-phones{display:block}
}
@media(max-width:1199px){
.hero-cards{display:none}
}
/* Task 60: 861-1199px: the lead card takes the row, the other two share the next. */
@media(min-width:861px) and (max-width:1199px){
.teaser-card:first-child{grid-column:1/-1}
.teaser-card{grid-column:span 6}
.teaser-card:last-child{margin-top:0}
.teaser-card:first-child .teaser-img{aspect-ratio:16/8}
}
@media(max-width:1023px){
.hero-copy{grid-column:1/-1;grid-row:auto;max-width:640px}
.hero-h{font-size:clamp(2.6rem,10vw,6rem)}
/* Tasks 42 and 46: the tag follows the copy, below the buttons (at 768 it covered "See concept projects"); relative,
   so it paints above the stage. */
.hero-pin{height:auto;min-height:100svh}
.hero-in{height:auto;padding-bottom:28px}
.hero-cap{position:relative;right:auto;bottom:auto;flex-wrap:wrap;row-gap:2px;width:fit-content;max-width:calc(100% - 2 * var(--gut));margin:0 var(--gut) 56px;padding:8px 14px;border-radius:20px}
}
@media(max-width:960px){
.ba-copy,.compare{grid-column:1/-1;grid-row:auto}
.compare{margin-top:40px}
}
@media(max-width:860px){
.work-head,.reel-head{grid-template-columns:1fr}
.work-head div,.reel-head p{justify-self:start}
.teaser{grid-template-columns:1fr;row-gap:40px}
.teaser-card,.teaser-card:first-child{grid-column:auto}
.teaser-card:last-child{margin-top:0}
.teaser-img,.teaser-card:first-child .teaser-img{aspect-ratio:4/3}
/* Task 47: the project titles are at least a 24px tap target on phones. */
.teaser-card h3 a{display:inline-block;min-height:32px;padding-block:4px}
.svc-list{grid-template-columns:1fr;gap:44px}
}
@media(max-width:760px){
/* The phone poster scales with the screen width (not the hero's height), so the glass wordmark stays above the headline
   however tall the copy and the tag below it make the hero; under the poster's foot the paper colour shows, behind the veil. */
.hero-gl{background-image:url("/assets/glass/hero-glass-poster-m.jpg");background-position:50% 0;background-size:100% auto}
.hero-gl::after{background:linear-gradient(0deg,rgba(246,245,241,.96) 0%,rgba(246,245,241,.85) 42%,rgba(246,245,241,0) 64%)}
.hero-in{padding-top:52svh;padding-bottom:32px}
}
/* Task 60: portrait tablets stack like a phone: the wide still across the top (wordmark foot ~45vw), the copy below it
   and below the lite C (glass-boot.js), a headline capped by height so the buttons stay in view. */
@media(min-width:761px) and (max-width:1023px) and (orientation:portrait){
.hero-gl{background-position:50% 0;background-size:100% auto}
.hero-gl::after{background:linear-gradient(0deg,rgba(246,245,241,.96) 0%,rgba(246,245,241,.85) 42%,rgba(246,245,241,0) 64%)}
.hero-in{padding-top:max(calc(46vw + 12px),46svh);padding-bottom:32px}
.hero-h{font-size:clamp(2.6rem,min(10vw,7.5svh),6rem)}
}
@media(max-width:640px){
.actions .button,.band .button{width:100%}
/* Task 46: both buttons in view at 360x780; the copy starts under the poster's wordmark (its foot: ~106% of the width). */
.hero-in{padding-top:min(52svh,calc(106.5vw + 12px))}
.hero-h{font-size:clamp(2.25rem,10.2vw,2.75rem)}
.hero-sub{margin-top:16px;font-size:1.0625rem}
.hero .actions{gap:8px;margin-top:18px}
.compare-stage{aspect-ratio:4/5}
/* Phones: the vertical cut in a 9:16 frame, capped so it never fills more than about three quarters of the screen. */
.reel-frame{width:min(100%,calc(74svh * 9 / 16));aspect-ratio:9/16}
.reel-cap{width:auto;text-align:center}
.work-head .ulink{display:flex;width:fit-content}
.work-head .ulink+.ulink{margin-left:0}
.band-panel{padding:24px 20px}
}
/* Task 46: short screens (150% zoom, ~960x600) size the hero by height; phones keep their layout. */
@media(min-width:761px) and (max-height:720px){
.hero-pin{height:auto;min-height:100svh}
.hero-in{height:auto;padding-top:96px;padding-bottom:36px}
.hero-h{font-size:clamp(2.6rem,10.5svh,5rem)}
.hero-sub{margin-top:18px}
.hero .actions{margin-top:22px}
.hero-cap{margin-bottom:24px}
}
/* Landscape phones (844x390): the wide poster and veil; headline and first button in view. */
@media(max-height:500px){
.hero-pin{height:auto;min-height:100svh}
.hero-gl{background-image:url("/assets/glass/hero-glass-poster.jpg");background-position:50% 50%;background-size:cover}
.hero-gl::after{background:linear-gradient(90deg,rgba(246,245,241,.94) 0%,rgba(246,245,241,.8) 46%,rgba(246,245,241,0) 78%)}
.hero-in{height:auto;padding-top:84px;padding-bottom:20px}
.hero-h{font-size:clamp(1.9rem,9.5svh,3.2rem)}
.hero-sub{margin-top:10px;font-size:1rem}
.hero .actions{margin-top:14px}
.hero-cap{margin-bottom:16px}
/* Task 60: the projects follow their intro closely (no stagger, less padding, shorter photos). */
.work{padding-block:40px}
.work-head{padding-bottom:24px}
.teaser-card:last-child{margin-top:0}
.teaser-img,.teaser-card:first-child .teaser-img{aspect-ratio:16/7}
}

/* Motion: only for people who have not asked for reduced motion; only transform and opacity move.
   Hero start states, only while motion-boot.js holds .ph-wait: home.js takes them over with GSAP fromTo and removes the
   class (its 2.5 s timer removes it whatever happens), so nothing paints, vanishes and replays. Task 48: copy never opacity 0. */
@media(prefers-reduced-motion:no-preference){
.ph-wait .hero-h .ln>span{transform:translateY(108%)}
.ph-wait :is(.hero-sub,.hero .actions){transform:translateY(18px)}
.ph-wait .hero-cards{opacity:0}
/* Concept cards: the photo pushes in a little on hover or keyboard focus, and the light sweep follows the pointer, both
   within 200 ms. */
.motion .teaser-img img{transition:transform var(--dur-1) var(--ease-out)}
.motion .teaser-card:is(:hover,:focus-within) .teaser-img img{transform:scale(1.03)}
.motion .teaser-img::after{transition:transform var(--dur-1) var(--ease-out)}
}