/* ========================================================================== Clean Right Cleaners - public design system Pro Star CMS Development. Mobile first. Navy and red taken from the storefront sign and the hanger logo. ========================================================================== */ *,*::before,*::after{box-sizing:border-box} /* Sticky header measurements. --nav-h is the design height of the white bar and drives its own min-height; --nav-off is what everything else offsets against and is re-measured by site.js so zoom, wrapped labels and the scrolled compact state all stay in step. Both have working defaults, so nothing here depends on JavaScript. */ :root{ --nav-h:78px; --nav-h-stuck:66px; --nav-off:78px; --sticky-gap:14px; --menu-drop:18px; } html{ -webkit-text-size-adjust:100%; /* Anchors and keyboard focus must land below the sticky bar, not under it. */ scroll-padding-top:calc(var(--nav-off) + var(--sticky-gap)); } /* Horizontal overflow is clipped on the ROOT, never on . A body with overflow-x set becomes the scroll container for its descendants, and position:sticky on the header then has nothing to stick to. "clip" is used rather than "hidden" because it creates no scroll container at all. */ html{overflow-x:clip} @supports not (overflow-x:clip){ html{overflow-x:hidden} } body{ margin:0; font-family:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:1.0625rem; line-height:1.65; color:var(--ink); background:var(--paper); } /* Every heading or section that can be linked to keeps clear of the bar. */ [id]{scroll-margin-top:calc(var(--nav-off) + var(--sticky-gap))} /* The drawer is open: freeze the page behind it so the menu is the only thing that scrolls. Set by site.js, removed again on close. ONLY on . Putting overflow on makes the body the scroll container for everything inside it, and .site-header would then be sticky against a box that never scrolls - it would slide off the top of the window the moment the drawer was opened. */ html.nav-open{overflow:hidden} img,video{max-width:100%;height:auto;display:block} h1,h2,h3,h4{ font-family:"Barlow Condensed",Impact,"Arial Narrow",sans-serif; font-weight:700; line-height:1.08; letter-spacing:.005em; margin:0 0 .5em; color:var(--navy-deep); text-wrap:balance; } h1{font-size:clamp(2.35rem,6.2vw,4.1rem);text-transform:uppercase} h2{font-size:clamp(1.85rem,4.2vw,2.9rem);text-transform:uppercase} h3{font-size:clamp(1.25rem,2.2vw,1.55rem)} h4{font-size:1.08rem} p{margin:0 0 1.05em} a{color:var(--navy);text-underline-offset:.18em} a:hover{color:var(--red)} ul,ol{margin:0 0 1.05em;padding-left:1.15em} li{margin:0 0 .35em} strong{font-weight:700} hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0} address{font-style:normal} .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} .skip-link{ position:absolute;left:.5rem;top:-4rem;z-index:200; background:var(--red);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 6px 6px; font-weight:700;text-decoration:none;transition:top .16s ease; } .skip-link:focus{top:0;color:#fff} :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline:3px solid var(--red); outline-offset:2px; border-radius:3px; } .wrap{width:min(100% - 2rem,1220px);margin-inline:auto} @media (min-width:900px){.wrap{width:min(100% - 4rem,1220px)}} .section{padding:clamp(2.6rem,5vw,4.35rem) 0} .section--tight{padding:clamp(2rem,3.2vw,2.8rem) 0} .section--cream{background:var(--cream)} .section--navy{background:var(--navy-deep);color:#e8eefb} .section--navy h2,.section--navy h3{color:#fff} .section--navy a{color:#bcd0f4} .eyebrow{ font-family:"Barlow Condensed",sans-serif; font-size:.94rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase; color:var(--red);margin:0 0 .55rem; } .section--navy .eyebrow, .hero .eyebrow, .page-hero .eyebrow, .cta-band .eyebrow{color:#ff8a93} .lede{font-size:clamp(1.09rem,1.7vw,1.28rem);color:var(--muted);max-width:64ch} .section--navy .lede{color:#bfcdea} .measure{max-width:68ch} .center{text-align:center} .center .lede{margin-inline:auto} /* --- Buttons ------------------------------------------------------------ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; min-height:52px;padding:.85rem 1.6rem; font-family:"Barlow Condensed",sans-serif; font-size:1.16rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase; border:2px solid transparent;border-radius:4px; text-decoration:none;cursor:pointer; transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .12s ease; } .btn:active{transform:translateY(1px)} /* Without this an inline icon inherits the SVG default box and swamps the label - which is what the old red telephone button was doing. */ .btn .ic{width:18px;height:18px;fill:currentColor;flex:none} .btn-primary{background:var(--red);border-color:var(--red);color:#fff} .btn-primary:hover{background:var(--red-dark);border-color:var(--red-dark);color:#fff} .btn-navy{background:var(--navy);border-color:var(--navy);color:#fff} .btn-navy:hover{background:var(--navy-deep);border-color:var(--navy-deep);color:#fff} .btn-ghost{background:transparent;border-color:currentColor;color:var(--navy)} .btn-ghost:hover{background:var(--navy);border-color:var(--navy);color:#fff} .btn-on-dark{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.75);color:#fff} .btn-on-dark:hover{background:#fff;border-color:#fff;color:var(--navy-deep)} /* Small buttons are interface, not poster type. */ .btn-sm{ min-height:44px;padding:.55rem 1.05rem; font-family:"Source Sans 3",sans-serif; font-size:.9rem;font-weight:700;letter-spacing:.045em; } .btn-block{width:100%} .btn-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.5rem} .center .btn-row{justify-content:center} /* --- Design language ---------------------------------------------------- The things that stop this looking like a theme. All of it is drawn in CSS from the trade the business is actually in - the paper tag stapled to an order, the hook of the hanger in the sign, a line of stitching, the crease of a pressed fold. Restrained on purpose: these are accents on a serious business, not decoration. --------------------------------------------------------------------- */ /* Order tag. Replaces the plain red eyebrow. The notch on the left and the punched hole are the shape of the ticket that goes on a garment. */ .tag{ display:inline-flex;align-items:center;gap:.5rem; margin:0 0 .85rem;padding:.34rem .85rem .34rem 1.5rem; position:relative; background:var(--cream); border:1px solid var(--line); border-radius:3px 4px 4px 3px; clip-path:polygon(0 50%,.55rem 0,100% 0,100% 100%,.55rem 100%); font-family:"Source Sans 3",sans-serif; font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:var(--navy); } .tag::before{ content:"";position:absolute;left:.82rem;top:50%;transform:translateY(-50%); width:5px;height:5px;border-radius:50%; background:var(--red); } .tag--onDark{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.24);color:#fff} .tag--onDark::before{background:#ff5a67} .tag--onRed{background:rgba(0,0,0,.16);border-color:rgba(255,255,255,.3);color:#fff} .tag--onRed::before{background:#fff} /* Hanger rule. The hook from the logo, drawn as a heading underline. Sits under a section heading instead of a generic centred divider. */ .hanger-rule{ display:block;width:132px;height:20px;margin:.1rem 0 1.15rem; color:var(--red);flex:none; } /* The hook and its solid run are brand red; the stitched tail picks up the surrounding ink so it stays readable on pale and on dark panels alike. */ .hanger-rule .hr-stitch{color:var(--navy);opacity:.6} .method .hanger-rule .hr-stitch, .hero .hanger-rule .hr-stitch, .cta-band .hanger-rule .hr-stitch{color:#fff;opacity:.75} .center .hanger-rule{margin-inline:auto} .hanger-rule svg{display:block;width:100%;height:100%;overflow:visible} /* Stitching. A seam, used where a section needs a lid rather than a hard edge. Two dashes offset so it reads as thread, not as a dashed border. */ .stitch{ position:relative;height:0; border-top:2px dashed rgba(18,48,110,.26); } .stitch::after{ content:"";position:absolute;left:.6rem;right:.6rem;top:1px; border-top:2px dashed rgba(200,32,46,.28); } .section--navy .stitch,.stitch--onDark{border-top-color:rgba(255,255,255,.26)} .stitch--onDark::after{border-top-color:rgba(255,138,147,.4)} /* Pressed fold. A single soft crease of light across a dark panel, the way a pressed sleeve catches a room light. Never more than one per panel. */ .folded{position:relative;isolation:isolate} .folded::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background: linear-gradient(104deg,transparent 0 38%,rgba(255,255,255,.055) 38.4% 40%,transparent 40.4% 100%), linear-gradient(104deg,transparent 0 61%,rgba(255,255,255,.035) 61.3% 62.4%,transparent 62.8% 100%); } /* Woven ground. Barely-there fabric texture for pale sections. Kept under 3% so it registers as paper stock rather than as a pattern. */ .section--cream{ background-color:var(--cream); background-image: repeating-linear-gradient(90deg,rgba(18,48,110,.022) 0 1px,transparent 1px 3px), repeating-linear-gradient(0deg,rgba(18,48,110,.022) 0 1px,transparent 1px 3px); } /* Framed photograph. An offset rule sits behind the picture and corner ticks sit over it, so a photo reads as placed rather than dropped in. */ .framed{position:relative;isolation:isolate} .framed::before{ content:"";position:absolute;z-index:-1; inset:1.15rem -1.15rem -1.15rem 1.15rem; border:2px solid rgba(18,48,110,.34); border-radius:4px; } .framed--red::before{border-color:rgba(200,32,46,.42)} .framed--onDark::before{border-color:rgba(255,255,255,.28)} .framed > img,.framed > picture > img,.framed .frame-shot{ position:relative;display:block;width:100%;border-radius:4px; box-shadow:0 20px 46px rgba(6,17,43,.26); } .framed::after{ content:"";position:absolute;left:-6px;top:-6px;width:26px;height:26px; border-left:3px solid var(--red);border-top:3px solid var(--red); border-radius:2px 0 0 0; } /* The frame is decoration; on a narrow screen it just eats width. The wrap only has 16px of side padding until 900px, so the overhang has to stay inside that or it puts a couple of pixels of horizontal scroll on the page. */ @media (max-width:899.98px){ .framed::before{inset:.7rem -.7rem -.7rem .7rem} .framed::after{width:18px;height:18px} } /* Caption plate. A small pinned label over the bottom of a framed photo. */ .frame-note{ position:absolute;left:-.35rem;bottom:-.85rem;z-index:2; max-width:calc(100% - 2rem); padding:.5rem .9rem; background:var(--navy-deep);color:#e8eefb; border-left:3px solid var(--red);border-radius:2px; font-size:.86rem;line-height:1.35; box-shadow:0 10px 26px rgba(6,17,43,.34); } .frame-note strong{color:#fff;display:block;font-size:.94rem} /* Section heading cluster, so every section head is built the same way. */ .sec-head{max-width:60rem} .sec-head.center{margin-inline:auto;text-align:center} .sec-head h2{margin-bottom:.35em} .sec-head .lede{margin-bottom:0} /* --- Long-form prose ---------------------------------------------------- Book setting for the passages that are actually read rather than scanned: the opening paragraph carries a drop cap and sits flush, and every paragraph after it takes a two-space first-line indent. Applied only where there is a real run of prose - never to cards, ledes in isolation, form help, FAQ answers or anything that is interface rather than reading. --------------------------------------------------------------------- */ /* The tag is a label, not a paragraph, and the opening paragraph hangs flush under the drop cap, so both are excluded from the indent. */ .prose > p:not(.tag):not(.lede):not(.eyebrow){text-indent:2ch} .prose--cap > p.lede::first-letter{ float:left; font-family:"Barlow Condensed",Impact,sans-serif; font-weight:700; font-size:3.5em; line-height:.78; margin:.06em .1em 0 0; color:var(--red); } /* A floated first letter and a hanging indent fight each other, and on a phone the cap eats a third of the measure. */ @media (max-width:559.98px){ .prose--cap > p.lede::first-letter{font-size:2.9em} .prose > p:not(.tag):not(.lede):not(.eyebrow){text-indent:1.5ch} } /* --- Header ------------------------------------------------------------- The navy utility bar and the white navigation bar are siblings, not nested: see templates/components/header.php. Only the white bar is sticky. Nothing between and .site-header may set overflow, transform, filter, perspective or contain. Any of those would either clip the bar or become the containing block for it and kill position:sticky. That is why the page's horizontal overflow guard lives on at the top of this file. --------------------------------------------------------------------- */ /* Utility bar: scrolls away with the page, on purpose. */ .util{background:var(--navy-deep);color:#c9d7f2;font-size:.9rem} .util-inner{display:flex;align-items:center;gap:1.25rem;min-height:42px;flex-wrap:wrap} .util p{margin:0} .util-address{display:none;align-items:center;gap:.4rem} .util-status{display:flex;align-items:center;gap:.45rem} .util-phone{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem; min-height:34px;padding:.25rem .35rem;border-radius:4px; color:#fff;font-weight:700;text-decoration:none} .util-phone:hover{color:#ffc9cd} .util .ic{width:15px;height:15px;fill:currentColor;flex:none} .dot{width:9px;height:9px;border-radius:50%;background:#8894ab;flex:none} .dot.is-open{background:#3ddc8a;box-shadow:0 0 0 3px rgba(61,220,138,.22)} .dot.is-closed{background:#ff8a93} @media (min-width:760px){.util-address{display:inline-flex}} /* The sticky bar. Sticky rather than fixed, so it keeps its place in the flow and nothing below it moves when it pins. z-index sits above every section on the page and below the popup (120) and the skip link (200). */ .site-header{ position:sticky; top:0; z-index:100; background:#fff; box-shadow:0 1px 0 var(--line); transition:box-shadow .18s ease; } /* Stuck: a hairline plus a soft shadow, so the bar reads as a separate layer over the hero video, photographs and cards. The class is added by site.js; without scripting the bar is still sticky, it just keeps the plain hairline. */ .site-header.is-stuck{ box-shadow:0 1px 0 var(--line),0 12px 26px -16px rgba(10,31,77,.5); } .nav-bar{ display:flex;align-items:center;gap:.85rem; min-height:var(--nav-h); padding-block:.55rem; padding-left:env(safe-area-inset-left,0px); padding-right:env(safe-area-inset-right,0px); transition:min-height .18s ease,padding-block .18s ease; } /* Compact once scrolled. Deliberately only 12px: enough to feel tighter, not enough to make the logo hard to recognise. */ .site-header.is-stuck .nav-bar{min-height:var(--nav-h-stuck);padding-block:.3rem} /* The bar stays in the flow, so shrinking it would shorten the document and step every following section upwards. The spacer takes back exactly what the bar gives up, measured by site.js, so the document height never changes and nothing below moves. It is only ever tall while the bar is compact, and it lives underneath the pinned bar where it cannot be seen. Without scripting .is-stuck is never set, the bar never compacts, and this stays at zero. */ .header-spacer{height:0} .site-header.is-stuck + .header-spacer{height:var(--nav-shrink,0px)} .brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none} .brand-mark{width:54px;height:auto;transition:width .18s ease} .site-header.is-stuck .brand-mark{width:46px} .brand-words{display:flex;flex-direction:column;line-height:1} .brand-name{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.5rem; text-transform:uppercase;color:var(--navy-deep);letter-spacing:.01em} .brand-sub{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:1.02rem; text-transform:uppercase;letter-spacing:.34em;color:var(--red)} @media (prefers-reduced-motion:reduce){ .site-header,.nav-bar,.brand-mark{transition:none} } .nav-desktop{display:none;margin-left:auto} .nav-desktop > ul{display:flex;gap:.15rem;list-style:none;margin:0;padding:0} .nav-desktop a{ display:block;padding:.6rem .68rem;border-radius:4px; font-family:"Source Sans 3",sans-serif;font-size:.96rem;font-weight:600; letter-spacing:.01em; color:var(--navy-deep);text-decoration:none;white-space:nowrap; } .nav-desktop a:hover{background:var(--cream);color:var(--red)} .nav-desktop a[aria-current="page"]{color:var(--red);box-shadow:inset 0 -3px 0 var(--red)} .nav-actions{margin-left:auto;display:flex;align-items:center;gap:.5rem;flex:none} .nav-cta,.nav-portal{display:none} /* Customer portal. Navy against the red Call the store button: obviously a different action, still the two colours off the storefront sign. */ .btn-portal{background:var(--navy);border-color:var(--navy);color:#fff} .btn-portal:hover{background:var(--navy-deep);border-color:var(--navy-deep);color:#fff} .btn-portal .ic{width:16px;height:16px;fill:currentColor;flex:none} /* Telephone on small screens, where "Call the store" will not fit. The utility bar carries the number as well, but that scrolls away. */ .nav-phone{ width:48px;height:48px;display:grid;place-items:center;flex:none; background:var(--red);border-radius:5px;color:#fff;text-decoration:none; } .nav-phone:hover{background:var(--red-dark);color:#fff} .nav-phone svg{width:22px;height:22px;fill:currentColor} /* Services dropdown. The parent is a real link; the button and panel are an enhancement, so the menu works without JavaScript. */ .nav-desktop .has-menu{position:relative;display:flex;align-items:center} .menu-toggle{ display:grid;place-items:center;width:34px;height:44px;margin-left:-.4rem; background:none;border:0;color:var(--navy-deep);cursor:pointer;border-radius:4px; } .menu-toggle svg{width:18px;height:18px;fill:currentColor;transition:transform .16s ease} .menu-toggle:hover{color:var(--red)} .menu-toggle[aria-expanded="true"] svg{transform:rotate(180deg)} .submenu{ display:block;position:absolute;top:100%;left:0;z-index:70; min-width:15rem;max-width:min(22rem,92vw); /* The top margin drops the panel from the bottom of the menu ITEM to the bottom edge of the bar, so its border never cuts across the white bar. Measured by site.js; the fallback is the un-compacted bar, which is the state you get with scripting off. */ margin:var(--menu-drop) 0 0;padding:.4rem;list-style:none; background:#fff;border:1px solid var(--line);border-radius:6px; box-shadow:0 16px 40px rgba(10,31,77,.18); } .submenu[hidden]{display:none} /* Flipped by script when opening leftward would run off the window edge. */ .submenu.is-flipped{left:auto;right:0} .submenu li{margin:0} .submenu a{ display:block;padding:.55rem .75rem;border-radius:4px;white-space:nowrap; font-size:1.02rem;letter-spacing:.01em; } .submenu a:hover{background:var(--cream);color:var(--red)} .submenu-sep{height:1px;background:var(--line);margin:.4rem .55rem;padding:0} /* Narrowing the window moves ordinary links out of the bar and into the Services dropdown, so the Call the store and Customer Portal buttons are never the things pushed off the end. Tiers are assigned in templates/components/header.php. */ .submenu > li.menu-tier-a, .submenu > li.menu-tier-b{display:none} .nav-toggle{ width:48px;height:48px;display:grid;place-items:center;flex:none; background:var(--navy-deep);border:0;border-radius:5px;cursor:pointer; } .nav-toggle-bars{display:block;width:22px} .nav-toggle-bars span{display:block;height:2.5px;background:#fff;border-radius:2px;margin:4.5px 0; transition:transform .2s ease,opacity .2s ease} .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* The drawer hangs off the bottom of the sticky bar, so it opens below it and scrolls inside itself instead of running off the bottom of the window. site.js freezes the page behind it while it is open. */ .nav-mobile{ background:#fff;border-top:1px solid var(--line); padding:.6rem env(safe-area-inset-right,0px) calc(1.4rem + env(safe-area-inset-bottom,0px)) env(safe-area-inset-left,0px); max-height:calc(100vh - var(--nav-off)); max-height:calc(100dvh - var(--nav-off)); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } .nav-mobile ul{list-style:none;margin:0;padding:0} .nav-mobile a{ display:block;padding:.92rem 1rem;border-bottom:1px solid var(--line); font-family:"Source Sans 3",sans-serif;font-size:1.04rem;font-weight:600; color:var(--navy-deep);text-decoration:none; } .nav-mobile a:hover{background:var(--cream);color:var(--red)} .nav-mobile a[aria-current="page"]{color:var(--red)} .nav-mobile a.is-sub{padding-left:2.1rem;font-size:1.05rem;color:var(--muted); text-transform:none;font-weight:500} .nav-mobile a.is-sub::before{content:"\2014\00a0";color:var(--red)} .nav-mobile-foot{padding:1.1rem 1rem 0} .nav-mobile-foot .btn + .btn{margin-top:.6rem} .nav-mobile-hours{margin:.7rem 0 0;text-align:center;color:var(--muted);font-size:.95rem} /* Very small phones: the wordmark and the hanger come down a little so the logo, the telephone button and the menu button all stay comfortably on one line. The hanger stays large enough to still read as the logo. */ @media (max-width:419.98px){ .brand-mark{width:44px} .site-header.is-stuck .brand-mark{width:40px} .brand-name{font-size:1.3rem} .brand-sub{font-size:.88rem;letter-spacing:.26em} .nav-bar{gap:.55rem} } /* Desktop navigation breakpoints. These come after every base nav rule on purpose: they share specificity with the defaults above, so order decides the winner. */ /* Phone and tablet: menu button on the left, the logo centred between the two equal-width controls, telephone on the right. The mark is the first thing you see on landing instead of sitting in a corner. */ @media (max-width:999.98px){ .nav-toggle{order:1} .brand{order:2;margin-inline:auto;gap:.6rem} .nav-actions{order:3;margin-left:0} .brand-mark{width:50px} .site-header.is-stuck .brand-mark{width:44px} } @media (max-width:419.98px){ .brand-mark{width:46px} .site-header.is-stuck .brand-mark{width:41px} } @media (min-width:1000px){ .nav-desktop{display:block} .nav-actions{margin-left:.5rem} .nav-cta,.nav-portal{display:inline-flex} .nav-phone{display:none} .nav-toggle{display:none} .nav-mobile{display:none} } /* Service Area steps out of the bar first. */ @media (max-width:1079.98px){ .nav-desktop > ul > li.menu-tier-b{display:none} .submenu > li.menu-tier-b{display:block} } /* Then Home, Reviews and FAQs, along with anything added to the menu later. */ @media (max-width:1239.98px){ .nav-desktop > ul > li.menu-tier-a{display:none} .submenu > li.menu-tier-a{display:block} } /* --- Hero --------------------------------------------------------------- A split composition, not a text column on a blurred photograph. The commercial footage is promoted out of the background and into a framed panel on the right where it is actually watchable; the background behind everything is a deep navy field carrying one soft crease and a very low storefront wash, so the type sits on colour rather than on mush. --------------------------------------------------------------------- */ .hero{ position:relative;isolation:isolate;overflow:hidden; background: radial-gradient(120% 90% at 12% 0%,#173a80 0%,transparent 60%), linear-gradient(180deg,#0d2456 0%,var(--navy-deep) 62%,#081c47 100%); color:#fff; } /* The storefront, kept far back. Enough to say "a real place", not enough to fight the headline. */ .hero-ground{ position:absolute;inset:0;z-index:-2;pointer-events:none; background-image:var(--hero-ground,none); background-size:cover;background-position:58% 42%; opacity:.17; filter:saturate(.65); mask-image:linear-gradient(100deg,transparent 0 22%,#000 62% 100%); -webkit-mask-image:linear-gradient(100deg,transparent 0 22%,#000 62% 100%); } .hero::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background: linear-gradient(101deg,transparent 0 44%,rgba(255,255,255,.05) 44.3% 45.7%,transparent 46% 100%), linear-gradient(90deg,rgba(8,22,54,.82) 0 34%,rgba(8,22,54,.25) 62%,transparent 100%); } .hero-inner{ display:grid;gap:clamp(2rem,4vw,3.25rem); align-items:center; padding:clamp(2.4rem,5.2vw,4.1rem) 0 clamp(2.6rem,5vw,4rem); } @media (min-width:960px){ .hero-inner{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)} } .hero-copy{max-width:36rem} .hero h1{ color:#fff;margin-bottom:.34em; font-size:clamp(2.5rem,5.1vw,4.05rem); line-height:1.02; } .hero h1 .accent{color:#ff5a67;display:block} .hero-lede{ font-size:clamp(1.06rem,1.55vw,1.24rem); color:#cfdcf3;max-width:34rem;margin-bottom:1.5rem; } /* Credentials as a stitched strip rather than three more bullet points. */ .hero-marks{ list-style:none;margin:0 0 1.7rem;padding:1.05rem 0 0; border-top:2px dashed rgba(255,255,255,.24); display:flex;flex-wrap:wrap;gap:.55rem 1.6rem; } .hero-marks li{ margin:0;display:flex;align-items:baseline;gap:.5rem; color:#e4ebfa;font-size:.97rem; } .hero-marks b{ font-family:"Barlow Condensed",sans-serif;font-size:1.5rem;font-weight:700; color:#fff;line-height:1;letter-spacing:.01em; } .hero-marks span{color:#a9c0e8} /* Actions. The telephone number never breaks, and the label above it does the explaining so the number can stay one clean line. */ .hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;align-items:stretch} .btn-call{ display:inline-flex;align-items:center;gap:.7rem; padding:.7rem 1.35rem;min-height:60px; background:var(--red);border:2px solid var(--red);border-radius:5px; color:#fff;text-decoration:none; box-shadow:0 12px 26px rgba(200,32,46,.28); transition:background-color .15s ease,border-color .15s ease,transform .12s ease,box-shadow .15s ease; } .btn-call:hover{background:var(--red-dark);border-color:var(--red-dark);color:#fff; box-shadow:0 14px 30px rgba(200,32,46,.36)} .btn-call:active{transform:translateY(1px)} .btn-call .ic{width:19px;height:19px;fill:currentColor;flex:none;opacity:.92} .btn-call-lines{display:flex;flex-direction:column;line-height:1.12;text-align:left} .btn-call-label{ font-family:"Source Sans 3",sans-serif; font-size:.74rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase; color:#ffd7da; } .btn-call-num{ font-family:"Barlow Condensed",sans-serif; font-size:1.6rem;font-weight:700;letter-spacing:.02em; white-space:nowrap; /* the number never wraps */ } .hero-actions .btn{min-height:60px} /* The footage, framed. */ .hero-panel{position:relative;isolation:isolate} .hero-panel::before{ content:"";position:absolute;z-index:-1; inset:1.3rem -1.3rem -1.3rem 1.3rem; border:2px solid rgba(255,138,147,.5);border-radius:5px; } .hero-stage{ position:relative;border-radius:5px;overflow:hidden; aspect-ratio:5/4; background:#081c47; box-shadow:0 26px 60px rgba(4,12,32,.55); border:1px solid rgba(255,255,255,.14); } @media (min-width:960px){.hero-stage{aspect-ratio:4/3}} .hero-stage img,.hero-stage video{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:50% 45%; } .hero-stage video{z-index:1} .hero-stage [data-hero-poster]{z-index:0;transition:opacity .6s ease} /* A hairline of brand colour across the top of the panel. */ .hero-stage::after{ content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:3; background:linear-gradient(90deg,var(--red) 0 34%,var(--navy-soft) 34% 100%); } .hero-panel .frame-note{left:-.5rem;bottom:-1rem;z-index:4} .hero-video-toggle{ position:absolute;right:.5rem;top:.5rem;bottom:auto;z-index:5; display:grid;place-items:center; width:36px;height:36px;padding:0;border-radius:4px;cursor:pointer; background:rgba(6,17,43,.66);color:#fff;border:1px solid rgba(255,255,255,.3); } .hero-video-toggle [data-video-toggle-label]{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0; } .hero-video-toggle:hover{background:rgba(6,17,43,.94)} .hero-video-toggle .ic{width:14px;height:14px;fill:currentColor} /* Stack order on small screens: say it, then show it. */ @media (max-width:959.98px){ .hero-ground{mask-image:none;-webkit-mask-image:none;opacity:.13} .hero::after{background:linear-gradient(180deg,rgba(8,22,54,.7),rgba(8,22,54,.86))} .hero-panel{margin-right:1.3rem} } @media (max-width:479.98px){ .hero-marks{gap:.45rem 1.1rem} .hero-marks b{font-size:1.32rem} .hero-actions{gap:.6rem} .hero-actions .btn,.btn-call{width:100%;justify-content:center} .btn-call-lines{text-align:center} } /* --- Trust strip -------------------------------------------------------- Four facts, separated by stitching rather than by boxes. The open/closed state is NOT repeated here: it already sits in the utility bar. */ .trust{background:var(--navy);color:#fff;position:relative} .trust-grid{ display:grid;gap:0; grid-template-columns:repeat(2,1fr); padding:.35rem 0; } @media (min-width:860px){.trust-grid{grid-template-columns:repeat(4,1fr)}} .trust-item{ padding:1.05rem 1.1rem;text-align:center;position:relative; } .trust-item + .trust-item::before{ content:"";position:absolute;left:0;top:22%;bottom:22%; border-left:2px dashed rgba(255,255,255,.2); } @media (max-width:859.98px){ .trust-item:nth-child(odd)::before{display:none} } .trust-item strong{ display:block; font-family:"Source Sans 3",sans-serif; font-size:1.03rem;font-weight:700;letter-spacing:.01em;color:#fff; } .trust-item span{display:block;color:#b9caea;font-size:.9rem;margin-top:.2rem} /* --- Generic grid (services page, city pages, contact) ------------------ */ .grid{display:grid;gap:1.5rem} .grid-2,.grid-3{grid-template-columns:1fr} @media (min-width:680px){.grid-2,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1020px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}} /* Cards on those pages keep the same skin as the home page services. */ .card{ display:flex;flex-direction:column;position:relative; background:var(--paper);border:1px solid var(--line);border-radius:6px;overflow:hidden; transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease; } .card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(10,31,77,.13);border-color:#bccbe6} .card-media{aspect-ratio:16/10;background:var(--cream);overflow:hidden} .card-media img{width:100%;height:100%;object-fit:cover} .card-body{padding:1.25rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1} .card h3{margin-bottom:.4rem} .card h3 a{color:inherit;text-decoration:none} .card h3 a:hover{color:var(--red)} .card p{color:var(--muted);margin-bottom:1rem} .card-link{ margin-top:auto;display:inline-flex;align-items:center;gap:.42rem; font-family:"Source Sans 3",sans-serif;font-size:.92rem;font-weight:700; color:var(--navy);text-decoration:none; } .card-link:hover{color:var(--red)} .card-link svg{width:14px;height:14px;fill:currentColor;transition:transform .16s ease} .card-link:hover svg{transform:translateX(3px)} /* --- Service cards ------------------------------------------------------ One lead service on a wide band, then two mid cards and three compact ones. Same components throughout, three different weights, so the section has a shape instead of being nine identical rectangles. */ .svc-grid{display:grid;gap:1.15rem;grid-template-columns:repeat(6,1fr)} .svc{ grid-column:1/-1; display:flex;flex-direction:column; background:var(--paper);border:1px solid var(--line);border-radius:6px; overflow:hidden;position:relative; transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease; } .svc:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(10,31,77,.13);border-color:#bccbe6} /* A thread of brand colour down the opening edge of every card. */ .svc::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:3px;z-index:2; background:linear-gradient(180deg,var(--red) 0 34%,var(--navy-soft) 34% 100%); opacity:0;transition:opacity .16s ease; } .svc:hover::before,.svc:focus-within::before{opacity:1} .svc-media{background:var(--cream);overflow:hidden;aspect-ratio:16/10} .svc-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease} .svc:hover .svc-media img{transform:scale(1.035)} .svc-body{padding:1.1rem 1.25rem 1.25rem;display:flex;flex-direction:column;flex:1} .svc h3{margin-bottom:.35rem;font-size:1.28rem} .svc h3 a{color:inherit;text-decoration:none} .svc h3 a::after{content:"";position:absolute;inset:0} /* whole card is the target */ .svc:hover h3 a{color:var(--red)} .svc p{color:var(--muted);margin-bottom:1rem;font-size:1rem} .svc-link{ margin-top:auto;display:inline-flex;align-items:center;gap:.42rem; font-family:"Source Sans 3",sans-serif; font-size:.92rem;font-weight:700;letter-spacing:.02em; color:var(--navy);text-decoration:none; } .svc:hover .svc-link{color:var(--red)} .svc-link svg{width:14px;height:14px;fill:currentColor;transition:transform .16s ease} .svc:hover .svc-link svg{transform:translateX(3px)} @media (min-width:660px){ .svc--wide{grid-column:span 3} .svc--narrow{grid-column:span 3} .svc--wide .svc-media{aspect-ratio:16/10} } @media (min-width:1000px){ .svc--narrow{grid-column:span 2} .svc--narrow .svc-media{aspect-ratio:16/9} .svc--wide .svc-media{aspect-ratio:21/9} /* The lead service reads across the full width, picture beside the copy. */ .svc--feature{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:stretch} .svc--feature .svc-media{aspect-ratio:auto;height:100%;min-height:17rem} .svc--feature .svc-body{padding:1.7rem 2rem;justify-content:center} .svc--feature h3{font-size:1.85rem} .svc--feature p{font-size:1.08rem;max-width:44ch;margin-bottom:.35rem} .svc--feature .svc-link{margin-top:.9rem} } /* Lead card carries a little more weight than the rest. */ .svc--feature{border-color:#c8d5ea;box-shadow:0 10px 30px rgba(10,31,77,.08)} .svc--feature::before{opacity:1;width:4px} /* --- Split feature ------------------------------------------------------ */ .split{display:grid;gap:clamp(2rem,4vw,3.4rem);align-items:center} @media (min-width:900px){ .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .split--reverse .split-media{order:2} } .split-media img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block} .checklist{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.6rem} .checklist li{display:flex;gap:.65rem;align-items:flex-start} .checklist svg{width:20px;height:20px;fill:var(--red);flex:none;margin-top:.24rem} /* A second, smaller photograph tucked over the corner of the first. */ .stack-shot{position:relative} .stack-shot .stack-inset{ position:absolute;right:-1.1rem;bottom:-1.6rem;z-index:3; width:42%;max-width:14rem; border:4px solid #fff;border-radius:4px;overflow:hidden; box-shadow:0 16px 36px rgba(6,17,43,.3); } .stack-shot .stack-inset img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover} @media (max-width:899.98px){ .stack-shot .stack-inset{width:38%;right:-.4rem;bottom:-1.1rem;border-width:3px} } /* --- Method panel (DF-2000) --------------------------------------------- */ .method{ background: radial-gradient(90% 120% at 88% 8%,#17397c 0%,transparent 58%), linear-gradient(170deg,var(--navy-deep),#07183d); color:#e8eefb;position:relative;isolation:isolate;overflow:hidden; } .method h2{color:#fff} .method .lede{color:#c6d5f0} .method-grid{display:grid;gap:clamp(1.8rem,3.5vw,3rem);align-items:center} @media (min-width:900px){.method-grid{grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}} /* Three plain facts on stitched plates instead of a wall of prose. */ .method-points{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.7rem} .method-points li{ display:flex;gap:.8rem;align-items:flex-start; padding:.85rem 1rem;border-radius:4px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.11); border-left:3px solid var(--red); } .method-points svg{width:18px;height:18px;fill:#ff8a93;flex:none;margin-top:.25rem} .method-points span{color:#dbe6f8;font-size:1rem} /* --- Gallery ------------------------------------------------------------ */ .gallery{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)} .gallery figure{margin:0;border-radius:5px;overflow:hidden;background:var(--cream);position:relative} .gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s ease;display:block} .gallery figure:hover img{transform:scale(1.045)} /* Four across on a desktop. As a 2x2 block this ran a screen and a half. */ @media (min-width:900px){.gallery{grid-template-columns:repeat(4,minmax(0,1fr))}} .gallery figcaption{ position:absolute;left:0;right:0;bottom:0; padding:1.6rem .85rem .7rem; background:linear-gradient(180deg,transparent,rgba(6,17,43,.86)); color:#fff;font-size:.9rem; } /* --- FAQ ---------------------------------------------------------------- */ .faq-list{max-width:48rem;margin-inline:auto;border-top:2px dashed rgba(18,48,110,.2)} .faq-item{border-bottom:2px dashed rgba(18,48,110,.2)} .faq-item summary{ position:relative;list-style:none;cursor:pointer; padding:1.05rem 3rem 1.05rem 1.1rem; font-family:"Source Sans 3",sans-serif; font-size:1.08rem;font-weight:700;line-height:1.4; color:var(--navy-deep); border-left:3px solid transparent; transition:background-color .14s ease,border-color .14s ease,color .14s ease; } .faq-item summary::-webkit-details-marker{display:none} .faq-item summary:hover{background:rgba(18,48,110,.045);border-left-color:var(--red);color:var(--red)} .faq-item summary:focus-visible{outline:3px solid var(--red);outline-offset:-3px;border-radius:3px} .faq-item[open] summary{border-left-color:var(--red);color:var(--navy)} .faq-item summary::after{ content:"";position:absolute;right:1.15rem;top:50%; width:9px;height:9px; border-right:2.5px solid var(--red);border-bottom:2.5px solid var(--red); transform:translateY(-65%) rotate(45deg); transition:transform .18s ease; } .faq-item[open] summary::after{transform:translateY(-25%) rotate(-135deg)} .faq-answer{ padding:.1rem 1.5rem 1.35rem 1.15rem; color:var(--muted);max-width:64ch; border-left:3px solid var(--red); } .faq-answer p{margin-bottom:.6rem} .faq-answer p:last-child{margin-bottom:0} /* --- Service area ------------------------------------------------------- */ /* Nine towns, three by three. No stranded card on a final row, and an arrow rather than a map pin: a pin per town would read as a branch per town. */ .area-list{ list-style:none;padding:0;margin:1.6rem auto 0; display:grid;gap:.7rem; grid-template-columns:repeat(2,minmax(0,1fr)); max-width:56rem; } @media (min-width:720px){.area-list{grid-template-columns:repeat(3,minmax(0,1fr))}} .area-list li{margin:0} .area-list a{ display:flex;align-items:center;gap:.6rem; min-height:56px;padding:.7rem 1rem; background:var(--paper);border:1px solid var(--line);border-radius:5px; color:var(--navy-deep);text-decoration:none;font-weight:600; transition:border-color .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease; } .area-list a:hover{ border-color:var(--red);color:var(--red); transform:translateY(-2px);box-shadow:0 10px 22px rgba(10,31,77,.1); } .area-list svg{width:15px;height:15px;fill:var(--red);flex:none;transition:transform .15s ease} .area-list a:hover svg{transform:translateX(3px)} .area-list .area-serving{ font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--muted);display:block;line-height:1;margin-bottom:.2rem; } .area-list a:hover .area-serving{color:var(--red)} .area-note{ margin:1.4rem auto 0;max-width:46rem;text-align:center; font-size:.95rem;color:var(--muted); } /* --- Review invitation -------------------------------------------------- */ /* Shown while no reviews are published. Deliberately small: an ask, not an empty testimonial section pretending to be content. */ .review-ask{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:1rem 1.6rem;max-width:60rem;margin:0 auto; padding:1.15rem 1.4rem; background:var(--paper);border:1px solid var(--line); border-left:3px solid var(--red);border-radius:5px; } .review-ask p{margin:0;color:var(--muted)} .review-ask strong{display:block;color:var(--navy-deep);font-size:1.06rem} .review-ask .btn{flex:none} /* --- Notice ------------------------------------------------------------- */ .notice{ border-left:4px solid var(--navy);background:var(--cream); padding:1.15rem 1.35rem;border-radius:0 6px 6px 0;margin:1.75rem 0; } .notice p:last-child{margin-bottom:0} .notice--red{border-left-color:var(--red)} /* --- CTA band ----------------------------------------------------------- Not a centred red rectangle with two buttons under it: the ask sits on the left and the two actions sit beside it, over a single pressed crease. */ .cta-band{ background: radial-gradient(80% 130% at 82% 10%,#d8323f 0%,transparent 62%), linear-gradient(160deg,var(--red) 0%,var(--red-dark) 100%); color:#fff;position:relative;isolation:isolate;overflow:hidden; border-top:2px dashed rgba(255,255,255,.28); } .cta-band h2{color:#fff;margin-bottom:.3em} .cta-band p{color:#ffe2e4;max-width:52ch;margin-bottom:0} .cta-inner{display:grid;gap:1.5rem;align-items:center} @media (min-width:820px){ .cta-inner{grid-template-columns:minmax(0,1fr) auto;gap:2.75rem} } .cta-actions{display:flex;flex-wrap:wrap;gap:.8rem} .cta-band .btn-primary{background:#fff;border-color:#fff;color:var(--red-dark)} .cta-band .btn-primary:hover{background:var(--navy-deep);border-color:var(--navy-deep);color:#fff} /* --- Footer ------------------------------------------------------------- Reduced from a second page to a strip. The nine town pills that used to sit under here are gone: the service-area section immediately above already lists every town, and one link does the job down here. */ .site-footer{background:var(--navy-deep);color:#c2d1ee;margin-top:0} .footer-grid{ display:grid;gap:1.6rem 2.25rem; padding:clamp(2rem,4vw,2.9rem) 0 1.4rem; } /* On a phone the footer was running a screen and a half. The link groups go two-up, the brand keeps the full width, and the whole thing lands inside one screen. */ @media (max-width:699.98px){ .footer-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.35rem 1.2rem; padding:1.6rem 0 1.1rem; } /* The mark and the one-line description share a row instead of stacking. */ .footer-brand{ grid-column:1/-1; display:grid;grid-template-columns:auto minmax(0,1fr); gap:.25rem .85rem;align-items:center; } .footer-logo{width:50px;grid-row:1;grid-column:1} .footer-tag{grid-row:1;grid-column:2;margin:0;max-width:none;font-size:.9rem;line-height:1.4} .footer-address{grid-column:1/-1;margin-top:.55rem;line-height:1.5} .footer-portal{grid-column:1/-1;margin:.55rem 0 0} .footer-portal a{min-height:38px} .footer-col li{margin-bottom:.2rem} .footer-col a,.footer-address{font-size:.92rem} .footer-col a{line-height:1.35;display:inline-block} .footer-head{margin-bottom:.5rem} .hours-compact dt{margin-top:.4rem} .footer-base-inner{padding:.6rem 0;gap:.15rem 1rem;font-size:.84rem} } @media (min-width:700px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1040px){.footer-grid{grid-template-columns:1.3fr .92fr .95fr .72fr 1.2fr}} .footer-logo{width:58px;background:#fff;padding:5px;border-radius:5px} .footer-tag{margin:.7rem 0 .8rem;color:#a9bcdf;font-size:.95rem;max-width:32ch} .footer-address{font-size:.95rem;line-height:1.6} .footer-address strong{color:#fff} .footer-address a{color:#fff;font-weight:700} .footer-address a:hover{color:#ff9aa2} /* Secondary route to the customer portal. The button in the navigation bar is the primary one; this is for people already at the bottom of a long page. */ .footer-portal{margin:.85rem 0 0} .footer-portal a{display:inline-flex;align-items:center;gap:.45rem; min-height:44px;padding:.3rem .8rem .3rem 0; color:#fff;font-weight:700;font-size:.95rem; text-decoration:underline;text-underline-offset:.2em} .footer-portal a:hover{color:#ff9aa2} .footer-portal .ic{width:16px;height:16px;fill:currentColor;flex:none} /* Interface type, not poster type. */ .footer-head{ font-family:"Source Sans 3",sans-serif; font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:#8fa9d6;margin:0 0 .65rem; } .footer-col ul{list-style:none;margin:0;padding:0} .footer-col li{margin-bottom:.32rem} .footer-col a{color:#c2d1ee;text-decoration:none;font-size:.95rem} .footer-col a:hover{color:#fff;text-decoration:underline} /* Grouped hours: three lines rather than seven. */ .hours-compact{margin:0;font-size:.92rem;line-height:1.45} .hours-compact dt{color:#8fa9d6;margin-top:.5rem} .hours-compact dt:first-child{margin-top:0} .hours-compact dd{margin:0;color:#dfe8f8;font-weight:600;white-space:nowrap} .hours-table{width:100%;border-collapse:collapse;font-size:.92rem} .hours-table th,.hours-table td{padding:.16rem 0;text-align:left;font-weight:400;color:#c2d1ee} /* A day's hours belong on one line; wrapped, the column doubles in height. */ .hours-table td{white-space:nowrap} .hours-table th{color:#8fa9d6;padding-right:.9rem;white-space:nowrap;font-weight:400} .footer-base{background:#06112b;font-size:.88rem} .footer-base-inner{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem; align-items:center;justify-content:space-between;padding:.8rem 0} .footer-base p{margin:0;color:#8fa4cb} .footer-credit a{color:#b6c8ea} /* --- Page hero (interior pages) ---------------------------------------- */ .page-hero{background:var(--navy-deep);color:#fff;position:relative;isolation:isolate;overflow:hidden} .page-hero-media{position:absolute;inset:0;z-index:-2} .page-hero-media img{width:100%;height:100%;object-fit:cover} .page-hero::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(100deg,rgba(6,17,43,.94),rgba(10,31,77,.72))} .page-hero-inner{padding:clamp(2.5rem,6vw,4.75rem) 0} .page-hero h1{color:#fff;margin-bottom:.3em} .page-hero .lede{color:#cfdcf3} .breadcrumb{padding:.85rem 0;font-size:.92rem;background:var(--cream);border-bottom:1px solid var(--line)} .breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center} .breadcrumb li{margin:0;display:flex;align-items:center;gap:.4rem;color:var(--muted)} .breadcrumb li+li::before{content:"/";color:#a9b7ce} .breadcrumb a{color:var(--navy);text-decoration:none} .breadcrumb a:hover{color:var(--red);text-decoration:underline} /* --- Forms -------------------------------------------------------------- */ .form-grid{display:grid;gap:1.15rem} @media (min-width:700px){ .form-grid{grid-template-columns:1fr 1fr} .form-grid .full{grid-column:1 / -1} } .field label{display:block;font-weight:700;margin-bottom:.35rem;color:var(--navy-deep)} .field .hint{display:block;font-weight:400;color:var(--muted);font-size:.92rem;margin-top:.15rem} .field input,.field select,.field textarea{ width:100%;min-height:52px;padding:.75rem .9rem; font:inherit;color:var(--ink);background:#fff; border:1.5px solid #c3d0e4;border-radius:5px; } .field textarea{min-height:150px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);outline-offset:1px} .field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--red);background:#fff6f6} .field-error{display:block;color:var(--red-dark);font-weight:600;font-size:.94rem;margin-top:.3rem} .hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} .consent{display:flex;gap:.65rem;align-items:flex-start} .consent input{width:22px;height:22px;min-height:22px;margin-top:.2rem;flex:none} .consent label{font-weight:400;color:var(--muted)} .alert{padding:1.05rem 1.25rem;border-radius:6px;margin-bottom:1.5rem;border:1px solid} .alert-ok{background:#eef8f2;border-color:#b8e0c9;color:#155f3c} .alert-bad{background:#fdf0f1;border-color:#f2c2c6;color:#8c1620} .alert p:last-child{margin-bottom:0} /* --- Contact panel ------------------------------------------------------ */ .contact-grid{display:grid;gap:2.5rem} @media (min-width:960px){.contact-grid{grid-template-columns:1.15fr .85fr;gap:3.5rem}} .info-card{background:var(--cream);border:1px solid var(--line);border-radius:8px;padding:1.6rem} .info-card h3{margin-top:0} .info-row{display:flex;gap:.75rem;align-items:flex-start;margin-bottom:1.1rem} .info-row svg{width:20px;height:20px;fill:var(--red);flex:none;margin-top:.25rem} .info-row p{margin:0} .map-embed{border:0;width:100%;aspect-ratio:16/10;border-radius:8px;background:var(--cream)} /* --- Popup -------------------------------------------------------------- */ .popup-backdrop{ position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:1rem; background:rgba(6,17,43,.72); } .popup-backdrop[hidden]{display:none} .popup{ background:#fff;border-radius:10px;max-width:32rem;width:100%; box-shadow:0 26px 70px rgba(0,0,0,.4);overflow:hidden;position:relative; max-height:90vh;overflow-y:auto; } .popup-close{ position:absolute;top:.5rem;right:.5rem;width:44px;height:44px; background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:50%; font-size:1.5rem;line-height:1;color:var(--navy-deep);cursor:pointer; } .popup-close:hover{background:var(--red);color:#fff;border-color:var(--red)} .popup-img{width:100%;aspect-ratio:16/9;object-fit:cover} .popup-body{padding:1.6rem} .popup-body h2{font-size:1.7rem} /* --- 404 ---------------------------------------------------------------- */ .notfound{text-align:center;padding:clamp(3rem,9vw,6rem) 0} .notfound-code{ font-family:"Barlow Condensed",sans-serif;font-size:clamp(5rem,18vw,10rem); line-height:.85;color:var(--line);margin:0 0 .2em; } .notfound-links{list-style:none;padding:0;margin:1.75rem 0 0; display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center} .notfound-links a{ display:inline-block;padding:.6rem 1.1rem;border:1px solid var(--line); border-radius:999px;text-decoration:none;color:var(--navy-deep); } .notfound-links a:hover{border-color:var(--red);color:var(--red)} /* --- Tables ------------------------------------------------------------- */ /* A flex or grid child defaults to min-width:auto, which means it grows to fit its widest content instead of letting the scroller scroll. Without these the 32rem table pushed the whole page sideways on a phone. */ .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.25rem 0; min-width:0;max-width:100%} .split > *, .grid > *, .contact-grid > *, .info-row, .info-row > *, .footer-grid > *{min-width:0} .data-table{width:100%;border-collapse:collapse;min-width:26rem} .data-table th,.data-table td{padding:.7rem .85rem;border-bottom:1px solid var(--line);text-align:left} .data-table th{background:var(--cream);font-family:"Barlow Condensed",sans-serif; text-transform:uppercase;letter-spacing:.05em;color:var(--navy-deep)} /* --- Motion ------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important; } .hero-media video{display:none} } /* --- Right-click actions ------------------------------------------------ A small translucent panel offering the three things a visitor actually wants from this business: telephone, message, portal. It replaces the browser menu only on ordinary page area - never on a form field, never on a link or an image, and never when Shift is held - so nothing a visitor normally right-clicks for is taken away from them. --------------------------------------------------------------------- */ .crc-menu{ position:fixed;z-index:150; /* over the popup, under the skip link */ min-width:15.5rem;max-width:min(19rem,92vw); margin:0;padding:.38rem; list-style:none; background:rgba(10,26,60,.8); border:1px solid rgba(255,255,255,.2); border-radius:8px; box-shadow:0 24px 60px rgba(3,10,28,.5),0 2px 0 rgba(255,255,255,.06) inset; color:#fff; opacity:0;transform:scale(.97) translateY(-4px);transform-origin:top left; transition:opacity .12s ease,transform .12s ease; } @supports ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){ .crc-menu{ -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%); background:rgba(10,26,60,.62); } } .crc-menu[hidden]{display:none} .crc-menu.is-open{opacity:1;transform:none} .crc-menu-head{ display:flex;align-items:center;gap:.5rem; padding:.45rem .6rem .5rem;margin:0 0 .3rem; border-bottom:1px solid rgba(255,255,255,.16); font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:#a9c0e8; } .crc-menu-head img{width:20px;height:auto;flex:none;border-radius:2px;background:#fff;padding:1px} .crc-menu li{margin:0} .crc-menu a{ display:flex;align-items:center;gap:.7rem; padding:.62rem .65rem;border-radius:5px; color:#fff;text-decoration:none;font-size:.98rem;line-height:1.25; } .crc-menu a .ic{width:17px;height:17px;fill:#ff8a93;flex:none} .crc-menu a small{display:block;color:#a9c0e8;font-size:.79rem;font-weight:400} .crc-menu a b{font-weight:700} .crc-menu a:hover, .crc-menu a:focus-visible{background:rgba(255,255,255,.14);color:#fff;outline:none} .crc-menu a:focus-visible{box-shadow:inset 0 0 0 2px var(--red)} .crc-menu .crc-menu-ext{margin-left:auto;opacity:.6} .crc-menu .crc-menu-ext svg{width:13px;height:13px;fill:currentColor;display:block} @media (prefers-reduced-motion:reduce){ .crc-menu{transition:none} } /* --- Visual Editor affordances (admin iframe only) --------------------- */ .ve-editing [data-ve]:hover{outline:2px dashed var(--red);outline-offset:2px;cursor:text} .ve-editing [data-ve].is-selected{outline:3px solid var(--red);outline-offset:2px}