/* ===================================================================== Lifelawn Tree Service — New Braunfels, TX Hand-built design system. Native scroll only: no scroll libraries, no animation frameworks. Motion = CSS transitions + one IntersectionObserver. Everything here is intentional. 0. tokens + reset 1. typography 2. layout primitives (wrap / sec / eyebrow / heads) 3. buttons, pills, chips 4. header + mobile sheet + call dock 5. hero (vhero) 6. ticker 7. statement + split editorial blocks 8. the felling sequence (signature sticky moment) 9. service index (oversized numbered list) 10. scenes (full-bleed photo bands) 11. gallery rail + gallery grid 12. veteran band / callouts / stat rows 13. areas 14. FAQ 15. forms 16. page hero (inner pages) + prose + breadcrumbs 17. footer 18. reveal + reduced motion 19. DARK-SURFACE INK GUARD ← never delete ===================================================================== */ /* ------------------------------------------------------- 0. tokens */ :root{ --paper:#F3F1EC; --paper-2:#E9E6DE; --paper-3:#DFDBD0; --line:#D8D3C8; --line-soft:#E4E0D6; --ink:#141A15; --ink-2:#4A5449; --ink-3:#6E766C; --forest:#1D3A29; --forest-2:#132619; --forest-3:#0C1A11; --moss:#3C7A52; --moss-ink:#2C6440; --amber:#DE6B1E; --amber-ink:#A8500C; /* small text on paper — 4.85:1 */ --amber-lt:#F09B4E; /* accent on dark bands — 5.6:1 */ --btn-ink:#160A02; /* ink ON amber — 5.66:1. NEVER white on amber. */ --wrap:1240px; --pad:clamp(20px,5vw,44px); --hdr:78px; --r:3px; --r-lg:6px; --shadow:0 18px 40px -28px rgba(20,26,21,.55); --shadow-lg:0 40px 90px -50px rgba(12,20,14,.75); --display:'Bricolage Grotesque','Archivo','Helvetica Neue',Arial,sans-serif; --body:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif; --ease:cubic-bezier(.22,.61,.36,1); color-scheme:light; } *,*::before,*::after{box-sizing:border-box} html{ /* clip, NOT hidden: overflow-x:hidden on html/body kills every position:sticky */ overflow-x:clip; scroll-padding-top:calc(var(--hdr) + 18px); -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--paper); color:var(--ink); font:400 17px/1.62 var(--body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; /* NO overflow on body — overflow on html/body can break every position:sticky. Stray-pixel clipping lives on as overflow-x:clip (not a scroll container). */ } figure,blockquote,dl,dd,fieldset{margin:0} h1,h2,h3,h4,p,ul,ol{margin:0} ul,ol{padding:0;list-style:none} img,svg,video{display:block;max-width:100%} img{height:auto} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:0;padding:0;cursor:pointer} a,button,input,select,textarea,label,summary{touch-action:manipulation} :focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:2px} ::selection{background:var(--amber);color:var(--btn-ink)} .skip{ position:fixed;left:14px;top:-80px;z-index:300; background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--r); font:600 14px/1 var(--body);transition:top .18s var(--ease); } .skip:focus{top:14px} .vh{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* -------------------------------------------------- 1. typography */ h1,h2,h3,h4,.h1,.h2,.h3{ font-family:var(--display); font-weight:800; letter-spacing:-.028em; line-height:1.02; color:var(--ink); text-wrap:balance; } .h1,h1{font-size:clamp(40px,6.2vw,86px)} .h2,h2{font-size:clamp(30px,4.4vw,62px)} .h3,h3{font-size:clamp(20px,2.1vw,28px);line-height:1.12;letter-spacing:-.02em} h4{font-size:clamp(17px,1.5vw,20px);letter-spacing:-.01em;line-height:1.2} p{color:var(--ink-2)} p + p{margin-top:1.05em} strong,b{font-weight:600;color:var(--ink)} .acc{color:var(--amber-ink)} /* two-tone headline accent */ .acc-g{color:var(--moss-ink)} .lede{ font-size:clamp(18px,1.75vw,21px);line-height:1.58;color:var(--ink-2); max-width:62ch; } .eyebrow{ display:inline-flex;align-items:center;gap:10px; font:600 12px/1 var(--body);letter-spacing:.19em;text-transform:uppercase; color:var(--amber-ink); } .eyebrow::before{ content:"";width:26px;height:2px;background:var(--amber);flex:0 0 auto; } .num{ font-family:var(--display);font-weight:800; font-size:clamp(52px,8vw,120px);line-height:.82;letter-spacing:-.05em; color:transparent;-webkit-text-stroke:1.5px var(--line); } .dash{color:var(--ink-3);font-weight:500} /* ------------------------------------------ 2. layout primitives */ .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)} .wrap-narrow{max-width:900px} .sec{padding-block:clamp(72px,10vh,124px);position:relative} .sec-sm{padding-block:clamp(52px,7vh,84px)} .sec-tint{background:var(--paper-2)} .sec-line{border-top:1px solid var(--line)} /* full-bleed children of a full-width section. 100% — never 100vw, which is wider than the viewport by the scrollbar and silently overflows. */ .bleed{width:100%;margin-inline:0} .sec-head{max-width:74ch} .sec-head .h2,.sec-head h2{margin-top:16px} .sec-head p{margin-top:18px} .head-row{ display:flex;align-items:flex-end;justify-content:space-between; gap:28px;flex-wrap:wrap; } .rule{height:1px;background:var(--line);border:0;margin:0} .grid{display:grid;gap:clamp(18px,2.4vw,30px)} .g-2{grid-template-columns:repeat(2,minmax(0,1fr))} .g-3{grid-template-columns:repeat(3,minmax(0,1fr))} .g-4{grid-template-columns:repeat(4,minmax(0,1fr))} @media(max-width:960px){.g-3,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:minmax(0,1fr)}} /* --------------------------------------- 3. buttons, pills, chips */ .btn{ --btn-bg:var(--amber); display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:54px;padding:0 26px;border-radius:var(--r); background:var(--btn-bg);color:var(--btn-ink); font:700 15px/1 var(--body);letter-spacing:.02em; border:2px solid transparent; transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease); box-shadow:0 12px 26px -18px rgba(222,107,30,.9); text-align:center; } .btn:hover{transform:translateY(-2px);background:#EE7A28;box-shadow:0 18px 34px -18px rgba(222,107,30,.95)} .btn:active{transform:translateY(0)} .btn svg{width:17px;height:17px;flex:0 0 auto} .btn-ghost{ background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:none; } .btn-ghost:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)} .btn-forest{background:var(--forest);color:#fff;box-shadow:none} .btn-forest:hover{background:var(--forest-2);color:#fff} .btn-sm{min-height:46px;padding:0 18px;font-size:14px} .btn-wide{width:100%} .btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px} .pill{ display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap; max-width:min(100%,560px); padding:9px 16px;border-radius:999px; border:1px solid rgba(255,255,255,.34); background:rgba(12,20,14,.42); backdrop-filter:blur(6px); color:#fff;font:600 12px/1.25 var(--body); letter-spacing:.15em;text-transform:uppercase; } .pill .dot{width:6px;height:6px;border-radius:50%;background:var(--amber-lt);flex:0 0 auto} .pill-ink{ border-color:var(--line);background:#fff;color:var(--ink); box-shadow:var(--shadow); } .pill-ink .dot{background:var(--amber)} .chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px} .chips li,.chip{ display:inline-flex;align-items:center;gap:8px; padding:8px 14px;border:1px solid var(--line);border-radius:999px; background:rgba(255,255,255,.6); font:500 13.5px/1 var(--body);color:var(--ink-2); } .chips li::before,.chip::before{ content:"";width:5px;height:5px;border-radius:50%;background:var(--amber);flex:0 0 auto; } a.chip{transition:border-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease)} a.chip:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-1px)} .ticklist{display:grid;gap:12px;margin-top:24px} .ticklist li{ display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:13px; align-items:start;color:var(--ink-2);font-size:16px; } /* ::before is a GRID ITEM — pin it to col 1 / both rows or the text lands in the 22px track */ .ticklist li::before{ content:"";grid-column:1;grid-row:1/span 2; width:20px;height:20px;margin-top:3px;border-radius:50%; background:var(--moss); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat,linear-gradient(#000,#000); -webkit-mask-composite:xor; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat,linear-gradient(#000,#000); mask-composite:exclude; } .ticklist b,.ticklist span{grid-column:2} .ticklist b{display:block;color:var(--ink);font-weight:600} /* -------------------------------- 4. header, mobile sheet, dock */ .hdr{ position:fixed;inset:0 0 auto;z-index:100; height:var(--hdr); display:flex;align-items:center; transition:transform .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease); } .hdr::before{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(8,14,10,.66),rgba(8,14,10,0)); opacity:1;transition:opacity .3s var(--ease); } .hdr.solid{background:rgba(243,241,236,.94);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)} .hdr.solid::before{opacity:0} .hdr.up{transform:translateY(-102%)} .hdr-in{display:flex;align-items:center;gap:20px;width:100%} .brand{display:flex;align-items:center;gap:12px;margin-right:auto;min-height:44px} .brand-card{ background:#fff;border-radius:var(--r);padding:7px 11px; box-shadow:0 6px 18px -12px rgba(0,0,0,.6); display:flex;align-items:center; } .brand-card img{width:clamp(108px,10vw,138px);height:auto;max-height:52px;object-fit:contain} .nav{display:flex;align-items:center;gap:4px} .nav a{ padding:10px 12px;border-radius:var(--r); font:600 14.5px/1 var(--body);color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.45); transition:color .18s var(--ease),background .18s var(--ease); } .nav a:hover{background:rgba(255,255,255,.14)} .nav a[aria-current="page"]{color:var(--amber-lt)} .hdr.solid .nav a{color:var(--ink-2);text-shadow:none} .hdr.solid .nav a:hover{background:var(--paper-2);color:var(--ink)} .hdr.solid .nav a[aria-current="page"]{color:var(--amber-ink)} .hdr-right{display:flex;align-items:center;gap:10px} .burger{ display:none;width:46px;height:46px;border-radius:var(--r); align-items:center;justify-content:center;color:#fff; border:1px solid rgba(255,255,255,.34); } .hdr.solid .burger{color:var(--ink);border-color:var(--line)} .burger svg{width:22px;height:22px} @media(max-width:1080px){ .nav{display:none} .burger{display:inline-flex} } @media(max-width:560px){ :root{--hdr:66px} .hdr-right .btn{display:none} .brand-card img{width:min(44vw,150px)} } .sheet{ position:fixed;inset:0;z-index:95; background:var(--forest-3); padding:calc(var(--hdr) + 22px) var(--pad) 40px; display:flex;flex-direction:column; overflow-y:auto;overscroll-behavior:contain; visibility:hidden;opacity:0;transform:translateY(-10px); transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s; } .sheet.open{visibility:visible;opacity:1;transform:none} /* the header sits ABOVE the sheet (100 vs 95) so its burger stays reachable — which means the sheet's own close button must clear the header band. */ .sheet #sheetX{top:calc(var(--hdr) + 12px)!important;color:#fff;border-color:rgba(255,255,255,.3);display:inline-flex} .sheet nav{display:grid;gap:2px;margin-top:12px} .sheet nav a{ display:flex;align-items:center;justify-content:space-between;gap:14px; padding:16px 2px;min-height:56px; border-bottom:1px solid rgba(255,255,255,.13); font-family:var(--display);font-weight:700;font-size:clamp(22px,5.4vw,30px); letter-spacing:-.02em;color:#fff; } .sheet nav a span{font:600 11px/1 var(--body);letter-spacing:.2em;color:var(--amber-lt)} .sheet nav a[aria-current="page"]{color:var(--amber-lt)} .sheet-foot{margin-top:auto;padding-top:32px;display:grid;gap:10px} .sheet-foot .btn{width:100%} .sheet-note{color:rgba(255,255,255,.62);font-size:13.5px;text-align:center;margin-top:6px} .dock{ display:none;position:fixed;left:0;right:0;bottom:0;z-index:90; gap:1px;background:var(--line); padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -14px 30px -22px rgba(0,0,0,.6); } .dock a{ flex:1;display:flex;align-items:center;justify-content:center;gap:8px; min-height:58px;background:var(--paper);color:var(--ink); font:700 15px/1 var(--body); } .dock a.hot{background:var(--amber);color:var(--btn-ink)} .dock svg{width:17px;height:17px} @media(max-width:760px){ .dock{display:flex} body{padding-bottom:calc(58px + env(safe-area-inset-bottom))} } /* --------------------------------------------------- 5. hero */ .vhero{ position:relative; min-height:640px; /* fallback if svh is unsupported */ min-height:clamp(600px,94svh,960px); display:flex;align-items:center;justify-content:center; text-align:center; overflow:hidden; isolation:isolate; background:var(--forest-3); } .vhero-media{position:absolute;inset:0;z-index:0} .vhero-media img{ width:100%;height:100%;object-fit:cover; transform:scale(1.06); animation:kb 30s ease-in-out infinite alternate; } @keyframes kb{ from{transform:scale(1.04) translate3d(0,0,0)} to{transform:scale(1.15) translate3d(-1.4%,-1.8%,0)} } .vhero-veil{ position:absolute;inset:0;z-index:1; /* dark enough to read over any photo, light enough that the photo still reads as depth — an over-dark veil is its own failure mode */ background: radial-gradient(ellipse 78% 58% at 50% 52%,rgba(9,14,10,.54),transparent 72%), linear-gradient(180deg,rgba(9,14,10,.78),rgba(9,14,10,.56) 44%,rgba(9,14,10,.9)); } .vhero-grid{ position:absolute;inset:0;z-index:2;pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px); background-size:clamp(58px,7vw,96px) clamp(58px,7vw,96px); -webkit-mask-image:radial-gradient(ellipse 70% 62% at 50% 46%,#000,transparent 76%); mask-image:radial-gradient(ellipse 70% 62% at 50% 46%,#000,transparent 76%); } .vhero-inner{ position:relative;z-index:3; width:100%;max-width:940px;margin-inline:auto; padding:clamp(104px,15vh,158px) var(--pad) clamp(74px,10vh,110px); display:flex;flex-direction:column;align-items:center; } /* the mark is the biggest thing above the fold — dramatically larger than the nav lockup. max-height keeps a square logo from eating the fold. */ .vhero-logo{ width:min(74vw,300px);height:auto; max-height:clamp(126px,23vh,220px);object-fit:contain; background:#fff;border-radius:var(--r-lg); padding:14px 18px; box-shadow:0 30px 60px -34px rgba(0,0,0,.9); margin-bottom:clamp(20px,3vh,30px); } .vhero h1{ color:#fff; font-size:clamp(44px,8.4vw,104px); line-height:.97;letter-spacing:-.035em; margin-top:clamp(16px,2.4vh,28px); max-width:15ch; text-shadow:0 4px 34px rgba(0,0,0,.42); } .vhero h1 .acc{color:var(--amber-lt)} .vhero .sub{ color:rgba(255,255,255,.9); font-size:clamp(16px,1.6vw,19px);line-height:1.6; max-width:36ch; margin:clamp(20px,3vh,28px) auto 0; } .vhero-cta{ display:flex;flex-wrap:wrap;gap:12px;justify-content:center; margin-top:clamp(26px,4vh,38px); } .vhero-cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.6)} .vhero-cta .btn-ghost:hover{background:#fff;color:var(--ink)} .vhero-meta{ display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px; margin-top:clamp(26px,4vh,40px);padding-top:22px; border-top:1px solid rgba(255,255,255,.17); width:100%; } .vhero-meta li{ display:flex;align-items:center;gap:9px; color:rgba(255,255,255,.86);font:500 13.5px/1.3 var(--body); letter-spacing:.04em; } .vhero-meta svg{width:16px;height:16px;color:var(--amber-lt);flex:0 0 auto} .vhero-scroll{ position:absolute;left:50%;bottom:18px;z-index:3;transform:translateX(-50%); color:rgba(255,255,255,.62);font:600 10.5px/1 var(--body); letter-spacing:.26em;text-transform:uppercase; display:flex;flex-direction:column;align-items:center;gap:9px; } .vhero-scroll::after{ content:"";width:1px;height:34px; background:linear-gradient(rgba(255,255,255,.6),transparent); animation:drip 2.6s ease-in-out infinite; } @keyframes drip{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}} @media(max-width:640px){ .vhero{min-height:600px;min-height:clamp(560px,90svh,760px)} .vhero-inner{padding:calc(var(--hdr) + 34px) 22px 86px} .vhero-logo{width:min(62vw,230px);padding:11px 14px} .vhero h1{max-width:13ch;font-size:clamp(38px,10.4vw,58px)} .vhero .sub{max-width:30ch;font-size:15.5px} .vhero-cta{width:100%;flex-direction:column} .vhero-cta .btn{width:100%} .vhero-meta{gap:10px 18px;justify-content:flex-start;text-align:left} .vhero-meta li{font-size:12.5px} .vhero-scroll{display:none} } /* ------------------------------------------------- 6. ticker */ .ticker{ background:var(--forest-2);color:#fff; border-block:1px solid rgba(255,255,255,.1); overflow:hidden;padding-block:16px; } .ticker-track{ display:flex;width:max-content;gap:0; animation:marq 42s linear infinite; } .ticker:hover .ticker-track{animation-play-state:paused} .ticker span{ display:inline-flex;align-items:center; font-family:var(--display);font-weight:700; font-size:clamp(14px,1.5vw,17px);letter-spacing:.15em;text-transform:uppercase; color:rgba(255,255,255,.9);white-space:nowrap; padding-inline:20px; } .ticker span i{font-style:normal;color:var(--amber-lt);padding-left:40px} @keyframes marq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} /* ---------------------------- 7. statement + split editorial */ .state{ display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(28px,5vw,72px);align-items:start; } .state h2{font-size:clamp(32px,4.9vw,68px)} .state-side{padding-top:10px} .state-side p{font-size:16.5px} @media(max-width:900px){.state{grid-template-columns:minmax(0,1fr)}} .split{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(26px,4.6vw,64px);align-items:center; } .split-media{position:relative} .split-media img{ width:100%;height:100%;object-fit:cover;border-radius:var(--r-lg); aspect-ratio:4/3;box-shadow:var(--shadow-lg); } .split-media .tag{ position:absolute;left:-1px;bottom:20px; background:var(--amber);color:var(--btn-ink); padding:11px 18px;border-radius:0 var(--r) var(--r) 0; font:700 12.5px/1 var(--body);letter-spacing:.15em;text-transform:uppercase; } .split.swap .split-media{order:2} @media(max-width:860px){ .split{grid-template-columns:minmax(0,1fr)} .split.swap .split-media{order:0} } /* --------------------- 8. the felling sequence (signature) */ .seq{background:var(--forest-3);color:#fff;position:relative;overflow:hidden} .seq::after{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 60% 50% at 78% 30%,rgba(60,122,82,.22),transparent 70%); } .seq-in{ position:relative;z-index:2; display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(30px,5vw,80px); align-items:start; } .seq-frame{ position:sticky;top:calc(var(--hdr) + 26px); border-radius:var(--r-lg);overflow:hidden; aspect-ratio:4/5;background:var(--forest-2); box-shadow:var(--shadow-lg); } .seq-frame img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transform:scale(1.04); transition:opacity .7s var(--ease),transform 1.2s var(--ease); filter:brightness(.78) saturate(1.02); } .seq-frame img.on{opacity:1;transform:scale(1)} .seq-frame::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(8,14,10,.1),rgba(8,14,10,.72)); pointer-events:none; } .seq-tag{ position:absolute;left:20px;bottom:18px;z-index:3; font:700 11.5px/1 var(--body);letter-spacing:.22em;text-transform:uppercase; color:var(--amber-lt); } .seq-steps{display:grid;gap:clamp(20px,3vw,34px);padding-block:clamp(6px,2vw,26px)} .step{ border-top:1px solid rgba(255,255,255,.16); padding-top:clamp(20px,2.6vw,30px); opacity:.5;transition:opacity .4s var(--ease); } .step.live{opacity:1} /* two classes: must out-rank the `.seq p` / `.step p` ink rules below */ .step .step-n{ margin:0; font-family:var(--display);font-weight:800;font-size:clamp(30px,3.6vw,44px); line-height:1;letter-spacing:-.04em;color:transparent; -webkit-text-stroke:1.4px rgba(255,255,255,.42); transition:color .4s var(--ease),-webkit-text-stroke-color .4s var(--ease); } .step.live .step-n{color:var(--amber-lt);-webkit-text-stroke-color:transparent} .step h3{color:#fff;margin-top:12px;font-size:clamp(23px,2.5vw,32px)} .step p{color:rgba(255,255,255,.76);margin-top:10px;max-width:46ch;font-size:16px} @media(max-width:900px){ .seq-in{grid-template-columns:minmax(0,1fr)} .seq-frame{position:relative;top:0;aspect-ratio:16/11;max-height:56vh} .seq-steps{gap:24px} .step{opacity:1} .step .step-n{color:var(--amber-lt);-webkit-text-stroke-color:transparent} } /* ------------------------- 9. service index (numbered list) */ .idx{border-top:1px solid var(--line);margin-top:clamp(28px,4vw,48px)} .idx-row{position:relative;border-bottom:1px solid var(--line)} .idx-row > a{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;gap:clamp(16px,3vw,38px); padding:clamp(20px,2.8vw,32px) 0; transition:padding-left .3s var(--ease),background .3s var(--ease); } .idx-row > a:hover{padding-left:clamp(10px,1.6vw,24px);background:rgba(255,255,255,.5)} .idx-n{ font-family:var(--display);font-weight:800;font-size:clamp(15px,1.4vw,17px); letter-spacing:.06em;color:var(--amber-ink);min-width:34px; } .idx-t{ font-family:var(--display);font-weight:800; font-size:clamp(26px,3.7vw,50px);letter-spacing:-.03em;line-height:1.02; color:var(--ink); } .idx-d{ display:block;margin-top:7px;max-width:52ch; font:400 15.5px/1.5 var(--body);color:var(--ink-2); } .idx-go{ width:46px;height:46px;border-radius:50%; border:1px solid var(--line); display:flex;align-items:center;justify-content:center; color:var(--ink);flex:0 0 auto; transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease); } .idx-go svg{width:17px;height:17px} .idx-row > a:hover .idx-go{background:var(--amber);border-color:var(--amber);color:var(--btn-ink);transform:rotate(-45deg)} .idx-pic{ position:absolute;right:clamp(60px,7vw,110px);top:50%;z-index:2; width:clamp(200px,20vw,272px);height:auto;aspect-ratio:4/3;object-fit:cover; border-radius:var(--r-lg);box-shadow:var(--shadow-lg); transform:translateY(-50%) rotate(-2.4deg) scale(.93); opacity:0;pointer-events:none; transition:opacity .34s var(--ease),transform .44s var(--ease); } .idx-row:hover .idx-pic{opacity:1;transform:translateY(-50%) rotate(-2.4deg) scale(1)} @media(max-width:1080px),(hover:none){ .idx-pic{display:none} } @media(max-width:560px){ .idx-row > a{grid-template-columns:auto minmax(0,1fr);gap:14px;padding:20px 0} .idx-go{display:none} } /* -------------------------------- 10. scenes (photo bands) */ .scene{ position:relative;width:100%; min-height:min(78vh,720px); display:flex;align-items:center; overflow:hidden;isolation:isolate; background:var(--forest-3); } .scene-bg{position:absolute;inset:0;z-index:0} .scene-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.44) saturate(.96)} .scene-bg::after{ content:"";position:absolute;inset:0; background:linear-gradient(100deg,rgba(9,15,11,.9) 8%,rgba(9,15,11,.5) 54%,rgba(9,15,11,.72)); } .scene.right .scene-bg::after{ background:linear-gradient(260deg,rgba(9,15,11,.9) 8%,rgba(9,15,11,.5) 54%,rgba(9,15,11,.72)); } .scene-inner{ position:relative;z-index:2;width:100%;max-width:var(--wrap); margin-inline:auto;padding:clamp(70px,10vh,120px) var(--pad); } .scene-col{max-width:600px} .scene.right .scene-col{margin-left:auto} .scene h2{color:#fff;font-size:clamp(30px,4.4vw,58px)} .scene p{color:rgba(255,255,255,.84);margin-top:18px;max-width:48ch} .scene .eyebrow{color:var(--amber-lt)} .scene .eyebrow::before{background:var(--amber-lt)} /* two classes: must out-rank the `.scene p` ink rule in the guard block */ .scene .scene-no{ margin:0 0 16px; font-family:var(--display);font-weight:800; font-size:clamp(64px,9vw,150px);line-height:.8;letter-spacing:-.06em; color:transparent;-webkit-text-stroke:1.6px rgba(255,255,255,.32); } @media(max-width:860px){ .scene{min-height:auto} .scene-inner{padding-block:clamp(62px,9vh,86px)} .scene-col{max-width:none} .scene.right .scene-col{margin-left:0} } /* --------------------------- 11. gallery rail + gallery grid */ .rail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap} .rail{ display:flex;gap:14px; overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory; padding-block:6px 22px; padding-inline:var(--pad); margin-top:clamp(24px,3vw,38px); scrollbar-width:thin;scrollbar-color:var(--line) transparent; } .rail::-webkit-scrollbar{height:6px} .rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px} .rail figure{ flex:0 0 auto;width:clamp(240px,32vw,380px); scroll-snap-align:start;position:relative; } .rail img{ width:100%;aspect-ratio:4/3;object-fit:cover; border-radius:var(--r-lg);background:var(--paper-3); } .rail figcaption{ margin-top:10px;font:600 12px/1.3 var(--body); letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3); } .rail-hint{ margin-top:6px;padding-inline:var(--pad); font:500 13px/1 var(--body);color:var(--ink-3); } .ggrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(clamp(160px,20vw,250px),1fr)); grid-auto-rows:clamp(112px,13vw,140px); grid-auto-flow:dense; gap:12px; } .ggrid figure{grid-row:span 2;overflow:hidden;border-radius:var(--r-lg);background:var(--paper-3)} .ggrid figure.tall{grid-row:span 3} .ggrid figure.wide{grid-column:span 2;grid-row:span 3} .ggrid img{ width:100%;height:100%;object-fit:cover; /* no aspect-ratio — the row span sets the box */ transition:transform .6s var(--ease); } .ggrid figure:hover img{transform:scale(1.05)} @media(max-width:560px){ .ggrid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(96px,26vw,128px)} .ggrid figure.wide{grid-column:span 2;grid-row:span 2} } /* ------------------- 12. veteran band, callouts, stat rows */ .vet{ position:relative;width:100%; background:var(--forest-2);color:#fff;overflow:hidden;isolation:isolate; } .vet-bg{position:absolute;inset:0;z-index:0} .vet-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.3) saturate(.7)} .vet-in{ position:relative;z-index:2;max-width:var(--wrap);margin-inline:auto; padding:clamp(70px,10vh,118px) var(--pad); display:grid;grid-template-columns:auto minmax(0,1fr); gap:clamp(24px,4vw,58px);align-items:center; } .vet-mark{ width:clamp(78px,9vw,116px);height:clamp(78px,9vw,116px); border:2px solid var(--amber-lt);border-radius:50%; display:flex;align-items:center;justify-content:center; flex:0 0 auto; } .vet-mark svg{width:52%;height:52%;color:var(--amber-lt)} .vet h2{color:#fff;font-size:clamp(28px,4vw,54px)} .vet p{color:rgba(255,255,255,.84);margin-top:16px;max-width:56ch} @media(max-width:680px){ .vet-in{grid-template-columns:minmax(0,1fr);gap:22px} } .callout{ border:1px solid var(--line);border-left:3px solid var(--amber); background:#fff;border-radius:0 var(--r) var(--r) 0; padding:clamp(20px,2.6vw,30px); box-shadow:var(--shadow); } .callout h3{font-size:clamp(19px,1.9vw,24px)} .callout p{margin-top:10px;font-size:16px} .stats{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); } .stats > div{ padding:clamp(22px,3vw,34px) 0; border-bottom:1px solid var(--line); padding-right:24px; } .stats > div + div{border-left:1px solid var(--line);padding-left:clamp(20px,2.6vw,34px)} .stats dt{ font:600 11.5px/1 var(--body);letter-spacing:.2em;text-transform:uppercase; color:var(--amber-ink); } .stats dd{ margin:12px 0 0;font-family:var(--display);font-weight:800; font-size:clamp(20px,2.1vw,27px);letter-spacing:-.02em;line-height:1.12;color:var(--ink); } .stats p{margin-top:8px;font-size:14.5px} @media(max-width:760px){ .stats{grid-template-columns:minmax(0,1fr)} .stats > div + div{border-left:0;padding-left:0} } /* --------------------------------------------- 13. areas */ .areas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:start} .area-list{ display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:0 clamp(16px,2vw,28px); border-top:1px solid var(--line); } .area-list li{ border-bottom:1px solid var(--line); padding:13px 0;font-size:15.5px;color:var(--ink-2); display:flex;align-items:center;gap:9px; } .area-list li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--moss);flex:0 0 auto} .area-list li b{font-weight:600;color:var(--ink)} .map{ position:relative;border-radius:var(--r-lg);overflow:hidden; border:1px solid var(--line);background:var(--paper-2); box-shadow:var(--shadow); } .map iframe{display:block;width:100%;height:clamp(300px,44vw,460px);border:0;filter:saturate(.9)} @media(max-width:900px){.areas{grid-template-columns:minmax(0,1fr)}} /* ------------------------------------------------ 14. FAQ */ .faq{display:grid;gap:0;border-top:1px solid var(--line);margin-top:clamp(24px,3vw,40px)} .faq details{border-bottom:1px solid var(--line)} .faq summary{ display:flex;align-items:center;justify-content:space-between;gap:20px; padding:clamp(18px,2.2vw,26px) 0; cursor:pointer;list-style:none; font-family:var(--display);font-weight:700; font-size:clamp(17px,1.8vw,22px);letter-spacing:-.015em;color:var(--ink); } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"";width:13px;height:13px;flex:0 0 auto; border-right:2px solid var(--amber-ink);border-bottom:2px solid var(--amber-ink); transform:rotate(45deg) translateY(-3px); transition:transform .25s var(--ease); } .faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)} .faq details p{padding-bottom:clamp(18px,2.2vw,26px);max-width:76ch;font-size:16.5px;color:var(--ink-2)} .faq details p + p{margin-top:0;padding-top:0} /* ----------------------------------------------- 15. forms */ .formwrap{ display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,4vw,64px);align-items:start; } @media(max-width:920px){.formwrap{grid-template-columns:minmax(0,1fr)}} .form{ background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); padding:clamp(22px,3vw,36px);box-shadow:var(--shadow); display:grid;gap:16px; } .f-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} @media(max-width:560px){.f-row{grid-template-columns:minmax(0,1fr)}} .field{display:grid;gap:7px} .field label{ font:600 11.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3); } .field input,.field select,.field textarea{ width:100%;min-height:52px;padding:14px 15px; background:var(--paper);border:1px solid var(--line);border-radius:var(--r); font:400 16px/1.4 var(--body);color:var(--ink); transition:border-color .18s var(--ease),background .18s var(--ease); } .field textarea{min-height:132px;resize:vertical} .field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5449' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:17px;padding-right:42px} .field input::placeholder,.field textarea::placeholder{color:#9AA097} .field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--ink);background:#fff;outline:2px solid rgba(222,107,30,.28);outline-offset:0; } .field.bad input,.field.bad select,.field.bad textarea{border-color:#B23B1E;background:#FDF3F0} .field .err{display:none;font:500 13px/1.3 var(--body);color:#95301A} .field.bad .err{display:block} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form-foot{display:grid;gap:12px} .form-note{font-size:13.5px;color:var(--ink-3);line-height:1.5} .form-msg{ display:none;padding:14px 16px;border-radius:var(--r); background:#EAF3EC;border:1px solid #BFD9C6;color:#1D3A29;font-size:15px; } .form-msg.show{display:block} .form-msg.bad{background:#FDF1EC;border-color:#EBC3B2;color:#8A3418} .contact-rail{display:grid;gap:14px} .ci{ display:grid;grid-template-columns:44px minmax(0,1fr); gap:16px;align-items:center; padding:18px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff; } .ci .ic{ width:44px;height:44px;border-radius:50%;background:var(--paper-2); display:flex;align-items:center;justify-content:center;color:var(--forest); } .ci .ic svg{width:19px;height:19px} .ci .k{font:600 11.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)} .ci .v{display:block;margin-top:6px;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.015em;color:var(--ink);word-break:break-word} a.ci{transition:border-color .18s var(--ease),transform .18s var(--ease)} a.ci:hover{border-color:var(--ink);transform:translateY(-2px)} /* ---------------------- 16. inner page hero, prose, crumbs */ .phero{ position:relative;overflow:hidden;isolation:isolate; background:var(--forest-3); padding:calc(var(--hdr) + clamp(56px,9vh,96px)) 0 clamp(48px,7vh,80px); } .phero-bg{position:absolute;inset:0;z-index:0} .phero-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.5)} .phero-bg::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(8,14,10,.86),rgba(8,14,10,.6) 46%,rgba(8,14,10,.9)); } .phero-in{position:relative;z-index:2;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)} .phero h1{color:#fff;font-size:clamp(36px,5.6vw,74px);max-width:19ch;margin-top:18px} .phero .sub{color:rgba(255,255,255,.86);margin-top:18px;max-width:56ch;font-size:clamp(16px,1.6vw,19px)} .phero .eyebrow{color:var(--amber-lt)} .phero .eyebrow::before{background:var(--amber-lt)} .crumb{ display:flex;flex-wrap:wrap;align-items:center;gap:8px; font:500 13px/1.3 var(--body);color:rgba(255,255,255,.68);margin-bottom:20px; } .crumb a{color:rgba(255,255,255,.86);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)} .crumb a:hover{color:#fff;text-decoration-color:#fff} .crumb span[aria-current]{color:var(--amber-lt)} .phero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} .phero-cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.6)} .phero-cta .btn-ghost:hover{background:#fff;color:var(--ink)} .prose{max-width:70ch} .prose h2{margin-top:clamp(34px,4vw,52px);font-size:clamp(26px,3vw,40px)} .prose h3{margin-top:clamp(26px,3vw,38px)} .prose p{margin-top:16px;font-size:17px} .prose ul{margin-top:18px;display:grid;gap:11px} .prose ul li{ position:relative;padding-left:24px;color:var(--ink-2); } .prose ul li::before{ content:"";position:absolute;left:0;top:.62em; width:8px;height:8px;background:var(--amber);border-radius:2px; } .aside-wrap{ display:grid;grid-template-columns:minmax(0,1fr) 340px; gap:clamp(28px,4vw,64px);align-items:start; } .aside{ position:sticky;top:calc(var(--hdr) + 24px); display:grid;gap:14px; } .aside-card{ background:var(--forest-2);color:#fff;border-radius:var(--r-lg); padding:clamp(22px,2.6vw,28px); } .aside-card h3{color:#fff;font-size:22px} .aside-card p{color:rgba(255,255,255,.8);margin-top:12px;font-size:15.5px} .aside-card .btn{margin-top:18px;width:100%} .aside-list{border-top:1px solid var(--line)} .aside-list a{ display:flex;align-items:center;justify-content:space-between;gap:14px; padding:14px 0;border-bottom:1px solid var(--line); font:600 15.5px/1.3 var(--body);color:var(--ink-2); transition:color .18s var(--ease),padding-left .22s var(--ease); } .aside-list a:hover{color:var(--ink);padding-left:6px} .aside-list a::after{content:"→";color:var(--amber-ink)} .aside-list a[aria-current="page"]{color:var(--amber-ink)} @media(max-width:940px){ .aside-wrap{grid-template-columns:minmax(0,1fr)} .aside{position:static} } /* --------------------------------------------- 17. footer */ .foot{background:var(--forest-3);color:#fff;padding-top:clamp(56px,8vh,88px)} .foot-top{ display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr)); gap:clamp(26px,3.4vw,52px); padding-bottom:clamp(38px,5vh,58px); } .foot-brand img{width:min(58vw,210px);max-height:96px;object-fit:contain;background:#fff;border-radius:var(--r);padding:10px 14px} .foot-brand p{color:rgba(255,255,255,.68);margin-top:18px;max-width:34ch;font-size:15px} .foot h4{ color:#fff;font:600 11.5px/1 var(--body);letter-spacing:.2em;text-transform:uppercase; margin-bottom:16px; } .foot ul{display:grid;gap:11px} .foot a{color:rgba(255,255,255,.74);font-size:15px;transition:color .18s var(--ease)} .foot a:hover{color:var(--amber-lt)} .foot-bar{ border-top:1px solid rgba(255,255,255,.14); padding-block:22px; display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;justify-content:space-between; color:rgba(255,255,255,.52);font-size:13.5px; } .foot-bar a{color:rgba(255,255,255,.66);font-size:13.5px} @media(max-width:860px){ .foot-top{grid-template-columns:repeat(2,minmax(0,1fr))} .foot-brand{grid-column:1/-1} } @media(max-width:520px){ .foot-top{grid-template-columns:minmax(0,1fr)} } /* ------------------------------- 18. reveal + reduced motion */ .js .rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .js .rv.in{opacity:1;transform:none} .js .rv-d1{transition-delay:.08s} .js .rv-d2{transition-delay:.16s} .js .rv-d3{transition-delay:.24s} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} .js .rv{opacity:1;transform:none} .vhero-media img{animation:none;transform:scale(1.02)} .ticker-track{animation:none} } /* ===================================================================== 19. DARK-SURFACE INK GUARD — NEVER DELETE. Every dark band must re-colour the shared components it may contain, because two-part selectors (.faq details p, .ticklist li) out-rank a bare `.scene p`. Keep this block LAST in the file. ===================================================================== */ .scene p,.scene li,.scene .lede,.scene .ticklist li,.scene .chips li, .vet p,.vet li,.vet .lede,.vet .ticklist li,.vet .chips li, .seq p,.seq li,.seq .lede,.seq .ticklist li,.seq .chips li, .phero p,.phero li,.phero .lede,.phero .chips li, .aside-card p,.aside-card li,.aside-card .ticklist li, .foot p,.foot li,.sheet p,.sheet li{color:rgba(255,255,255,.84)} .scene h1,.scene h2,.scene h3,.scene h4,.scene b,.scene strong, .vet h1,.vet h2,.vet h3,.vet h4,.vet b,.vet strong, .seq h1,.seq h2,.seq h3,.seq h4,.seq b,.seq strong, .phero h1,.phero h2,.phero h3,.phero h4,.phero b,.phero strong, .aside-card h3,.aside-card b,.aside-card strong, .foot h4,.sheet h3{color:#fff} .scene .chips li,.vet .chips li,.seq .chips li,.phero .chips li,.aside-card .chips li{ background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22); } .scene .ticklist li::before,.vet .ticklist li::before, .seq .ticklist li::before,.aside-card .ticklist li::before{background:var(--amber-lt)} .scene .chips li::before,.vet .chips li::before, .seq .chips li::before,.phero .chips li::before,.aside-card .chips li::before{background:var(--amber-lt)} .phero .crumb{color:rgba(255,255,255,.7)} .phero .crumb a{color:rgba(255,255,255,.88)} .phero .crumb span[aria-current]{color:var(--amber-lt)} .scene .acc,.vet .acc,.seq .acc,.phero .acc,.aside-card .acc,.foot .acc{color:var(--amber-lt)} .scene .acc-g,.vet .acc-g,.seq .acc-g,.phero .acc-g{color:#7FC08F} .scene .btn-ghost,.vet .btn-ghost,.seq .btn-ghost,.phero .btn-ghost,.aside-card .btn-ghost{ color:#fff;border-color:rgba(255,255,255,.6); } .scene .btn-ghost:hover,.vet .btn-ghost:hover,.seq .btn-ghost:hover, .phero .btn-ghost:hover,.aside-card .btn-ghost:hover{background:#fff;color:var(--ink)} .scene .eyebrow,.vet .eyebrow,.seq .eyebrow,.phero .eyebrow,.aside-card .eyebrow{color:var(--amber-lt)} .scene .eyebrow::before,.vet .eyebrow::before,.seq .eyebrow::before, .phero .eyebrow::before,.aside-card .eyebrow::before{background:var(--amber-lt)}