/* ========================================================================== Saxon Manor — Soft Luxury design system Tokens are the STYLE-GUIDE.md handoff block. Do not add colors here. ========================================================================== */ :root{ --rose:#E2BCC1; --rose-deep:#9C5F68; --rose-text:#8A4F58; --gold:#CC9933; --gold-deep:#A87A22; --gold-text:#856013; --oak:#4A5D4E; --oak-deep:#3A4A3E; --on-oak-rose:#F2DCDE; --on-oak-gold:#E8C57A; --ground:#FFF8F6; --surface:#FFFFFF; --sunken:#F7EDEA; --ink:#2D3436; --muted:#6B6260; --whisper:#EADDD9; --ok:#3F7D5C; --warn:#B8860B; --danger:#A33B3B; --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif; --font-body:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif; --radius-card:20px; --radius-control:14px; --section-y:128px; --section-y-mobile:72px; --measure:68ch; --wrap:1240px; --wrap-narrow:960px; --shadow-raised:0 1px 2px rgba(45,52,54,.04),0 8px 20px rgba(156,95,104,.07),0 22px 48px rgba(45,52,54,.06); --shadow-lift:0 2px 4px rgba(45,52,54,.05),0 14px 32px rgba(156,95,104,.10),0 34px 70px rgba(45,52,54,.08); --shadow-inset:inset 2px 2px 6px rgba(156,95,104,.09),inset -2px -2px 6px rgba(255,255,255,.85); --ease-settle:cubic-bezier(.16,.84,.44,1); --dur-fast:240ms; --dur-base:620ms; } /* Reset ------------------------------------------------------------------ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--ground);color:var(--ink); font-family:var(--font-body);font-size:17px;line-height:1.65; -webkit-font-smoothing:antialiased;overflow-x:hidden} /* overflow-x:hidden on makes iOS Safari treat the body as a scroll * container, which breaks position:fixed children — the sticky Call / Book a * tour bar is the only one we have. `clip` guards against sideways scroll * exactly the same way without establishing that container. `hidden` above * stays as the fallback for browsers without clip. */ @supports (overflow-x: clip){ body{overflow-x:clip} } img{max-width:100%;height:auto;display:block} a{color:var(--rose-deep);text-underline-offset:3px;text-decoration-thickness:1px} a:hover{color:var(--ink)} ul,ol{margin:0;padding:0} li{list-style:none} h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:400;line-height:1.15;letter-spacing:-.015em} p{margin:0 0 1.15em} p:last-child{margin-bottom:0} button{font:inherit} /* A11y ------------------------------------------------------------------- */ .skip-link{position:absolute;left:-9999px;top:0;z-index:999; background:var(--ink);color:#fff;padding:14px 22px;border-radius:0 0 var(--radius-control) 0} .skip-link:focus{left:0} :focus-visible{outline:3px solid var(--rose-deep);outline-offset:3px;border-radius:4px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} /* Layout ----------------------------------------------------------------- */ .wrap{width:min(100% - 48px,var(--wrap));margin-inline:auto} .wrap-narrow{width:min(100% - 48px,var(--wrap-narrow));margin-inline:auto} .section{padding-block:var(--section-y)} .section--tight{padding-block:96px} .section--oak{background:var(--oak);color:var(--ground)} .section--surface{background:var(--surface)} .prose{max-width:var(--measure)} .center{text-align:center;margin-inline:auto} /* Type ------------------------------------------------------------------- */ .kicker{font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--rose-deep);margin:0 0 18px} .section--oak .kicker{color:var(--on-oak-rose)} .display{font-size:clamp(44px,6.4vw,76px);font-weight:300;letter-spacing:-.02em} h1,.h1{font-size:clamp(36px,5vw,58px)} h2,.h2{font-size:clamp(30px,3.6vw,42px);letter-spacing:-.01em} h3,.h3{font-size:clamp(23px,2.2vw,28px);font-weight:600;letter-spacing:0} .lede{font-size:clamp(17px,1.4vw,19px);color:var(--muted)} .section--oak .lede{color:#E8E4DC} .small{font-size:14px} .muted{color:var(--muted)} .price{font-family:var(--font-body);font-weight:600;font-size:clamp(27px,2.8vw,34px); letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums} .section--oak .price{color:var(--ground)} /* Buttons ---------------------------------------------------------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;text-decoration:none;padding:18px 34px; border:0;border-radius:var(--radius-control);cursor:pointer; transition:background var(--dur-fast) var(--ease-settle),box-shadow var(--dur-fast) var(--ease-settle),color var(--dur-fast)} .btn--primary{background:var(--gold);color:var(--ink);box-shadow:var(--shadow-raised)} .btn--primary:hover{background:var(--gold-deep);color:var(--ink);box-shadow:var(--shadow-lift)} .btn--ghost{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-raised)} .btn--ghost:hover{color:var(--ink);box-shadow:var(--shadow-lift)} .section--oak .btn--ghost{background:rgba(255,255,255,.12);color:var(--ground);box-shadow:none} .btn-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center} /* Header ----------------------------------------------------------------- */ .site-header{position:sticky;top:0;z-index:60;background:rgba(255,248,246,.94); backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--whisper)} .header-bar{display:flex;align-items:center;justify-content:space-between;gap:24px; min-height:84px;padding-block:12px} .brand{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink);flex:none} .brand-mark{font-family:var(--font-display);font-size:29px;font-weight:400;line-height:1; letter-spacing:.01em;white-space:nowrap} .brand-sub{font-family:var(--font-body);font-size:9px;font-weight:600;letter-spacing:.22em; text-transform:uppercase;color:var(--muted);white-space:nowrap} .nav{display:flex;align-items:center;gap:26px;flex-wrap:nowrap} .nav a{font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap} .nav a:hover{color:var(--rose-deep)} .header-cta{display:flex;align-items:center;gap:18px} .header-phone{font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap} .nav-toggle{display:none;width:48px;height:48px;background:var(--surface); border:0;border-radius:var(--radius-control);box-shadow:var(--shadow-raised); align-items:center;justify-content:center;cursor:pointer} .nav-toggle span{display:block;width:20px;height:1.5px;background:var(--ink);position:relative} .nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0; width:20px;height:1.5px;background:var(--ink)} .nav-toggle span::before{top:-6px} .nav-toggle span::after{top:6px} /* Hero ------------------------------------------------------------------- */ .hero{position:relative;isolation:isolate;text-align:center; padding-block:84px 0;overflow:hidden} .hero > .wrap{position:relative;z-index:2} /* Background photograph. * * The source is 1920x650 (2.95:1) with the couple dead center. Forcing that * into a tall hero box crops ~60% of the width and decapitates them, so it is * anchored to the BOTTOM of the section at its own ratio instead: the type sits * on clean ground above, the veil fades the photograph up into it, and the * couple stays whole beneath the buttons. One composition, zero crop. */ .hero-bg{position:absolute;left:0;right:0;bottom:0;z-index:0;line-height:0} .hero-bg img{width:100%;height:auto;display:block} /* The type sits above the photograph, not on it, so the veil is only a short * blend band at the top edge — enough to dissolve the seam, not enough to wash * out the couple. A heavier veil greyed out their heads. */ .hero-bg::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg, var(--ground) 0%, rgba(255,248,246,.82) 5%, rgba(255,248,246,.34) 13%, rgba(255,248,246,.06) 26%, rgba(255,248,246,0) 40%, rgba(255,248,246,0) 78%, rgba(255,248,246,.58) 100%)} /* Reserve the photograph's height beneath the copy so the two never collide. * 100vw/2.95 is the rendered image height; the extra is breathing room. */ .hero-spacer{height:calc(100vw / 2.95);max-height:520px;pointer-events:none} .hero .kicker{color:var(--rose-deep)} .hero-title{margin:0 0 22px} .hero-title em{font-style:normal;display:block;color:var(--rose-deep)} .hero-sub{max-width:60ch;margin:0 auto 34px} .hero .btn-row{justify-content:center} /* One solid gold pill carrying all three proof points, divided by hairlines. * Fill is --gold and text is --ink — the same two tokens .btn--primary uses, so * the pill and the CTA are the identical gold with the identical dark type. * That pairing is 4.93:1 and clears WCAG AA; white on this gold was 2.57:1 and * did not. Dividers are ink-alpha to match the type, not white. * It is a

, so fit-content + auto margins center the pill instead of * letting it span the column. */ .hero-proof{display:flex;justify-content:center;align-items:stretch; width:fit-content;max-width:100%;margin:30px auto 0; border-radius:999px;background:var(--gold);color:var(--ink); font-size:14px;box-shadow:var(--shadow-raised)} /* block, NOT flex: a flex container turns the bare text nodes around * into anonymous flex items and drops the whitespace between them, which * renders as "4.9across1,404Google reviews". Block flow keeps real spaces. * The parent's align-items:stretch gives every cell full height so the * dividers run edge to edge; equal vertical padding centers the single line. */ .hero-proof > span{display:block;padding:11px 22px;line-height:1.5;text-align:center} .hero-proof > span + span{border-left:1px solid rgba(45,52,54,.22)} /* .stars is gold by default — invisible on a gold fill. */ .hero-proof strong,.hero-proof .stars{color:var(--ink)} .hero-proof strong{font-weight:600} /* Below ~900px the three facts no longer fit on one line, so the pill stacks * into a rounded block and the dividers turn horizontal. Still one container. */ @media (max-width:900px){ .hero-proof{flex-direction:column;border-radius:22px} .hero-proof > span{padding:10px 24px} .hero-proof > span + span{border-left:0;border-top:1px solid rgba(45,52,54,.22)} } .stars{color:var(--gold-text);letter-spacing:2px} /* Homepage hero video. In flow between the pill and the spacer, so the * absolutely positioned hero photograph is pushed down by this block's height. * .hero-video is emitted only by front-page.php, so this cannot reach the * page-standard or page-venue heroes. */ .hero-video{position:relative;width:min(760px,100%);margin:44px auto 52px;aspect-ratio:16/9; border-radius:var(--radius-card);overflow:hidden;background:var(--sunken); box-shadow:var(--shadow-lift)} .hero-video iframe{display:block;width:100%;height:100%;border:0} /* Facade. Everything inside the YouTube iframe is cross-origin and cannot be * styled, so the resting state is ours and the iframe is injected on click. */ .hero-video__play{position:absolute;inset:0;display:block;width:100%;height:100%; padding:0;border:0;background:none;cursor:pointer;font:inherit;color:inherit} .hero-video__play img{width:100%;height:100%;object-fit:cover} .hero-video__scrim{position:absolute;inset:0;background:linear-gradient(180deg, rgba(45,52,54,.12) 0%,rgba(45,52,54,0) 40%,rgba(45,52,54,.44) 100%)} .hero-video__btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:84px;height:84px;border-radius:50%;background:var(--gold);color:var(--ink); display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lift); transition:transform var(--dur-fast) var(--ease-settle),background var(--dur-fast) var(--ease-settle)} .hero-video__btn svg{margin-left:4px} .hero-video__label{position:absolute;left:0;right:0;bottom:20px; font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:#fff;text-shadow:0 1px 12px rgba(45,52,54,.55)} .hero-video__play:hover .hero-video__btn{transform:translate(-50%,-50%) scale(1.07); background:var(--gold-deep)} .hero-video__play:focus-visible{outline:3px solid var(--rose-deep);outline-offset:4px} /* Cards ------------------------------------------------------------------ */ .grid{display:grid;gap:32px} .grid--3{grid-template-columns:repeat(3,1fr)} .grid--2{grid-template-columns:repeat(2,1fr)} .card{background:var(--surface);border-radius:var(--radius-card);overflow:hidden; box-shadow:var(--shadow-raised);display:flex;flex-direction:column; transition:box-shadow var(--dur-fast) var(--ease-settle)} .card:hover{box-shadow:var(--shadow-lift)} .card img{width:100%;aspect-ratio:3/2;object-fit:cover} .card-body{padding:40px;display:flex;flex-direction:column;gap:14px;flex:1} .card-meta{display:flex;align-items:baseline;justify-content:space-between;gap:16px; padding-top:18px;border-top:1px solid var(--whisper);margin-top:auto} .card-meta .price{font-size:24px} .capacity{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .card-link{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--rose-deep);text-decoration:none} /* Included list ---------------------------------------------------------- */ .included{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--whisper); border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-raised)} .included li{background:var(--surface);padding:32px 30px} .included h3{font-family:var(--font-body);font-size:15px;font-weight:600;letter-spacing:.04em; margin:0 0 8px;display:flex;align-items:center;gap:10px} .included p{font-size:14px;color:var(--muted);margin:0} .not-included{margin-top:26px;font-size:14px;color:var(--muted);max-width:var(--measure)} /* Split ------------------------------------------------------------------ */ .split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center} .split img{border-radius:var(--radius-card);box-shadow:var(--shadow-raised); aspect-ratio:4/5;object-fit:cover;width:100%} .split--wide{grid-template-columns:1.05fr .95fr} /* Quote ------------------------------------------------------------------ */ .quote{background:var(--surface);border-radius:var(--radius-card);padding:64px; box-shadow:var(--shadow-raised);max-width:var(--wrap-narrow);margin-inline:auto} .quote blockquote{margin:0;font-family:var(--font-display);font-size:clamp(22px,2.4vw,30px); line-height:1.4;color:var(--ink)} .quote cite{display:block;margin-top:26px;font-family:var(--font-body);font-size:14px; font-style:normal;color:var(--muted)} .quote cite strong{color:var(--ink);font-weight:600} /* Steps ------------------------------------------------------------------ */ .steps{counter-reset:step;display:grid;gap:2px;background:rgba(255,255,255,.14); border-radius:var(--radius-card);overflow:hidden;grid-template-columns:repeat(3,1fr)} .steps li{counter-increment:step;background:var(--oak);padding:40px 34px} .steps li::before{content:"0" counter(step);display:block;font-family:var(--font-display); font-size:34px;color:var(--rose);margin-bottom:14px} .steps h3{font-size:22px;color:var(--ground);margin:0 0 8px} .steps p{font-size:14px;color:#E8E4DC;margin:0} /* Gallery ---------------------------------------------------------------- */ .gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:16px} .gallery img{border-radius:var(--radius-card);box-shadow:var(--shadow-raised); aspect-ratio:4/5;object-fit:cover;width:100%} .gallery li:first-child{grid-column:span 2} .gallery li:first-child img{aspect-ratio:8/5} /* Final CTA -------------------------------------------------------------- */ .cta-panel{background:var(--surface);border-radius:var(--radius-card);padding:80px 64px; box-shadow:var(--shadow-raised);text-align:center} .cta-panel .btn-row{justify-content:center;margin-top:32px} .cta-note{margin-top:22px;font-size:14px;color:var(--muted)} /* Footer ----------------------------------------------------------------- */ .site-footer{background:var(--oak-deep);color:var(--ground);padding-block:80px 40px;margin-top:0} .footer-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:40px} .site-footer h3{font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--rose);margin:0 0 18px} .site-footer a{color:var(--ground);text-decoration:none;font-size:15px} .site-footer a:hover{color:var(--rose);text-decoration:underline} .site-footer li{margin-bottom:10px} .site-footer p{font-size:15px;color:#D9D6CE} .footer-bottom{margin-top:56px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14); display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-size:13px;color:#BFBCB4} /* Sticky mobile CTA ------------------------------------------------------ */ .sticky-cta{display:none} /* Motion ----------------------------------------------------------------- */ .has-motion [data-anim]{opacity:0} .has-motion [data-anim].is-in{opacity:1} @media (prefers-reduced-motion:reduce){ .has-motion [data-anim]{opacity:1!important;transform:none!important} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important} } /* Responsive ------------------------------------------------------------- */ @media (max-width:1040px){ .grid--3,.included{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:repeat(2,1fr);gap:32px 40px} .steps{grid-template-columns:1fr} .split{gap:48px} .gallery{grid-template-columns:repeat(3,1fr)} } @media (max-width:860px){ :root{--section-y:var(--section-y-mobile)} body{font-size:16px} .wrap,.wrap-narrow{width:min(100% - 32px,var(--wrap))} .grid--3,.grid--2,.included,.split,.split--wide{grid-template-columns:1fr} .split img{aspect-ratio:4/3} .gallery{grid-template-columns:repeat(2,1fr)} .gallery li:first-child{grid-column:span 2} .card-body,.quote{padding:28px} .quote{padding:36px 28px} .cta-panel{padding:48px 26px} .hero{padding-block:52px 0} /* 4/3 keeps ~45% of the panorama's height; biasing to 6% puts that band across the couple's heads and torsos, not their knees. */ .hero-bg img{aspect-ratio:4/3;object-fit:cover;object-position:50% 6%} .hero-spacer{height:calc(100vw / 1.3333);max-height:none} .hero-bg::after{background:linear-gradient(180deg, var(--ground) 0%, rgba(255,248,246,.78) 4%, rgba(255,248,246,.26) 11%, rgba(255,248,246,.04) 22%, rgba(255,248,246,0) 36%, rgba(255,248,246,0) 82%, rgba(255,248,246,.50) 100%)} .footer-grid{grid-template-columns:1fr;gap:40px} .btn{width:100%} .hero .btn-row .btn{width:auto;flex:1 1 auto} } @media (max-width:420px){ .hero-video{margin:30px auto 34px;border-radius:16px} .hero-video__btn{width:62px;height:62px} .hero-video__btn svg{width:20px;height:20px} .hero-video__label{bottom:14px;font-size:10px} .hero-proof{font-size:13px} .hero-proof > span{padding:9px 18px} .brand-mark{font-size:25px} } /* ========================================================================== Ornamental layer — filigree, corners, frames, monogram Added at operator direction: "flourishes, corners, filigree. It's a wedding venue, not a postcard." Deliberate deviation from the DNA's minimal default. ========================================================================== */ .orn{display:block;fill:none} .orn--divider{width:min(420px,72%);height:auto;margin:0 auto;color:var(--rose)} .orn--rule{width:140px;height:auto;margin:0 auto 20px;color:var(--gold)} .orn--leaf{width:20px;height:20px;color:var(--oak)} .orn--monogram{color:var(--rose)} .section--oak .orn--divider,.section--oak .orn--rule{color:var(--rose)} .site-footer .orn--monogram{color:var(--rose);opacity:.9} /* Section divider band ---------------------------------------------------- */ .divider{padding-block:12px;display:flex;justify-content:center} .divider--tight{padding-block:0} /* Kicker with flanking rules ---------------------------------------------- */ .kicker--flanked{display:flex;align-items:center;justify-content:center;gap:16px} .kicker--flanked::before,.kicker--flanked::after{content:"";height:1px;width:clamp(24px,6vw,64px); background:linear-gradient(90deg,transparent,var(--gold))} .kicker--flanked::after{background:linear-gradient(270deg,transparent,var(--gold))} /* Framed panels — corner scrolls + inner hairline -------------------------- */ .ornate{position:relative} .ornate::after{content:"";position:absolute;inset:14px;border:1px solid var(--whisper); border-radius:calc(var(--radius-card) - 8px);pointer-events:none} .section--oak .ornate::after{border-color:rgba(226,188,193,.34)} .corners{position:absolute;inset:0;pointer-events:none;color:var(--rose)} .corners .orn--corner{position:absolute;width:44px;height:44px} .corners .orn--corner:nth-child(1){top:10px;left:10px} .corners .orn--corner:nth-child(2){top:10px;right:10px;transform:scaleX(-1)} .corners .orn--corner:nth-child(3){bottom:10px;right:10px;transform:scale(-1)} .corners .orn--corner:nth-child(4){bottom:10px;left:10px;transform:scaleY(-1)} .section--oak .corners{color:rgba(226,188,193,.6)} /* Framed photography ------------------------------------------------------ */ .framed{position:relative;padding:14px} .framed::before{content:"";position:absolute;inset:0;border:1px solid var(--rose); border-radius:var(--radius-card);opacity:.55;pointer-events:none} .framed img{border-radius:calc(var(--radius-card) - 6px)} .framed--gold::before{border-color:var(--gold);opacity:.45} /* Header logo ------------------------------------------------------------- */ .brand{flex-direction:row;align-items:center;gap:14px} .brand-logo{height:34px;width:auto;max-width:300px;flex:none} .brand-logo--mark{display:none;height:40px;width:40px} /* The "Saxon Manor / Brooksville, Florida" lockup exists only to give the * square mark a name. The full logo already says it, so this is hidden * wherever that logo is showing — same breakpoint as the mark swap below, so * the two can never drift apart. */ .brand-copy{display:none;flex-direction:column;gap:2px; padding-left:14px;border-left:1px solid var(--whisper)} /* Included list gets a sprig ---------------------------------------------- */ .included h3 .orn--leaf{flex:none} /* Ornament inside the venue cards ----------------------------------------- */ .card{position:relative} .card-crest{position:absolute;top:14px;right:14px;z-index:2;width:46px;height:46px; display:grid;place-items:center;border-radius:50%; background:rgba(255,248,246,.92);color:var(--rose-deep);box-shadow:var(--shadow-raised)} .card-crest .orn--leaf{width:22px;height:22px;color:inherit} /* Photo strip ------------------------------------------------------------- */ .strip{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .strip figure{margin:0} .strip img{aspect-ratio:3/4;object-fit:cover;width:100%;border-radius:var(--radius-card); box-shadow:var(--shadow-raised)} .strip figcaption{margin-top:14px;font-size:13px;letter-spacing:.14em;text-transform:uppercase; font-weight:600;color:var(--muted);text-align:center} /* Richer gallery ---------------------------------------------------------- */ .gallery{grid-template-columns:repeat(4,1fr);gap:20px} .gallery li:first-child{grid-column:span 2;grid-row:span 2} .gallery li:first-child img{aspect-ratio:auto;height:100%} .gallery img{aspect-ratio:4/5} /* Monogram block ---------------------------------------------------------- */ .monogram-block{display:flex;flex-direction:column;align-items:center;gap:10px; margin-bottom:26px} /* Footer flourish --------------------------------------------------------- */ .footer-crest{display:flex;justify-content:center;margin-bottom:44px} @media (max-width:1040px){ .strip{grid-template-columns:repeat(3,1fr);gap:14px} .gallery{grid-template-columns:repeat(3,1fr)} .gallery li:first-child{grid-column:span 2;grid-row:span 1} .gallery li:first-child img{aspect-ratio:4/5} } @media (max-width:860px){ .corners .orn--corner{width:32px;height:32px} .ornate::after{inset:10px} .strip{grid-template-columns:1fr 1fr;gap:12px} .strip figure:last-child{grid-column:span 2} .strip figure:last-child img{aspect-ratio:16/10} .gallery{grid-template-columns:repeat(2,1fr);gap:12px} .gallery li:first-child{grid-column:span 2} } /* Included: the leaf sprig replaces the tick — one mark, not two. */ .included h3 .orn--leaf{width:19px;height:19px;color:var(--ok);flex:none} .included li{position:relative} .included li::after{content:"";position:absolute;left:30px;right:30px;bottom:0;height:1px; background:linear-gradient(90deg,var(--whisper),transparent)} /* ========================================================================== Crop discipline — "we don't sell weddings to headless horsemen" Rule: never force a portrait source into a landscape box (or vice versa), and always bias the crop toward the top third where faces live. ========================================================================== */ /* Venue cards: sources are 800x800 squares from each venue's own page. Show them uncropped. */ .card img{aspect-ratio:1/1;object-position:50% 50%} /* Spaces strip: sources are 1920x650 banners. Never crop them to portrait. */ .strip img{aspect-ratio:12/5;object-position:50% 42%} /* Feature/rain image: 536x377 landscape source. */ .split img,.framed img{aspect-ratio:3/2;object-position:50% 25%} /* Hero background sits at its native ratio — nothing to re-crop. */ /* Gallery: masonry columns — natural proportions, zero cropping. */ .gallery{display:block;column-count:4;column-gap:20px} .gallery li{break-inside:avoid;margin:0 0 20px} .gallery li:first-child{grid-column:auto;grid-row:auto} .gallery img{aspect-ratio:auto;height:auto;width:100%;object-fit:fill} .gallery li:first-child img{aspect-ratio:auto;height:auto} @media (max-width:1040px){ .gallery{column-count:3} .strip img{aspect-ratio:2/1} } @media (max-width:860px){ .gallery{column-count:2;column-gap:12px} .gallery li{margin-bottom:12px} .card img{aspect-ratio:1/1} .split img,.framed img{aspect-ratio:4/3} /* Strip stacks two-up; keep the banner proportion, don't re-crop. */ .strip img{aspect-ratio:16/9} .strip figure:last-child img{aspect-ratio:16/9} } /* Hero background sits at its native ratio — nothing to re-crop. */ /* The problem-section steps sit in a half-width column — three across made every line break after two words. Stack them. */ .split--wide .steps{grid-template-columns:1fr} .split--wide .steps li{padding:28px 32px} .split--wide .steps li::before{font-size:28px;margin-bottom:8px} /* ========================================================================== Damask grounds · ornamental border strips · drop caps ========================================================================== */ /* --- Damask ground ------------------------------------------------------- Applied to a section as a very low-opacity tiled motif behind content. Kept under 0.05 effective contrast so body text never loses legibility — pattern is texture, not decoration you read. */ .section--damask{position:relative;isolation:isolate} .section--damask::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:url("../img/damask.svg"); background-repeat:repeat;background-size:200px 240px; opacity:.16; /* fade the pattern out at the edges so it reads as a ground, not wallpaper */ -webkit-mask-image:radial-gradient(120% 80% at 50% 50%,#000 55%,transparent 100%); mask-image:radial-gradient(120% 80% at 50% 50%,#000 55%,transparent 100%); } .section--oak.section--damask::before{ background-image:url("../img/damask-light.svg"); opacity:.11; } /* --- Ornamental border strip --------------------------------------------- A repeating gold band that caps a section top and/or bottom. */ .border-strip{ height:28px;width:100%; background-image:url("../img/border-band.svg"); background-repeat:repeat-x;background-position:center;background-size:auto 28px; opacity:.55; } .border-strip--soft{opacity:.34} .section--banded{position:relative} .section--banded::after, .section--banded::before{} .band-top{margin-bottom:0} .band-bottom{margin-top:0} .section--oak .border-strip{filter:saturate(140%) brightness(1.35)} /* --- Drop caps ----------------------------------------------------------- Long-form copy only. Never on a lede, never on a short paragraph, never on mobile below 480px where it eats a third of the line. */ .has-dropcap::first-letter{ float:left; font-family:var(--font-display); font-weight:400; font-size:4.15em; line-height:.82; padding:.06em .12em 0 0; margin:.04em .06em 0 0; color:var(--rose-deep); } .section--oak .has-dropcap::first-letter{color:var(--rose)} /* The paragraph after a drop cap reads better with its opening in small caps */ .has-dropcap{overflow:hidden} @media (max-width:480px){ .has-dropcap::first-letter{font-size:3.2em;padding-right:.1em} } @media (max-width:860px){ .section--damask::before{background-size:150px 180px;opacity:.13} .border-strip{height:22px;background-size:auto 22px} } /* A drop cap directly under a heading needs breathing room the paragraph flow doesn't give it. */ h2 + .has-dropcap, h2 + div > .has-dropcap:first-child, .prose > .has-dropcap:first-child{margin-top:.55em} .has-dropcap::first-letter{font-size:3.9em;line-height:.84} /* --- Monogram ------------------------------------------------------------ Letters are HTML text centered over the wreath: the webfont applies reliably, the baseline is ours to control, and it scales with the mark. */ .monogram{position:relative;display:inline-grid;place-items:center; width:104px;height:104px;line-height:0} .monogram .orn--monogram{position:absolute;inset:0;width:100%;height:100%} .monogram-letters{position:relative;font-family:var(--font-display); font-weight:400;font-size:38px;line-height:1;letter-spacing:.04em; color:currentColor; /* optical centring — Cormorant's cap height sits high in the em box */ transform:translateY(.045em)} .monogram-block .monogram{color:var(--rose)} .site-footer .monogram{color:var(--rose)} .section--oak .monogram{color:var(--rose)} @media (max-width:860px){ .monogram{width:84px;height:84px} .monogram-letters{font-size:31px} } /* ========================================================================== SONIC BOOM — conversion layer (stage 3.5) ========================================================================== */ /* Trust strip — sits at the decision moments, not just the hero ---------- */ .trust-strip{display:flex;flex-wrap:wrap;justify-content:center;align-items:center; gap:14px 34px;margin:0 auto 44px;padding:18px 26px;max-width:940px; background:var(--surface);border-radius:var(--radius-control); box-shadow:var(--shadow-raised);font-size:13px;letter-spacing:.03em; text-transform:uppercase;color:var(--muted);text-align:center} .trust-strip strong{color:var(--ink);font-weight:600} .trust-strip .stars{color:var(--gold-text);letter-spacing:.08em;text-transform:none} .section--oak .trust-strip{background:rgba(255,255,255,.07);box-shadow:none; color:#E8E4DC;border:1px solid rgba(255,255,255,.16)} .section--oak .trust-strip strong{color:var(--ground)} .trust-strip li{list-style:none} ul.trust-strip{padding-inline:26px} /* Method name — the process section's branded title ---------------------- */ .method-name{font-family:var(--font-display);font-style:italic;color:var(--gold-text)} .section--oak .method-name{color:var(--on-oak-gold)} /* FAQ -------------------------------------------------------------------- */ .faq{list-style:none;margin:0 auto;padding:0;max-width:880px} .faq li + li{margin-top:12px} .faq details{background:var(--surface);border-radius:var(--radius-control); box-shadow:var(--shadow-raised);overflow:hidden} .faq summary{cursor:pointer;list-style:none;padding:24px 62px 24px 28px;position:relative; font-family:var(--font-display);font-size:23px;line-height:1.3;color:var(--ink)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";position:absolute;right:28px;top:34px;width:11px;height:11px; border-right:1.4px solid var(--rose-deep);border-bottom:1.4px solid var(--rose-deep); transform:rotate(45deg);transition:transform var(--dur-fast) var(--ease-settle)} .faq details[open] summary::after{transform:rotate(-135deg);top:38px} .faq summary:hover{color:var(--rose-deep)} .faq summary:focus-visible{outline:2px solid var(--rose-deep);outline-offset:-3px} .faq .faq-a{padding:0 28px 26px;margin:0;max-width:var(--measure); font-size:16px;color:var(--muted)} /* Tour form -------------------------------------------------------------- */ .tour-form{margin-top:38px;text-align:left} .tour-form .field{margin-bottom:18px} .tour-form label{display:block;font-size:13px;letter-spacing:.05em; text-transform:uppercase;color:var(--muted);margin-bottom:7px} .tour-form input,.tour-form select,.tour-form textarea{ width:100%;font-family:var(--font-body);font-size:16px;color:var(--ink); background:var(--sunken);border:1px solid transparent;border-radius:var(--radius-control); padding:14px 16px;box-shadow:var(--shadow-inset); transition:border-color var(--dur-fast) var(--ease-settle)} .tour-form textarea{min-height:96px;resize:vertical} .tour-form input:focus,.tour-form select:focus,.tour-form textarea:focus{ outline:none;border-color:var(--rose-deep)} .tour-form .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .tour-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .tour-form .form-actions{display:flex;flex-wrap:wrap;gap:12px; justify-content:space-between;align-items:center;margin-top:26px} .tour-form .form-note{font-size:13px;color:var(--muted);margin:14px 0 0;text-align:center} .tour-form [data-form-status]{margin-top:16px;padding:14px 16px;border-radius:var(--radius-control); background:rgba(163,59,59,.08);color:var(--danger);font-size:14px} .form-done{text-align:center;padding:22px 0} .form-done .lede{max-width:var(--measure);margin-inline:auto} /* Progress indicator — only rendered once JS steps the form */ .progress{display:none;align-items:center;gap:16px;margin-bottom:26px} .tour-form.is-stepped .progress{display:flex} .progress-track{flex:1 1 auto;height:4px;border-radius:999px;background:var(--whisper);overflow:hidden} .progress-bar{display:block;height:100%;width:33.333%;background:var(--gold); border-radius:999px;transition:width var(--dur-base) var(--ease-settle)} .progress-label{flex:0 0 auto;font-size:12px;letter-spacing:.08em; text-transform:uppercase;color:var(--muted);white-space:nowrap} .tour-form:not(.is-stepped) [data-next], .tour-form:not(.is-stepped) [data-back]{display:none} .tour-form:not(.is-stepped) [data-step]{display:block !important} /* Three ways to act — the close ------------------------------------------ */ .paths{display:grid;grid-template-columns:repeat(3,1fr);gap:14px; list-style:none;margin:34px 0 0;padding:0} .paths li{background:var(--sunken);border-radius:var(--radius-control); padding:20px 18px;text-align:center} .paths .path-label{display:block;font-size:12px;letter-spacing:.08em; text-transform:uppercase;color:var(--muted);margin-bottom:6px} .paths a{display:block;font-family:var(--font-display);font-size:20px; color:var(--rose-text);text-decoration:none;line-height:1.25} .paths a:hover{color:var(--ink);text-decoration:underline} .paths .path-note{display:block;font-size:12px;color:var(--muted);margin-top:5px} @media (max-width:860px){ .paths{grid-template-columns:1fr} .tour-form .field-row{grid-template-columns:1fr} .faq summary{font-size:20px;padding:20px 52px 20px 22px} .faq summary::after{right:22px} .faq .faq-a{padding:0 22px 22px} .trust-strip{gap:10px 22px;font-size:12px;padding:16px 18px} .tour-form .form-actions{justify-content:stretch} .tour-form .form-actions .btn{flex:1 1 100%} } /* .btn is display:inline-flex, which outranks the UA [hidden] rule — the multi-step Back button stayed visible on step 1 without this. */ [hidden]{display:none !important} /* ========================================================================== Stage 4 — venue pages. Sits before the compact-header block so that block stays last in the cascade. ========================================================================== */ /* A venue hero carries a breadcrumb and a shorter headline than the homepage, so it needs less vertical room above the photograph. */ .hero--venue{padding-top:56px} .hero--venue .hero-title{margin-bottom:18px} .hero--venue .hero-sub{max-width:64ch} .crumbs{display:flex;justify-content:center;align-items:center;gap:10px; font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted); margin:0 0 26px} .crumbs a{color:var(--rose-deep);text-decoration:none} .crumbs a:hover{text-decoration:underline} .crumbs [aria-current]{color:var(--muted)} /* Fit / not-fit — the honest two-column qualifier. */ .fit{display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:start} .fit .kicker{color:var(--rose-deep);margin-bottom:20px} .ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px} .ticks li{display:flex;gap:14px;align-items:flex-start;font-size:16px;line-height:1.6} .ticks .orn--leaf{flex:0 0 20px;width:20px;height:20px;margin-top:3px;color:var(--oak)} .ticks--muted li{color:var(--muted);font-size:15px} .ticks--muted li::before{content:"—";flex:0 0 auto;color:var(--whisper);font-weight:600} /* Four-up venue gallery. Deliberately not .gallery — that one carries a first-child span rule tuned for a twelve-image masonry. */ .gallery-quad{list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .gallery-quad img{width:100%;aspect-ratio:1/1;object-fit:cover; border-radius:var(--radius-card);box-shadow:var(--shadow-raised);display:block} /* Grouped gallery on /gallery/ — one quad grid per venue, plus the estate. */ .gal-group + .gal-group{margin-top:56px} .gal-group .kicker{margin-bottom:22px} .gal-group .kicker a{color:inherit;text-decoration:none;border-bottom:1px solid var(--whisper)} .gal-group .kicker a:hover{color:var(--rose-deep)} /* Whole-card link for the cross-sell pair. */ .card-hit{display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit} .card-hit:hover h3{color:var(--rose-deep)} .card-hit h3{transition:color var(--dur-fast) var(--ease-settle)} @media (max-width:1040px){ .fit{gap:48px} .gallery-quad{gap:16px} } @media (max-width:860px){ .hero--venue{padding-top:32px} .fit{grid-template-columns:1fr;gap:44px} .gallery-quad{grid-template-columns:repeat(2,1fr)} .crumbs{margin-bottom:20px} } @media (max-width:420px){ .gallery-quad{grid-template-columns:1fr} } /* Standard pages ---------------------------------------------------------- */ .split--flip > div{order:2} .split--flip > figure{order:1} .section .prose + .prose{margin-top:20px} @media (max-width:860px){ .split--flip > div{order:1} .split--flip > figure{order:2} } /* Related-guide clusters (Tier A children). Sits above the compact-header block. */ .guide-links{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 32px;margin-top:20px;list-style:none;padding:0} .guide-links li{margin:0} .guide-links a{display:flex;align-items:flex-start;gap:10px;text-decoration:none; color:var(--ink);padding:10px 0;border-bottom:1px solid var(--whisper);transition:color .2s} .guide-links a:hover{color:var(--accent)} .guide-links svg{flex:0 0 auto;margin-top:.25em} @media (max-width:860px){.guide-links{grid-template-columns:1fr;gap:0}} /* ========================================================================== Compact header — last in the cascade so it beats the base header rules. ========================================================================== */ /* Compact header. * * The desktop bar — 300px brand + six nav links + phone + button — measures * 1159px and starts spilling past the viewport edge below ~1160px. The 1000px * breakpoint this used to carry was sized for an older five-link nav that * needed 961px, so 1001-1160px rendered a header wider than the screen. * Measured 2026-09-09: spill is +19px at 1140 and -21px at 1180. * * The hamburger therefore takes over here, not at 860 or 1000. The sticky * Call/Book bar switches on at the same width, because this is also where the * header's own CTA button is hidden: the two must never both be absent. * nav.js closes the open menu on resize at this same width — keep them equal. */ @media (max-width:1180px){ .brand-logo{display:none} .brand-logo--mark{display:block} .brand-copy{display:flex;padding-left:12px} .nav-toggle{display:flex} .nav{position:fixed;inset:84px 0 auto;flex-direction:column;align-items:stretch;gap:0; background:var(--ground);padding:12px 16px 28px;border-bottom:1px solid var(--whisper); box-shadow:var(--shadow-raised);transform:translateY(-8px);opacity:0;visibility:hidden; transition:opacity var(--dur-fast) var(--ease-settle),transform var(--dur-fast) var(--ease-settle),visibility var(--dur-fast)} .nav.is-open{opacity:1;visibility:visible;transform:none} .nav a{padding:16px 8px;border-bottom:1px solid var(--whisper);font-size:16px} .header-phone{display:none} .brand-mark{font-size:26px} .header-cta .btn{display:none} /* Sticky conversion bar */ .sticky-cta{display:flex;position:fixed;left:0;right:0;bottom:0;width:100%;max-width:100%;z-index:70;gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:var(--ground);backdrop-filter:blur(12px); border-top:1px solid var(--whisper);box-shadow:0 -8px 28px rgba(45,52,54,.10)} .sticky-cta .btn{flex:1 1 0;min-width:0;padding:16px 12px;font-size:13px} /* Only go translucent where the blur behind it actually renders. Without the blur, a see-through bar over scrolling photography is unreadable. */ @supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)){ .sticky-cta{background:rgba(255,248,246,.97);-webkit-backdrop-filter:blur(12px)} } body{padding-bottom:82px} } /* Footer vendor badges ---------------------------------------------------- * The Knot and WeddingWire marketplace seals. Both are third-party artwork on * third-party color, so the row gives them air rather than trying to make * them match the palette — a tinted or recoloured badge is a license problem, * not a design choice. * * The badges carry the footer's top rule because they now sit above the social * row; the sibling selector below takes it back off .footer-social so the two * do not draw a line each. * * Height is held here as well as on the img attribute so the WeddingWire seal, * whose intrinsic width is unknown, scales on its own aspect ratio instead of * being squashed to a guessed box. */ .footer-badges{display:flex;flex-wrap:wrap;justify-content:center;align-items:center; gap:18px 24px;margin:0 0 20px;padding-top:26px;border-top:1px solid var(--whisper)} .footer-badge{display:inline-flex;align-items:center;line-height:0; padding:12px 16px;border-radius:var(--radius-card);background:var(--ground); transition:box-shadow var(--dur-fast) var(--ease-settle), transform var(--dur-fast) var(--ease-settle)} .footer-badge:hover{box-shadow:var(--shadow-raised);transform:translateY(-2px)} .footer-badge img{display:block;width:auto;height:75px;max-width:100%} .footer-badges + .footer-social{padding-top:0;border-top:0} @media (prefers-reduced-motion:reduce){ .footer-badge{transition:none} .footer-badge:hover{transform:none} } @media (max-width:480px){ .footer-badges{gap:14px 18px} .footer-badge img{height:64px} } /* Footer social — the on-page half of the sameAs entity anchor. */ .footer-social{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px; margin:0 0 18px;padding-top:22px;border-top:1px solid var(--whisper)} /* --ink and --muted were written for the light page body and were inherited * here by mistake: measured against --oak-deep #3A4A3E, #2D3436 is 1.35:1 and * #6B6260 is 1.59:1, both far under the 4.5:1 floor, and it is why the social * and legal rows read as smudges in a footer screenshot. The replacements * measure 8.98:1 (--ground) and 5.47:1 (--rose). --ground and --rose are the footer's own * text colors and are what the rest of .site-footer already uses. */ .footer-social a{font-size:13px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--ground);text-decoration:none} .footer-social a:hover{color:var(--rose)} /* HTML sitemap ------------------------------------------------------------ * Two or three columns of short links. The list is long — 250 pages — so the * job here is scanning, not reading: tight leading, a heading that separates * groups without shouting, and no ornaments per row. */ .sitemap-group{margin:0 0 40px} .sitemap-group h3{margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--whisper); font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--muted)} .sitemap-group ul{list-style:none;margin:0;padding:0; columns:2;column-gap:36px} .sitemap-group li{break-inside:avoid;margin:0 0 9px} .sitemap-group a{font-size:15px;line-height:1.45;color:var(--ink);text-decoration:none; border-bottom:1px solid transparent} .sitemap-group a:hover{color:var(--rose-deep);border-bottom-color:currentColor} @media (min-width:1000px){ .sitemap-group ul{columns:3} } @media (max-width:640px){ .sitemap-group ul{columns:1} } /* Footer legal row — policy links live here and nowhere else. */ .footer-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px; margin:0 0 16px} .footer-legal a{font-size:12px;color:var(--rose);text-decoration:none} .footer-legal a:hover{color:var(--ground);text-decoration:underline} /* Sourced reviews --------------------------------------------------------- * Long verbatim quotes, so the job is readability at length: a measure that * does not run past ~66 characters, and a citation that reads as a record * rather than a flourish. */ .reviews{list-style:none;margin:0;padding:0;display:grid;gap:26px} .review{padding:30px 32px;border:1px solid var(--whisper);border-radius:var(--radius-card); background:var(--paper)} .review blockquote{margin:0;padding:0;border:0;font-size:16px;line-height:1.68;color:var(--ink)} .review blockquote p{margin:0 0 14px;max-width:62ch} .review blockquote p:last-child{margin-bottom:0} .review-cite{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--whisper); font-size:13px;color:var(--muted)} .review-cite strong{color:var(--ink);font-weight:600} .review-cite span{display:inline} @media (min-width:900px){ .reviews{grid-template-columns:repeat(2,1fr)} /* First review spans both columns — it is the longest and the most specific, * and a two-column grid would otherwise set it in a narrow well. */ .review:first-child{grid-column:1/-1} } @media (max-width:640px){ .review{padding:24px 22px} .review blockquote{font-size:15px} } /* Award badges ------------------------------------------------------------ */ .awards{list-style:none;margin:0;padding:0;display:grid;gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .awards a{display:flex;flex-direction:column;gap:6px;height:100%; padding:24px 26px;border:1px solid var(--gold);border-radius:var(--radius-card); background:var(--paper);text-decoration:none; transition:box-shadow var(--dur-fast) var(--ease-settle)} .awards a:hover{box-shadow:var(--shadow-raised)} .award-name{font-family:var(--font-display);font-size:19px;line-height:1.3;color:var(--ink)} .award-years{font-size:13px;letter-spacing:.06em;color:var(--muted)} .award-count{margin-top:auto;padding-top:10px;font-size:12px;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--rose-deep)} /* Glossary ---------------------------------------------------------------- */ .glossary{margin:0;padding:0} .glossary-item{padding:22px 0;border-bottom:1px solid var(--whisper);scroll-margin-top:100px} .glossary-item:first-child{padding-top:0} .glossary dt{margin:0 0 8px;font-family:var(--font-display);font-size:21px; line-height:1.3;color:var(--ink)} .glossary-aka{display:inline-block;margin-left:8px;font-family:var(--font-body); font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--muted)} .glossary dd{margin:0;max-width:var(--measure);font-size:16px;line-height:1.68; color:var(--muted)} @media (max-width:640px){ .glossary dt{font-size:19px} .glossary-aka{display:block;margin:6px 0 0} } /* The team ---------------------------------------------------------------- * Deliberately not a photo grid — there are no photographs of these people and * a stock headshot would be a lie. Name, role, and what a couple said. */ .team-group{margin:0 0 38px} .team-group:last-child{margin-bottom:0} .team-group > .kicker{margin:0 0 16px} .team{list-style:none;margin:0;padding:0;display:grid;gap:18px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .team-member{display:flex;flex-direction:column;padding:24px 26px; border:1px solid var(--whisper);border-radius:var(--radius-card);background:var(--paper)} .team-name{margin:0;font-family:var(--font-display);font-size:23px;line-height:1.2;color:var(--ink)} .team-role{margin:4px 0 0;font-size:12px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--rose-deep)} .team-quote{margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--whisper); font-size:15px;line-height:1.6;color:var(--muted)} .team-quote::before{content:"\201C"} .team-quote::after{content:"\201D"} .team-cite{margin:8px 0 0;font-size:12px;letter-spacing:.04em;color:var(--muted)} @media (max-width:640px){ .team{grid-template-columns:1fr} .team-member{padding:20px 22px} }