/* ============================================================ DayBrandz — site stylesheet (light theme) Tokens → base → header → components → sections → responsive ============================================================ */ :root{ /* Palette. Gold splits: --accent carries text (darkened to clear 4.5:1 on bone), --accent-fill is the true brand gold used behind dark text. */ --bg:#f7f5f1; --surface:#ffffff; --surface-2:#efebe4; --fg:#14120e; --muted:#6b6459; --line:rgba(20,18,14,.12); --line-2:rgba(20,18,14,.22); --accent:#896b2a; --accent-ui:#ad8835; --accent-fill:#c9a34e; --accent-lift:#d8b75b; --on-fill:#14120e; --accent-soft:rgba(201,163,78,.16); --accent-line:rgba(137,107,42,.30); --media:#131313; /* dark frame for product photography */ --display:"Outfit",system-ui,-apple-system,sans-serif; --body:"Manrope",system-ui,-apple-system,sans-serif; --mono:ui-monospace,"SFMono-Regular",Menlo,monospace; --s--1:clamp(.8rem,.77rem + .15vw,.875rem); --s-0:clamp(1rem,.96rem + .2vw,1.0625rem); --s-1:clamp(1.15rem,1.05rem + .5vw,1.375rem); --s-2:clamp(1.5rem,1.3rem + 1vw,2rem); --s-3:clamp(1.9rem,1.55rem + 1.8vw,2.85rem); --s-4:clamp(2.3rem,1.7rem + 3vw,4rem); --s-5:clamp(2.7rem,1.8rem + 4.6vw,5.5rem); --gutter:clamp(1.25rem,4vw,3rem); --section:clamp(4rem,8vw,7.5rem); --max:1280px; --narrow:820px; --hdr-h:5.25rem; --r:8px; --r-lg:12px; --r-xl:20px; --ease:cubic-bezier(.22,.61,.36,1); --shadow:0 24px 50px -28px rgba(20,18,14,.35); --shadow-sm:0 10px 24px -16px rgba(20,18,14,.3); } *,*::before,*::after{box-sizing:border-box} /* Background on too: the root element's background propagates to the viewport canvas. color-scheme stops mobile browsers force-darkening. */ html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr-h) + 1rem); background:var(--bg); color:var(--fg); color-scheme:light; } body{ margin:0;background:var(--bg);color:var(--fg); font-family:var(--body);font-size:var(--s-0);line-height:1.7; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; overflow-x:hidden; } body.locked{overflow:hidden} img{max-width:100%;display:block} a{color:inherit;text-decoration:none;transition:color .25s var(--ease)} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ul,ol{margin:0;padding:0;list-style:none} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px} ::selection{background:var(--accent-fill);color:var(--on-fill)} .sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .skip:focus{position:fixed;top:1rem;left:1rem;z-index:300;width:auto;height:auto;clip-path:none;padding:.75rem 1.25rem;background:var(--accent-fill);color:var(--on-fill);font-weight:700;border-radius:var(--r)} h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.08;letter-spacing:-.03em;margin:0 0 .6em;text-wrap:balance} p{margin:0 0 1.2em} p:last-child{margin-bottom:0} .shell{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)} .shell--narrow{max-width:var(--narrow)} .section{padding-block:var(--section);position:relative;background:var(--bg)} .section--alt{background:var(--surface-2)} .section--tight{padding-block:clamp(2.5rem,5vw,4rem)} .eyebrow{ font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase; color:var(--accent);margin:0 0 1.1rem;display:flex;align-items:center;gap:.8rem; } .eyebrow::before{content:"";width:1.8rem;height:1px;background:var(--accent-line);flex:none} .eyebrow--center{justify-content:center} .head{max-width:46rem;margin-bottom:clamp(2.25rem,4.5vw,3.5rem)} .head--center{margin-inline:auto;text-align:center} .head--center .eyebrow{justify-content:center} .head h2{font-size:var(--s-3);margin:0} .head p{margin:1.1rem 0 0;color:var(--muted);font-size:var(--s-1);line-height:1.65} .head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap} .head-row .head{margin-bottom:clamp(2rem,4vw,3rem)} .head-row>.btn{margin-bottom:clamp(2rem,4vw,3rem)} /* ---------- buttons ---------- */ .btn{ --py:1rem;--px:2rem; display:inline-flex;align-items:center;justify-content:center;gap:.6rem; padding:var(--py) var(--px);font-size:var(--s--1);font-weight:700; letter-spacing:.13em;text-transform:uppercase;border-radius:999px; border:1px solid transparent; transition:transform .35s var(--ease),background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease); } .btn--sm{--py:.75rem;--px:1.4rem;font-size:.72rem} .btn--lg{--py:1.2rem;--px:2.5rem} .btn--gold{background:var(--accent-fill);color:var(--on-fill)} .btn--gold:hover{background:var(--accent-lift);transform:translateY(-2px);box-shadow:0 14px 30px -16px var(--accent-ui)} .btn--dark{background:var(--fg);color:#fff} .btn--dark:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)} .btn--ghost{border-color:var(--line-2);color:var(--fg)} .btn--ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)} .btn svg{transition:transform .35s var(--ease)} .btn:hover svg{transform:translateX(4px)} /* ---------- header ---------- */ .hdr{position:sticky;top:0;z-index:100;background:var(--bg);color:var(--fg);box-shadow:0 1px 0 var(--line);transition:background-color var(--swap),color var(--swap),box-shadow .3s var(--ease)} .hdr.stuck{box-shadow:0 2px 16px -8px rgba(20,18,14,.25)} .hdr__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:var(--hdr-h)} .logo{display:flex;align-items:center;gap:.7rem;flex:none} .logo img{width:34px;height:auto} .logo__t{font-family:var(--display);font-size:1.05rem;font-weight:700;letter-spacing:.02em;line-height:1.1} .logo__s{display:block;font-family:var(--mono);font-size:.48rem;letter-spacing:.24em;color:var(--muted);margin-top:3px;transition:color var(--swap)} .nav{display:flex;align-items:center;gap:clamp(.9rem,1.8vw,1.9rem)} .nav>li{position:relative} .nav a{display:inline-block;font-size:.87rem;font-weight:600;padding:.45rem 0;position:relative} .nav a::after{content:"";position:absolute;left:0;bottom:.1rem;width:100%;height:1.5px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)} .nav a:hover,.nav a[aria-current="page"]{color:var(--accent)} .nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left} .sub{position:absolute;top:calc(100% + .6rem);left:-1rem;min-width:15rem;padding:.6rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s} .nav>li:hover>.sub,.nav>li:focus-within>.sub{opacity:1;visibility:visible;transform:none} .sub a{display:block;padding:.55rem .85rem;border-radius:var(--r);font-size:.85rem;font-weight:500;color:var(--muted)} .sub a::after{display:none} .sub a:hover{background:var(--surface-2);color:var(--fg)} .hdr__act{display:flex;align-items:center;gap:.8rem;flex:none} .burger{display:none;width:2.9rem;height:2.9rem;align-items:center;justify-content:center;border:1px solid var(--line-2);border-radius:999px} /* ---------- page hero ---------- */ /* Page hero: image ground with a readable scrim, so every interior page opens with something to look at rather than a flat coloured band. */ .phero{position:relative;overflow:hidden;background:var(--surface-2); padding-block:clamp(4.5rem,10vw,8rem) clamp(3.5rem,7vw,6rem); border-bottom:1px solid var(--line)} .phero__bg{position:absolute;inset:0;z-index:0} .phero__bg img{width:100%;height:100%;object-fit:cover} .phero__bg::after{content:"";position:absolute;inset:0; background:linear-gradient(to right,rgba(9,8,7,.94) 0%,rgba(9,8,7,.78) 45%,rgba(9,8,7,.45) 100%)} .phero__in{position:relative;z-index:1;max-width:52rem} .phero .eyebrow{color:var(--accent-fill)} .phero .eyebrow::before{background:var(--accent-fill);opacity:.6} .phero h1{font-size:var(--s-4);margin:0;max-width:18ch;color:#fff;letter-spacing:-.035em} .phero p{margin:1.3rem 0 0;max-width:42rem;color:#d6cfc4;font-size:var(--s-1);line-height:1.6} .phero__cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem} .phero--plain{padding-block:clamp(3rem,6vw,5rem) clamp(2.5rem,5vw,4rem)} .phero--plain h1{color:var(--fg)} .phero--plain p{color:var(--muted)} /* ---------- home hero ---------- */ .hero{padding-block:clamp(3rem,6vw,5.5rem) clamp(3.5rem,7vw,6rem);position:relative;overflow:hidden;background:var(--bg)} .hero::after{content:"";position:absolute;top:-30%;right:-10%;width:60vw;height:60vw;max-width:760px;max-height:760px;background:radial-gradient(circle,var(--accent-soft),transparent 62%);pointer-events:none} .hero__in{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(2rem,5vw,4rem);align-items:center;position:relative;z-index:1} .hero h1{font-size:var(--s-5);line-height:.98;letter-spacing:-.04em;margin:0 0 1.3rem} .hero h1 .gold{color:var(--accent)} .hero__sub{max-width:36rem;color:var(--muted);font-size:var(--s-1);line-height:1.65;margin-bottom:2.1rem} .hero__cta{display:flex;flex-wrap:wrap;gap:.9rem} .hero__art{border-radius:var(--r-xl);overflow:hidden;background:var(--media);box-shadow:var(--shadow)} .hero__art img{width:100%;aspect-ratio:4/3;object-fit:cover} .stats{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3rem);margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:2rem;border-top:1px solid var(--line)} .stats dt{font-family:var(--display);font-size:clamp(1.8rem,2.8vw,2.4rem);font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--fg)} .stats dd{margin:.4rem 0 0;font-size:var(--s--1);color:var(--muted)} /* ---------- cards ---------- */ .grid{display:grid;gap:clamp(1rem,2vw,1.6rem)} .grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr))} .grid--4{grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr))} .grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr))} .card{ display:flex;flex-direction:column;background:var(--surface); border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease); } .card:hover{transform:translateY(-6px);border-color:var(--accent-line);box-shadow:var(--shadow)} .card__art{background:var(--media);overflow:hidden;position:relative} .card__art img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s var(--ease)} .card--square .card__art img{aspect-ratio:1} .card:hover .card__art img{transform:scale(1.05)} .card__badge{position:absolute;top:.85rem;left:.85rem;padding:.3rem .65rem;background:var(--accent-fill);color:var(--on-fill);font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;border-radius:999px} .card__body{padding:1.4rem 1.4rem 1.6rem;flex:1;display:flex;flex-direction:column;gap:.4rem} .card__cat{margin:0;font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)} .card__t{font-size:var(--s-1);margin:0;letter-spacing:-.02em} .card__x{margin:0;color:var(--muted);font-size:var(--s--1);line-height:1.7} .card__link{display:inline-flex;align-items:center;gap:.45rem;margin-top:auto;padding-top:1rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .3s var(--ease),gap .3s var(--ease)} .card:hover .card__link{color:var(--accent);gap:.8rem} /* icon card, for services and feature highlights */ .icard{padding:clamp(1.5rem,3vw,2.1rem);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease)} .icard:hover{transform:translateY(-6px);border-color:var(--accent-line);box-shadow:var(--shadow-sm)} .icard__i{display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;margin-bottom:1.2rem;border-radius:999px;background:var(--accent-soft);color:var(--accent)} .icard h3{font-size:var(--s-1);margin:0 0 .5rem} .icard p{margin:0;color:var(--muted);font-size:var(--s--1);line-height:1.7} /* split feature */ .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.75rem,4vw,3.5rem);align-items:center} .split--flip .split__media{order:2} .split__media{border-radius:var(--r-xl);overflow:hidden;background:var(--media);box-shadow:var(--shadow)} .split__media img{width:100%;aspect-ratio:4/3;object-fit:cover} .split__body h2{font-size:var(--s-3);margin:0 0 1rem} .split__body p{color:var(--muted);margin:0 0 1.2rem} /* placeholder frame, where photography is still needed */ .ph{position:relative;display:grid;place-items:center;background: repeating-linear-gradient(45deg,rgba(137,107,42,.05) 0 12px,transparent 12px 24px),var(--surface-2); border:1px dashed var(--accent-line);color:var(--muted);text-align:center;padding:2rem;min-height:14rem} .ph__t{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 .5rem} .ph__f{font-family:var(--mono);font-size:.78rem;color:var(--fg);margin:0 0 .25rem} .ph__s{font-size:.74rem;color:var(--muted);margin:0} .card__art .ph{border:0;min-height:0;aspect-ratio:4/3} /* industries */ /* Explicit column counts, not auto-fit: 10 items divide cleanly by 5 and 2, 8 items by 4 and 2. auto-fit was choosing 6 and leaving an empty cell. */ .inds{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} @media(max-width:1100px){.inds{grid-template-columns:repeat(2,1fr)}} .ind{background:var(--surface);padding:1.6rem 1.4rem;transition:background-color .3s var(--ease)} .ind:hover{background:var(--surface-2)} .ind__i{color:var(--accent);margin-bottom:.8rem;display:block} .ind h3{font-size:1.02rem;margin:0 0 .35rem} .ind p{margin:0;color:var(--muted);font-size:.82rem;line-height:1.6} /* gallery */ .gal{columns:3;column-gap:clamp(.75rem,1.5vw,1.25rem)} .gal figure{break-inside:avoid;margin:0 0 clamp(.75rem,1.5vw,1.25rem);border-radius:var(--r-lg);overflow:hidden;background:var(--media);position:relative;border:1px solid var(--line)} .gal img{width:100%} .gal figcaption{position:absolute;inset:auto 0 0 0;padding:1.1rem;background:linear-gradient(to top,rgba(9,9,9,.94),transparent);color:#fff;font-family:var(--display);font-weight:600;font-size:.98rem} .gal figcaption span{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-fill);font-weight:400;margin-bottom:.2rem} /* process / steps */ .steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:clamp(1.5rem,3vw,2.5rem);padding-top:2.5rem;position:relative} .steps::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line)} .step{position:relative} .step::before{counter-increment:s;content:"0" counter(s);position:absolute;top:-2.5rem;left:0;font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;color:var(--accent);background:var(--bg);padding-right:.7rem} .step h3{font-size:var(--s-1);margin:0 0 .5rem} .step p{margin:0;color:var(--muted);font-size:var(--s--1);line-height:1.7} /* list with gold ticks */ .ticks{display:grid;gap:.75rem} .ticks li{display:flex;gap:.7rem;align-items:flex-start;color:var(--muted);font-size:var(--s--1)} .ticks svg{flex:none;color:var(--accent);margin-top:.28rem} /* CTA band */ .cta{position:relative;display:flex;align-items:center;justify-content:space-between;gap:clamp(1.5rem,4vw,3.5rem);flex-wrap:wrap;padding:clamp(2.25rem,5vw,4rem); background:var(--surface);color:var(--fg);border:1px solid var(--accent-line); border-radius:var(--r-xl);overflow:hidden} .cta::before{content:"";position:absolute;top:-70%;left:8%;width:60%;height:240%;background:radial-gradient(ellipse at center,var(--accent-soft),transparent 64%);pointer-events:none} .cta__c{position:relative;max-width:36rem} .cta h2{font-size:var(--s-3);margin:0 0 .6rem;color:var(--fg)} .cta p{margin:0;color:var(--muted)} .cta__a{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.8rem} /* forms */ .form{display:grid;gap:1.1rem} .row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem} .field label{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.45rem} .field input,.field select,.field textarea{ width:100%;padding:.85rem 1rem;background:var(--surface);border:1px solid var(--line-2); border-radius:var(--r);color:var(--fg);font:inherit;font-size:var(--s--1); transition:border-color .25s var(--ease),box-shadow .25s var(--ease); } .field textarea{min-height:9rem;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent-ui);box-shadow:0 0 0 3px var(--accent-soft)} .field__h{margin:.4rem 0 0;font-size:.74rem;color:var(--muted)} /* footer */ .ftr{background:var(--surface-2);border-top:1px solid var(--line);padding-block:clamp(3rem,6vw,4.5rem) 1.75rem} .ftr__g{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(1.75rem,4vw,3rem)} .ftr h3{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 1.1rem} .ftr li{margin-bottom:.65rem;color:var(--muted);font-size:var(--s--1)} .ftr a:hover{color:var(--accent)} .ftr__x{max-width:26rem;margin:1.2rem 0 1.4rem;color:var(--muted);font-size:var(--s--1);line-height:1.75} .social{display:flex;gap:.55rem} .social a{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border:1px solid var(--line-2);border-radius:999px;color:var(--muted);transition:color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)} .social a:hover{color:var(--accent);border-color:var(--accent-line);transform:translateY(-3px)} .ftr__bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding-top:1.75rem;margin-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--line);color:var(--muted);font-size:.76rem} /* build note */ .note{margin-top:2rem;padding:1rem 1.25rem;border:1px dashed var(--accent-line);border-radius:var(--r);color:var(--muted);font-size:var(--s--1);background:var(--surface)} .note b{color:var(--accent)} /* quick view */ .qv{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(1rem,4vw,2.5rem)} .qv[hidden]{display:none} .qv__s{position:absolute;inset:0;background:rgba(20,18,14,.55);backdrop-filter:blur(5px)} .qv__p{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1.25rem,3vw,2.25rem);width:min(100%,52rem);max-height:88svh;overflow:auto;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-xl);padding:clamp(1.25rem,3vw,1.9rem);box-shadow:var(--shadow)} .qv__x{position:absolute;top:.8rem;right:.8rem;z-index:2;width:2.4rem;height:2.4rem;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:999px;color:var(--muted);background:var(--surface)} .qv__x:hover{color:var(--accent);border-color:var(--accent-line)} .qv__m{background:var(--media);border-radius:var(--r-lg);overflow:hidden} .qv__m img{width:100%;aspect-ratio:1;object-fit:cover} .qv__c{margin:0 0 .35rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)} .qv__t{font-size:var(--s-2);margin:0 0 .8rem} .qv__b{color:var(--muted);font-size:var(--s--1);line-height:1.75;margin:0 0 1.3rem} .qv__d{margin:0 0 1.4rem;border-top:1px solid var(--line)} .qv__d div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.66rem;text-transform:uppercase} .qv__d dt{color:var(--muted)} .qv__d dd{margin:0;text-align:right} /* reveal */ .rev{transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms)} .js-anim .rev{opacity:0;transform:translateY(22px)} .js-anim .rev.on{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} .js-anim .rev{opacity:1;transform:none} html{scroll-behavior:auto} } /* responsive */ @media (max-width:1024px){ .hero__in,.split,.ftr__g{grid-template-columns:1fr} .split--flip .split__media{order:0} .hero__art{order:-1} .ftr__g{gap:2rem} .gal{columns:2} .qv__p{grid-template-columns:1fr} } @media (max-width:900px){ .burger{display:inline-flex} .hdr__act .btn{display:none} .nav{position:fixed;inset:0 0 0 auto;width:min(86vw,21rem);height:100dvh;padding:calc(var(--hdr-h) + 1.25rem) 1.75rem 2rem;background:var(--surface);border-left:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;transform:translateX(100%);transition:transform .4s var(--ease);z-index:95;overflow-y:auto} .nav.open{transform:translateX(0)} .nav>li{border-bottom:1px solid var(--line)} .nav a{padding:.95rem 0;font-family:var(--display);font-size:1.2rem} .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:transparent;padding:0 0 .75rem .75rem;min-width:0} .sub a{font-family:var(--body);font-size:.9rem;padding:.4rem 0} } @media (max-width:640px){ .row{grid-template-columns:1fr} .gal{columns:1} .grid--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem} .cta__a,.cta__a .btn{width:100%} } /* ============================================================ SECTION THEMING Each section may carry a theme class. It overrides the shared tokens, so every component inside re-colours automatically — nothing is styled per-theme. The sticky header adopts whichever theme sits beneath it (see site.js). Palettes sampled from the supplied photography: every dominant tone in those 18 images falls between 23° and 40° hue, the same warm band as the brand gold. All pairings clear WCAG AA. ============================================================ */ .t-bone{ --bg:#f7f5f1;--surface:#ffffff;--surface-2:#efebe4; --fg:#14120e;--muted:#6b6459; --line:rgba(20,18,14,.12);--line-2:rgba(20,18,14,.22); --accent:#896b2a;--accent-ui:#ad8835;--accent-fill:#c9a34e;--on-fill:#14120e; --accent-soft:rgba(201,163,78,.16);--accent-line:rgba(137,107,42,.30); --media:#131313;--shadow:0 24px 50px -28px rgba(20,18,14,.35); } .t-sand{ --bg:#efe4d5;--surface:#f8f1e7;--surface-2:#e5d7c4; --fg:#2b2113;--muted:#6d5b46; --line:rgba(43,33,19,.14);--line-2:rgba(43,33,19,.24); --accent:#7d5a22;--accent-ui:#9d7429;--accent-fill:#c9a34e;--on-fill:#2b2113; --accent-soft:rgba(125,90,34,.14);--accent-line:rgba(125,90,34,.32); --media:#2e2318;--shadow:0 24px 50px -30px rgba(43,33,19,.4); } .t-clay{ --bg:#745a40;--surface:#745a40;--surface-2:#67503a; --fg:#fdfbf7;--muted:#e6d8c6; --line:rgba(255,255,255,.20);--line-2:rgba(255,255,255,.32); --accent:#f2d79a;--accent-ui:#f2d79a;--accent-fill:#f7f5f1;--on-fill:#3a2b1a; --accent-soft:rgba(255,255,255,.14);--accent-line:rgba(242,215,154,.42); --media:#241b12;--shadow:0 24px 50px -28px rgba(0,0,0,.5); } .t-espresso{ --bg:#2e2318;--surface:#3a2c1e;--surface-2:#241b12; --fg:#f7f1e6;--muted:#c3b39c; --line:rgba(255,255,255,.14);--line-2:rgba(255,255,255,.24); --accent:#d8b75b;--accent-ui:#d8b75b;--accent-fill:#c9a34e;--on-fill:#241a10; --accent-soft:rgba(216,183,91,.14);--accent-line:rgba(216,183,91,.34); --media:#1a130c;--shadow:0 26px 55px -30px rgba(0,0,0,.65); } .t-ink{ --bg:#0d0c0a;--surface:#161412;--surface-2:#0a0908; --fg:#ffffff;--muted:#b3ab9d; --line:rgba(255,255,255,.12);--line-2:rgba(255,255,255,.22); --accent:#c9a34e;--accent-ui:#c9a34e;--accent-fill:#c9a34e;--on-fill:#0d0c0a; --accent-soft:rgba(201,163,78,.14);--accent-line:rgba(201,163,78,.34); --media:#0a0908;--shadow:0 26px 55px -30px rgba(0,0,0,.75); } /* Themed surfaces animate between palettes. --swap is the single knob. */ :root{--swap:.85s var(--ease)} .section,.phero,.hero,.hdr,.ftr,body,html{ transition:background-color var(--swap),color var(--swap),box-shadow var(--swap); } .section,.phero{background:var(--bg);color:var(--fg)} .card,.icard,.ind,.logowall div,.split__media,.field input,.field select,.field textarea{ transition:background-color var(--swap),border-color var(--swap),color var(--swap),transform .45s var(--ease),box-shadow .45s var(--ease); } .eyebrow,.card__cat,.ftr h3,.crumbs,.head p,.card__x,.icard p,.ind p,.step p{ transition:color var(--swap); } /* section--alt inside a theme just shifts to that theme's second surface */ .section--alt{background:var(--surface-2)} /* The dark product crops keep their own frame regardless of theme. */ .card--square .card__art{background:#131313} /* ---------- client logo wall (awaiting real logos) ---------- */ .logowall{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:1.75rem} .logowall div{background:var(--surface);display:grid;place-items:center;min-height:5.5rem; font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--line-2)} @media (max-width:640px){.logowall{grid-template-columns:repeat(2,1fr)}} /* Lifestyle photography carries its own light background, so those frames use a neutral ground. Only the black-background product crops keep the dark frame. */ .split__media,.hero__art{background:var(--surface-2)} .card__art{background:var(--surface-2)} .card--square .card__art{background:var(--media)} .gal figure{background:var(--surface-2)} .qv__m{background:var(--media)} /* One-word wordmark: a weight break instead of a space keeps "DAYBRANDZ" readable as a single lockup without splitting it into two words. */ .logo__t b{font-weight:400;letter-spacing:.04em} .logo__t{font-weight:700} /* ============================================================ HOME HERO — full-bleed cycling photography Images at full strength behind a scrim, crossfading with a slow drift. Light type over dark measured 19:1 (headline) and 11.6:1 (body), so nothing has to be washed out to stay readable. ============================================================ */ .hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden; margin-top:calc(-1 * var(--hdr-h)); padding-top:calc(var(--hdr-h) + clamp(2rem,5vw,4rem)); padding-bottom:clamp(3rem,7vw,5rem); background:#0d0c0a; /* the hero carries its own dark palette regardless of section theme */ --fg:#ffffff;--muted:#cfc8bd;--accent:#e0c273; --line:rgba(255,255,255,.18);--line-2:rgba(255,255,255,.30); --accent-fill:#c9a34e;--on-fill:#14120e; color:var(--fg); } .hero::after{display:none} .hero__bg{position:absolute;inset:0;z-index:1} .hero__frame{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease)} .hero__frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 9s linear} .hero__frame.on{opacity:1} .hero__frame.on img{transform:scale(1.13)} .hero__bg::after{content:"";position:absolute;inset:0; background:linear-gradient(to right,rgba(9,8,7,.93) 0%,rgba(9,8,7,.78) 42%,rgba(9,8,7,.42) 100%), linear-gradient(to top,rgba(9,8,7,.62),transparent 45%)} .hero__in{position:relative;z-index:10;display:block;max-width:var(--max)} .hero h1,.hero__sub{max-width:36rem} .hero h1{color:#fff} .hero .eyebrow{color:var(--accent)} .hero .eyebrow::before{background:var(--accent);opacity:.6} .hero__sub{color:var(--muted)} .stats{border-top-color:var(--line)} .hero .stats dt{color:#fff} .hero .stats dd{color:var(--muted)} .hero .btn--ghost{border-color:var(--line-2);color:#fff} .hero .btn--ghost:hover{border-color:var(--accent);color:var(--accent)} .hero__dots{position:absolute;left:50%;transform:translateX(-50%); bottom:clamp(1.25rem,3vw,2rem);z-index:12;display:flex;gap:.5rem; width:100%;max-width:var(--max);padding-inline:var(--gutter);justify-content:flex-start} .hero__dots button{width:30px;height:2px;background:rgba(255,255,255,.3);border-radius:2px; transition:background-color .3s var(--ease),width .3s var(--ease)} .hero__dots button.on{background:var(--accent);width:46px} /* The header sits over the hero on the home page. It stays transparent until it sticks, then takes the background of whichever themed section is beneath it — same mechanism as every other page, no hardcoded colours. */ body.is-home .hdr{background:transparent;box-shadow:none} body.is-home .hdr.stuck{background:color-mix(in srgb,var(--bg) 94%,transparent); backdrop-filter:saturate(150%) blur(14px);box-shadow:0 1px 0 var(--line)} @media(max-width:1024px){ .hero__in{grid-template-columns:1fr} .hero{min-height:88svh} } @media(prefers-reduced-motion:reduce){ .hero__frame,.hero__frame img{transition:none} .hero__frame.on img{transform:scale(1)} } /* ============================================================ MOBILE DRAWER — legibility fixes Submenu links were rendering muted-on-light and were nearly invisible. They now use full foreground colour, with the parent items set as labels rather than competing links. ============================================================ */ @media(max-width:900px){ .nav{background:var(--surface);color:var(--fg)} .nav>li{border-bottom:1px solid var(--line)} .nav>li>a{color:var(--fg);font-weight:600} .sub{padding:.15rem 0 .9rem .9rem;border-left:2px solid var(--accent-line);margin:0 0 .5rem .1rem} .sub a{color:var(--fg);opacity:.78;font-size:.95rem;padding:.5rem 0;font-weight:500} .sub a:hover,.sub a:focus-visible{opacity:1;color:var(--accent);background:transparent} /* the drawer always uses the light palette, even opened from a dark page */ body.is-home .nav,.nav{--fg:#14120e;--muted:#6b6459;--surface:#ffffff; --line:rgba(20,18,14,.12);--accent:#896b2a;--accent-line:rgba(137,107,42,.30)} body.is-home .nav>li>a,body.is-home .nav .sub a{color:#14120e} .nav__close{display:flex;position:absolute;top:1.1rem;right:1.1rem; width:2.6rem;height:2.6rem;align-items:center;justify-content:center; border:1px solid var(--line);border-radius:999px;color:var(--muted)} .nav__close:hover{color:var(--accent);border-color:var(--accent-line)} } .nav__close{display:none} /* Hamburger: solid, high-contrast target. On the home page it sits over the dark hero, so it inverts to white until the header goes solid. */ .burger{border-color:var(--line-2);color:var(--fg);background:var(--surface); transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)} .burger:hover{border-color:var(--accent);color:var(--accent)} .burger{background:color-mix(in srgb,var(--fg) 10%,transparent); border-color:color-mix(in srgb,var(--fg) 35%,transparent);color:var(--fg);backdrop-filter:blur(6px)} .burger:hover{background:color-mix(in srgb,var(--fg) 18%,transparent);border-color:var(--accent);color:var(--accent)} .burger svg{stroke-width:2} /* scrim behind the open drawer */ .nav-scrim{position:fixed;inset:0;z-index:94;background:rgba(9,8,7,.55); opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s} .nav-scrim.on{opacity:1;visibility:visible} /* Product name chips — replaces the thumbnail grid on the Products page. */ .chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.6rem} .chips li{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.4rem .8rem; transition:color var(--swap),border-color var(--swap)} /* Quiet contextual action. Used where a gold button would be the sixth in a row — carries the same intent without competing with the page's real CTA. */ .inline-link{display:inline-flex;align-items:center;gap:.5rem; font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase; color:var(--accent);padding-bottom:.35rem;border-bottom:1px solid var(--accent-line); transition:gap .3s var(--ease),border-color .3s var(--ease),color var(--swap)} .inline-link:hover{gap:.85rem;border-bottom-color:var(--accent)} .inline-link svg{transition:transform .3s var(--ease)} /* Home "Industries We Serve" strip — compact, name-only cards. The full descriptions live on the Industries page; repeating them here would just slow the homepage down. */ .inds--home{grid-template-columns:repeat(4,1fr)} @media(max-width:1100px){.inds--home{grid-template-columns:repeat(4,1fr)}} @media(max-width:760px){.inds--home{grid-template-columns:repeat(2,1fr)}} .inds--home .ind{padding:clamp(1.6rem,3vw,2.4rem) 1.2rem;text-align:center; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem; min-height:9rem} .inds--home .ind__i{margin:0;display:inline-flex;align-items:center;justify-content:center; width:3rem;height:3rem;border-radius:999px;background:var(--accent-soft); transition:background-color .35s var(--ease),transform .35s var(--ease)} .inds--home .ind:hover .ind__i{transform:translateY(-3px); background:color-mix(in srgb,var(--accent) 26%,transparent)} .inds--home .ind h3{font-size:1rem;margin:0;letter-spacing:-.01em} /* Why-choose-us: five cards. auto-fill would leave one stranded on desktop, so the first card spans two columns and the row reads as intentional. */ .why-grid{display:grid;gap:clamp(1rem,2vw,1.6rem);grid-template-columns:repeat(6,1fr)} .why-grid>*:nth-child(1),.why-grid>*:nth-child(2),.why-grid>*:nth-child(3){grid-column:span 2} .why-grid>*:nth-child(4),.why-grid>*:nth-child(5){grid-column:span 3} @media(max-width:900px){ .why-grid{grid-template-columns:repeat(2,1fr)} .why-grid>*{grid-column:span 1 !important} .why-grid>*:nth-child(5){grid-column:span 2 !important} } @media(max-width:560px){ .why-grid{grid-template-columns:1fr} .why-grid>*{grid-column:span 1 !important} } /* ============================================================ EDITORIAL SYSTEM Typography, spacing and motion per the client brief. All sizes are clamped between the stated min and max, so the spec holds at every viewport instead of only at one width. ============================================================ */ :root{ /* --- type scale (spec values, fluid between the stated bounds) --- */ --t-hero:clamp(2.9rem,1.6rem + 4.4vw,4.75rem); /* 68-76px */ --t-hero-sub:clamp(1.125rem,1.03rem + .42vw,1.375rem); /* 20-22px */ --t-section:clamp(2.1rem,1.35rem + 2.6vw,3.5rem); /* 48-56px */ --t-category:clamp(1.9rem,1.35rem + 2vw,3rem); /* 40-48px */ --t-industry:clamp(1.9rem,1.4rem + 1.9vw,3.125rem); /* 42-50px */ --t-card:clamp(1.25rem,1.2rem + .2vw,1.375rem); /* 20-22px */ --t-body:clamp(1.0625rem,1.01rem + .28vw,1.25rem); /* 18-20px */ --t-small:clamp(1rem,.98rem + .1vw,1.0625rem); /* 16-17px */ --t-btn:clamp(1rem,.98rem + .1vw,1.0625rem); /* 16-17px */ /* --- measure --- */ --m-hero:650px; --m-hero-sub:550px; --m-body:650px; --m-desc:560px; /* --- rhythm --- */ --sp-head:clamp(1.75rem,1.4rem + 1.1vw,2.5rem); /* 32-40px heading -> para */ --sp-section:clamp(5rem,3rem + 6.5vw,11.25rem); /* 140-180px between sections */ --sp-feature:clamp(5rem,2.8rem + 7vw,10rem); /* 160px between features */ --sp-card:2rem; /* 32px between cards */ /* --- motion --- */ --ease-out:cubic-bezier(.16,.84,.44,1); --d-fast:200ms; --d-card:280ms; --d-img:300ms; --d-reveal:700ms; } /* ---------- typography ---------- */ h1,h2,h3,h4{font-weight:700;letter-spacing:-.035em;text-wrap:balance} .hero h1{ font-size:var(--t-hero); font-weight:800; line-height:1.0; letter-spacing:-.045em; max-width:var(--m-hero); margin:0 0 var(--sp-head); } .hero__sub{ font-size:var(--t-hero-sub); font-weight:400; line-height:1.6; max-width:var(--m-hero-sub); margin:0 0 var(--sp-head); } .head h2,.section-title,.split__body h2,.cta h2{ font-size:var(--t-section); font-weight:700; line-height:1.1; margin:0 0 var(--sp-head); } .head p,.split__body p,.cta p{ font-size:var(--t-body); line-height:1.7; max-width:var(--m-body); } .head{margin-bottom:clamp(3rem,5vw,4.5rem)} .phero h1{ font-size:clamp(2.6rem,1.5rem + 3.9vw,4.5rem); /* 60-72px */ font-weight:800; line-height:1.0; letter-spacing:-.04em; max-width:var(--m-hero); } .phero p{ font-size:var(--t-hero-sub); line-height:1.6; max-width:600px; margin-top:var(--sp-head); } .card__t{font-size:var(--t-card);font-weight:600;line-height:1.25;text-transform:none} .card__x{font-size:var(--t-small);line-height:1.6} .icard h3{font-size:var(--t-card);font-weight:600;line-height:1.25} .icard p{font-size:var(--t-small);line-height:1.6} .btn{ font-size:var(--t-btn); font-weight:600; letter-spacing:.3px; text-transform:none; border-radius:10px; padding:1rem 1.9rem; transition:transform var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out); box-shadow:none; } .btn--sm{font-size:.94rem;padding:.72rem 1.35rem} .btn--lg{padding:1.15rem 2.3rem} .btn--gold:hover{background:#b8923f;transform:translateY(-2px);box-shadow:none} .btn--ghost:hover{transform:translateY(-2px);box-shadow:none} .btn svg{transition:transform var(--d-fast) var(--ease-out)} .btn:hover svg{transform:translateX(3px)} /* ---------- spacing ---------- */ .section{padding-block:var(--sp-section)} .section--tight{padding-block:calc(var(--sp-section) * .55)} .grid{gap:var(--sp-card)} .split{gap:clamp(2.5rem,5vw,5rem)} /* ---------- motion ---------- */ /* One reveal for everything: fade + 24px rise, 700ms, ease-out. */ .js-anim .rev{opacity:0;transform:translateY(24px)} .rev{transition:opacity var(--d-reveal) var(--ease-out), transform var(--d-reveal) var(--ease-out); transition-delay:var(--d,0ms)} .js-anim .rev.on{opacity:1;transform:none} /* Hero: headline, then supporting text, then buttons — 200ms apart. */ .hero .eyebrow{--d:0ms} .hero h1{--d:100ms} .hero__sub{--d:300ms} .hero__cta{--d:500ms} .hero .stats{--d:700ms} .hero .eyebrow,.hero h1,.hero__sub,.hero__cta,.hero .stats{ opacity:0;transform:translateY(20px); animation:rise 800ms var(--ease-out) forwards; animation-delay:var(--d); } @keyframes rise{to{opacity:1;transform:none}} /* Hero background: 2.5% zoom over 25s, not 9s. */ .hero__frame img{transform:scale(1.005);transition:transform 26s linear} .hero__frame.on img{transform:scale(1.03)} /* Images: 102% on hover, gentle shadow, 300ms. */ .card__art img,.split__media img,.work img,.gal img{ transition:transform var(--d-img) var(--ease-out), filter var(--d-img) var(--ease-out); } .card:hover .card__art img,.split__media:hover img,.gal figure:hover img{ transform:scale(1.02); filter:brightness(1.025); } .split__media,.card__art,.gal figure{ transition:box-shadow var(--d-img) var(--ease-out); } .split__media:hover{box-shadow:0 28px 56px -30px rgba(20,18,14,.42)} /* Cards: lift 6px, slightly deeper shadow, 280ms. */ .card,.icard,.case{ transition:transform var(--d-card) var(--ease-out), border-color var(--d-card) var(--ease-out), box-shadow var(--d-card) var(--ease-out); } .card:hover,.icard:hover,.case:hover{ transform:translateY(-6px); box-shadow:0 22px 44px -26px rgba(20,18,14,.34); } /* Header: fades to solid with a soft shadow over 300ms. */ .hdr{transition:background-color 300ms var(--ease-out), color 300ms var(--ease-out), box-shadow 300ms var(--ease-out)} .hdr.stuck{box-shadow:0 2px 20px -10px rgba(20,18,14,.28)} /* Images fade in as they decode rather than popping. */ img{opacity:1} .js-anim img[loading="lazy"]{animation:imgin 500ms var(--ease-out) both} @keyframes imgin{from{opacity:0}to{opacity:1}} html{scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){ .hero .eyebrow,.hero h1,.hero__sub,.hero__cta,.hero .stats{ animation:none;opacity:1;transform:none} .hero__frame img,.hero__frame.on img{transition:none;transform:none} .js-anim img[loading="lazy"]{animation:none} .js-anim .rev{opacity:1;transform:none} } /* ---------- editorial building blocks ---------- */ /* Large pull quote, used on About. */ .quote-block{max-width:22ch;margin:0 auto;text-align:center} .quote-block p{ font-family:var(--display); font-size:clamp(1.9rem,1.2rem + 2.6vw,3.25rem); font-weight:600; line-height:1.15; letter-spacing:-.035em; margin:0; max-width:none; } .quote-block .accent{color:var(--accent)} /* Numbered process steps with rules instead of icons. */ .process{counter-reset:step;border-top:1px solid var(--line)} .process li{ counter-increment:step; display:grid; grid-template-columns:5rem 1fr; gap:clamp(1rem,3vw,2.5rem); align-items:baseline; padding:clamp(1.75rem,3.5vw,2.75rem) 0; border-bottom:1px solid var(--line); } .process li::before{ content:"0" counter(step); font-family:var(--mono); font-size:.8rem; letter-spacing:.2em; color:var(--accent); } .process h3{ font-size:var(--t-category); font-weight:600; line-height:1.1; margin:0; letter-spacing:-.03em; } .process p{ grid-column:2; margin:.6rem 0 0; color:var(--muted); font-size:var(--t-small); line-height:1.7; max-width:var(--m-desc); } @media(max-width:640px){ .process li{grid-template-columns:1fr;gap:.5rem} .process p{grid-column:1} } /* Alternating feature block — About, Products and Industries all use it. */ .feature{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2.5rem,5vw,5rem); align-items:center; } .feature + .feature{margin-top:var(--sp-feature)} .feature--flip .feature__media{order:2} .feature__media{border-radius:var(--r-xl);overflow:hidden;background:var(--surface-2)} .feature__media img{width:100%;aspect-ratio:4/3;object-fit:cover} .feature__body h2,.feature__body h3{ font-size:var(--t-industry); font-weight:700; line-height:1.1; margin:0 0 var(--sp-head); letter-spacing:-.035em; } .feature__body p{ font-size:var(--t-body); line-height:1.7; max-width:var(--m-desc); color:var(--muted); margin:0 0 var(--sp-head); } .feature__body .inline-link{margin-top:.25rem} @media(max-width:900px){ .feature{grid-template-columns:1fr} .feature--flip .feature__media{order:0} } /* Understated text CTA. */ .inline-link{ display:inline-flex;align-items:center;gap:.55rem; font-size:var(--t-small);font-weight:600;letter-spacing:.3px;text-transform:none; font-family:var(--body); color:var(--accent); padding-bottom:.4rem; border-bottom:1px solid var(--accent-line); transition:gap var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out); } .inline-link:hover{gap:.85rem;border-bottom-color:var(--accent)} /* Four large cards, minimal copy. */ .pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-card)} .pillar{ padding:clamp(2rem,3.5vw,2.75rem); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); transition:transform var(--d-card) var(--ease-out), border-color var(--d-card) var(--ease-out), box-shadow var(--d-card) var(--ease-out); } .pillar:hover{transform:translateY(-6px);border-color:var(--accent-line); box-shadow:0 22px 44px -26px rgba(20,18,14,.34)} .pillar__n{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--accent); display:block;margin-bottom:1.4rem} .pillar h3{font-size:var(--t-card);font-weight:600;line-height:1.2;margin:0 0 .7rem} .pillar p{margin:0;color:var(--muted);font-size:var(--t-small);line-height:1.65} @media(max-width:1024px){.pillars{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.pillars{grid-template-columns:1fr}} /* Full-bleed closing statement. */ .closer{position:relative;overflow:hidden;min-height:60svh;display:flex;align-items:center; padding-block:clamp(4rem,9vw,8rem)} .closer__bg{position:absolute;inset:0;z-index:0} .closer__bg img{width:100%;height:100%;object-fit:cover} .closer__bg::after{content:"";position:absolute;inset:0; background:linear-gradient(to right,rgba(9,8,7,.9),rgba(9,8,7,.6))} .closer__in{position:relative;z-index:1;max-width:var(--max);margin-inline:auto; padding-inline:var(--gutter);width:100%} .closer h2{font-size:var(--t-section);font-weight:700;line-height:1.05;color:#fff; max-width:18ch;margin:0 0 var(--sp-head);letter-spacing:-.04em} /* Quote form feedback */ .note--ok{border-color:var(--accent-line);color:var(--fg)} .note--ok::before{content:"\2713 ";color:var(--accent);font-weight:700} .note--err{border-color:rgba(160,60,40,.4)} .form button[disabled]{opacity:.6;cursor:default;transform:none}