/* Self-hosted fonts. Previously two render-blocking requests to fonts.googleapis.com + fonts.gstatic.com, which PageSpeed measured at 1,780ms of render-blocking on throttled mobile. Same origin now, so no extra DNS/TLS, and preloaded in the . Public Sans is the variable cut: one 26KB file covering 400-700 instead of four static weights totalling 105KB. font-display:optional keeps text visible while loading; the size-adjust values below match the fallback metrics so the swap barely moves anything, which is what stops it costing CLS. */ @font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: optional; src: url('fonts/instrument-serif-400.woff2') format('woff2'); } @font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: optional; src: url('fonts/instrument-serif-400-italic.woff2') format('woff2'); } @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400 700; font-display: optional; src: url('fonts/public-sans-var.woff2') format('woff2-variations'); } /* Metric-matched fallbacks. These numbers are MEASURED from the real font tables (fontTools: OS/2 sTypoAscender/Descender, sxHeight), not estimated — the first attempt guessed and scaled Georgia the wrong way, which is what left the h1 shrinking 48px on swap and the promise strip rewrapping. Instrument Serif asc .990 desc .310 x-height .510 Georgia asc .917 desc .219 x-height .482 Public Sans asc .950 desc .225 x-height .517 Arial asc .905 desc .212 x-height .519 size-adjust matches the fallback's x-height to the real face; the overrides are then the real face's metrics divided by that adjustment. */ @font-face { font-family: 'Instrument Fallback'; src: local('Georgia'), local('Times New Roman'), local('serif'); size-adjust: 105.9%; ascent-override: 93.5%; descent-override: 29.3%; line-gap-override: 0%; } @font-face { font-family: 'Public Fallback'; src: local('Arial'), local('Segoe UI'), local('Helvetica'), local('sans-serif'); size-adjust: 99.6%; ascent-override: 95.4%; descent-override: 22.6%; line-gap-override: 0%; } /* ========================================================================== CANOWINDRA CARE NETWORK Editorial / high-contrast. Type and space do the work — no card grids. Palette: warm white + near-black ink, deep eucalypt for the one heavy block, clay as the single accent. Clay is a LIGHT-BACKGROUND colour only (2.4:1 on eucalypt — never put it there). On green, use sand #D9CFC0. ========================================================================== */ :root{ --paper:#FBF8F3; --cream:#F2EDE3; --ink:#171512; --euc:#23483C; --euc-dark:#1A3831; --clay:#A8412A; --sand:#D9CFC0; --muted:#6B655C; --rule:#E3DDD2; /* decorative hairlines only */ --rule-strong:#6B655C; /* anything interactive — 5.4:1 on paper */ --serif:'Instrument Serif','Instrument Fallback',Georgia,serif; --sans:'Public Sans','Public Fallback','Segoe UI',system-ui,sans-serif; --wrap:1280px; --gut:clamp(24px,5vw,64px); --margin-col:clamp(90px,12vw,180px); } html{font-size:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth} html[data-size="lg"]{font-size:112.5%} html[data-size="xl"]{font-size:125%} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}} *,*::before,*::after{box-sizing:border-box} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--sans);font-size:1.0625rem;line-height:1.6; font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased; } h1,h2,h3,.display{font-family:var(--serif);font-weight:400;line-height:1.02; letter-spacing:-.015em;margin:0; /* Line breaks used to be hard-coded with
. That made everything after the first break invisible to Ellipse Edit — the client could see the text and not edit it. Wrapping is now the browser's job; text-wrap:balance keeps the ragged edge even, and the measure stops a headline running the full column. */ text-wrap:balance} h1{max-width:16ch} h2{max-width:20ch} h1{font-size:clamp(3rem,7.6vw,6.5rem)} h2{font-size:clamp(2.2rem,4.6vw,3.9rem);line-height:1.05} h3{font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.1} em{font-style:italic} p{margin:0 0 1.1rem} a{color:var(--clay);text-decoration-thickness:1px;text-underline-offset:3px} a:hover{color:var(--ink)} :focus-visible{outline:2px solid var(--clay);outline-offset:4px} /* Horizontal padding uses max() so a notched iPhone in landscape still clears the sensor housing. NOTE: anything that also carries .wrap must set padding-block / padding-top+bottom — never `padding: X 0`, which silently zeroes these out. */ .wrap{max-width:var(--wrap);margin:0 auto; padding-left:max(var(--gut),env(safe-area-inset-left,0px)); padding-right:max(var(--gut),env(safe-area-inset-right,0px))} .lede{font-size:clamp(1.1875rem,1.8vw,1.4375rem);line-height:1.5;max-width:34ch;color:var(--ink)} .body-col{max-width:60ch} .body-col p{color:var(--muted)} /* small-caps editorial label — used everywhere */ .lab{font-family:var(--sans);font-size:.6875rem;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--muted);display:block} .hr{height:1px;background:var(--rule);border:0;margin:0} .skip{position:absolute;left:-9999px} .skip:focus{left:16px;top:16px;z-index:99;background:var(--ink);color:var(--paper);padding:12px 18px} /* ================= HEADER ================= */ header{position:sticky;top:0;z-index:50;background:rgba(251,248,243,.92); backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)} .bar{max-width:1440px;margin:0 auto;padding:16px var(--gut); display:flex;align-items:center;gap:18px} .mark{text-decoration:none;color:var(--ink);line-height:1;display:flex;align-items:center;gap:13px} .mark img{width:46px;height:46px;flex:none} .mark .nm{font-family:var(--serif);font-size:1.375rem;letter-spacing:-.01em;display:block} .mark .lab{margin-top:5px;font-size:.625rem;white-space:nowrap} /* ---------- NAV: grouped dropdowns (desktop) / panel (mobile) ---------- */ .hnav{margin-left:auto;display:flex;align-items:center;gap:2px} .navgroup{position:relative} /* the two menu names differ by one word — divide them and say who each is for. Divider is a short centred rule in the muted tone: --rule is 1.8:1 on paper, which is effectively invisible. */ .navgroup + .navgroup{margin-left:14px;padding-left:16px;position:relative} .navgroup + .navgroup::before{content:"";position:absolute;left:0;top:50%; transform:translateY(-50%);width:2px;height:26px;background:var(--muted); border-radius:1px} .navhead{display:none} .navmenu-head{display:block;font-family:var(--sans);font-size:.625rem;font-weight:700; letter-spacing:.18em;text-transform:uppercase;color:var(--clay); padding:8px 14px 10px;margin-bottom:6px;border-bottom:1px solid var(--rule)} .navbtn,.hnav>a{font-family:var(--sans);font-size:.9375rem;font-weight:500;color:var(--ink); background:none;border:0;cursor:pointer;text-decoration:none;white-space:nowrap; padding:10px;border-radius:3px;display:inline-flex;align-items:center;gap:7px; line-height:1} .navbtn:hover,.hnav>a:hover{color:var(--clay);background:var(--cream)} .navbtn::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)} .navbtn[aria-expanded="true"]{color:var(--clay);background:var(--cream)} .navbtn[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(1px)} .navmenu{display:none;position:absolute;top:calc(100% + 9px);left:0;min-width:252px; background:var(--paper);border:1px solid var(--rule-strong);padding:8px;z-index:70; box-shadow:0 16px 36px rgba(23,21,18,.14)} .navmenu[data-open]{display:block} .navmenu a{display:block;padding:11px 14px;color:var(--ink);text-decoration:none; font-size:.9375rem;line-height:1.3} .navmenu a:hover{background:var(--cream);color:var(--clay)} .navmenu a small{display:block;font-size:.8125rem;color:var(--muted);margin-top:3px} .navtoggle{display:none;align-items:center;gap:9px;font-family:var(--sans);font-size:.9375rem; font-weight:600;color:var(--ink);background:none;border:1px solid var(--rule-strong); border-radius:3px;padding:11px 15px;cursor:pointer;line-height:1;white-space:nowrap} .navtoggle:hover{border-color:var(--clay);color:var(--clay)} .navtoggle .bars,.navtoggle .bars::before,.navtoggle .bars::after{ display:block;width:17px;height:2px;background:currentColor;position:relative} .navtoggle .bars::before,.navtoggle .bars::after{content:"";position:absolute;left:0} .navtoggle .bars::before{top:-6px} .navtoggle .bars::after{top:6px} .sizer{display:flex;align-items:center;gap:4px;padding-left:16px; border-left:2px solid var(--muted);flex:none} .sizer .lab{margin-right:8px;white-space:nowrap} .sizer button{font-family:var(--serif);background:none;border:1px solid var(--rule); color:var(--muted);cursor:pointer;line-height:1;padding:6px 9px;border-radius:2px} .sizer button:hover{border-color:var(--rule-strong);color:var(--ink)} .sizer button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)} /* The inline nav collapses to a Menu panel when it genuinely does not fit — driven by a measured fit test in site.js, not a width breakpoint. A px breakpoint cannot see that the reader has scaled the text up, which pushed the controls off-screen. */ header.compact .mark .lab{display:none} header.compact .bar{position:relative;flex-wrap:wrap;row-gap:10px} header.compact .mark{flex:0 1 auto;min-width:0} header.compact .navtoggle{display:inline-flex;order:1;margin-right:auto} header.compact .hphone{order:3;margin-left:0} header.compact .sizer{order:4;margin-left:0;padding-left:16px} header.compact .hnav{display:none;order:5;flex-basis:100%;flex-direction:column;align-items:stretch; gap:0;margin:0;padding:6px 0 10px;border-top:1px solid var(--rule)} header.compact .hnav[data-open]{display:flex} header.compact .navgroup{position:static} header.compact .navbtn{display:none} header.compact .navgroup + .navgroup{margin-left:0;padding-left:0} header.compact .navgroup + .navgroup::before{display:none} header.compact .navhead{display:block;font-family:var(--sans);font-size:.6875rem;font-weight:700; letter-spacing:.2em;text-transform:uppercase;color:var(--ink); padding:24px 0 2px} header.compact .navmenu-head{padding:0 0 10px;margin:0;border-bottom:1px solid var(--rule); font-size:.75rem;letter-spacing:.04em;text-transform:none;font-weight:400; color:var(--muted)} header.compact .navmenu{display:block;position:static;min-width:0;border:0;box-shadow:none;padding:0; background:none} header.compact .navmenu a, header.compact .hnav>a{padding:13px 2px;border-bottom:1px solid var(--rule);border-radius:0} header.compact .hnav>a{font-weight:600} header.compact .navmenu a:hover, header.compact .hnav>a:hover{background:none} @media (max-width:980px){.sizer .lab{display:none}} @media (max-width:760px){.sizer{padding-left:0;border-left:0}} @media (max-width:600px){ header.compact .hphone{order:3;margin-left:0} .sizer{display:none} .mark img{width:38px;height:38px} .mark .nm{font-size:1.125rem} .hphone{font-size:1.125rem} } /* ================= EDITORIAL SECTION GRID ================= */ .sec{display:grid;grid-template-columns:var(--margin-col) 1fr;gap:clamp(24px,4vw,64px); padding-block:clamp(64px,9vw,132px)} .sec-mark{position:sticky;top:120px;align-self:start} .sec-mark .num{font-family:var(--serif);font-size:1.5rem;color:var(--clay);display:block; line-height:1;margin-bottom:10px} @media (max-width:820px){ .sec{grid-template-columns:1fr;gap:20px;padding-block:56px} .sec-mark{position:static;display:flex;align-items:baseline;gap:12px} .sec-mark .num{margin-bottom:0;font-size:1.125rem} } /* ================= HERO ================= */ .hero{padding:clamp(56px,9vw,120px) 0 clamp(40px,5vw,64px)} .hero-grid{display:grid;grid-template-columns:var(--margin-col) 1fr;gap:clamp(24px,4vw,64px)} .hero-meta{display:flex;flex-direction:column;gap:20px;padding-top:14px} .hero-meta .lab+.lab{margin-top:0} h1 .em{font-style:italic;color:var(--clay)} .hero p.lede{margin:32px 0 0;max-width:38ch} /* Centred, not bottom-aligned. Bottom alignment read fine while the note beside the number was two lines; at five it left the number sitting at the foot of a tall block with a stack of text above it, looking dropped rather than paired. */ .callout{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--ink);padding-top:22px; display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,4vw,56px)} .callout .num-big{font-family:var(--serif);font-size:clamp(2.6rem,5.6vw,4.4rem);line-height:.95; color:var(--ink);text-decoration:none;letter-spacing:-.02em;display:block} .callout .num-big:hover{color:var(--clay)} /* margin:0 matters here. A

keeps its default bottom margin, and flex centres the MARGIN box — so half that margin pushed the visible text up and left the number looking 9px low even with align-items:center. */ .callout .side{margin:0;color:var(--muted);font-size:1rem;max-width:26ch} /* The promise strip must line up with the hero copy, which lives in the SECOND grid column. It used to sit in a plain .wrap and started about 244px to the left of everything above it. */ .hero-promise{margin-top:clamp(36px,5vw,64px)} /* Ellipse Edit can blank an element's text but it cannot delete the element. Jacquie emptied the fourth promise ("Nobody's sales target") and was left with a bullet she had no way to remove: the marker renders with no text behind it. Any promise she empties now closes up cleanly instead. */ .promise span:empty{display:none} /* Families hero: the claim carries this page, not a price. The price appears once, in the tiers, where what it buys is explained beside it. Reusing the homepage's .callout put $10 in the slot that holds the PHONE NUMBER there — a price is information, not a call to action, and it shouted. */ .hero-claim{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--ink); padding-top:22px;max-width:54ch} .hero-claim p{font-size:1.1875rem;line-height:1.5;color:var(--ink);margin:0} .hero-claim .cta-row{margin-top:26px} .promise{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule); padding:18px 0;display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center} .promise span{font-size:.9375rem;font-weight:500;color:var(--ink); display:inline-flex;align-items:center;gap:12px} .promise span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--clay);flex:none} @media (max-width:820px){ .hero-grid{grid-template-columns:1fr;gap:18px} .hero-promise>[aria-hidden]{display:none} .hero-meta{flex-direction:row;flex-wrap:wrap;gap:8px 22px;padding-top:0} } /* ================= PORTRAIT BAND ================= */ .band-cream{background:var(--cream);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} .portrait-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,5vw,80px);align-items:center;padding-block:clamp(56px,8vw,112px)} figure{margin:0} .frame-img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%; display:block;border:1px solid var(--rule-strong)} .figcap{margin-top:14px} .cares-logo{width:clamp(108px,13vw,152px);height:auto;display:block;margin-bottom:30px} /* mark and heading side by side, sharing a centre line */ .sec-lockup{display:flex;align-items:center;gap:clamp(20px,2.6vw,36px);flex-wrap:wrap} .sec-lockup .cares-logo{margin-bottom:0;flex:none} .sec-lockup h2{margin:0} @media (max-width:820px){ .portrait-grid{grid-template-columns:1fr;padding-block:52px} figure{max-width:300px} } /* ================= NUMBERED EDITORIAL LIST (services) ================= */ .rows{border-top:1px solid var(--ink)} .row{display:grid;grid-template-columns:74px minmax(0,1fr) minmax(0,1.45fr); gap:clamp(16px,3vw,40px);align-items:baseline; padding:clamp(22px,3vw,32px) 0;border-bottom:1px solid var(--rule); transition:background-color .18s ease,padding-left .18s ease} .row:hover{background:var(--cream);padding-left:14px} .row .n{font-family:var(--serif);font-size:1.25rem;color:var(--clay);line-height:1} .row h3{margin:0} .row p{margin:0;color:var(--muted);font-size:1.0625rem} @media (max-width:820px){ .row{grid-template-columns:44px 1fr;gap:8px 14px} .row p{grid-column:2} } /* ================= EUCALYPT BLOCK ================= */ .block{background:var(--euc);color:var(--paper);padding:clamp(64px,9vw,132px) 0} .block h2{color:var(--paper)} .block .lab{color:var(--sand)} .block a{color:var(--sand)} .block a:hover{color:var(--paper)} .block-head{max-width:32ch;margin-bottom:0} /* Body left, heading right — stops a tall headline stacking over a narrow column of text with the whole right side empty. */ .block-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(32px,6vw,88px);align-items:center} .block-split h2{color:var(--paper)} .block-split .copy p{color:#D9CFC0;font-size:1.1875rem;line-height:1.55;max-width:46ch} .block-split .copy p+p{margin-top:18px} .block-split .lab{color:var(--sand);margin-bottom:20px} @media (max-width:820px){ .block-split{grid-template-columns:1fr;gap:22px} .block-split h2{order:-1} } /* Descending chain: each party sits a step LOWER than the last, joined by a continuous rule that bridges the gaps. The headline is split across the three steps, sitting above each rule; the party name sits below it. */ .flow{--gap:clamp(24px,4vw,56px);--step:62px;--wire:rgba(217,207,192,.72); display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap); padding-bottom:calc(var(--step) * 2);align-items:start} .flow .node{transform:translateY(calc(var(--lift) * var(--step)))} .flow .step-head{font-family:var(--serif);font-weight:400; font-size:clamp(1.55rem,2.5vw,2.25rem);line-height:1.06;letter-spacing:-.01em; color:var(--paper);margin:0 0 clamp(20px,3.4vw,46px);min-height:2.12em; display:flex;align-items:flex-end} .flow .step-body{position:relative;border-top:1px solid var(--wire);padding-top:24px} /* horizontal bridge across the gap, at this node's own level */ .flow .n2 .step-body::before,.flow .n3 .step-body::before{content:"";position:absolute; top:-1px;left:calc(var(--gap) * -1);width:var(--gap);height:1px;background:var(--wire)} /* vertical riser at the previous node's right edge, UP one step to meet its rule */ .flow .n2 .step-body::after,.flow .n3 .step-body::after{content:"";position:absolute; top:calc(var(--step) * -1);left:calc(var(--gap) * -1);width:1px;height:var(--step); background:var(--wire)} .flow .who{font-family:var(--serif);font-size:1.75rem;color:var(--sand); display:block;margin-bottom:clamp(12px,1.7vw,24px);line-height:1.1} .flow .role{margin-bottom:14px} .flow p{color:#D9CFC0;margin:0;font-size:1.0625rem} .flow .n3 .who{color:var(--paper);font-size:2.15rem} @media (max-width:820px){ .flow{grid-template-columns:1fr;gap:30px;padding-bottom:0} .flow .node{transform:none} .flow .step-head{min-height:0;margin-bottom:14px;font-size:1.5rem} .flow .n2 .step-body::before,.flow .n3 .step-body::before, .flow .n2 .step-body::after,.flow .n3 .step-body::after{display:none} .flow .n3 .who{font-size:1.75rem} } /* ================= PULL QUOTE ================= */ .quote{padding:clamp(72px,10vw,150px) 0;text-align:center} .quote blockquote{margin:0 auto;max-width:20ch;font-family:var(--serif);font-style:italic; font-size:clamp(2.2rem,5.4vw,4.2rem);line-height:1.06;letter-spacing:-.02em} .quote .attr{margin-top:34px} /* ================= MEMBERSHIP ================= */ .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px); border-top:1px solid var(--ink);margin-top:44px} .tiers>div{padding-top:24px;border-right:1px solid var(--rule);padding-right:clamp(16px,2vw,32px); display:flex;flex-direction:column} /* pin the CTA to the bottom so buttons line up regardless of list length, and make them equal width instead of hugging their own text */ .tiers .t-cta{margin-top:auto;padding-top:26px;margin-bottom:0} .tiers .t-cta .btn{display:block;width:100%;text-align:center} .tiers>div:last-child{border-right:0} .tiers .t-name{font-family:var(--serif);font-size:1.5rem;display:block;line-height:1.1} .tiers .t-price{font-family:var(--serif);font-size:2.4rem;color:var(--clay);display:block; line-height:1;margin:12px 0 2px} .tiers .t-per{font-size:.875rem;color:var(--muted);display:block;margin:0 0 18px} .tiers ul{list-style:none;margin:0;padding:0;font-size:1rem;color:var(--muted)} .tiers li{padding:6px 0 6px 16px;position:relative} .tiers li::before{content:"—";position:absolute;left:0;color:var(--clay)} @media (max-width:820px){ .tiers{grid-template-columns:1fr;gap:0} .tiers>div{border-right:0;border-bottom:1px solid var(--rule);padding-bottom:22px} .tiers>div:last-child{border-bottom:0} } .dl-doc{display:flex;align-items:center;justify-content:space-between;gap:24px; border:1px solid var(--rule-strong);padding:22px 26px;text-decoration:none;color:var(--ink); margin-top:36px;transition:background-color .18s ease,border-color .18s ease} .dl-doc:hover{background:var(--paper);border-color:var(--clay);color:var(--ink)} .dl-doc .t{font-family:var(--serif);font-size:1.375rem;line-height:1.15;display:block} .dl-doc .m{font-size:.875rem;color:var(--muted);margin-top:7px;display:block} .dl-doc .arrow{font-family:var(--serif);font-size:1.75rem;color:var(--clay);line-height:1} .tiers--two{grid-template-columns:repeat(2,1fr)} @media (max-width:820px){.tiers--two{grid-template-columns:1fr}} .cta-bridge{margin-top:34px;display:flex;align-items:center;gap:18px 22px;flex-wrap:wrap} .btn-note{font-size:.9375rem;color:var(--muted);max-width:34ch} .pays{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:14px 0 0} .pays li{border:1px solid var(--rule-strong);color:var(--ink);font-size:.875rem; font-weight:500;padding:7px 14px;border-radius:2px} /* ================= NOTES / INSETS ================= */ .inset{border-left:2px solid var(--clay);padding:4px 0 4px 24px;margin:32px 0; max-width:64ch} .inset p{margin:0 0 .7rem;color:var(--muted);font-size:1rem} .inset p:last-child{margin:0} .inset strong{color:var(--ink)} /* ================= CREDENTIALS ================= */ .creds{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,44px); border-top:1px solid var(--ink);padding-top:26px;margin-top:clamp(44px,6vw,72px)} .creds b{font-family:var(--serif);font-weight:400;font-size:clamp(1.75rem,3vw,2.6rem); display:block;line-height:1;color:var(--ink)} .creds span{display:block;margin-top:10px;font-size:.9375rem;color:var(--muted);line-height:1.4} @media (max-width:820px){.creds{grid-template-columns:1fr 1fr;gap:26px}} /* ================= CONTACT ================= */ .contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,80px)} .dl{margin:0} .dl dt{margin-top:26px} .dl dt:first-child{margin-top:0} .dl dd{margin:7px 0 0;font-size:1.125rem;overflow-wrap:anywhere} /* Standalone links get a real tap target — 44px. Links inside sentences are exempt from that rule and are left alone so they don't break the text flow. */ .dl dd a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--clay); display:inline-block;padding:8px 0} .dl dd a:hover{color:var(--clay)} .dl .sub{display:block;font-size:.9375rem;color:var(--muted);margin-top:4px} .field{margin-bottom:26px} label{display:block;margin-bottom:8px} input,textarea{width:100%;font-family:var(--sans);font-size:1.0625rem;color:var(--ink); background:transparent;border:0;border-bottom:1px solid var(--rule-strong); padding:9px 0;border-radius:0} input:focus,textarea:focus{border-bottom-color:var(--clay);outline:none; box-shadow:0 1px 0 0 var(--clay)} textarea{min-height:110px;resize:vertical} .btn{display:inline-block;background:var(--ink);color:var(--paper);border:1px solid var(--ink); font-family:var(--sans);font-size:.9375rem;font-weight:600;letter-spacing:.06em; text-transform:uppercase;padding:15px 34px;cursor:pointer;text-decoration:none;border-radius:2px} .btn:hover{background:var(--clay);border-color:var(--clay);color:var(--paper)} .note{font-size:.9375rem;color:var(--muted);margin:16px 0 0} @media (max-width:820px){.contact-grid{grid-template-columns:1fr}} /* ================= STICKY CALL BAR (mobile only) ================= */ .callbar{display:none} @media (max-width:820px){ .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60; background:var(--euc);border-top:1px solid rgba(217,207,192,.3); padding-bottom:env(safe-area-inset-bottom,0px)} .callbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:10px; min-height:60px;color:var(--paper);text-decoration:none;font-weight:600; font-size:1.0625rem;letter-spacing:.01em} .callbar a:first-child{flex:1.5;background:var(--clay)} .callbar a:last-child{border-left:1px solid rgba(217,207,192,.3)} .callbar a:active{filter:brightness(.9)} .callbar svg{width:21px;height:21px;flex:none} /* keep the bar from covering the end of the footer */ body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))} } /* ================= FOOTER ================= */ footer{background:var(--euc-dark);color:var(--sand);padding:clamp(56px,7vw,96px) 0 36px} footer a{color:var(--sand)} footer a:hover{color:var(--paper)} footer .lab{color:rgba(217,207,192,.72)} .f-top{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,56px);padding-bottom:44px} .f-mark{font-family:var(--serif);font-size:clamp(1.75rem,3vw,2.4rem);color:var(--paper);line-height:1.05} footer ul{list-style:none;margin:14px 0 0;padding:0} /* the email is one unbreakable 271px token — let it break rather than blow out the grid */ footer li{margin-bottom:2px;font-size:1rem;overflow-wrap:anywhere} footer li a{display:inline-block;padding:9px 0} .emerg{border-top:1px solid rgba(217,207,192,.28);border-bottom:1px solid rgba(217,207,192,.28); padding:20px 0;margin-bottom:32px;font-size:1.0625rem;color:var(--paper);text-align:center} .fine{font-size:.875rem;line-height:1.65;color:rgba(217,207,192,.86)} .fine p{margin:0 0 12px} .fine p:last-child{margin-bottom:0} .credits{margin-top:30px;padding-top:24px;border-top:1px solid rgba(217,207,192,.24); text-align:center;font-size:.875rem;color:rgba(217,207,192,.86)} @media (max-width:820px){.f-top{grid-template-columns:1fr;gap:30px}} /* "Coming soon" pill, used beside a service heading */ .tag{display:inline-block;font-family:var(--sans);font-size:.625rem;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--clay); border:1px solid var(--clay);border-radius:2px;padding:4px 8px;margin-left:10px; vertical-align:middle;white-space:nowrap}