/* ============================================================ Frisktid · Design Tokens Brand: Norwegian wellness / "fresh time" / health-by-movement Voice: Confident, plain, science-rooted, warmly direct. ============================================================ */ @font-face { font-family: "Arsenica"; src: url("../fonts/Arsenica-Alt-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; font-display: swap; } @font-face { font-family: "Arsenica Text"; src: url("../fonts/Arsenica-Text-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; font-display: swap; } :root { /* ---------- Brand color pairs ---------------------------- Frisktid uses 5 duotone pairings. Each pair = ONE big color block + ONE high-contrast type color. Never mix freely. */ /* — Palette A · Forest + Mint (active, outdoors, primary) */ --forest: #207040; --forest-deep: #19593a; --mint-bright: #00f090; /* — Palette B · Royal Purple + Cream (calm, evening, sleep) */ --royal: #301868; --royal-deep: #1f0f49; --cream-warm: #f0e0b0; /* — Palette C · Pale Mint + Indigo (clarity, focus, brain) */ --mint-pale: #a8f0b0; --indigo-ink: #2000f0; /* — Palette D · Cream + Ink (essay, longread, archival) */ --cream-soft: #f8e8b8; --ink: #302010; /* — Palette E · Electric Purple + Mint (energy, signature) */ --plum: #7048e8; --plum-deep: #4f2dbd; --mint-on-plum: #00f090; /* ---------- Semantic surface roles --------------------- */ --surface: var(--cream-soft); /* default page */ --surface-ink: var(--ink); --accent: var(--forest); --accent-on: var(--mint-bright); /* ---------- Type families ------------------------------ */ /* Brand-supplied: Arsenica Alt Regular for display, Arsenica Text Light for body. Files live in fonts/. */ --font-display: "Arsenica", "Fraunces", "DM Serif Display", Georgia, serif; --font-body: "Arsenica Text", "Arsenica", "Iowan Old Style", Georgia, serif; --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; /* No OT features needed — Arsenica ships with the brand terminal/wonk forms native to the typeface. */ --fraunces-display: normal; --fraunces-body: normal; /* ---------- Type scale (poster + slide) ---------------- */ --fs-mega: clamp(72px, 9vw, 168px); /* 1-line poster headline */ --fs-display: clamp(56px, 6.5vw, 112px); /* 2-3 line poster headline */ --fs-h1: clamp(40px, 4.4vw, 80px); --fs-h2: clamp(32px, 3.2vw, 56px); --fs-h3: 24px; --fs-body: 20px; --fs-small: 16px; --fs-meta: 13px; --lh-display: 0.95; /* tight, lets ascenders/descenders kiss */ --lh-body: 1.5; /* generous, single-column reading */ /* ---------- Layout ------------------------------------ */ --rule-w: 2px; --rule-len: 72px; /* short divider under headline */ --pad-poster: 88px; /* 1200px poster outer padding */ --pad-block: 64px; --pad-card: 32px; --radius-0: 0; /* the brand is hard-edged */ --radius-s: 2px; --radius-m: 4px; /* ---------- Motion ------------------------------------ */ --ease: cubic-bezier(.2,.7,.2,1); --dur-fast: 140ms; --dur: 240ms; --dur-slow: 480ms; } /* ============================================================ Element defaults ============================================================ */ html, body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); font-feature-settings: var(--fraunces-body); color: var(--ink); background: var(--surface); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } h1, h2, h3, .display { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-display); letter-spacing: -0.005em; text-wrap: pretty; margin: 0; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } p { margin: 0 0 1em; max-width: 32em; } hr { border: 0; border-top: var(--rule-w) solid currentColor; width: var(--rule-len); margin: 1.25em 0; opacity: 1; } /* ============================================================ Utility surface classes — apply to any container to flip the entire duotone (bg + on-color text). ============================================================ */ .surface-forest { background: var(--forest); color: var(--mint-bright); } .surface-royal { background: var(--royal); color: var(--cream-warm); } .surface-mint { background: var(--mint-pale); color: var(--indigo-ink); } .surface-cream { background: var(--cream-soft); color: var(--ink); } .surface-plum { background: var(--plum); color: var(--mint-on-plum);} .surface-forest hr, .surface-royal hr, .surface-mint hr, .surface-cream hr, .surface-plum hr { color: currentColor; } /* ============================================================ Wordmark — renders assets/wordmark.svg as a CSS mask so it adopts the current text color via `background: currentColor`. Just drop anywhere; size it via height (the aspect ratio is locked). ============================================================ */ .wordmark { display: inline-block; height: 56px; aspect-ratio: 849 / 324; background: currentColor; -webkit-mask: url("../assets/wordmark.svg") no-repeat center / contain; mask: url("../assets/wordmark.svg") no-repeat center / contain; /* prevent any inherited text rendering */ font-size: 0; line-height: 0; vertical-align: middle; } /* Relative-path variants for files nested one level deeper */ .preview .wordmark { -webkit-mask-image: url("../assets/wordmark.svg"); mask-image: url("../assets/wordmark.svg"); } :root{--wm-url:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4gPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4NDkiIGhlaWdodD0iMzI0IiB2aWV3Qm94PSIwIDAgODQ5IDMyNCIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsPSJmcmlza3RpxJEiPiA8ZyBmaWxsPSIjMDAwIj4gPHBhdGggZD0iTTUzMC41LDIwNi4ydi02NC44YzAtMy4zLDAtNi4yLTQuNi02LjJoLTcuNWMtMS41LDAtMS4zLTEuMS0uMi0xLjMsMTUuNS0yLjIsMjYuMy01LjMsMzEuNC0yMi44LjItLjkuNC0xLjMuOS0xLjNzLjcuNC43LDEuM2MtLjQsNy43LS40LDEyLjYtLjQsMTguNnMxLjEsNC4yLDUuMyw0LjJoMzFjLjQsMCwuNCwxLjMtLjksMS4zaC0yOS4yYy01LjEsMC02LjQsMS4zLTYuNCw2djYyLjJjMCwyNS45LDIxLjIsMzEsMzguNSwxMC42LDEuMS0xLjMsMi40LS43LDEuMS45LTEzLjksMTcuMy0yNC4xLDIyLjEtMzUsMjIuMXMtMjQuNi02LjYtMjQuNi0zMC44WiI+PC9wYXRoPiA8cGF0aCBkPSJNNjQ0LjQsMjMyLjVjMS4xLDAsMS4zLDEuNSwwLDEuNS04LjItLjQtMzguMS0uNC00Ni4yLDAtMS41LDAtMS41LTEuNSwwLTEuNSw4LjQsMCwxMy4xLTUuNSwxMy4xLTE4LjZ2LTU1LjhjMC0xMC42LTMuMS0xNS4zLTEzLjUtMTMuMy0xLjEuMi0xLjMtMS4xLS43LTEuMywxMC44LTIuNCwyNS40LTcuMywzMy42LTEyLjgsMS41LS45LDIuNC0uNCwyLjQuNy0xLjUsMTMuMy0yLDE5LTIsMzAuNXY1MmMwLDEwLjIsNC4yLDE4LjQsMTMuMywxOC42WiI+PC9wYXRoPiA8cGF0aCBkPSJNNjU3LDE4Ni4yYzAtMzAuNSwyNS43LTU1LjgsNTEuOC01NS44czIyLjEsMi45LDMwLjMsOGwtLjQtMzIuM2MwLTE1LTQuMi0xNS45LTEwLTE0LjgtMS41LjItMS41LTEuMy0xLjUtMS4zLDExLjktMy4xLDIzLjctNy4zLDMyLjctMTUuMywwLDAsMi0uNCwxLjUsMS4zLTIsMTAuMi0yLjQsMjAuOC0yLjQsNDIuM3Y5MS4yYzAsOS41LDIsMTQuMiw3LjMsMTQuMiwxMC40LDAsMTEuMS0xMi42LDExLjMtMjQuMywwLTEuMywxLjMtMS41LDEuMywwLDAsMTkuMi03LjMsMzYuNy0yMi4xLDM2LjdzLTE4LjEtNy4zLTE4LjEtMjQuNi0uOS0yLjItMS44LS43Yy03LjcsMTUuOS0xOS4yLDI2LjEtMzcuMiwyNi4xcy00Mi43LTE5LjctNDIuNy01MC43Wk03MzkuMSwxODEuNmMwLTIxLjItMTAuOC00Ni45LTM4LjMtNDYuOXMtMjYuMywxMy4zLTI2LjMsMzUsMTcuNSw1NS44LDM4LjUsNTUuOCwyNi4xLTEzLjcsMjYuMS00My44WiI+PC9wYXRoPiA8Y2lyY2xlIGN4PSI3ODkiIGN5PSIxMDUiIHI9IjE1Ij48L2NpcmNsZT4gPHBhdGggZD0iTTc2LjEsMTMzLjhjMTEuMS0xLjUsMTUuMy00LjksMTUuMy0yMSwwLTMyLjUsMzAuOC00NC4zLDQ3LjYtMzIuNywxLjMsMS4xLDEuMSwyLC4yLDMuMy0yLjQsMy4xLTcuNSw3LjMtMTAsMTAtMS4xLDEuMS0yLDEuMy0yLjkuMi05LjMtMTAuMi0yMC4xLTEyLjQtMjUuMi02LjItNC45LDUuNS0uNywyMy41LDguOSw0NS4xLDEuMSwxLjEsMi4yLDEuMyw0LjIsMS4zaDIzLjVjLjQsMCwuNCwxLjMtLjksMS4zaC0yMC42Yy00LjIsMC02LjIuOS02LjIsNi40djcyLjNjMCwxMy45LDYuNCwxOC42LDE4LjEsMTguNnMyLDEuNSwwLDEuNWwtMTcuMy0uMmgtMjEuNWwtMTMuMy4yYy0xLjUsMC0xLjUtMS41LDAtMS41LDkuMSwwLDEzLjktNC42LDEzLjktMTguNnYtNzIuM2MwLTQuNC0uNy02LjQtNC40LTYuNGgtOS41Yy0xLjMsMC0xLjMtMS4xLDAtMS4zWiI+PC9wYXRoPiA8cGF0aCBkPSJNMTkxLjYsMjMyLjVjMS4xLDAsMS4zLDEuNSwwLDEuNS05LjctLjQtMzYuNS0uNC00Ni4yLDAtMS41LDAtMS41LTEuNSwwLTEuNSw4LjYsMCwxMy4xLTEuOCwxMy4xLTE2LjJ2LTU4LjZjMC0xMC42LTMuMS0xNS4zLTEzLjUtMTMuMy0xLjEuMi0xLjMtMS4xLS43LTEuMywxMC44LTIuNCwyNS40LTcuMywzMy42LTEyLjgsMS41LS45LDIuNC0uNCwyLjQuNy0xLjUsMTMuMy0yLDE5LTIsMzAuNXY0LjJjMi45LTE0LjYsMTAuMi0zNS4yLDI5LjYtMzUuMnMyNSw3LjUsMjIuNiwxN2wtOS4xLDM0LjVjLS40LDEuOC0xLjgsMS4zLTEuNS0uNCw0LjktMjYuMy02LjYtMzYuMS0yMS0zNi4xcy0yMC42LDIxLjktMjAuNiw0MC4zdjMwLjhjMCwxMS43LDQuNCwxNS43LDEzLjMsMTUuOVoiPjwvcGF0aD4gPHBhdGggZD0iTTI4NS44LDIzMi41YzEuMSwwLDEuMywxLjUsMCwxLjUtOC4yLS40LTM4LjEtLjQtNDYuMiwwLTEuNSwwLTEuNS0xLjUsMC0xLjUsOC40LDAsMTMuMS01LjUsMTMuMS0xOC42di01NS44YzAtMTAuNi0zLjEtMTUuMy0xMy41LTEzLjMtMS4xLjItMS4zLTEuMS0uNy0xLjMsMTAuOC0yLjQsMjUuNC03LjMsMzMuNi0xMi44LDEuNS0uOSwyLjQtLjQsMi40LjctMS41LDEzLjMtMiwxOS0yLDMwLjV2NTJjMCwxMC4yLDQuMiwxOC40LDEzLjMsMTguNloiPjwvcGF0aD4gPHBhdGggZD0iTTMwNi40LDE5NC4yYy0uNywyNS45LDExLjUsNDAuOSwzMy4yLDQwLjlzMjMuMi0zLjMsMjMuMi0xNS43Yy0uNC0yNi42LTU5LjUtMzcuMi02MC02MS4zLS40LTE0LjIsMTYuOC0yNy43LDQwLjctMjcuN3MzOC41LDQuNiwzNS44LDE1LjVsLTYuMiwyNC42Yy0uMi45LTEuMywxLjEtMS4xLS4yLDAtMjQuNi05LjMtMzcuNi0zMi4xLTM3LjZzLTIwLjEsNS44LTIwLjEsMTIuNGMwLDIyLjMsNjEuNSwzMi4xLDYyLDYxLjMuNywxNi40LTE3LjcsMzAuNS00NC45LDMwLjVzLTM5LjYtNy43LTM3LjQtMTcuOWw1LjUtMjVjLjItMS4xLDEuMy0xLjEsMS4zLjJaIj48L3BhdGg+IDxwYXRoIGQ9Ik0zOTYsMjMzLjhjLTEuNSwwLTEuOC0xLjUsMC0xLjUsMTAsMCwxNi40LTQsMTYuNC0xOS41bC0uNC0xMDYuNmMwLTE1LTQuMi0xNS45LTEwLTE0LjgtMS41LjItMS41LTEuMy0xLjUtMS4zLDExLjktMy4xLDIzLjctNy4zLDMyLjctMTUuMywwLDAsMi0uNCwxLjUsMS4zLTIsMTAuMi0yLjQsMjAuOC0yLjQsNDIuM3Y2OS43bDM4LjMtNDEuMmM4LjQtOC44LTIuNy0xMS4xLTguMi0xMS43LTEuMywwLTEuMS0xLjguMi0xLjUsMTAuMi40LDMwLjguNyw0MC41LDAsMS4zLDAsMS44LDEuNSwwLDEuNS04LDAtMTcuNSwzLjMtMjYuMywxMS45bC0zNS4yLDM0LjdjNC45LTMuMSwxMC00LjYsMTUuNy00LjYsMTEuMywwLDIxLjUsNS44LDI5LjIsMjUuNyw0LjQsMTEuMyw5LjEsMTkuNywxNi4yLDE5LjdzOC4yLTQuOSw4LjYtOS41YzAtMi4yLDEuMy0yLjIsMS4zLDAsMCwxMi40LTguMiwyMy43LTE5LjksMjMuN3MtMTcuOS03LjUtMjQuNi0yNS40Yy03LjUtMjAuNi0xMi4yLTI0LjgtMjIuMy0yNC44cy05LjMsMS4xLTEzLjUsNC42djIxLjdjMCwxNS41LDYuNCwxOS41LDE2LjQsMTkuNXMxLjUsMS41LDAsMS41bC0xMi4yLS4yaC0yOC4zbC0xMi4yLjJaIj48L3BhdGg+IDxjaXJjbGUgY3g9IjI2MS4xIiBjeT0iMTA1IiByPSIxNSI+PC9jaXJjbGU+IDwvZz4gPC9zdmc+")} *{box-sizing:border-box} html{hyphens:manual;-webkit-hyphens:manual;scroll-behavior:smooth} html,body{margin:0;background:var(--cream-soft);color:var(--ink)} body{font-family:var(--font-body);font-weight:300;font-size:clamp(17px,1.25vw,20px);line-height:1.55} a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}a:hover{opacity:.7} button{font:inherit;color:inherit} .wrap{max-width:1360px;margin:0 auto;padding:0 clamp(20px,6vw,96px)} .sec{padding:clamp(80px,11vw,176px) 0} .sec+.sec.plain{border-top:2px solid var(--ink)} .disp{font-family:var(--font-display);font-weight:400;line-height:.98;letter-spacing:-.01em;margin:0;text-wrap:pretty} .d1{font-size:clamp(46px,7.4vw,120px)}.d2{font-size:clamp(36px,4.8vw,76px)}.d3{font-size:clamp(26px,2.4vw,38px)} .rule{height:2px;width:72px;background:currentColor;margin:clamp(24px,3vw,40px) 0} .label{display:block;font-family:var(--font-ui);font-size:13px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;font-weight:500;margin:0 0 20px} .lede{font-size:clamp(20px,1.6vw,26px);line-height:1.45;margin:0;max-width:36ch;text-wrap:pretty} p{margin:0 0 1em;max-width:58ch;text-wrap:pretty} .split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,120px);align-items:start} .split .lede{max-width:34ch} @media(max-width:820px){.split{grid-template-columns:minmax(0,1fr)}} .wm{display:block;aspect-ratio:849/324;background:currentColor;-webkit-mask:var(--wm-url) no-repeat center/contain;mask:var(--wm-url) no-repeat center/contain} /* nav */ .nav{position:sticky;top:0;z-index:20;background:var(--cream-soft);border-bottom:2px solid var(--ink)} .nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px} .nav .brand{background:none;border:0;padding:0;cursor:pointer;display:block} .nav .brand .wm{height:44px} .nav ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(16px,2vw,32px)} .nav .lnk{background:none;border:0;padding:6px 0;cursor:pointer;font-family:var(--font-ui);font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;border-bottom:2px solid transparent;transition:border-color var(--dur) var(--ease)} .nav .lnk:hover{border-color:currentColor}.nav .lnk.on{border-color:currentColor} .nav .menu{display:none;background:none;border:2px solid var(--ink);padding:8px 14px;font-family:var(--font-ui);font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;cursor:pointer} @media(max-width:560px){.nav .menu{display:block}.nav ul{display:none;position:absolute;left:0;right:0;top:72px;background:var(--cream-soft);flex-direction:column;gap:0;padding:8px clamp(20px,6vw,96px) 24px;border-bottom:2px solid var(--ink)}.nav ul.open{display:flex}.nav ul li{border-top:1px solid rgba(48,32,16,.2)}.nav .lnk{padding:16px 0;width:100%;text-align:left;font-size:14px}} /* hero A */ .heroA{padding-top:clamp(56px,9vw,140px)} .heroA .head{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(32px,5vw,80px);align-items:end} .heroA .ph{margin-top:clamp(48px,7vw,104px);aspect-ratio:21/9;overflow:hidden} .heroA .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block} @media(max-width:820px){.heroA .head{grid-template-columns:minmax(0,1fr)}.heroA .ph{aspect-ratio:4/3}} /* hero B */ .heroB{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:calc(100vh - 72px)} .heroB .ph{background-size:cover;background-position:50% 40%;min-height:360px} .heroB .blk{padding:clamp(32px,6vw,96px);display:flex;flex-direction:column;justify-content:space-between;gap:56px} .heroB .wm{height:clamp(48px,5vw,80px);align-self:flex-end} @media(max-width:820px){.heroB{grid-template-columns:minmax(0,1fr);min-height:0}} /* hero C */ .heroC{padding-top:clamp(56px,8vw,120px);padding-bottom:clamp(40px,5vw,72px)} .heroC .wm{width:100%;max-width:1160px;color:var(--forest)} .heroC .row{display:grid;grid-template-columns:minmax(0,6fr) repeat(3,minmax(0,2fr));gap:2px;margin-top:clamp(48px,7vw,104px)} .heroC .row>div{padding:24px;min-height:200px;display:flex;flex-direction:column;justify-content:space-between} .heroC .row>.intro{padding:24px 24px 0 0} .heroC .row h1{font-size:clamp(34px,3.6vw,56px)} @media(max-width:900px){.heroC .row{grid-template-columns:repeat(3,minmax(0,1fr))}.heroC .row>.intro{grid-column:1/-1;padding:0 0 32px}.heroC .row>div{min-height:140px;padding:16px}} /* pillars / blocks */ .blocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin-top:clamp(48px,6vw,88px)} .block{padding:clamp(28px,3vw,48px);min-height:360px;display:flex;flex-direction:column;justify-content:space-between;gap:40px} .block .n{font-family:var(--font-ui);font-size:13px;letter-spacing:.12em} .block p{margin:0} .block .note{font-family:var(--font-ui);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;padding-top:16px;border-top:2px solid currentColor} @media(max-width:820px){.blocks{grid-template-columns:minmax(0,1fr)}.block{min-height:0}} /* steps */ .steps{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,120px);margin-top:clamp(48px,6vw,88px);align-items:start} .steps ol{list-style:none;margin:0;padding:0} .steps ol>li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;border-top:2px solid currentColor;padding:28px 0 40px} .steps ol>li>.n{font-family:var(--font-ui);font-size:13px;letter-spacing:.12em;padding-top:8px} .steps ol>li h3{margin:0 0 12px}.steps ol>li p{margin:0} .steps figure{margin:0;position:sticky;top:104px} .steps figure img{width:100%;display:block} .steps figcaption{font-family:var(--font-ui);font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-top:14px} @media(max-width:820px){.steps{grid-template-columns:minmax(0,1fr)}.steps figure{position:static}} /* audience cards */ .cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin-top:clamp(48px,6vw,88px)} .card{display:flex;flex-direction:column;text-align:left;border:0;padding:0;cursor:pointer;background:none} .card:hover{opacity:1} .card .ph{aspect-ratio:4/5;overflow:hidden} .card .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-slow) var(--ease)} .card:hover .ph img{transform:scale(1.03)} .card .txt{padding:24px;flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:32px;min-height:200px;transition:filter var(--dur) var(--ease)} .card:hover .txt{filter:brightness(.92)} .card .go{font-family:var(--font-ui);font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:500} @media(max-width:1000px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.cards{grid-template-columns:minmax(0,1fr)}.card .ph{aspect-ratio:16/10}} /* partners */ .plist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;border-top:2px solid currentColor;padding-top:28px;margin-top:clamp(48px,6vw,88px)} .plist p{margin:10px 0 0;font-size:.94em} @media(max-width:820px){.plist{grid-template-columns:minmax(0,1fr)}} /* contact */ .contact .form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px} .field{display:flex;flex-direction:column;gap:8px} .field.full{grid-column:1/-1} .field span{font-family:var(--font-ui);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500} .field input,.field select,.field textarea{font:inherit;font-weight:300;color:inherit;background:transparent;border:0;border-bottom:2px solid currentColor;border-radius:0;padding:10px 0;outline:none;width:100%;-webkit-appearance:none;appearance:none} .field select{cursor:pointer} .field select option{color:var(--ink)} .field textarea{resize:vertical;min-height:120px} .field input::placeholder,.field textarea::placeholder{color:inherit;opacity:.55} .field input:focus,.field select:focus,.field textarea:focus{border-bottom-width:3px;padding-bottom:9px} .submit{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:8px} .btn{background:currentColor;border:0;padding:16px 28px;cursor:pointer;font-family:var(--font-ui);font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;transition:opacity var(--dur) var(--ease)} .btn span{color:var(--forest)} .btn:hover{opacity:.88}.btn:active{opacity:.75} .thanks{border-top:2px solid currentColor;padding-top:28px} @media(max-width:700px){.contact .form{grid-template-columns:minmax(0,1fr)}} /* audience page */ .aHero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-height:calc(88vh - 72px)} .aHero .blk{padding:clamp(32px,6vw,96px);display:flex;flex-direction:column;justify-content:space-between;gap:48px} .aHero .ph{background-size:cover;background-position:center;min-height:380px} .back{background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-ui);font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;align-self:flex-start} @media(max-width:820px){.aHero{grid-template-columns:minmax(0,1fr);min-height:0}.aHero .ph{order:-1;min-height:0;aspect-ratio:4/3}} .example{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,120px);align-items:center} .example img{width:100%;display:block} @media(max-width:820px){.example{grid-template-columns:minmax(0,1fr)}} .others{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin-top:40px} .others .card .txt{min-height:160px} @media(max-width:820px){.others{grid-template-columns:minmax(0,1fr)}} footer.foot{padding:clamp(56px,7vw,104px) 0 clamp(28px,3vw,48px)} footer.foot .wm{width:min(56%,440px);margin-bottom:clamp(48px,6vw,88px)} footer.foot .row{display:flex;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;border-top:2px solid currentColor;padding-top:24px;font-family:var(--font-ui);font-size:13px;letter-spacing:.1em;text-transform:uppercase} /* motion */ .rv{opacity:0;transform:translateY(18px);transition:opacity 700ms var(--ease),transform 700ms var(--ease)} .rv.in{opacity:1;transform:none} .page{animation:pageIn 480ms var(--ease)} @keyframes pageIn{from{opacity:0}to{opacity:1}} @media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.page{animation:none}} /* two-colour mode */ .duo .surface-forest,.duo .surface-plum,.duo .surface-royal,.duo .surface-mint{background:var(--ink);color:var(--cream-soft)} .duo .heroC .wm{color:var(--ink)} .duo .btn span{color:var(--ink)} .duo .heroC .row>div:nth-child(3){background:var(--cream-soft);color:var(--ink)} .duo .aHero .ph,.duo .heroB .ph{filter:none} /* three-colour mode: cream, ink, plum */ .tri .surface-plum,.tri .surface-mint{background:var(--plum);color:var(--cream-soft)} .tri .btn span{color:var(--ink)} /* carousel */ .car{position:relative;display:grid;grid-template-columns:minmax(0,1fr);border-bottom:2px solid var(--ink)} .car-ink{background:var(--ink);color:var(--cream-soft)}.car-plum{background:var(--ink);color:var(--cream-soft)} .car-slide{grid-area:1/1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-height:calc(92vh - 72px);opacity:0;visibility:hidden;transition:opacity 700ms var(--ease),visibility 0s 700ms} .car-slide.on{opacity:1;visibility:visible;transition:opacity 700ms var(--ease)} .car-blk{padding:clamp(32px,6vw,96px) clamp(20px,6vw,96px) 200px;display:flex;flex-direction:column;justify-content:center} .car-txt{max-width:820px;transform:translateY(14px);transition:transform 900ms var(--ease)} .car-slide.on .car-txt{transform:none} .car .d1{font-size:clamp(42px,5.6vw,96px)} .car-btn{margin-top:clamp(28px,3vw,44px)} .car .car-ink .btn span{color:var(--ink)}.car .car-plum .btn span{color:var(--plum)} .car-ph{background-size:cover;min-height:320px} .car-ctrl{position:absolute;left:0;bottom:0;width:calc(100% * 7 / 12);padding:0 clamp(20px,6vw,96px) clamp(24px,3vw,40px);display:flex;flex-direction:column;align-items:stretch;gap:20px;transition:background-color 700ms var(--ease)} .car-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:720px} .car-tab{min-width:0;overflow-wrap:anywhere;background:none;border:0;padding:0;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:10px;font-family:var(--font-ui);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;opacity:.6;transition:opacity var(--dur) var(--ease)} .car-tab:hover,.car-tab.on{opacity:1} .car-tab i{display:block;height:2px;background:color-mix(in srgb,currentColor 30%,transparent);position:relative;overflow:hidden} .car-tab b{position:absolute;inset:0;background:currentColor;transform:scaleX(0);transform-origin:left} .car-tab.on b{animation:carFill 7000ms linear forwards} .car-tab.on.paused b{animation-play-state:paused} @keyframes carFill{to{transform:scaleX(1)}} .car-arrows{display:flex;align-items:center;gap:16px;white-space:nowrap;font-family:var(--font-ui);font-size:13px;letter-spacing:.1em} .car-arrows button{background:none;border:2px solid currentColor;width:44px;height:44px;cursor:pointer;font-size:18px;line-height:1;transition:opacity var(--dur) var(--ease)} .car-arrows button:hover{opacity:.7} @media(max-width:1100px){.car-tab span{display:none}.car-blk{padding-bottom:160px}} @media(max-width:820px){.car-slide{grid-template-columns:minmax(0,1fr);min-height:0}.car-ph{order:-1;aspect-ratio:4/3;min-height:0}.car-ctrl{width:100%}.car-arrows{justify-content:space-between}} @media(prefers-reduced-motion:reduce){.car-tab.on b{animation:none;transform:scaleX(1)}} .aud-links{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column} .aud-links li{border-top:1px solid color-mix(in srgb,currentColor 25%,transparent)} .aud-links button{background:none;border:0;padding:12px 0;width:100%;text-align:left;cursor:pointer;font:inherit;transition:opacity var(--dur) var(--ease)} .aud-links button:hover{opacity:.6} footer.foot .row button{background:none;border:0;padding:0;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit} footer.foot .row button:hover{opacity:.7} /* aligned block rows via subgrid */ .blocks .block{display:grid;grid-template-rows:subgrid;grid-row:span 4;gap:0;min-height:0;align-content:start} .blocks .block>div{display:contents} .blocks .block .n{margin-bottom:clamp(56px,7vw,112px)} .blocks .block h3{align-self:start} .blocks .block .rule{align-self:start} .blocks .block p{align-self:start;padding-bottom:8px} @media(max-width:820px){.blocks .block .n{margin-bottom:40px}} /* plum reserved for CTA */ .btn{background:var(--plum)} .btn span,.duo .btn span,.car .car-ink .btn span,.car .car-plum .btn span{color:var(--ink)} :root{--plum:#ff6666;--ink:#1d3b2c} /* responsive refinements */ .disp{overflow-wrap:break-word} img{max-width:100%} @media(max-width:820px){.car-ctrl{position:relative;grid-area:2/1;width:100%;padding-top:24px}.car-blk{padding-bottom:clamp(32px,6vw,56px)}.car .d1{font-size:clamp(36px,9vw,56px)}.aHero .blk{gap:32px}} @media(max-width:560px){.sec{padding:64px 0}.d1{font-size:clamp(36px,10vw,46px)}.d2{font-size:clamp(30px,8.5vw,36px)}.lede{font-size:19px}.steps ol>li{grid-template-columns:40px minmax(0,1fr);padding:20px 0 28px}.card .txt,.others .card .txt{min-height:0;padding:20px;gap:20px}.block{padding:24px}.heroC .row{grid-template-columns:minmax(0,1fr)}.submit .btn{width:100%}.car-tabs{gap:8px}.car-arrows{gap:12px}.nav .brand .wm{height:36px}footer.foot .row{flex-direction:column}}