/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* =====================================================================
   VIEM COLLECTIVE — FRONTPAGE
   White page, persistent header (logo + about), and every section drawn
   inside an inset frame below that header.

   Sizes are taken from the artboards — desktop 1920x1080, mobile 360x800
   ("Viem (Round 3)", with the hero and the mobile awards row from Round 4). Each clamp() is written as
       clamp(<floor>, <design value as vw/vh>, <design value in px>)
   so the layout lands on the artboard measurement at the reference size
   and scales sensibly either side of it.

   All rules are scoped to .viem-body / .v-* classes so this stylesheet
   (loaded site-wide) never affects other pages.
   ===================================================================== */

/* ---------- Fonts ---------- */
@font-face{
	font-family:'NeueHaas';
	src:url('assets/fonts/NeueHaasDisplayBlack.ttf') format('truetype');
	font-weight:400 900;font-style:normal;font-display:swap;
}
@font-face{
	font-family:'NeueHaas';
	src:url('assets/fonts/NeueHaasDisplayBlackItalic.ttf') format('truetype');
	font-weight:400 900;font-style:italic;font-display:swap;
}
@font-face{
	font-family:'PoppinsXB';
	src:url('assets/fonts/Poppins-ExtraBold.ttf') format('truetype');
	font-weight:800;font-style:normal;font-display:swap;
}

/* ---------- Reset / base (scoped) ---------- */
.viem-body *,.viem-body *::before,.viem-body *::after{box-sizing:border-box;}

html.viem-html{height:100%;-webkit-text-size-adjust:100%;}
html.viem-html,body.viem-body{margin:0;padding:0;height:100%;background:#fff;overflow:hidden;overscroll-behavior:none;}
body.viem-body{
	font-family:'NeueHaas','Arial Black',Arial,sans-serif;
	color:#000;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

/* hide Astra chrome if it leaks onto this template */
body.viem-body #masthead,body.viem-body .site-header,body.viem-body #colophon,
body.viem-body #ast-scroll-top,body.viem-body .ast-scroll-to-top,
body.viem-body .site-footer{display:none!important;}
body.viem-body .site-content,body.viem-body #page,body.viem-body #primary,
body.viem-body .ast-container{margin:0!important;padding:0!important;max-width:none!important;}

.viem-body{
	--yellow:#FFD403;
	/* 1% of the viewport height we can actually SEE.

	   A phone browser resolves `vh` against the LARGE viewport — the height the
	   page would have with the URL bar retracted. This page never scrolls, so
	   the URL bar never retracts and ~50px of every `100vh` box (on a 360x698
	   Android) sits permanently below the fold. `svh` is the SMALL viewport,
	   i.e. the height that is on screen while the browser chrome is showing,
	   which is the box we actually have to fill. Every vertical measurement
	   below is written as calc(N * var(--vh)) so it follows whichever unit this
	   browser supports. The bare `1vh` is the pre-2022 fallback (unchanged
	   behaviour); `--v-vh` is the JS-measured override script.js installs there. */
	--vh:1vh;
	/* white frame around every section — artboard: 100 / 170 / 99 */
	--frame-x:clamp(18px,5.21vw,100px);
	--frame-top:clamp(88px,calc(15.74 * var(--vh)),170px);
	--frame-bottom:clamp(20px,calc(9.17 * var(--vh)),99px);
	/* padding inside the yellow panels — artboard: 109 */
	--panel-x:clamp(22px,5.66vw,109px);
	--panel-y:clamp(26px,calc(5 * var(--vh)),60px);
}
@supports (height:1svh){ .viem-body{--vh:1svh;} }
/* legacy browsers only — script.js measures the visible height itself */
html.viem-vh-js .viem-body{--vh:calc(var(--v-vh) / 100);}

/* Full-screen section pager (infinite loop, no scrollbar).
   `inset:0` would size this to the large viewport and push the last ~50px of
   every section off screen — see the --vh note above. */
.viem{position:fixed;inset:0 0 auto 0;overflow:hidden;height:calc(100 * var(--vh));}
.viem-body .v-sec{
	position:absolute;inset:0;
	width:100%;
	display:flex;
	padding:var(--frame-top) var(--frame-x) var(--frame-bottom);
	transform:translateY(100%);
	transition:transform .85s cubic-bezier(.76,0,.24,1);
	will-change:transform;
	backface-visibility:hidden;
	overflow:hidden;
}
.viem-body .v-sec:first-child{transform:translateY(0);}

/* ---------- Header: logo (left) + speaker & about (right) ---------- */
.viem-body .v-topbar{
	position:fixed;
	top:0;left:0;right:0;
	z-index:30;
	height:var(--frame-top);
	padding:clamp(20px,calc(7.4 * var(--vh)),80px) var(--frame-x) 0;
	display:flex;align-items:flex-start;justify-content:space-between;
	background:#fff;
	pointer-events:none;      /* the pager still receives clicks on the margin */
}

/* One type scale drives BOTH children. The label artwork is sized in em, and the
   speaker is sized off the label's rendered ink height (see .v-mute), so the two
   can no longer drift apart at any viewport width — which is what happened when
   the speaker had its own unrelated clamp(24px,1.9vw,30px). */
.viem-body .v-topbar-right{
	display:flex;align-items:center;
	gap:clamp(10px,1.4vw,18px);
	font-size:clamp(15px,1.146vw,22px);
	height:1em;
}

/* --- Viem Collective mark (assets/images/viem-logo.png) --- */
.viem-body .v-logo{
	display:flex;align-items:stretch;
	gap:clamp(3px,.35vw,6px);
	height:clamp(44px,min(3.8vw,calc(6.76 * var(--vh))),73px);
	pointer-events:auto;
	user-select:none;
	cursor:pointer;                /* jumps back to the hero section */
	transition:opacity .3s ease;
}
.viem-body .v-logo:hover{opacity:.72;}
.viem-body .v-logo img{height:100%;width:auto;display:block;}
/* CSS fallback lockup, used only while the artwork is missing */
.viem-body .v-logo-mark{
	display:flex;flex-direction:column;align-items:center;justify-content:center;
	aspect-ratio:1/1;height:100%;
	background:var(--yellow);
	border:3px solid #000;
	font-weight:900;line-height:.98;letter-spacing:.02em;
	font-size:clamp(15px,1.55vw,25px);
}
.viem-body .v-logo-word{
	display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
	font-weight:900;line-height:1.06;letter-spacing:.02em;
	font-size:clamp(7px,.72vw,11px);
}
.viem-body .v-logo-word .bar{
	display:block;width:100%;height:clamp(4px,.42vw,7px);
	margin-top:2px;background:#000;
}

/* "about" label — supplied artwork (assets/images/about-text-image.png), sized to
   the width the typeset word used to occupy so the header footprint is unchanged.
   font-size stays the sizing unit: the image width is expressed in em against it. */
.viem-body .v-about-fixed{
	display:inline-block;
	font-size:1em;              /* the shared scale on .v-topbar-right */
	line-height:1;
	cursor:pointer;
	pointer-events:auto;
	transition:opacity .3s ease;
}
.viem-body .v-about-fixed img{display:block;width:3.1em;height:auto;}
.viem-body .v-about-fixed:hover{opacity:.6;}

/* Video sound toggle (speaker) — revealed only while a video is playing.

   Both the SIZE and the vertical position are derived from the "about" label so
   the pair always reads as one unit. Measured from the artwork and the icon
   paths:
   - about-text-image.png is tightly cropped (no transparent margin), 2288x804,
     so its rendered height is pure ink: 3.1em wide / 2.846 = 1.089em, from the
     b/t ascenders down to the baseline;
   - the speaker paths occupy 18 of their 24 viewBox units, i.e. 75% of the svg
     box, so a box of 1.089em / .75 gives the icon exactly the label's ink height;
   - the word's ink centre of MASS sits at 65.7% of its height, not 50%, because
     the ascenders are tall and thin. Centring the two boxes therefore left the
     speaker floating above the word — `top` drops it onto the optical centre. */
.viem-body .v-mute{
	--v-label-ink:1.089em;      /* rendered height of the word "about" */
	--v-optical-drop:.157;      /* its centre of mass (.657) minus .5 */
	width:calc(var(--v-label-ink) / .75);
	height:calc(var(--v-label-ink) / .75);
	position:relative;
	top:calc(var(--v-label-ink) * var(--v-optical-drop));
	flex:0 0 auto;
	margin:0;padding:0;border:0;background:transparent;cursor:pointer;
	color:#000;
	display:flex;align-items:center;justify-content:center;
	pointer-events:auto;
	-webkit-tap-highlight-color:transparent;
	transition:transform .2s ease,opacity .2s ease;
}
.viem-body .v-mute:hover{transform:scale(1.08);}
.viem-body .v-mute:focus{outline:none;}
/* a hidden speaker takes NO space, so the "about" label never moves */
.viem-body .v-mute.is-hidden{display:none;}
/* 100%, not 80% — the box above is already sized so the paths inside it land on
   the label's ink height. */
.viem-body .v-mute svg{width:100%;height:100%;display:block;fill:currentColor;}
/* The icon now scales with the type, so on a small phone it drops below a
   comfortable tap target. This keeps the hit area finger-sized without changing
   anything you can see. */
.viem-body .v-mute::after{
	content:'';
	position:absolute;left:50%;top:50%;
	width:max(100%,44px);height:max(100%,44px);
	transform:translate(-50%,-50%);
}
/* muted icon shows by default; sound-on icon shows when .is-on */
.viem-body .v-mute .ico-on{display:none;}
.viem-body .v-mute.is-on .ico-muted{display:none;}
.viem-body .v-mute.is-on .ico-on{display:block;}

/* ---------- Play control (Round 3) ---------- */
.viem-body .v-play-group{
	position:absolute;
	left:50%;
	bottom:calc(var(--frame-bottom) + clamp(10px,calc(2.59 * var(--vh)),28px));
	transform:translateX(-50%);
	z-index:6;
	display:flex;flex-direction:column;align-items:center;
	gap:clamp(7px,calc(1.57 * var(--vh)),17px);
	pointer-events:none;      /* only the disc and chip are clickable */
	transition:opacity .35s ease,transform .25s ease;
}

.viem-body .v-play{
	width:clamp(34px,min(2.81vw,calc(5 * var(--vh))),54px);
	height:clamp(34px,min(2.81vw,calc(5 * var(--vh))),54px);
	margin:0;padding:0;
	border:1px solid rgba(255,255,255,.34);
	border-radius:50%;
	background:rgba(0,0,0,.48);
	-webkit-backdrop-filter:blur(7px) saturate(115%);
	backdrop-filter:blur(7px) saturate(115%);
	box-shadow:0 2px 12px rgba(0,0,0,.26);
	cursor:pointer;
	pointer-events:auto;
	display:flex;align-items:center;justify-content:center;
	-webkit-tap-highlight-color:transparent;
	transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s cubic-bezier(.34,1.56,.64,1);
}

.viem-body .v-play::before{
	content:"";
	width:38%;height:39%;
	background:#fff;
	transform:translateX(7%);
	-webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24.6'%3E%3Cpath d='M1 1 L23 12.3 L1 23.6 Z' fill='%23000' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
	mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24.6'%3E%3Cpath d='M1 1 L23 12.3 L1 23.6 Z' fill='%23000' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.viem-body .v-play:hover{
	background:rgba(0,0,0,.58);
	border-color:rgba(255,255,255,.6);
	box-shadow:0 4px 18px rgba(0,0,0,.34);
	transform:scale(1.08);
}
.viem-body .v-play:active{transform:scale(.96);}
.viem-body .v-play:focus{outline:none;}
.viem-body .v-play:focus-visible{outline:2px solid #fff;outline-offset:3px;}

.viem-body .v-play-cap{
	font-family:'Poppins','Helvetica Neue',Arial,sans-serif;
	font-weight:600;
	font-size:clamp(8px,min(.729vw,calc(1.3 * var(--vh))),14px);
	line-height:1;
	letter-spacing:.045em;
	color:#fff;
	background:rgba(0,0,0,.52);
	-webkit-backdrop-filter:blur(7px) saturate(115%);
	backdrop-filter:blur(7px) saturate(115%);
	border:1px solid rgba(255,255,255,.22);
	padding:clamp(3px,calc(.5 * var(--vh)),5.5px) clamp(7px,.68vw,13px);
	border-radius:999px;
	transition:background .25s ease,border-color .25s ease;
	white-space:nowrap;
	cursor:pointer;
	pointer-events:auto;
	-webkit-tap-highlight-color:transparent;
}
.viem-body .v-play-cap:hover{background:rgba(0,0,0,.68);border-color:rgba(255,255,255,.45);}

/* Sections flagged .is-light have pale artwork, where a 48%-black disc reads as
   soft grey. Deepen the fill and brighten the hairline so the control holds. */
.viem-body .is-light .v-play,
.viem-body .is-light .v-play-cap{
	background:rgba(0,0,0,.7);
	border-color:rgba(255,255,255,.5);
}
.viem-body .is-light .v-play-group:hover .v-play,
.viem-body .is-light .v-play-cap:hover{background:rgba(0,0,0,.8);}

/* the disc and the chip light up together, whichever of the two is hovered */
.viem-body .v-play-group:hover .v-play{
	background:rgba(0,0,0,.58);
	border-color:rgba(255,255,255,.6);
}

/* once the video is actually playing, the whole control disappears */
.viem-body .v-media.is-playing .v-play-group{
	opacity:0;pointer-events:none;
	transform:translateX(-50%) scale(.9);
}

/* ---------- Text sections (yellow panel inside the white frame) ---------- */
.viem-body .v-panel{
	flex:1;min-height:0;
	background:var(--yellow);
	display:flex;flex-direction:column;
	padding:var(--panel-y) var(--panel-x);
	/* a last-resort scroll on very short viewports — the bar itself stays hidden */
	overflow-y:auto;
	scrollbar-width:none;
	-ms-overflow-style:none;
}
.viem-body .v-panel::-webkit-scrollbar{width:0;height:0;display:none;}

.viem-body .v-panel > :first-child{margin-top:auto;}
.viem-body .v-panel > :last-child{margin-bottom:auto;}
.viem-body .v-text h1,.viem-body .v-text h2{margin:0;font-weight:900;letter-spacing:-.015em;line-height:1.034;}

/* One size for all four hero blocks; the artboard sets them apart by the gap
   above each, not by their weight (artboard: 29 / 23 / 13 between blocks). */
.viem-body .v-hero h1{font-size:clamp(26px,min(3.056vw,calc(5.43 * var(--vh))),58.7px);}
.viem-body .v-hero-lead{
	margin-top:clamp(12px,calc(2.69 * var(--vh)),29px)!important;
	font-size:clamp(26px,min(3.056vw,calc(5.43 * var(--vh))),58.7px);
}
.viem-body .v-hero-sub{
	margin-top:clamp(10px,calc(2.13 * var(--vh)),23px)!important;
	font-size:clamp(26px,min(3.056vw,calc(5.43 * var(--vh))),58.7px);
}
.viem-body .v-hero-others{
	margin-top:clamp(6px,calc(1.2 * var(--vh)),13px)!important;
	font-size:clamp(26px,min(3.056vw,calc(5.43 * var(--vh))),58.7px);
}

/* Brand lockups are supplied artwork now — one <img> each, sized on width so
   every mark keeps its own proportions (artboard: 250 / 238 / 224, gap 41). */
.viem-body .v-brand-row{
	display:flex;align-items:center;flex-wrap:nowrap;
	gap:clamp(14px,2.14vw,41px);
	margin-top:clamp(4px,calc(.56 * var(--vh)),6px);
}
.viem-body .v-brand{display:block;height:auto;max-width:100%;}
.viem-body .v-brand--chatgpt{width:clamp(104px,min(13.02vw,calc(23.1 * var(--vh))),250px);}
.viem-body .v-brand--youtube{width:clamp(99px,min(12.40vw,calc(22.0 * var(--vh))),238px);}
.viem-body .v-brand--airbnb {width:clamp(93px,min(11.67vw,calc(20.7 * var(--vh))),224px);}

/* "Across …" — a rule the exact width of the line, then the italic line under it */
.viem-body .v-across{
	margin-top:clamp(18px,calc(6.3 * var(--vh)),68px);
	width:fit-content;
	align-self:flex-start;
	border-top:clamp(2px,.32vw,6px) solid #000;
	padding-top:clamp(2px,calc(.28 * var(--vh)),3px);
	font-style:italic;font-weight:900;
	font-size:clamp(14px,min(2.083vw,calc(3.7 * var(--vh))),40px);
	line-height:1.1;
	display:flex;gap:.22em;
}
/* desktop runs the counts on one line; mobile keeps the markup's breaks */
.viem-body .v-across .val br{display:none;}

/* About / contact */
.viem-body .v-about-copy p{
	margin:0;font-weight:900;line-height:1.034;
	font-size:clamp(16px,min(2.048vw,calc(3.64 * var(--vh))),39.3px);
	letter-spacing:-.01em;max-width:min(100%,58ch);
}
.viem-body .v-about-copy .gap{margin-top:clamp(14px,calc(3.15 * var(--vh)),34px);}

.viem-body .v-awards{margin-top:clamp(16px,calc(3.15 * var(--vh)),34px);}
.viem-body .v-awards h3{
	margin:0;font-weight:900;letter-spacing:-.01em;
	font-size:clamp(16px,min(2.048vw,calc(3.64 * var(--vh))),39.3px);line-height:1.034;
}
.viem-body .v-awards-row{
	display:flex;align-items:center;flex-wrap:wrap;
	gap:clamp(12px,2.8vw,54px);
	margin-top:clamp(10px,calc(1.76 * var(--vh)),19px);
}
.viem-body .v-awards-row .award{height:clamp(26px,min(2.92vw,calc(5.2 * var(--vh))),56px);width:auto;display:block;}
/* desktop keeps all nine on one line — the forced break is mobile-only */
.viem-body .v-awards-row .award-break{display:none;}
/* fallback lockup — replaced by <img> as soon as the real artwork exists */
.viem-body .v-awards-row .award-dummy{
	display:flex;align-items:center;justify-content:center;text-align:center;
	height:auto;min-height:clamp(28px,2.8vw,44px);
	padding:5px clamp(6px,.7vw,11px);
	border:2px solid #000;
	font-weight:900;text-transform:uppercase;letter-spacing:.01em;
	font-size:clamp(7px,.66vw,11px);line-height:1.1;
	white-space:nowrap;
}
.viem-body .v-founded{
	width:fit-content;max-width:100%;
	margin-top:clamp(16px,calc(4.26 * var(--vh)),46px);
	padding:clamp(6px,calc(1.2 * var(--vh)),13px) 0 clamp(5px,calc(1.02 * var(--vh)),11px);
	border-top:clamp(3px,.313vw,6px) solid #000;
	border-bottom:clamp(3px,.313vw,6px) solid #000;
	font-weight:900;line-height:1.034;letter-spacing:-.01em;
	font-size:clamp(16px,min(2.048vw,calc(3.64 * var(--vh))),39.3px);
}

.viem-body .v-about-contact{
	margin-top:clamp(18px,calc(3.43 * var(--vh)),37px);
	display:flex;align-items:center;flex-wrap:wrap;
	gap:clamp(14px,1.25vw,24px);
}
.viem-body .v-about-contact .contact{
	display:flex;align-items:center;gap:clamp(12px,1.6vw,30px);
	font-style:italic;font-weight:900;
	font-size:clamp(14px,min(1.667vw,calc(2.96 * var(--vh))),32px);
}
.viem-body .v-about-contact .contact a{color:inherit;text-decoration:none;}
.viem-body .v-about-contact .contact a:hover{text-decoration:underline;}
.viem-body .v-about-contact .social{display:flex;gap:clamp(8px,.73vw,14px);flex-shrink:0;}
.viem-body .v-about-contact .social a{
	width:clamp(32px,min(2.4vw,calc(4.2 * var(--vh))),45px);height:clamp(32px,min(2.4vw,calc(4.2 * var(--vh))),45px);
	border-radius:50%;background:#000;color:var(--yellow);
	display:flex;align-items:center;justify-content:center;
	font-size:clamp(15px,1.2vw,22px);text-decoration:none;transition:transform .2s;
}
.viem-body .v-about-contact .social a:hover{transform:scale(1.08);}

/* ---------- Media (video) sections ---------- */
.viem-body .v-media-inner{
	flex:1;min-height:0;
	position:relative;
	overflow:hidden;
	background: transparent;
}
.viem-body .v-poster{
	position:absolute;inset:0;
	background-size:cover;background-position:center;background-repeat:no-repeat;
	transition:opacity .4s ease;
}
/* logo-style posters (NZ) sit on their own backdrop instead of filling the frame */
.viem-body .v-poster.is-contain{background-size:clamp(240px,34.2%,570px);}
.viem-body .is-nz .v-media-inner{background:radial-gradient(circle at 50% 50%,#ffffff 0%,#f2f2f2 45%,#d9d9d9 100%);}
.viem-body .is-nz .v-video{background:transparent;}

.viem-body .v-video{
	position:absolute;inset:0;width:100%;height:100%;
	object-fit:cover;background:transparent;opacity:0;transition:opacity .45s ease;
}
.viem-body .v-media.is-playing .v-video{opacity:1;}
.viem-body .v-media.is-playing .v-poster{opacity:0;}
.viem-body .v-media.is-playing .v-overlay{opacity:0;pointer-events:none;}

.viem-body .v-video::-webkit-media-controls-mute-button{display:none !important;}
.viem-body .v-video::-webkit-media-controls-volume-slider{display:none !important;}
.viem-body .v-video::-webkit-media-controls-volume-control-container{display:none !important;}
.viem-body .v-video::-webkit-media-controls-volume-control-hover-background{display:none !important;}

.viem-body .v-overlay{
	position:absolute;inset:0;z-index:3;
	display:flex;align-items:center;justify-content:center;
	padding:0;text-align:center;pointer-events:none;
	transition:opacity .35s ease;
}

.viem-body .v-mark{display:block;height:auto;width:36%;}
.viem-body .v-mark--chatgpt{width:36.4%;}
.viem-body .v-mark--airbnb {width:36.2%;}
.viem-body .v-mark--youtube{width:34.2%;}
.viem-body .v-mark--khadi  {width:38.8%;filter:drop-shadow(0 6px 26px rgba(0,0,0,.28));}

/* CureBay is still a mark + wordmark lockup (artboard total ≈ 630 wide) */
.viem-body .brand{display:inline-flex;align-items:center;justify-content:center;gap:clamp(10px,1.3vw,25px);line-height:1;}
.viem-body .brand .wm{font-family:'Helvetica Neue',Arial,sans-serif;}
.viem-body .brand-curebay img{height:clamp(58px,min(9.11vw,calc(16.2 * var(--vh))),175px);width:auto;display:block;}
.viem-body .brand-curebay .wm{color:#fff;font-size:clamp(38px,min(5.625vw,calc(10 * var(--vh))),108px);font-weight:700;letter-spacing:-.02em;}

/* ---------- Mobile (artboard 360x800) ---------- */
@media (max-width:768px){
	/* The floors below are deliberately low. A clamp floor only takes effect on a
	   viewport short enough to reach it, so these numbers are invisible on a
	   normal phone (the vh term governs there) and only come into play on a
	   short one — iPhone SE, small Androids — where the old floors were what
	   pushed the hero past the bottom of the panel. */
	.viem-body{
		--frame-x:clamp(16px,8.61vw,31px);
		--frame-top:clamp(50px,calc(13.375 * var(--vh)),107px);
		--frame-bottom:clamp(10px,calc(3.875 * var(--vh)),31px);
		--panel-x:clamp(16px,7.5vw,27px);
		--panel-y:clamp(12px,calc(3 * var(--vh)),30px);
	}

	.viem-body .v-topbar{padding:clamp(12px,calc(3.875 * var(--vh)),31px) var(--frame-x) 0;}
	.viem-body .v-logo{height:clamp(32px,min(16.4vw,calc(7.375 * var(--vh))),59px);}
	.viem-body .v-logo-mark{font-size:clamp(19px,5.6vw,26px);}
	.viem-body .v-logo-word{font-size:clamp(8px,2.5vw,12px);}
	/* One scale again — the label inherits it and the speaker is derived from it,
	   so the phone header cannot drift out of step with the desktop one. */
	.viem-body .v-topbar-right{font-size:clamp(13px,4.44vw,16px);gap:10px;}

	/* Media: full-bleed 16:9 band centred in the VIEWPORT (artboard puts its
	   centre on y=400 of 800, i.e. dead centre — not centred in the frame). */
	.viem-body .v-media{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;align-items:center;}
	.viem-body .v-media-inner{flex:0 0 auto;width:100%;height:auto;aspect-ratio:16/9;}
	.viem-body .is-nz .v-media-inner{aspect-ratio:16/9;}
	.viem-body .v-poster.is-contain{background-size:clamp(193px,56%,388px);}

	/* the control drops into the white space below the band */
	.viem-body .v-play-group{
		bottom:calc(var(--frame-bottom) + clamp(40px,calc(9.75 * var(--vh)),78px));
		gap:clamp(7px,calc(1.375 * var(--vh)),11px);
	}
	/* On a phone the control floats over the WHITE space below the band, not
	   over artwork — so the desktop glass treatment (translucent black + white
	   hairline) washes out to pale grey. Go solid and drop the light border. */
	.viem-body .v-play{
		width:clamp(28px,9.72vw,35px);height:clamp(28px,9.72vw,35px);
		background:rgba(0,0,0,.86);
		border-color:transparent;
		-webkit-backdrop-filter:none;backdrop-filter:none;
		box-shadow:0 2px 8px rgba(0,0,0,.18);
	}
	/* a phone-sized disc needs a proportionally larger mark to stay readable */
	.viem-body .v-play::before{width:42%;height:43%;}
	.viem-body .v-play-cap{
		font-size:clamp(7px,2.41vw,8.7px);
		letter-spacing:.04em;
		background:rgba(0,0,0,.86);
		border-color:transparent;
		-webkit-backdrop-filter:none;backdrop-filter:none;
		padding:clamp(2.5px,calc(.45 * var(--vh)),4px) clamp(6px,1.9vw,9px);
	}

	/* overlay marks read much larger on a phone (artboard: 232/230/228/199 of 360) */
	.viem-body .v-mark--chatgpt{width:64.4%;}
	.viem-body .v-mark--airbnb {width:63.9%;}
	.viem-body .v-mark--youtube{width:63.3%;}
	.viem-body .v-mark--khadi  {width:73.7%;}
	.viem-body .v-mark--curebay{width:62.9%;}
	.viem-body .brand{gap:clamp(6px,2.2vw,9px);}
	.viem-body .brand-curebay img{height:clamp(34px,16vw,60px);}
	.viem-body .brand-curebay .wm{font-size:clamp(26px,10.2vw,40px);}

	.viem-body .v-panel{-webkit-overflow-scrolling:touch;}

	/* Every size below is capped against the viewport HEIGHT as well as its width,
	   so a short phone (iPhone SE: 375x667) shrinks the copy instead of clipping it. */
	.viem-body .v-text h1,.viem-body .v-text h2{line-height:1.125;}
	/* The Round 4 copy is a line longer than Round 3, so the mobile artboard
	   drops the hero type to 21.4/360 to keep its own line breaks. */
	.viem-body .v-hero h1,
	.viem-body .v-hero-lead,
	.viem-body .v-hero-sub,
	.viem-body .v-hero-others{font-size:clamp(13px,min(5.94vw,calc(2.673 * var(--vh))),21.4px);}
	.viem-body .v-hero-lead{margin-top:clamp(7px,calc(2 * var(--vh)),16px)!important;}
	.viem-body .v-hero-sub{margin-top:clamp(9px,calc(3.13 * var(--vh)),25px)!important;}
	.viem-body .v-hero-others{margin-top:clamp(4px,calc(.875 * var(--vh)),7px)!important;}

	/* brands stack, still sized on width (artboard: 123 / 121 / 117) */
	.viem-body .v-brand-row{
		flex-direction:column;align-items:flex-start;
		gap:clamp(5px,calc(1.56 * var(--vh)),13px);
		margin-top:clamp(5px,calc(1 * var(--vh)),8px);
	}
	/* Stacked, these three are the tallest block in the hero, so they have to be
	   capped against the viewport HEIGHT as well as its width — otherwise a short
	   phone keeps them at full width-derived size and the copy below is pushed
	   out. The vh terms are the artboard widths over the 800px artboard height,
	   so a 360x800 phone still lands on 123 / 121 / 117 exactly. */
	.viem-body .v-brand--chatgpt{width:clamp(62px,min(34.17vw,calc(15.375 * var(--vh))),123px);}
	.viem-body .v-brand--youtube{width:clamp(61px,min(33.61vw,calc(15.125 * var(--vh))),121px);}
	.viem-body .v-brand--airbnb {width:clamp(59px,min(32.50vw,calc(14.625 * var(--vh))),117px);}

	/* "Across" stacks: label above the rule, then one count per line */
	.viem-body .v-across{
		display:block;border-top:0;padding-top:0;
		margin-top:clamp(10px,calc(12 * var(--vh)),96px);
		width:auto;max-width:clamp(96px,33.3vw,120px);
		line-height:.95;
		font-size:clamp(11px,min(5.33vw,calc(2.4 * var(--vh))),19.2px);
	}
	.viem-body .v-across .lbl{display:block;padding-bottom:clamp(2px,calc(.5 * var(--vh)),4px);border-bottom:clamp(2px,.83vw,3px) solid #000;}
	.viem-body .v-across .val{display:block;margin-top:clamp(2px,calc(.5 * var(--vh)),4px);line-height:1.06;}
	.viem-body .v-across .val br{display:inline;}

	/* Same reasoning as the hero floors above: these only bind on a short phone. */
	.viem-body .v-about-copy p,
	.viem-body .v-awards h3{font-size:clamp(10px,min(4.72vw,calc(2.15 * var(--vh))),17px);line-height:1.107;}
	.viem-body .v-about-copy .gap{margin-top:clamp(6px,calc(2.1 * var(--vh)),17px);}
	.viem-body .v-awards{margin-top:clamp(8px,calc(2.6 * var(--vh)),21px);}

	/* The artboard packs both rows from the left and measures every mark against
	   the WIDTH of the panel it sits in, so the block keeps the artboard's
	   proportions on any phone instead of stalling at a pixel ceiling on a big
	   one. Each width below is that mark on the 360x800 artboard as a share of
	   the 244px content column; the vh term is the same measurement taken
	   against the artboard HEIGHT, so a short screen — and landscape — shrinks
	   the whole block evenly instead of pushing the section past the fold. */
	.viem-body .v-awards-row{
		justify-content:flex-start;
		column-gap:min(3.985%,calc(1.24 * var(--vh)));
		row-gap:0;                    /* the second row carries its own margin */
		margin-top:clamp(6px,calc(1.9 * var(--vh)),15px);
	}
	.viem-body .v-awards-row .award-break{display:block;flex:0 0 100%;width:100%;height:0;margin:0;}

	/* width drives the size here, so the height the desktop rule set is dropped */
	.viem-body .v-awards-row .award{flex:0 0 auto;height:auto;}
	/* the top row sits on a wider gap than the bottom one (artboard: 17 vs 9) */
	.viem-body .v-awards-row .award:nth-child(-n+3){margin-right:min(3.295%,calc(1.09 * var(--vh)));}
	.viem-body .v-awards-row .award:nth-child(n+6){margin-top:min(5.08%,calc(1.71 * var(--vh)));}
	.viem-body .v-awards-row .award:nth-child(1) {width:min(24.02%,calc(8.06 * var(--vh)));}
	.viem-body .v-awards-row .award:nth-child(2) {width:min(10.61%,calc(3.56 * var(--vh)));}
	.viem-body .v-awards-row .award:nth-child(3) {width:min(14.55%,calc(4.88 * var(--vh)));}
	.viem-body .v-awards-row .award:nth-child(4) {width:min(21.23%,calc(7.12 * var(--vh)));}
	.viem-body .v-awards-row .award:nth-child(6) {width:min(16.52%,calc(5.54 * var(--vh)));}
	.viem-body .v-awards-row .award:nth-child(7) {width:min(15.16%,calc(5.09 * var(--vh)));}
	.viem-body .v-awards-row .award:nth-child(8) {width:min(18.11%,calc(6.08 * var(--vh)));}
	.viem-body .v-awards-row .award:nth-child(9) {width:min(8.65%,calc(2.90 * var(--vh)));}
	.viem-body .v-awards-row .award:nth-child(10){width:min(18.28%,calc(6.13 * var(--vh)));}
	.viem-body .v-awards-row .award-dummy{
		height:auto;min-height:min(28px,calc(3.8 * var(--vh)));
		font-size:8px;padding:5px 7px;
	}
	.viem-body .v-founded{
		margin-top:clamp(8px,calc(2.4 * var(--vh)),19px);
		padding:clamp(3px,calc(.85 * var(--vh)),7px) 0 clamp(2px,calc(.7 * var(--vh)),6px);
		border-top-width:clamp(2px,.83vw,3px);
		border-bottom-width:clamp(2px,.83vw,3px);
		font-size:clamp(10px,min(4.72vw,calc(2.15 * var(--vh))),17px);
		line-height:1.107;
	}
	.viem-body .v-about-contact{
		margin-top:clamp(8px,calc(2.4 * var(--vh)),19px);
		flex-direction:column;align-items:flex-start;gap:clamp(6px,calc(1.9 * var(--vh)),15px);
	}
	.viem-body .v-about-contact .contact{
		flex-direction:column;align-items:flex-start;gap:2px;
		font-size:clamp(10px,min(4.4vw,calc(2 * var(--vh))),16px);
	}
	.viem-body .v-about-contact .social{gap:clamp(7px,2.8vw,10px);}
	.viem-body .v-about-contact .social a{
		width:clamp(21px,min(8.2vw,calc(3.7 * var(--vh))),30px);height:clamp(21px,min(8.2vw,calc(3.7 * var(--vh))),30px);
		font-size:clamp(11px,4.1vw,15px);
	}
}

/* Phone landscape: plenty of width, almost no height — put the brands back on one
   row and keep the counts on one line so the hero still fits without scrolling. */
@media (max-width:768px) and (orientation:landscape){
	.viem-body .v-sec{height:100%;}
	.viem-body{--frame-top:clamp(62px,calc(18 * var(--vh)),96px);--panel-y:14px;}
	.viem-body .v-logo{height:clamp(44px,calc(12 * var(--vh)),58px);}
	.viem-body .v-brand-row{flex-direction:row;align-items:center;gap:min(26px,4vw);}
	.viem-body .v-brand--chatgpt{width:min(150px,17vw);}
	.viem-body .v-brand--youtube{width:min(143px,16.2vw);}
	.viem-body .v-brand--airbnb {width:min(134px,15.2vw);}
	.viem-body .v-across{max-width:100%;}
	.viem-body .v-across .val br{display:none;}
	.viem-body .v-play-group{bottom:calc(var(--frame-bottom) + clamp(8px,calc(3 * var(--vh)),20px));}

	/* The about panel is the longest copy on the site; rotated, it has barely
	   300px of height to live in, so its vertical rhythm tightens further. */
	.viem-body .v-about-copy .gap{margin-top:clamp(4px,calc(1.4 * var(--vh)),17px);}
	.viem-body .v-awards{margin-top:clamp(5px,calc(1.6 * var(--vh)),21px);}
	.viem-body .v-awards-row{margin-top:clamp(4px,calc(1.2 * var(--vh)),15px);}
	.viem-body .v-founded{margin-top:clamp(5px,calc(1.6 * var(--vh)),19px);}
	.viem-body .v-about-contact{
		margin-top:clamp(5px,calc(1.6 * var(--vh)),19px);
		gap:clamp(4px,calc(1.2 * var(--vh)),15px);
	}
	.viem-body .v-about-copy p,
	.viem-body .v-awards h3,
	.viem-body .v-founded{line-height:1.05;}
}

@media (prefers-reduced-motion:reduce){
	.viem-body .v-sec{transition:none;}
}