/* ============================================================ KABUNAKO INVESTMENT — shared design system Engineered-editorial. Warm white paper, condensed display, mono technical labels, spark-orange / copper / steel accents. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500;600;700;800;900&family=Saira:ital,wght@0,400;0,500;0,600;0,700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); /* ---------- Tokens ---------- */ :root{ /* warm paper neutrals */ --paper: #F6F1E8; --paper-2: #EFE7D9; --paper-3: #E7DCC9; --ink: #15110D; --ink-2: #38302A; --ink-soft: #6B6058; --line: rgba(21,17,13,.14); --line-soft: rgba(21,17,13,.08); /* brand accents — defaults = SPARK theme (overridden per data-theme) */ --primary: #E8531B; /* spark orange */ --primary-deep: #B23A12; /* burnt orange */ --copper: #B26B30; --steel: #2C4A61; --accent: #2C4A61; /* secondary accent (steel) */ --spark: #FF7A2D; /* hottest spark highlight */ /* derived */ --primary-tint: color-mix(in srgb, var(--primary) 12%, var(--paper)); --shadow-sm: 0 1px 2px rgba(21,17,13,.06), 0 4px 14px rgba(21,17,13,.06); --shadow-md: 0 8px 30px rgba(21,17,13,.10), 0 2px 8px rgba(21,17,13,.06); --shadow-lg: 0 30px 70px -20px rgba(21,17,13,.28), 0 10px 24px rgba(21,17,13,.10); /* type */ --display: 'Saira Condensed', 'Arial Narrow', sans-serif; --sans: 'Saira', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace; --maxw: 1320px; --gutter: clamp(20px, 4.5vw, 80px); } /* ---------- Theme variants (driven by ) ---------- */ :root[data-theme="copper"]{ --primary:#B5702F; --primary-deep:#8A4F1E; --accent:#2C3340; --spark:#D98A3C; } :root[data-theme="steel"]{ --primary:#2E6285; --primary-deep:#214A66; --accent:#E8531B; --spark:#5C9FC4; } /* ---------- Reset ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; } /* ---------- Layout helpers ---------- */ .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } .section{ position:relative; padding-block:clamp(80px,11vw,180px); } .section--tight{ padding-block:clamp(56px,7vw,110px); } /* ---------- Type ---------- */ .kicker{ font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--primary-deep); display:inline-flex; align-items:center; gap:.6em; } .kicker::before{ content:""; width:26px; height:2px; background:var(--primary); display:inline-block; } .kicker--plain::before{ display:none; } .eyebrow-num{ font-family:var(--mono); font-size:13px; letter-spacing:.2em; color:var(--ink-soft); } h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:800; line-height:.92; letter-spacing:-.005em; text-transform:uppercase; } h1 .spark-text, h2 .spark-text{ display:block; } .h-display{ font-size:clamp(54px, 9.2vw, 150px); line-height:.86; letter-spacing:-.01em; } .h-1{ font-size:clamp(34px, 3.9vw, 54px); } .h-2{ font-size:clamp(32px, 4.4vw, 64px); } .h-3{ font-size:clamp(24px, 2.4vw, 36px); } .lede{ font-family:var(--sans); font-size:clamp(18px,1.5vw,22px); line-height:1.55; color:var(--ink-2); font-weight:400; max-width:56ch; } .muted{ color:var(--ink-soft); } .spark-text{ color:var(--primary); } /* ---------- Buttons ---------- */ .btn{ --bg:var(--ink); --fg:var(--paper); display:inline-flex; align-items:center; gap:.7em; font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; padding:16px 26px; border:1px solid var(--bg); background:var(--bg); color:var(--fg); border-radius:2px; cursor:pointer; position:relative; overflow:hidden; transition:transform .35s cubic-bezier(.2,.7,.2,1), background .3s, color .3s, border-color .3s; } .btn .arw{ transition:transform .35s cubic-bezier(.2,.7,.2,1); } .btn:hover{ transform:translateY(-2px); } .btn:hover .arw{ transform:translateX(4px); } .btn--primary{ --bg:var(--primary); --fg:#fff; border-color:var(--primary); } .btn--primary:hover{ background:var(--primary-deep); border-color:var(--primary-deep); } .btn--ghost{ --bg:transparent; --fg:var(--ink); border-color:var(--line); } .btn--ghost:hover{ border-color:var(--ink); background:var(--ink); color:var(--paper); } .btn--light{ --bg:transparent; --fg:#fff; border-color:rgba(255,255,255,.35); } .btn--light:hover{ background:#fff; color:var(--ink); border-color:#fff; } /* ---------- Top nav ---------- */ .nav{ position:fixed; inset:0 0 auto 0; z-index:60; display:flex; align-items:center; justify-content:space-between; padding:16px var(--gutter); transition:background .4s ease, box-shadow .4s ease, padding .4s ease, border-color .4s; border-bottom:1px solid transparent; gap:20px; } .nav.scrolled{ background:color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); border-color:var(--line-soft); padding-block:12px; box-shadow:0 1px 0 var(--line-soft); } .brand{ display:flex; align-items:center; gap:12px; font-family:var(--display); font-weight:900; font-size:24px; letter-spacing:.01em; text-transform:uppercase; } .brand .mark{ width:34px; height:34px; flex:0 0 auto; } .brand small{ font-family:var(--mono); font-size:9.5px; letter-spacing:.34em; color:var(--ink-soft); display:block; margin-top:-3px; font-weight:500; } .nav-links{ display:flex; align-items:center; gap:32px; flex-wrap:wrap; } .nav-links a{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); position:relative; padding-block:6px; white-space:nowrap; transition:color .3s ease; } .nav-links a::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--primary); transition:width .3s ease; } .nav-links a:hover{ color:var(--ink); } .nav-links a:hover::after{ width:100%; } .nav-cta{ display:flex; align-items:center; gap:14px; } .nav-burger{ display:none; background:none; border:1px solid var(--line); border-radius:2px; width:42px; height:42px; cursor:pointer; align-items:center; justify-content:center; } .nav-burger span{ display:block; width:18px; height:2px; background:var(--ink); position:relative; } .nav-burger span::before,.nav-burger span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink); } .nav-burger span::before{ top:-6px; } .nav-burger span::after{ top:6px; } /* ---------- Reveal on scroll (JS rAF-driven for environment robustness) ---------- */ .reveal{ opacity:0; transform:translateY(34px); will-change:opacity, transform; } .reveal.in{ opacity:1; transform:none; } .clip-reveal{ clip-path:inset(0 100% 0 0); } .clip-reveal.in{ clip-path:inset(0 0 0 0); } @media (prefers-reduced-motion: reduce){ .reveal,.clip-reveal{ opacity:1 !important; transform:none !important; clip-path:none !important; } } /* ---------- Image slots ---------- */ image-slot{ display:block; background: linear-gradient(135deg, var(--paper-3), var(--paper-2)); box-shadow:var(--shadow-md); } .imgwrap{ overflow:hidden; position:relative; } .imgwrap image-slot{ width:100%; height:100%; } .slot-img{ width:100%; height:100%; object-fit:cover; display:block; } /* tag chip overlaid on imagery */ .img-tag{ position:absolute; z-index:3; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:8px 12px; background:rgba(21,17,13,.72); color:#fff; border-radius:2px; backdrop-filter:blur(4px); } /* glass stat chip */ .glass{ background:color-mix(in srgb,#fff 62%, transparent); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3); border:1px solid rgba(255,255,255,.6); box-shadow:var(--shadow-md); } /* ---------- Footer ---------- */ .footer{ background:var(--ink); color:var(--paper); padding-block:80px 40px; } .footer a{ color:rgba(246,241,232,.7); transition:color .25s; } .footer a:hover{ color:#fff; } /* ---------- Marquee ---------- */ .marquee{ overflow:hidden; white-space:nowrap; } .marquee__row{ display:inline-flex; align-items:center; gap:0; animation:marq 32s linear infinite; } .marquee__row span{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(34px,5vw,72px); padding-inline:.5em; display:inline-flex; align-items:center; } .marquee__row .dot{ color:var(--primary); padding-inline:.35em; } @keyframes marq{ to{ transform:translateX(-50%); } } .marquee:hover .marquee__row{ animation-play-state:paused; } @media (prefers-reduced-motion: reduce){ .marquee__row{ animation:none; } } /* ---------- Utility ---------- */ .grid-lines{ position:absolute; inset:0; pointer-events:none; z-index:0; background-image:linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size:clamp(60px,8vw,120px) clamp(60px,8vw,120px); opacity:.6; } .hr{ height:1px; background:var(--line); border:0; margin:0; } /* hide content visually but keep for a11y */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ---------- Responsive nav ---------- */ @media (max-width: 1100px){ .nav-links{ gap:24px; } .nav-links a{ font-size:11px; } } @media (max-width: 900px){ .nav-links{ display:none; } .nav-burger{ display:flex; } .nav-cta .btn{ display:none; } } /* ============== HOMEPAGE-SPECIFIC ============== */ /* font-personality variants (data-font on ) */ :root[data-font="serif"]{ --display:'Saira','Georgia',serif; } :root[data-font="wide"] { --display:'Saira', system-ui, sans-serif; } :root[data-font="wide"] h1, :root[data-font="wide"] h2, :root[data-font="wide"] h3{ letter-spacing:-.02em; font-weight:700; } /* ---------- HERO ---------- */ .hero{ position:relative; padding-top:clamp(118px,15vw,170px); padding-bottom:clamp(40px,6vw,80px); overflow:hidden; } .hero__bg{ position:absolute; inset:0; z-index:0; } .hero__bg .glow{ position:absolute; width:60vw; height:60vw; right:-12vw; top:-10vw; background:radial-gradient(circle, color-mix(in srgb,var(--primary) 26%, transparent), transparent 62%); filter:blur(10px); opacity:.55; pointer-events:none; } #sparks{ position:absolute; inset:0; z-index:1; pointer-events:none; } .hero__inner{ position:relative; z-index:2; display:grid; gap:clamp(32px,4vw,60px); grid-template-columns:1.05fr .95fr; align-items:center; } .hero__copy h1{ margin-top:14px; font-size:clamp(40px, 5.5vw, 84px); } .hero__copy .lede{ margin-top:48px; } .hero__line2{ color:var(--primary); -webkit-text-stroke:0; } .hero__line3{ display:block; } .hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; } .hero-stats{ display:flex; gap:38px; margin-top:46px; flex-wrap:wrap; } .hero-stats .st b{ font-family:var(--display); font-weight:800; font-size:clamp(34px,3.6vw,52px); line-height:1; display:block; } .hero-stats .st span{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); } .hero__media{ position:relative; } .hero__media .imgwrap{ aspect-ratio:4/5; border-radius:3px; box-shadow:var(--shadow-lg); } .hero__media .imgwrap::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); } .hero__floatcard{ position:absolute; left:-34px; bottom:34px; z-index:5; padding:20px 24px; border-radius:3px; min-width:210px; } .hero__floatcard .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); } .hero__floatcard b{ font-family:var(--display); font-weight:800; font-size:40px; line-height:1; display:block; margin-top:6px; } .hero__floatcard .bar{ height:5px; border-radius:3px; background:var(--paper-3); margin-top:14px; overflow:hidden; } .hero__floatcard .bar i{ display:block; height:100%; width:0; background:var(--primary); border-radius:3px; } .hero__badge{ position:absolute; right:-18px; top:30px; z-index:5; width:118px; height:118px; display:grid; place-items:center; } .hero__badge .seal{ position:absolute; inset:0; animation:spin 24s linear infinite; } @media (prefers-reduced-motion: reduce){ .hero__badge .seal{ animation:none; } } .hero__badge .seal text{ font-family:var(--mono); font-size:8.2px; letter-spacing:.16em; fill:var(--ink-2); text-transform:uppercase; } .hero__badge .core{ width:46px; height:46px; border-radius:50%; background:var(--primary); display:grid; place-items:center; color:#fff; } @keyframes spin{ to{ transform:rotate(360deg); } } /* HERO LAYOUT: OVERLAY */ .hero[data-layout="overlay"]{ padding-bottom:0; } .hero[data-layout="overlay"] .hero__inner{ display:block; min-height:88vh; } .hero[data-layout="overlay"] .hero__media{ position:absolute; inset:0; z-index:1; } .hero[data-layout="overlay"] .hero__media .imgwrap{ aspect-ratio:auto; width:100%; height:100%; border-radius:0; box-shadow:none; } .hero[data-layout="overlay"] .hero__media .imgwrap::before{ content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(90deg, rgba(10,8,6,.82), rgba(10,8,6,.30) 60%, transparent); } .hero[data-layout="overlay"] .hero__floatcard, .hero[data-layout="overlay"] .hero__badge{ display:none; } .hero[data-layout="overlay"] .hero__copy{ position:relative; z-index:4; max-width:760px; padding-top:clamp(90px,14vh,180px); padding-bottom:60px; color:#fff; } .hero[data-layout="overlay"] .hero__copy .lede{ color:rgba(255,255,255,.82); } .hero[data-layout="overlay"] .kicker{ color:var(--spark); } .hero[data-layout="overlay"] .hero-stats .st span{ color:rgba(255,255,255,.7); } .hero[data-layout="overlay"] .btn--ghost{ --fg:#fff; border-color:rgba(255,255,255,.4); } .hero[data-layout="overlay"] .btn--ghost:hover{ background:#fff; color:var(--ink); } /* HERO LAYOUT: EDITORIAL */ .hero[data-layout="editorial"] .hero__inner{ display:block; text-align:left; } .hero[data-layout="editorial"] .hero__copy{ max-width:none; } .hero[data-layout="editorial"] .hero__copy h1{ font-size:clamp(58px,11vw,180px); } .hero[data-layout="editorial"] .lede{ margin-left:auto; max-width:46ch; } .hero[data-layout="editorial"] .hero__media{ margin-top:clamp(40px,6vw,76px); } .hero[data-layout="editorial"] .hero__media .imgwrap{ aspect-ratio:21/8; border-radius:3px; } .hero[data-layout="editorial"] .hero__floatcard{ left:auto; right:34px; bottom:34px; } .hero[data-layout="editorial"] .hero__badge{ display:none; } /* ---------- Section: capability marquee strip ---------- */ .capstrip{ border-block:1px solid var(--line); background:var(--paper-2); padding-block:26px; } /* ---------- Section header pattern ---------- */ .sec-head{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(30px,5vw,64px); align-items:end; margin-bottom:clamp(40px,5vw,72px); } .sec-head .lede{ justify-self:start; max-width:42ch; } @media (max-width:780px){ .sec-head{ grid-template-columns:1fr; } .sec-head .lede{ justify-self:start; } } /* ---------- Welding & Fabrication — overlapping cards ---------- */ .fab-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:24px; align-items:start; } .fab-grid .imgwrap{ border-radius:3px; } .fab-a{ grid-column:1 / 8; aspect-ratio:16/11; } .fab-b{ grid-column:8 / 13; aspect-ratio:3/4; align-self:end; margin-top:60px; } .fab-c{ grid-column:3 / 9; aspect-ratio:16/9; margin-top:-90px; z-index:4; position:relative; box-shadow:var(--shadow-lg); } .fab-note{ grid-column:9 / 13; align-self:center; } .fab-note .num{ font-family:var(--mono); color:var(--primary-deep); letter-spacing:.2em; font-size:12px; } @media (max-width:820px){ .fab-grid{ grid-template-columns:1fr 1fr; } .fab-a{ grid-column:1/3; } .fab-b{ grid-column:1/2; margin-top:0; } .fab-c{ grid-column:2/3; margin-top:0; } .fab-note{ grid-column:1/3; } } /* ---------- Expertise split ---------- */ .exp{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:center; } .exp__media{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .exp__media .imgwrap{ border-radius:3px; } .exp__media .m1{ grid-row:span 2; aspect-ratio:3/5; } .exp__media .m2{ aspect-ratio:1/1; } .exp__media .m3{ aspect-ratio:1/1; } .exp__list{ list-style:none; padding:0; margin:30px 0 0; display:grid; gap:2px; } .exp__list li{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; padding:20px 0; border-top:1px solid var(--line); } .exp__list li:last-child{ border-bottom:1px solid var(--line); } .exp__list .n{ font-family:var(--mono); color:var(--primary-deep); font-size:13px; letter-spacing:.1em; } .exp__list h4{ font-size:24px; } .exp__list p{ margin:6px 0 0; color:var(--ink-soft); font-size:16px; line-height:1.5; } @media (max-width:860px){ .exp{ grid-template-columns:1fr; } } /* ---------- Services cards ---------- */ .svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden; } .svc{ background:var(--paper); padding:34px 30px 30px; position:relative; min-height:280px; display:flex; flex-direction:column; transition:background .4s ease, color .4s ease; cursor:default; } .svc::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--primary); transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.2,.7,.2,1); } .svc:hover{ background:var(--ink); color:var(--paper); } .svc:hover::after{ transform:scaleX(1); } .svc:hover .svc__ico{ border-color:rgba(255,255,255,.25); color:var(--spark); } .svc:hover .svc__no, .svc:hover .svc__more{ color:rgba(246,241,232,.6); } .svc__no{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--ink-soft); } .svc__ico{ width:54px; height:54px; border:1px solid var(--line); border-radius:3px; margin:24px 0 auto; display:grid; place-items:center; color:var(--primary-deep); transition:.4s; } .svc__ico svg{ width:28px; height:28px; } .svc h3{ font-size:26px; margin-top:22px; } .svc__more{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-top:12px; display:flex; align-items:center; gap:8px; } @media (max-width:980px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:520px){ .svc-grid{ grid-template-columns:1fr; } } /* ---------- Project highlight + before/after ---------- */ .proj{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4vw,64px); align-items:center; } .ba{ position:relative; aspect-ratio:4/3; border-radius:3px; overflow:hidden; box-shadow:var(--shadow-lg); user-select:none; touch-action:none; } .ba .layer{ position:absolute; inset:0; } .ba .layer image-slot{ width:100%; height:100%; } .ba .after{ clip-path:inset(0 0 0 50%); } .ba .handle{ position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff; z-index:5; transform:translateX(-1px); box-shadow:0 0 0 1px rgba(0,0,0,.15); } .ba .handle .grip{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:var(--shadow-md); cursor:ew-resize; color:var(--ink); } .ba .lab{ position:absolute; bottom:14px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:rgba(21,17,13,.7); padding:6px 10px; border-radius:2px; z-index:4; } .ba .lab.l{ left:14px; } .ba .lab.r{ right:14px; } @media (max-width:860px){ .proj{ grid-template-columns:1fr; } } /* ---------- Stats / counters band ---------- */ .statband{ background:var(--ink); color:var(--paper); position:relative; overflow:hidden; padding-block:clamp(72px,9vw,128px); } .statband .grid-lines{ background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); } .statband .glow{ position:absolute; width:50vw; height:50vw; left:-10vw; bottom:-20vw; background:radial-gradient(circle,color-mix(in srgb,var(--primary) 30%,transparent),transparent 60%); opacity:.4; filter:blur(8px); } .stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; position:relative; z-index:2; } .stat{ padding:14px 26px 14px 0; } .stat b{ font-family:var(--display); font-weight:800; font-size:clamp(50px,7vw,104px); line-height:.9; display:flex; align-items:baseline; } .stat .suf{ color:var(--primary); margin-left:.06em; } .stat > span{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(246,241,232,.6); display:block; margin-top:14px; } @media (max-width:820px){ .stat-row{ grid-template-columns:1fr 1fr; gap:30px 1px; } } /* ---------- Trust ---------- */ .trust{ display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(36px,5vw,80px); align-items:center; } .cert-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .cert{ border:1px solid var(--line); border-radius:3px; padding:22px; background:var(--paper-2); display:flex; gap:16px; align-items:flex-start; transition:.35s; } .cert:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); background:var(--paper); } .cert .ci{ width:40px; height:40px; flex:0 0 auto; color:var(--primary-deep); } .cert h4{ font-size:19px; } .cert p{ margin:4px 0 0; font-size:14px; color:var(--ink-soft); line-height:1.45; } @media (max-width:860px){ .trust{ grid-template-columns:1fr; } } /* ---------- Final CTA ---------- */ .cta{ position:relative; overflow:hidden; color:#fff; isolation:isolate; } .cta .bg{ position:absolute; inset:0; z-index:-2; } .cta .bg image-slot{ width:100%; height:100%; } .cta .scrim{ position:absolute; inset:0; z-index:-1; background:linear-gradient(120deg, rgba(20,12,6,.92), color-mix(in srgb,var(--primary-deep) 75%, #1a0f06) 70%, color-mix(in srgb,var(--primary) 60%, #2a1709)); } .cta__inner{ padding-block:clamp(90px,12vw,170px); } .cta h2{ font-size:clamp(46px,8vw,130px); } .cta .lede{ color:rgba(255,255,255,.85); margin-top:24px; } .cta-ctas{ display:flex; flex-wrap:wrap; gap:16px; margin-top:40px; } .cta__contact{ margin-top:54px; display:flex; gap:40px; flex-wrap:wrap; font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:rgba(255,255,255,.78); } .cta__contact b{ color:#fff; } /* ---------- Footer ---------- */ .foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; } .foot-grid h5{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(246,241,232,.5); margin:0 0 18px; font-weight:500; } .foot-grid ul{ list-style:none; padding:0; margin:0; display:grid; gap:11px; font-size:15px; } .foot-grid a{ color:rgba(246,241,232,.7); transition:color .25s; } .foot-grid a:hover{ color:#fff; } .foot-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-top:64px; padding-top:26px; border-top:1px solid rgba(246,241,232,.14); font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:rgba(246,241,232,.5); } @media (max-width:820px){ .foot-grid{ grid-template-columns:1fr 1fr; } } /* mobile menu */ .mobile-menu{ position:fixed; inset:0; z-index:80; background:var(--ink); color:var(--paper); display:flex; flex-direction:column; padding:80px var(--gutter) 40px; transform:translateY(-100%); transition:transform .5s cubic-bezier(.76,0,.24,1); } .mobile-menu.open{ transform:translateY(0); } .mobile-menu a{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:38px; padding:14px 0; border-bottom:1px solid rgba(246,241,232,.12); } .mobile-menu .close{ position:absolute; top:24px; right:var(--gutter); background:none; border:0; color:var(--paper); font-size:34px; cursor:pointer; } /* ============ PAGE HEAD FOR SECONDARY PAGES ============ */ .page-head{ position:relative; padding-top:clamp(140px,16vw,200px); padding-bottom:clamp(40px,5vw,70px); overflow:hidden; } .page-head .grid-lines{ position:absolute; inset:0; } .page-head .glow{ position:absolute; width:55vw; height:55vw; right:-12vw; top:-14vw; background:radial-gradient(circle, color-mix(in srgb,var(--primary) 22%, transparent), transparent 62%); filter:blur(8px); } .page-head__inner{ position:relative; z-index:2; } .page-head h1{ font-size:clamp(48px,8vw,118px); line-height:.88; margin-top:16px; } .crumbs{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); } .crumbs a:hover{ color:var(--primary-deep); }