/* ============================================================ Practical Family Mediation — design system Boutique · warm · editorial · practical ============================================================ */ /* ---------- Fonts (self-hosted, variable) ---------- */ @font-face{ font-family:"Fraunces"; src:url("/assets/fonts/fraunces-var.woff2") format("woff2"); font-weight:300 700; font-display:swap; font-style:normal; } @font-face{ font-family:"InterVar"; src:url("/assets/fonts/inter-var.woff2") format("woff2"); font-weight:300 700; font-display:swap; font-style:normal; } /* ---------- Tokens ---------- */ :root{ /* Navy & Camel — LOCKED default palette (primary accent = --deep-green) */ --ivory:#EDE7DB; --warm-white:#FFFFFF; --cream:#F6F1E7; --charcoal:#1B2330; --soft-charcoal:#3C4450; --taupe:#AFA48F; --taupe-soft:#D9D2C6; --clay:#B98B4E; --clay-deep:#9C7440; --deep-green:#1F3A5F; --deep-green-soft:#1f3a5f40; --sand:#E7D3AE; --line:#DED7C8; --line-strong:#CEC6B4; --shadow-soft:0 18px 50px -28px rgba(27,35,48,.30); --shadow-card:0 12px 34px -22px rgba(58,55,50,.34); --serif:"Fraunces",Georgia,"Times New Roman",serif; --sans:"InterVar",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --wrap:1200px; --wrap-narrow:820px; --gutter:clamp(20px,5vw,64px); --radius:18px; --radius-lg:26px; --sec-y:clamp(64px,9vw,120px); --ease:cubic-bezier(.22,.61,.36,1); } /* ---------- Color themes (override existing tokens; drives whole site) ---------- Applied via . Default (no attribute) = Warm Editorial. Primary accent lives in --deep-green, secondary in --clay, background in --ivory. */ html[data-theme="warm"]{--ivory:#F8F3EA;--warm-white:#FFFDF8;--charcoal:#202020;--soft-charcoal:#3A3732;--clay:#A86F55;--clay-deep:#8F5A43;--deep-green:#243D35;--sand:#D8C3A5;--line:#E4DACB;--line-strong:#D3C6B2} html[data-theme="ink"]{--ivory:#FBF7F0;--warm-white:#FFFFFF;--clay:#9C6A44;--clay-deep:#7E5637;--deep-green:#B85C38;--sand:#E4C9A8;--line:#EBE3D6;--line-strong:#DBCFBD} html[data-theme="sage"]{--ivory:#F3F1E7;--warm-white:#FCFAF2;--clay:#B98B4E;--clay-deep:#9C7440;--deep-green:#566B4F;--sand:#D9C8A2;--line:#E1DCCC;--line-strong:#CFC8B4} html[data-theme="clay"]{--ivory:#F8F0E6;--warm-white:#FFFBF4;--clay:#5C6B4A;--clay-deep:#48553A;--deep-green:#A8593F;--sand:#E0C39B;--line:#ECE1D1;--line-strong:#DBCBB4} html[data-theme="navy"]{--ivory:#EDE7DB;--warm-white:#FFFFFF;--clay:#B98B4E;--clay-deep:#9C7440;--deep-green:#1F3A5F;--sand:#E7D3AE;--line:#DED7C8;--line-strong:#CEC6B4} html[data-theme="teal"]{--ivory:#F1F3EF;--warm-white:#FBFCF9;--clay:#C6864F;--clay-deep:#A86E3D;--deep-green:#245C55;--sand:#DCC9A4;--line:#DEE3DB;--line-strong:#CBD2C7} html[data-theme="slate"]{--ivory:#F2F2F0;--warm-white:#FCFCFB;--clay:#C08A5A;--clay-deep:#A5744A;--deep-green:#3E4A57;--sand:#DAC8AC;--line:#E1E0DB;--line-strong:#D0CFC7} html[data-theme="plum"]{--ivory:#F7F1EC;--warm-white:#FFFBF6;--clay:#C08A6E;--clay-deep:#A5715A;--deep-green:#5E3A4A;--sand:#E3C4AE;--line:#ECE0D6;--line-strong:#DBCBBB} html[data-theme="brass"]{--ivory:#F5F2EA;--warm-white:#FEFCF6;--clay:#9C7A3C;--clay-deep:#826331;--deep-green:#33352F;--sand:#DDC79A;--line:#E5E0D3;--line-strong:#D4CDBB} /* ---------- Reset / base ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; background:var(--ivory); color:var(--soft-charcoal); font-family:var(--sans); font-size:clamp(16px,1.05vw,17.5px); line-height:1.7; font-feature-settings:"kern","liga","cv05"; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit} h1,h2,h3,h4{ font-family:var(--serif); color:var(--charcoal); font-weight:460; line-height:1.08; letter-spacing:-.012em; margin:0; font-variation-settings:"opsz" 40; } p{margin:0 0 1.1em} ::selection{background:var(--sand);color:var(--charcoal)} /* ---------- Utilities ---------- */ .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} .narrow{max-width:var(--wrap-narrow);margin-inline:auto} .section{padding-block:var(--sec-y)} .eyebrow{ font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.19em; text-transform:uppercase; color:var(--clay); margin:0 0 1rem; display:inline-flex; align-items:center; gap:.6rem; } .eyebrow::before{ content:"";width:26px;height:1px;background:var(--clay);opacity:.55;display:inline-block; } .lede{font-size:clamp(1.08rem,1.5vw,1.28rem);line-height:1.62;color:var(--soft-charcoal)} .muted{color:#6f695f} .center{text-align:center} .skip-link{ position:absolute;left:-999px;top:0;z-index:200; background:var(--deep-green);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 10px 0; } .skip-link:focus{left:0} :focus-visible{outline:2.5px solid var(--clay);outline-offset:3px;border-radius:4px} /* ---------- Buttons ---------- */ .btn{ --_bg:var(--deep-green);--_fg:#fff;--_bd:var(--deep-green); display:inline-flex;align-items:center;justify-content:center;gap:.55rem; font-family:var(--sans);font-weight:560;font-size:.98rem;letter-spacing:.005em; padding:.92rem 1.5rem;border-radius:999px;border:1.5px solid var(--_bd); background:var(--_bg);color:var(--_fg);cursor:pointer;white-space:nowrap; transition:transform .35s var(--ease),background .3s var(--ease),box-shadow .35s var(--ease),color .3s var(--ease),border-color .3s var(--ease); will-change:transform; } .btn svg{width:1.02em;height:1.02em;transition:transform .35s var(--ease)} .btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)} .btn:hover svg{transform:translateX(3px)} .btn--primary:hover{background:#2c4a40} .btn--ghost{--_bg:transparent;--_fg:var(--deep-green);--_bd:var(--line-strong)} .btn--ghost:hover{--_bd:var(--deep-green);background:#fff} .btn--clay{--_bg:var(--clay);--_fg:#fff;--_bd:var(--clay)} .btn--clay:hover{background:var(--clay-deep)} .btn--light{--_bg:var(--warm-white);--_fg:var(--charcoal);--_bd:var(--line-strong)} .btn--block{width:100%} .textlink{ color:var(--deep-green);font-weight:560;display:inline-flex;align-items:center;gap:.4rem; border-bottom:1.5px solid var(--taupe);padding-bottom:2px;transition:border-color .3s,gap .3s; } .textlink:hover{border-color:var(--clay);gap:.6rem} /* ============================================================ Header + mega menu ============================================================ */ .site-header{ position:sticky;top:0;z-index:100; background:color-mix(in srgb,var(--ivory) 82%,transparent); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid transparent; transition:border-color .3s,background .3s,box-shadow .3s; } .site-header.scrolled{ background:color-mix(in srgb,var(--warm-white) 90%,transparent); border-bottom-color:var(--line); box-shadow:0 10px 30px -26px rgba(58,55,50,.5); } .header-inner{ max-width:1340px;margin-inline:auto;padding:.85rem clamp(20px,4vw,48px); display:flex;align-items:center;justify-content:space-between;gap:1.5rem; } .brand{display:flex;flex-direction:column;line-height:1;gap:.18rem;flex-shrink:0} .brand__name{ font-family:var(--serif);font-size:1.17rem;font-weight:500;color:var(--charcoal); letter-spacing:-.01em;font-variation-settings:"opsz" 30; } .header-cta{padding-block:.72rem;font-size:.92rem} .brand__tag{ font-family:var(--sans);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase; color:var(--clay);font-weight:600; } .nav{display:flex;align-items:center;gap:.25rem} .nav__list{display:flex;align-items:center;gap:.05rem;list-style:none;margin:0;padding:0} .nav__link{ appearance:none;-webkit-appearance:none;border:none;background:transparent;cursor:pointer; display:inline-flex;align-items:center;gap:.3rem; padding:.5rem .52rem;border-radius:10px;font-size:.875rem;font-weight:500;color:var(--soft-charcoal); transition:color .25s,background .25s;white-space:nowrap; } .nav__link:focus{outline:none} .nav__link:hover,.nav__link[aria-expanded="true"]{color:var(--charcoal);background:#ffffff8c} .nav__link .chev{width:.66em;height:.66em;transition:transform .3s var(--ease)} .nav__link[aria-expanded="true"] .chev{transform:rotate(180deg)} .header-cta{margin-left:.4rem} /* Mega menu */ .has-mega{position:static} .mega{ position:absolute;left:0;right:0;top:100%; background:var(--warm-white); border-top:1px solid var(--line); box-shadow:0 30px 60px -34px rgba(36,61,53,.4); opacity:0;visibility:hidden;transform:translateY(-10px); transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s; z-index:99; } .mega[data-open="true"]{opacity:1;visibility:visible;transform:translateY(0)} .mega__inner{ max-width:var(--wrap);margin-inline:auto;padding:2.4rem var(--gutter) 2.6rem; display:grid;grid-template-columns:repeat(4,1fr);gap:2rem 2.4rem; } .mega__col h3{ font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--clay);margin:0 0 1.1rem;padding-bottom:.7rem;border-bottom:1px solid var(--line); } .mega__item{display:flex;gap:.85rem;padding:.55rem 0;align-items:center;border-radius:12px;transition:transform .25s var(--ease)} .mega__item:hover{transform:translateX(3px)} .mega__thumb{ width:52px;height:52px;border-radius:12px;object-fit:cover;flex-shrink:0; background:var(--taupe-soft);box-shadow:inset 0 0 0 1px rgba(58,55,50,.08); } .mega__txt strong{display:block;font-size:.94rem;color:var(--charcoal);font-weight:560;line-height:1.25} .mega__txt span{display:block;font-size:.8rem;color:#6f695f;line-height:1.4;margin-top:2px} .mega__col--feature{ background:var(--deep-green);border-radius:var(--radius);padding:1.6rem;color:#eae3d5; display:flex;flex-direction:column;justify-content:space-between; } .mega__col--feature h3{color:var(--sand);border-color:#ffffff22} .mega__col--feature p{font-size:.9rem;line-height:1.55;color:#d9d0c1} .mega__col--feature .textlink{color:#fff;border-color:#ffffff55} .mega__col--feature .textlink:hover{border-color:var(--sand)} .mega__flinks{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.7rem} /* Split panels: two link columns + a photo feature */ .mega--split .mega__inner{grid-template-columns:1fr 1fr 1.25fr;gap:1.6rem 2.6rem;align-items:stretch} .mega__links{display:flex;flex-direction:column} .mega__links h3{ font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--clay);margin:0 0 .9rem;padding-bottom:.7rem;border-bottom:1px solid var(--line); } .mega__link{ display:flex;align-items:center;justify-content:space-between;gap:.9rem; padding:.62rem 0;color:var(--soft-charcoal);border-bottom:1px solid transparent; transition:color .25s var(--ease),padding-left .25s var(--ease); } .mega__link:hover{color:var(--charcoal);padding-left:4px} .mega__link span{display:flex;flex-direction:column;font-size:.94rem;font-weight:560;line-height:1.25} .mega__link small{font-size:.8rem;font-weight:400;color:#6f695f;line-height:1.4;margin-top:2px} .mega__link .arw{ width:12px;height:12px;flex-shrink:0;color:var(--clay); opacity:0;transform:translateX(-4px);transition:opacity .25s var(--ease),transform .25s var(--ease); } .mega__link:hover .arw{opacity:1;transform:none} .mega__photo{ position:relative;border-radius:var(--radius);overflow:hidden;min-height:220px; display:flex;flex-direction:column;justify-content:flex-end; box-shadow:0 20px 40px -28px rgba(36,61,53,.55);isolation:isolate; } .mega__photo img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2; transition:transform .6s var(--ease); } .mega__photo::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(to top,rgba(20,30,25,.82),rgba(20,30,25,.2) 55%,rgba(20,30,25,.05)); } .mega__photo:hover img{transform:scale(1.05)} .mega__photo__body{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start;padding:1.35rem} .mega__photo__body strong{ font-family:var(--serif);font-size:1.12rem;font-weight:500;color:#fff;line-height:1.2; font-variation-settings:"opsz" 30; } .mega__photo .textlink{color:#fff;border-color:#ffffff66} .mega__photo:hover .textlink{border-color:var(--sand);gap:.6rem} /* Mobile nav toggle */ .nav-toggle{ display:none;width:44px;height:44px;border:1px solid var(--line-strong);border-radius:12px; background:var(--warm-white);cursor:pointer;position:relative; } .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{ content:"";position:absolute;left:50%;top:50%;width:20px;height:1.8px;background:var(--charcoal); transform:translate(-50%,-50%);transition:transform .3s var(--ease),opacity .2s; } .nav-toggle span::before{transform:translate(-50%,-7px)} .nav-toggle span::after{transform:translate(-50%,5px)} .nav-toggle[aria-expanded="true"] span{background:transparent} .nav-toggle[aria-expanded="true"] span::before{transform:translate(-50%,-50%) rotate(45deg)} .nav-toggle[aria-expanded="true"] span::after{transform:translate(-50%,-50%) rotate(-45deg)} /* ============================================================ Hero ============================================================ */ .hero{position:relative;overflow:hidden;background:var(--ivory)} .hero::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(120% 90% at 88% 10%,rgba(216,195,165,.28),transparent 55%), radial-gradient(90% 70% at 0% 100%,rgba(185,168,145,.16),transparent 60%); } .hero__grid{ position:relative;max-width:var(--wrap);margin-inline:auto; padding:clamp(14px,2vw,28px) var(--gutter) clamp(44px,6vw,84px); display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,72px);align-items:start; } .hero__copy{max-width:36rem} .hero__chip{ display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.4rem; background:var(--warm-white);border:1px solid var(--line-strong);border-radius:999px; padding:.42rem .5rem .42rem .55rem;font-size:.78rem;color:var(--soft-charcoal); box-shadow:0 6px 18px -14px rgba(58,55,50,.5); } .hero__chip b{color:var(--charcoal);font-weight:600} .hero__chip .dot{width:6px;height:6px;border-radius:50%;background:var(--clay)} .hero__chip .badge{ background:var(--deep-green);color:var(--sand);font-weight:600;font-size:.68rem;letter-spacing:.06em; padding:.22rem .55rem;border-radius:999px; } .hero h1{ font-size:clamp(2.5rem,5.4vw,4rem); font-weight:420;line-height:1.02;letter-spacing:-.02em;color:var(--charcoal); font-variation-settings:"opsz" 144;margin-bottom:1.15rem; } .hero h1 em{font-style:italic;color:var(--clay);font-variation-settings:"opsz" 144} .hero__sub{font-size:clamp(1.05rem,1.55vw,1.24rem);line-height:1.6;color:var(--soft-charcoal);max-width:34rem;margin-bottom:1.9rem} .hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center} .hero__trust{ margin-top:1.7rem;display:flex;align-items:center;gap:.7rem;font-size:.9rem;color:#6f695f; padding-top:1.5rem;border-top:1px solid var(--line); } .hero__trust svg{width:1.15em;height:1.15em;color:var(--clay);flex-shrink:0} /* Hero image panel */ .hero__media{position:relative} .hero__frame{ position:relative;border-radius:var(--radius-lg);overflow:hidden; box-shadow:var(--shadow-soft);isolation:isolate; aspect-ratio:4/5; } .hero__frame::after{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(180deg,rgba(36,61,53,0) 55%,rgba(32,32,32,.42)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); border-radius:inherit; } .hero__frame img{width:100%;height:100%;object-fit:cover;object-position:50% 30%} .blurup{filter:blur(0);transition:filter .7s var(--ease)} .blurup[data-loading="true"]{filter:blur(18px)} .hero__proof{ position:absolute;left:18px;bottom:18px;right:18px;z-index:3; display:flex;align-items:center;gap:.9rem; background:color-mix(in srgb,var(--warm-white) 78%,transparent); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.5);border-radius:16px;padding:.9rem 1.05rem; box-shadow:0 14px 34px -22px rgba(36,61,53,.6); } .hero__proof .avatar{ width:44px;height:44px;border-radius:50%;background:var(--deep-green);color:var(--sand); display:grid;place-items:center;font-family:var(--serif);font-size:1.05rem;flex-shrink:0; font-variation-settings:"opsz" 30; } .hero__proof strong{display:block;font-size:.9rem;color:var(--charcoal);font-weight:600;line-height:1.2} .hero__proof span{display:block;font-size:.78rem;color:var(--soft-charcoal);line-height:1.35;margin-top:2px} .hero__badge{ position:absolute;top:16px;right:16px;z-index:3; background:color-mix(in srgb,var(--warm-white) 82%,transparent); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:.4rem .85rem; font-size:.74rem;font-weight:600;letter-spacing:.02em;color:var(--deep-green); display:flex;align-items:center;gap:.4rem; } .hero__badge .dot{width:7px;height:7px;border-radius:50%;background:#4f7d5f;box-shadow:0 0 0 3px #4f7d5f30} /* ============================================================ Sections / components ============================================================ */ .section--tint{background:var(--warm-white)} .section--green{background:var(--deep-green);color:#e7e0d3} .section--green h2,.section--green h3{color:#fff} .section--green .eyebrow{color:var(--sand)} .section--green .eyebrow::before{background:var(--sand)} .section--green .muted{color:#c4bcac} .sec-head{max-width:44rem;margin-bottom:clamp(2.2rem,4vw,3.4rem)} .sec-head.center{margin-inline:auto} .sec-head h2{font-size:clamp(1.9rem,3.6vw,2.85rem);font-weight:440;font-variation-settings:"opsz" 72;margin-bottom:.9rem} .sec-head p{font-size:clamp(1.02rem,1.4vw,1.16rem);color:var(--soft-charcoal);margin:0} /* Card grid (problem / value) */ .grid{display:grid;gap:1.3rem} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} .card{ background:var(--warm-white);border:1px solid var(--line);border-radius:var(--radius); padding:1.7rem 1.6rem;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease); position:relative;overflow:hidden; } .card::before{ content:"";position:absolute;left:0;right:0;top:0;height:3px; background:linear-gradient(90deg,var(--clay),var(--sand)); transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease); } .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:var(--line-strong)} .card:hover::before{transform:scaleX(1)} .card__n{ font-family:var(--serif);font-size:1.05rem;color:var(--clay);font-variation-settings:"opsz" 24; width:40px;height:40px;border-radius:12px;background:#f0e7d8;display:grid;place-items:center;margin-bottom:1.1rem;font-weight:500; } .card h3{font-size:1.24rem;margin-bottom:.55rem;font-variation-settings:"opsz" 30} .card p{font-size:.98rem;color:var(--soft-charcoal);margin:0} /* Service cards (with thumb) */ .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem} .svc{ display:flex;flex-direction:column;background:var(--warm-white);border:1px solid var(--line); border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit; transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease); } .svc:hover{transform:translateY(-5px);box-shadow:var(--shadow-card);border-color:var(--line-strong)} .svc__img{aspect-ratio:16/10;overflow:hidden;background:var(--taupe-soft)} .svc__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)} .svc:hover .svc__img img{transform:scale(1.05)} .svc__body{padding:1.4rem 1.45rem 1.55rem;display:flex;flex-direction:column;flex:1} .svc__body h3{font-size:1.2rem;margin-bottom:.5rem;font-variation-settings:"opsz" 30} .svc__body p{font-size:.93rem;color:var(--soft-charcoal);margin:0 0 1.1rem;flex:1} .svc__more{font-size:.9rem;font-weight:560;color:var(--deep-green);display:inline-flex;align-items:center;gap:.4rem;transition:gap .3s} .svc:hover .svc__more{gap:.65rem;color:var(--clay)} /* Value blocks (differentiator) */ .values{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem 2.6rem} .value{display:flex;gap:1rem;padding:1.2rem 0;border-top:1px solid #ffffff26} .value:nth-child(-n+2){border-top:none} .value__k{font-family:var(--serif);color:var(--sand);font-size:1rem;font-variation-settings:"opsz" 24;flex-shrink:0;padding-top:.15rem} .value h3{font-size:1.18rem;margin-bottom:.4rem;color:#fff;font-variation-settings:"opsz" 30} .value p{font-size:.95rem;color:#c9c1b2;margin:0} /* About split */ .about-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,68px);align-items:center} .about-portrait{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow-soft);background:var(--taupe-soft)} .about-portrait img{width:100%;height:100%;object-fit:cover} .about-cred{ display:flex;flex-wrap:wrap;gap:.6rem;margin:1.4rem 0 1.7rem; } .chip{ display:inline-flex;align-items:center;gap:.45rem;font-size:.84rem;color:var(--soft-charcoal); background:var(--warm-white);border:1px solid var(--line);border-radius:999px;padding:.42rem .9rem; } .chip svg{width:1em;height:1em;color:var(--clay)} /* Process steps */ .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1.1rem;counter-reset:step} .step{position:relative;padding-top:2.4rem} .step::before{ counter-increment:step;content:"0" counter(step); font-family:var(--serif);font-size:1.5rem;color:var(--clay);font-variation-settings:"opsz" 40; position:absolute;top:0;left:0;font-weight:500; } .step::after{content:"";position:absolute;top:.85rem;left:2.6rem;right:-.55rem;height:1px;background:var(--line-strong)} .step:last-child::after{display:none} .step h3{font-size:1.08rem;margin-bottom:.4rem;font-variation-settings:"opsz" 24} .step p{font-size:.9rem;color:var(--soft-charcoal);margin:0} .note-band{ margin-top:2.4rem;background:var(--warm-white);border:1px solid var(--line);border-left:3px solid var(--taupe); border-radius:14px;padding:1.1rem 1.3rem;font-size:.94rem;color:var(--soft-charcoal);display:flex;gap:.8rem;align-items:flex-start; } .note-band svg{width:1.2em;height:1.2em;color:var(--clay);flex-shrink:0;margin-top:.2rem} /* Cost / CTA band */ .band{ position:relative;overflow:hidden;border-radius:var(--radius-lg); background:var(--deep-green);color:#e7e0d3;padding:clamp(2.4rem,5vw,3.6rem); } .band::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(90% 120% at 100% 0%,rgba(216,195,165,.16),transparent 55%); } .band__inner{position:relative;max-width:40rem} .band h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:1rem;font-variation-settings:"opsz" 60} .band p{color:#d3cabb;margin-bottom:1.7rem} /* Resource cards */ .res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem} .res{ display:flex;flex-direction:column;gap:.7rem;background:var(--warm-white);border:1px solid var(--line); border-radius:var(--radius);padding:1.5rem 1.5rem 1.6rem;text-decoration:none;color:inherit; transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s; } .res:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:var(--line-strong)} .res__tag{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--clay)} .res h3{font-size:1.14rem;line-height:1.28;font-variation-settings:"opsz" 28} .res p{font-size:.92rem;color:var(--soft-charcoal);margin:0;flex:1} .res__more{font-size:.86rem;font-weight:560;color:var(--deep-green);display:inline-flex;gap:.4rem;align-items:center} /* FAQ */ .faq-wrap{max-width:var(--wrap-narrow);margin-inline:auto} .faq{border-top:1px solid var(--line)} .faq__item{border-bottom:1px solid var(--line)} .faq__q{ width:100%;text-align:left;background:none;border:none;cursor:pointer; display:flex;justify-content:space-between;align-items:center;gap:1.5rem; padding:1.35rem .2rem;font-family:var(--serif);font-size:1.16rem;color:var(--charcoal); font-variation-settings:"opsz" 30;font-weight:460; } .faq__q .ic{ flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line-strong); display:grid;place-items:center;position:relative;transition:border-color .3s,background .3s; } .faq__q .ic::before,.faq__q .ic::after{content:"";position:absolute;background:var(--clay);border-radius:2px;transition:transform .3s var(--ease),opacity .3s} .faq__q .ic::before{width:11px;height:1.7px} .faq__q .ic::after{width:1.7px;height:11px} .faq__item[data-open="true"] .ic{background:var(--deep-green);border-color:var(--deep-green)} .faq__item[data-open="true"] .ic::before,.faq__item[data-open="true"] .ic::after{background:#fff} .faq__item[data-open="true"] .ic::after{transform:scaleY(0)} .faq__a{overflow:hidden;max-height:0;transition:max-height .4s var(--ease)} .faq__a-inner{padding:0 .2rem 1.4rem;color:var(--soft-charcoal);font-size:.98rem;max-width:60ch} .faq__a-inner p:last-child{margin-bottom:0} /* Contact form */ .contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,64px);align-items:start} .form{background:var(--warm-white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.6rem,3vw,2.4rem);box-shadow:var(--shadow-card)} .field{margin-bottom:1.1rem} .field label{display:block;font-size:.86rem;font-weight:560;color:var(--soft-charcoal);margin-bottom:.42rem} .field label .req{color:var(--clay)} .field input,.field select,.field textarea{ width:100%;font-family:var(--sans);font-size:1rem;color:var(--charcoal); background:var(--ivory);border:1.5px solid var(--line-strong);border-radius:12px;padding:.8rem .95rem; transition:border-color .25s,box-shadow .25s,background .25s; } .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--clay);background:#fff;box-shadow:0 0 0 3px rgba(168,111,85,.14); } .field textarea{resize:vertical;min-height:120px} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem} .form__note{font-size:.82rem;color:#6f695f;margin-top:.9rem;line-height:1.5} .form__status{margin-top:1rem;font-size:.92rem;padding:.8rem 1rem;border-radius:12px;display:none} .form__status.ok{display:block;background:#e8efe9;color:#2c4a40;border:1px solid #cbdccf} .form__status.err{display:block;background:#f6e7e1;color:#8f5a43;border:1px solid #e6cabb} /* Info panel next to form */ .info-panel{display:flex;flex-direction:column;gap:1.4rem} .info-item{display:flex;gap:.95rem;align-items:flex-start} .info-item .ic{width:42px;height:42px;border-radius:12px;background:#f0e7d8;display:grid;place-items:center;flex-shrink:0} .info-item .ic svg{width:1.15rem;height:1.15rem;color:var(--clay)} .info-item strong{display:block;color:var(--charcoal);font-weight:560;margin-bottom:.15rem} .info-item span,.info-item a{font-size:.94rem;color:var(--soft-charcoal)} .info-item a:hover{color:var(--clay)} /* Trust strip / marquee-ish list */ .trust-strip{ display:flex;flex-wrap:wrap;gap:.7rem 1.5rem;justify-content:center;align-items:center; font-size:.86rem;color:#6f695f; } .trust-strip .item{display:inline-flex;align-items:center;gap:.5rem} .trust-strip svg{width:1.05em;height:1.05em;color:var(--clay)} .trust-strip .sep{width:4px;height:4px;border-radius:50%;background:var(--taupe)} /* ============================================================ Breadcrumb + prose (interior pages) ============================================================ */ .breadcrumb{font-size:.84rem;color:#6f695f;padding-top:1.4rem} .breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0} .breadcrumb a:hover{color:var(--clay)} .breadcrumb li:not(:last-child)::after{content:"›";margin-left:.5rem;color:var(--taupe)} .page-hero{padding-block:clamp(2.6rem,5vw,4rem) clamp(1.6rem,3vw,2.4rem)} .page-hero h1{font-size:clamp(2.2rem,4.6vw,3.4rem);font-weight:430;font-variation-settings:"opsz" 96;margin-bottom:1rem;max-width:20ch} .page-hero .lede{max-width:44rem} .prose{max-width:var(--wrap-narrow);margin-inline:auto} .prose h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:2.6rem 0 1rem;font-variation-settings:"opsz" 48} .prose h3{font-size:1.28rem;margin:2rem 0 .7rem;font-variation-settings:"opsz" 32} .prose p,.prose li{font-size:1.06rem;line-height:1.75;color:var(--soft-charcoal)} .prose ul,.prose ol{padding-left:1.2rem;margin:0 0 1.3rem} .prose li{margin-bottom:.5rem} .prose li::marker{color:var(--clay)} .prose a{color:var(--deep-green);border-bottom:1.5px solid var(--taupe)} .prose a:hover{border-color:var(--clay)} .answer-box{ background:var(--warm-white);border:1px solid var(--line);border-left:3px solid var(--clay); border-radius:14px;padding:1.3rem 1.5rem;margin:1.6rem 0; } .answer-box .k{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);display:block;margin-bottom:.5rem} .answer-box p{margin:0;font-size:1.04rem;color:var(--charcoal)} .plain-english{background:#f0ece2;border-radius:14px;padding:1.3rem 1.5rem;margin:1.6rem 0} .plain-english .k{font-family:var(--serif);font-size:1.05rem;color:var(--clay);display:block;margin-bottom:.4rem;font-variation-settings:"opsz" 24} /* Location strip */ .locations{display:flex;flex-wrap:wrap;gap:.55rem} .loc-pill{font-size:.82rem;color:var(--soft-charcoal);background:var(--warm-white);border:1px solid var(--line);border-radius:999px;padding:.4rem .85rem} /* ============================================================ Footer ============================================================ */ .site-footer{background:#17293F;color:#C3C9D2;padding-block:clamp(3rem,5vw,4.4rem) 2rem;margin-top:0} .footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.4rem;padding-bottom:2.6rem;border-bottom:1px solid #ffffff1a} .footer-brand .brand__name{color:#fff;font-size:1.3rem} .footer-brand p{font-size:.92rem;color:#9AA6B4;margin:1rem 0 0;max-width:26ch} .footer-col h4{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);margin:0 0 1.1rem;font-weight:600} .footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65rem} .footer-col a{font-size:.92rem;color:#C3C9D2;transition:color .25s} .footer-col a:hover{color:#fff} .footer-contact{font-size:.92rem;line-height:1.7;color:#C3C9D2} .footer-contact a:hover{color:#fff} .footer-disclaimer{font-size:.82rem;color:#93A0B0;line-height:1.65;margin:2.2rem 0 0;max-width:70ch} .footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:1.8rem;font-size:.82rem;color:#93A0B0} .footer-bottom a:hover{color:#fff} .footer-credits{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.55rem 1.1rem;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid #ffffff1a;font-size:.8rem;color:#93A0B0;text-align:center} .footer-cred{color:#93A0B0;transition:color .25s} .footer-cred:hover{color:#fff} .footer-cred strong{color:#e7e0d3;font-weight:600} .cred-sep{opacity:.4} .placeholder-flag{color:var(--sand);font-style:italic} /* ============================================================ Reveal on scroll ============================================================ */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} .btn,.card,.svc,.res{transition:none} *{scroll-behavior:auto!important} } /* ============================================================ Responsive ============================================================ */ @media (max-width:1040px){ .mega__inner{grid-template-columns:repeat(2,1fr)} .steps{grid-template-columns:repeat(2,1fr);gap:1.6rem} .step::after{display:none} .step:nth-child(-n+2){padding-top:2.4rem} } @media (max-width:1240px){ .nav__list,.header-cta{display:none} .nav-toggle{display:block} } @media (max-width:900px){ .hero__grid{grid-template-columns:1fr;gap:2.2rem} .hero__media{order:-1;max-width:520px;margin-inline:auto;width:100%} .hero__frame{aspect-ratio:5/4} .hero__frame img{object-position:50% 28%} .about-split{grid-template-columns:1fr;gap:2rem} .about-portrait{max-width:420px} .contact-grid{grid-template-columns:1fr} .grid-3,.svc-grid,.res-grid,.grid-4{grid-template-columns:repeat(2,1fr)} .values{grid-template-columns:1fr;gap:0} .value{border-top:1px solid #ffffff26} .value:first-child{border-top:none} .footer-top{grid-template-columns:1fr 1fr;gap:1.8rem 1.4rem} .footer-brand{grid-column:1/-1} } @media (max-width:640px){ :root{--sec-y:clamp(52px,12vw,72px)} .grid-3,.svc-grid,.res-grid,.grid-2,.grid-4,.field-row{grid-template-columns:1fr} .hero__proof{left:12px;right:12px;bottom:12px;padding:.75rem .85rem} .hero__cta .btn{flex:1;min-width:0} .steps{grid-template-columns:1fr} .footer-top{grid-template-columns:1fr} .footer-bottom{flex-direction:column;gap:.5rem} } /* Mobile drawer */ .drawer{ position:fixed;inset:0;z-index:150;visibility:hidden;pointer-events:none; } .drawer__scrim{position:absolute;inset:0;background:rgba(32,32,32,.4);opacity:0;transition:opacity .3s} .drawer__panel{ position:absolute;top:0;right:0;height:100%;width:min(88vw,380px); background:var(--warm-white);box-shadow:-20px 0 60px -30px rgba(0,0,0,.5); transform:translateX(100%);transition:transform .4s var(--ease); display:flex;flex-direction:column;padding:1.4rem 1.4rem 2rem;overflow-y:auto; } .drawer[data-open="true"]{visibility:visible;pointer-events:auto} .drawer[data-open="true"] .drawer__scrim{opacity:1} .drawer[data-open="true"] .drawer__panel{transform:none} .drawer__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem} .drawer__close{width:42px;height:42px;border:1px solid var(--line-strong);border-radius:12px;background:none;cursor:pointer;position:relative} .drawer__close::before,.drawer__close::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:1.8px;background:var(--charcoal)} .drawer__close::before{transform:translate(-50%,-50%) rotate(45deg)} .drawer__close::after{transform:translate(-50%,-50%) rotate(-45deg)} .drawer a.d-link{display:block;padding:.9rem .3rem;font-family:var(--serif);font-size:1.28rem;color:var(--charcoal);border-bottom:1px solid var(--line);font-variation-settings:"opsz" 30} .drawer details summary{list-style:none;cursor:pointer} .drawer details summary::-webkit-details-marker{display:none} .drawer details[open] summary .chev{transform:rotate(180deg)} .drawer .d-sub{padding:.3rem 0 .8rem 1rem} .drawer .d-sub a{display:block;padding:.5rem 0;font-size:.98rem;color:var(--soft-charcoal)} .drawer .btn{margin-top:1.4rem} /* ============================================================ Logo lockup (Table mark + stacked wordmark) — header ============================================================ */ .site-header .brand{flex-direction:row;align-items:center;gap:.62rem} .brand__mark{width:40px;height:40px;flex-shrink:0;display:block} .brand__wm{display:flex;flex-direction:column;line-height:1;gap:.2rem} .site-header .brand__name{font-size:1.24rem;font-variation-settings:"opsz" 60;line-height:.95} .site-header .brand__tag{color:var(--clay)} /* ============================================================ Framed Graphic hero (LOCKED homepage direction) ============================================================ */ .fhero{position:relative;max-width:var(--wrap);margin-inline:auto; padding:clamp(16px,2.5vw,36px) var(--gutter) clamp(48px,6vw,86px); display:grid;grid-template-columns:1fr .92fr;gap:clamp(30px,5vw,60px);align-items:center} .fhero__copy{max-width:34rem} .fhero h1{font-size:clamp(2.4rem,4.9vw,3.75rem);line-height:1.02;font-variation-settings:"opsz" 144;font-weight:420;letter-spacing:-.02em;margin:1rem 0 1.1rem} .fhero h1 em{font-style:italic;color:var(--clay)} .fhero__sub{font-size:clamp(1.02rem,1.45vw,1.2rem);line-height:1.6;color:var(--soft-charcoal);margin:0 0 1.7rem;max-width:31rem} .fhero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem} .fhero__pills{display:flex;flex-wrap:wrap;gap:.5rem} .fpill{display:inline-flex;align-items:center;gap:.45rem;background:var(--warm-white);border:1px solid var(--line);border-radius:999px;padding:.42rem .85rem;font-size:.82rem;color:var(--soft-charcoal)} .fpill .d{width:7px;height:7px;border-radius:50%;background:var(--clay)} .fhero__gfx{position:relative;aspect-ratio:1/1;display:grid;place-items:center} .fhero__ring{position:absolute;border-radius:50%;border:1.5px solid var(--clay);opacity:.35;pointer-events:none} .fhero__ring--1{inset:0}.fhero__ring--2{inset:8%} .fhero__dots{position:absolute;right:2%;top:5%;width:96px;height:96px;background-image:radial-gradient(var(--clay) 1.4px,transparent 1.4px);background-size:14px 14px;opacity:.4;pointer-events:none} .fhero__arch{position:relative;width:78%;aspect-ratio:3/4;border-radius:180px 180px 26px 26px;overflow:hidden;box-shadow:var(--shadow-soft);z-index:1;background:var(--taupe-soft)} .fhero__arch video,.fhero__arch img{width:100%;height:100%;object-fit:cover} .fhero__arch::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);background:linear-gradient(180deg,transparent 62%,rgba(20,25,35,.28))} .fhero__float{position:absolute;z-index:3;background:var(--warm-white);border:1px solid var(--line);border-radius:14px;padding:.7rem .95rem;box-shadow:var(--shadow-card);font-size:.8rem} .fhero__float--a{left:-3%;top:15%} .fhero__float--b{right:-5%;bottom:13%;display:flex;gap:.6rem;align-items:center} .fhero__float .k{font-family:var(--sans);font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--clay);display:block;margin-bottom:.28rem} .fhero__float strong{color:var(--charcoal);font-weight:600} .fhero__badge{position:absolute;left:-3%;top:30%;z-index:3; background:color-mix(in srgb,var(--warm-white) 86%,transparent);backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:.42rem .9rem;font-size:.74rem;font-weight:600;color:var(--deep-green);white-space:nowrap;display:flex;align-items:center;gap:.4rem} .fhero__badge .g{width:7px;height:7px;border-radius:50%;background:#4f7d5f} @media(max-width:900px){.fhero{grid-template-columns:1fr;gap:2.2rem}.fhero__gfx{max-width:440px;margin:0 auto;order:-1;width:100%}} @media(max-width:520px){.fhero__float--a{left:0;top:8%}.fhero__float--b{right:0;bottom:8%}} /* ============================================================ Depth & rhythm (sitewide) — fixes "flat / one note" ============================================================ */ body{background:var(--ivory)} /* faint warm/navy depth so the page is not a single flat field */ body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(1100px 560px at 88% -6%, rgba(185,139,78,.07), transparent 60%), radial-gradient(900px 480px at -5% 104%, rgba(31,58,95,.05), transparent 55%);} /* section variety: greige base, white tint (delineated), cream, navy anchors */ .section{position:relative} .section--tint{background:var(--warm-white);border-block:1px solid var(--line)} .section--cream{background:var(--cream)} .section--green{position:relative;overflow:hidden} .section--green::after{content:"";position:absolute;right:-70px;top:-70px;width:340px;height:340px;border-radius:50%; border:1.5px solid rgba(231,211,174,.16);pointer-events:none} .section--green > .wrap{position:relative;z-index:1} /* recurring dot-grid + ring motif on CTA bands (ties to the hero graphics) */ .band{position:relative;overflow:hidden} .band::after{content:"";position:absolute;right:26px;bottom:22px;width:132px;height:132px;z-index:0;pointer-events:none; background-image:radial-gradient(rgba(231,211,174,.4) 1.5px,transparent 1.5px);background-size:16px 16px;opacity:.6} .band__inner{position:relative;z-index:1} /* card depth: separate from bg with a resting shadow + always-on accent tick */ .card,.svc,.res{box-shadow:0 3px 14px -8px rgba(27,35,48,.16)} .card::before{transform:scaleX(1);opacity:.45} .card:hover::before{opacity:1} /* stat / trust divider rhythm: a hairline camel rule under section eyebrows already exists; add a subtle top accent to tinted sections for layering */ .section--tint::before{content:"";position:absolute;left:0;right:0;top:0;height:2px; background:linear-gradient(90deg,transparent, var(--clay) 50%, transparent);opacity:.25} /* Interior page-hero: fill the empty side with the brand ring/dot motif (less flat) */ .page-hero{position:relative;overflow:hidden} .page-hero > .wrap{position:relative;z-index:1} .page-hero::after{content:"";position:absolute;right:-5%;top:2%;width:min(40vw,440px);height:min(40vw,440px); border-radius:50%;border:1.5px solid var(--clay);opacity:.18;pointer-events:none} .page-hero::before{content:"";position:absolute;right:8%;top:22%;width:128px;height:128px; background-image:radial-gradient(var(--clay) 1.5px,transparent 1.5px);background-size:16px 16px;opacity:.3;pointer-events:none} @media(max-width:760px){.page-hero::before{display:none}.page-hero::after{opacity:.12}} /* ============================================================ Interior page-hero: two-column with Marissa's photo (every hero has a face) ============================================================ */ .page-hero__grid{display:grid;grid-template-columns:1.06fr .8fr;gap:clamp(28px,5vw,60px);align-items:center} .page-hero__copy{max-width:38rem} .page-hero__media{position:relative;aspect-ratio:1/1;display:grid;place-items:center} /* the media column now provides the motif, so drop the old ::before/::after rings */ .page-hero::before,.page-hero::after{display:none!important} .page-hero__media .fhero__arch{background:#2b3340} @media(max-width:860px){ .page-hero__grid{grid-template-columns:1fr;gap:1.8rem} .page-hero__media{max-width:340px;margin:0 auto;aspect-ratio:4/5;order:-1} } /* ============================================================ Connective device: layered rounded panels Colored sections + footer get a large rounded top so they rise over the greige base like stacked panels (echoes the hero arch), tying the horizontal bands into one continuous stack. ============================================================ */ .section--tint,.section--green,.section--cream,.site-footer{ border-radius:46px 46px 0 0;position:relative;z-index:1; } .section--tint,.section--green,.section--cream{ box-shadow:0 -16px 44px -34px rgba(27,35,48,.5); } .site-footer{margin-top:-18px;box-shadow:0 -20px 50px -40px rgba(27,35,48,.6)} /* keep the dark-section corner ring from poking past the rounded top */ .section--green{overflow:hidden} @media(max-width:600px){.section--tint,.section--green,.section--cream,.site-footer{border-radius:30px 30px 0 0}} /* Anchor targets land below the sticky header, at the top (not mid-page) */ [id]{scroll-margin-top:104px} @media(max-width:900px){[id]{scroll-margin-top:88px}} /* ============================================================ "Moment" — emotional, photo-led human block (adds heart) ============================================================ */ .moment{position:relative;overflow:hidden} .moment > .wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,5vw,68px);align-items:center} .moment--flip > .wrap{grid-template-columns:1.05fr .95fr} .moment--flip .moment__media{order:2} .moment__media{position:relative;aspect-ratio:1/1;display:grid;place-items:center} .moment__arch{position:relative;width:84%;aspect-ratio:4/5;border-radius:170px 170px 24px 24px;overflow:hidden;box-shadow:var(--shadow-soft);z-index:1;background:var(--taupe-soft)} .moment__arch img{width:100%;height:100%;object-fit:cover} .moment__arch::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);background:linear-gradient(180deg,transparent 68%,rgba(20,25,35,.22))} .moment__quote{font-family:var(--serif);font-size:clamp(1.55rem,3vw,2.25rem);line-height:1.2;color:var(--charcoal);font-variation-settings:"opsz" 90;font-weight:440;letter-spacing:-.015em;margin:0 0 1.1rem} .moment__quote em{color:var(--clay);font-style:italic} .moment__body{color:var(--soft-charcoal);font-size:1.08rem;line-height:1.72;margin:0 0 1.3rem;max-width:34rem} @media(max-width:860px){ .moment > .wrap,.moment--flip > .wrap{grid-template-columns:1fr;gap:1.8rem} .moment--flip .moment__media{order:-1}.moment__media{order:-1;max-width:380px;margin:0 auto} } /* ============================================================ Cinematic video band — dark, emotional anchor (real motion) ============================================================ */ .videoband{position:relative;overflow:hidden;background:#132339;color:#EDE7DB;border-radius:46px 46px 0 0;z-index:1;box-shadow:0 -16px 44px -34px rgba(0,0,0,.5)} .videoband video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.4} .videoband::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(15,24,40,.74),rgba(15,24,40,.48) 42%,rgba(15,24,40,.9))} .videoband__inner{position:relative;z-index:2;max-width:56rem;margin:0 auto;padding:clamp(84px,14vw,168px) var(--gutter);text-align:center} .videoband__kicker{display:inline-flex;align-items:center;gap:.6rem;font:700 .76rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--sand);margin-bottom:1.4rem} .videoband__kicker::before,.videoband__kicker::after{content:"";width:26px;height:1px;background:var(--sand);opacity:.5} .videoband h2{font-family:var(--serif);font-size:clamp(2.1rem,4.8vw,3.5rem);line-height:1.08;color:#fff;font-variation-settings:"opsz" 144;font-weight:420;letter-spacing:-.02em;margin:0 0 1.2rem} .videoband h2 em{font-style:italic;color:var(--sand)} .videoband p{color:#c7d0dc;font-size:clamp(1.05rem,1.6vw,1.24rem);line-height:1.6;max-width:40rem;margin:0 auto 1.9rem} .videoband .btn--light{--_bg:var(--sand);--_fg:#132339;--_bd:var(--sand)} .videoband .btn--light:hover{--_bg:#efdcb6} /* Contact hero: the form lives in the hero (form-first) */ .page-hero--form .page-hero__grid{grid-template-columns:.92fr 1.08fr} .page-hero--form .page-hero__media{aspect-ratio:auto;display:block;align-self:start} .page-hero--form .form{margin:0;width:100%} @media(max-width:860px){.page-hero--form .page-hero__grid{grid-template-columns:1fr}.page-hero--form .page-hero__media{max-width:none;order:0}}