/*
Theme Name: Chauffeur Geelong
Description: The website theme for Chauffeur Geelong. Services, suburb pages, fleet, FAQs, reviews and a quote form, with search engine basics built in and one-click starter content under Appearance > Site setup.
Version: 1.1.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chauffeur-geelong
Tags: one-column, two-columns, custom-logo, custom-menu, featured-images, translation-ready
*/

/* Chauffeur Geelong — site stylesheet
   Tokens first; change brand colours and fonts here. */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url(assets/fonts/newsreader-latin-opsz-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2")}
/* While those two fonts load (or if they cannot), the visitor's own Arial and Times New Roman stand in, scaled to
   the same widths, so the text does not re-flow when the real fonts arrive. Nothing is fetched for these.
   The scales were measured in the browser against the site's own text; ascent and descent keep the real fonts' line. */
@font-face{font-family:"Hanken Fallback";font-weight:100 500;src:local("Arial"),local("Liberation Sans"),local("Arimo"),local("Helvetica");size-adjust:100.9%;ascent-override:99.11%;descent-override:30.03%;line-gap-override:0%}
@font-face{font-family:"Hanken Fallback";font-weight:600 900;src:local("Arial Bold"),local("Liberation Sans Bold"),local("Arimo Bold"),local("Helvetica Bold");size-adjust:94.9%;ascent-override:105.37%;descent-override:31.93%;line-gap-override:0%}
/* Figures are the same width in every weight of Hanken Grotesk, so phone numbers get a scale of their own */
@font-face{font-family:"Hanken Fallback";font-weight:100 500;src:local("Arial"),local("Liberation Sans"),local("Arimo"),local("Helvetica");unicode-range:U+30-39;size-adjust:100.7%;ascent-override:99.3%;descent-override:30.09%;line-gap-override:0%}
@font-face{font-family:"Hanken Fallback";font-weight:600 900;src:local("Arial Bold"),local("Liberation Sans Bold"),local("Arimo Bold"),local("Helvetica Bold");unicode-range:U+30-39;size-adjust:100.7%;ascent-override:99.3%;descent-override:30.09%;line-gap-override:0%}
/* Newsreader is wider in its medium weight than in its regular, and wider again as the text gets larger,
   so each weight has a scale, and the two heading sizes have stand-ins of their own */
@font-face{font-family:"Newsreader Fallback";font-weight:100 450;src:local("Times New Roman"),local("Liberation Serif"),local("Tinos"),local("Times");size-adjust:101.2%;ascent-override:72.61%;descent-override:26.19%;line-gap-override:0%}
@font-face{font-family:"Newsreader Fallback";font-weight:451 599;src:local("Times New Roman"),local("Liberation Serif"),local("Tinos"),local("Times");size-adjust:104%;ascent-override:70.65%;descent-override:25.48%;line-gap-override:0%}
@font-face{font-family:"Newsreader Fallback";font-weight:600 900;src:local("Times New Roman Bold"),local("Liberation Serif Bold"),local("Tinos Bold"),local("Times Bold");size-adjust:100.4%;ascent-override:73.19%;descent-override:26.39%;line-gap-override:0%}
@font-face{font-family:"Newsreader H2 Fallback";font-weight:100 900;src:local("Times New Roman"),local("Liberation Serif"),local("Tinos"),local("Times");size-adjust:105.3%;ascent-override:69.78%;descent-override:25.17%;line-gap-override:0%}
@font-face{font-family:"Newsreader H1 Fallback";font-weight:100 900;src:local("Times New Roman"),local("Liberation Serif"),local("Tinos"),local("Times");size-adjust:110%;ascent-override:66.8%;descent-override:24.09%;line-gap-override:0%}
/* Android has neither Arial nor Times New Roman. Its own sans-serif is already close to Hanken Grotesk in width;
   its Noto Serif is a good deal wider than Newsreader, so it stands in scaled down. (The font goes by one of
   several names, depending on the version installed.) */
@font-face{font-family:"Newsreader Fallback 2";font-weight:100 450;src:local("Noto Serif"),local("Noto Serif Regular"),local("NotoSerif-Regular");size-adjust:86%;ascent-override:85.44%;descent-override:30.81%;line-gap-override:0%}
@font-face{font-family:"Newsreader Fallback 2";font-weight:451 599;src:local("Noto Serif"),local("Noto Serif Regular"),local("NotoSerif-Regular");size-adjust:88%;ascent-override:83.5%;descent-override:30.11%;line-gap-override:0%}
@font-face{font-family:"Newsreader Fallback 2";font-weight:600 900;src:local("Noto Serif Bold"),local("NotoSerif-Bold"),local("Noto Serif"),local("Noto Serif Regular"),local("NotoSerif-Regular");size-adjust:85.5%;ascent-override:85.94%;descent-override:30.99%;line-gap-override:0%}
@font-face{font-family:"Newsreader H1 Fallback 2";font-weight:100 900;src:local("Noto Serif"),local("Noto Serif Regular"),local("NotoSerif-Regular");size-adjust:92.5%;ascent-override:79.44%;descent-override:28.65%;line-gap-override:0%}
:root{
  --bay:#123B36;        /* deep bay green: header, hero, footer */
  --bay-deep:#0B2A26;
  --brass:#C29A56;      /* accent on dark */
  --brass-deep:#84602A; /* accent text on light */
  --paper:#F6F8F7;
  --mist:#E3EBE8;
  --line:#CFDAD6;
  --text:#1B2A27;
  --muted:#566864;
  --white:#fff;
  --display:"Newsreader","Newsreader Fallback","Newsreader Fallback 2",Georgia,"Times New Roman",serif;
  --body:"Hanken Grotesk","Hanken Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:73.75rem;      /* 1180px at the usual text size; wider for visitors who use larger text */
  --r-sm:6px; --r-md:12px; --r-lg:20px;
  --on-dark:#DDE8E5;    /* text on the bay green */
  --on-dark-soft:#B9CCC7;
  --rule-dark:rgba(255,255,255,.14);
  --shadow-panel:0 0 0 1px rgba(11,42,38,.09),0 28px 56px -32px rgba(11,42,38,.5);
}
*,*::before,*::after{box-sizing:border-box}
/* Text size. Everything is sized from the root, in rem. The root follows the browser's own text size setting (100%)
   and, where the browser reports it, the text size chosen for the whole phone or computer (Android's font size,
   Windows' text size): env(preferred-text-scale), which is 1 unless the visitor has changed it. It is followed up
   to one and a half times; the layouts change with the screen's width, and beyond that there is no room for it. */
html{font-size:calc(100% * min(env(preferred-text-scale,1),1.5));scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Reduced motion: nothing slides or fades. The short wait before a dropdown opens or closes is kept: it is a pause, not a movement. */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:0s!important;animation:none!important}}
body{margin:0;font-family:var(--body);font-size:1.0625rem;line-height:1.6;color:var(--text);background:var(--white);overflow-wrap:break-word}
img,svg{max-width:100%;display:block}
a{color:var(--bay);text-underline-offset:3px}
a:hover{color:var(--brass-deep)}
/* Keyboard focus: a brass ring with a dark line inside it, so one of the two always shows, on white or on green */
:focus-visible{outline:3px solid var(--brass);outline-offset:2px;box-shadow:0 0 0 2px var(--bay-deep);border-radius:3px}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.12;letter-spacing:-.012em;margin:0 0 .5em;color:var(--bay-deep);text-wrap:balance}
/* Headings name the stand-in made for their size. A page's main heading grows with the screen, so it changes
   stand-in on the way: sooner on the home page, where it is larger. */
h1,h2{font-family:"Newsreader","Newsreader H2 Fallback","Newsreader Fallback 2",Georgia,"Times New Roman",serif}
@media (min-width:52em){.hero:not(.hero--page) h1{font-family:"Newsreader","Newsreader H1 Fallback","Newsreader H1 Fallback 2",Georgia,"Times New Roman",serif}}
@media (min-width:61em){h1{font-family:"Newsreader","Newsreader H1 Fallback","Newsreader H1 Fallback 2",Georgia,"Times New Roman",serif}}
h1{font-size:clamp(2.3rem,5.2vw,4rem)}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem)}
h3{font-size:1.35rem;line-height:1.2}
h4{font-size:1.1rem}
p{margin:0 0 1em}
/* Whatever the page scrolls to (a link within the page, or the next thing the keyboard reaches) stops clear of the
   sticky header. --clear is the room that takes: the header's height (--header-h, set by the script that fits the
   menu bar; 76px until it has run) and a little air. The page keeps that much free at its top (--room-top), and on
   phones the height of the bottom bar free at its foot (--room-bottom). */
html{--clear:calc(var(--header-h,76px) + 20px);--room-top:var(--clear);--room-bottom:0px;scroll-padding:var(--room-top) 0 var(--room-bottom)}
/* The header and the bottom bar do not move, so while focus is inside one of them the page must not try to bring
   it into that room: the room is given up, and a link from there to a place on the page is kept clear by the place
   itself. The script sets .bar-focus to the same end a moment earlier, for browsers that work out where to scroll
   before they note what has focus. */
html:has(.header :focus,.mbar :focus){--room-top:0px;--room-bottom:0px}
html.bar-focus{--room-top:0px;--room-bottom:0px}
[id]{scroll-margin-top:calc(var(--clear) - var(--room-top))}
ul,ol{margin:0 0 1em;padding-left:1.2em}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:100;background:var(--white);padding:10px 14px;border-radius:var(--r-sm)}
.lede{font-size:1.15rem;color:var(--muted);max-width:62ch}
.measure{max-width:68ch}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* A column, or a piece of a row, never grows past its share because of one long word (large text on a small phone):
   the word breaks instead */
.hero__grid>*,.strip li,.services>li,.steps>li,.split>*,.reasons>li,.reviews>*,.names>li,.fleet>*,.posts>*,.footer__grid>*,
.btn-row>*,.section__head>*,.services__cta>*,.callbox>*,.cov-foot>*,.band .wrap>*,.footer__base>*{min-width:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font:600 1rem/1.2 var(--body);padding:.85em 1.3em;border-radius:999px;border:1.5px solid transparent;text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn svg{width:1.1em;height:1.1em;flex:none}
.btn--brass{background:var(--brass);color:var(--bay-deep)}
.btn--brass:hover{background:#D3AD6C;color:var(--bay-deep)}
.btn--bay{background:var(--bay);color:var(--white)}
.btn--bay:hover{background:var(--bay-deep);color:var(--white)}
.btn--ghost{border-color:currentColor;color:var(--bay);background:transparent}
.btn--ghost:hover{background:var(--bay);color:var(--white);border-color:var(--bay)}
.on-dark .btn--ghost{color:var(--white)}
.on-dark .btn--ghost:hover{background:var(--white);color:var(--bay-deep);border-color:var(--white)}
.btn--wa{background:#1F7A4D;color:var(--white)}
.btn--wa:hover{background:#17623D;color:var(--white)}
.btn--block{width:100%}
.btn small{display:block;font-weight:500;font-size:.78rem;opacity:.85}
.btn-stack{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.btn[disabled]{opacity:.65;cursor:progress}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* Top bar + header */
.topbar{background:var(--bay-deep);color:#D5E2DE;font-size:.86rem;letter-spacing:.01em}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;padding-top:8px;padding-bottom:8px}
.topbar a{color:var(--white);font-weight:600;text-decoration:none}
.topbar__right{display:flex;align-items:center;gap:18px;white-space:nowrap}
.topbar__right span{display:inline-flex;align-items:center;gap:8px}
.topbar__right span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brass)}
.header{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:env(safe-area-inset-top,0px);z-index:50;transition:box-shadow .2s ease}
.header.is-stuck{box-shadow:0 14px 34px -22px rgba(11,42,38,.45)}
.header .wrap{display:flex;align-items:center;gap:0 24px;min-height:76px;position:relative}
/* The name in type keeps its size on wide screens and follows the screen width on the narrowest phones.
   A long name wraps onto a second line when the row is too short for it (after the Menu button has given up its word). */
.logo{flex:0 1 auto;min-width:0;font-family:var(--display);font-size:min(1.5rem,6.6vw);font-weight:600;color:var(--bay-deep);text-decoration:none;letter-spacing:-.01em;line-height:1.1;text-wrap:balance}
.logo span{color:var(--brass-deep)}
.logo--img{flex:0 1 auto;min-width:0;max-width:240px}
.logo img{height:46px;width:auto;max-width:100%;object-fit:contain}
.header__cta{flex:none;margin-left:10px;padding:.62em 1.15em;font-size:.98rem}
.header__cta svg{color:var(--brass)}

/* Menu. Top-level items are .nav-item; a dropdown is .sub, and a wide one (.sub--mega) has a call box beside its links.
   The bar is shown from 65.0625em (1041px at the usual text size); below that the Menu button opens a sheet.
   The width is in em so that visitors who use larger text get the sheet before the bar runs out of room. */
.nav{display:flex;align-items:stretch;align-self:stretch;gap:2px;margin-left:auto}
.nav-item{position:relative;display:flex;flex:none;align-items:center}
.nav-link{position:relative;display:flex;align-items:center;align-self:stretch;padding:0 13px;font-size:.98rem;font-weight:500;letter-spacing:.005em;color:var(--text);text-decoration:none;white-space:nowrap}
.sub-toggle{position:relative;z-index:1;flex:none;display:grid;place-items:center;background:none;border:0;border-radius:var(--r-sm);padding:8px 6px;margin-left:-11px;cursor:pointer;color:var(--muted)}
.sub-toggle svg{width:12px;height:12px;transition:transform .2s ease}
.sub ul{list-style:none;margin:0;padding:0}
.sub li a{position:relative;display:block;padding:9px 14px 9px 20px;font-family:var(--display);font-size:1.1rem;line-height:1.25;color:var(--bay-deep);text-decoration:none}
.sub__aside{display:flex;flex-direction:column;align-items:flex-start;background:var(--bay-deep);color:var(--on-dark-soft);padding:28px 28px 30px}
.sub__aside strong{font-family:var(--display);font-size:1.45rem;font-weight:500;line-height:1.15;color:var(--white)}
.sub__aside p{margin:.45em 0 1.15em;font-size:.95rem}
.sub__aside .btn{white-space:nowrap}
.sub__all{margin-top:1.1em;font-size:.95rem;font-weight:600;color:var(--white);text-underline-offset:4px;text-decoration-color:var(--brass)}
.sub__all:hover{color:var(--brass)}
/* The Menu button: the word, then two lines that cross when the sheet is open. If the row is too tight for
   both (a wide logo, large text), the word drops to a second line that the button's height hides. */
.burger{display:none;flex:0 1000 auto;flex-flow:row-reverse wrap;align-items:center;gap:0 10px;height:44px;min-width:34px;overflow:hidden;background:none;border:0;border-radius:var(--r-sm);padding:0 0 0 8px;cursor:pointer;color:var(--bay-deep);font:600 .95rem/1 var(--body)}
.burger__icon{position:relative;flex:none;width:26px;height:44px}
.burger__icon span{position:absolute;left:0;right:0;border-top:2px solid;border-radius:2px;transition:transform .25s ease,top .25s ease}
.burger__icon span:first-child{top:17px}
.burger__icon span:last-child{top:25px}
.burger[aria-expanded=true] .burger__icon span{top:21px}
.burger[aria-expanded=true] .burger__icon span:first-child{transform:rotate(45deg)}
.burger[aria-expanded=true] .burger__icon span:last-child{transform:rotate(-45deg)}

/* The brass dot beside a name in the menu and the suburb lists: shown on the page you are on, and under the pointer.
   It is drawn as a border, which Windows contrast themes keep. */
.sub li a::before,.cov__list a::before{content:"";position:absolute;left:4px;top:50%;margin-top:-3px;border:3px solid var(--brass-deep);border-radius:50%;opacity:0;transform:scale(.4);transition:opacity .16s ease,transform .16s ease}
.sub li a[aria-current=page]::before{opacity:1;transform:none}
@media (hover:hover){
  .sub li a:hover,.cov__list a:hover,.names a:hover{color:var(--brass-deep)}
  .sub li a:hover::before,.cov__list a:hover::before{opacity:1;transform:none}
  .names li:hover{border-color:var(--brass-deep)}
}

@media (min-width:65.0625em){
  /* If the bar is ever too long for its row (more items, wider letter spacing) the pieces wrap, so nothing overlaps.
     The script then tidies that up: see .bar-tight and .bar-stacked below. */
  .header .wrap{flex-wrap:wrap}
  .nav{flex-wrap:wrap}
  .nav-link{min-height:52px}
  /* A brass line under the item you are on or pointing at, along the header's lower edge */
  .nav-link::after{content:"";position:absolute;left:13px;right:13px;bottom:0;border-bottom:2px solid var(--brass-deep);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
  .nav-link--parent::after{right:-13px}
  .nav-item.open>.nav-link,.nav-item.is-held>.nav-link,.nav-link.is-active,.nav-link[aria-current=page]{color:var(--bay-deep)}
  .nav-item.open>.nav-link::after,.nav-item.is-held>.nav-link::after,.nav-link.is-active::after,.nav-link[aria-current=page]::after{transform:scaleX(1)}
  .nav-item.open>.sub-toggle,.nav-item.is-held>.sub-toggle{color:var(--brass-deep)}
  .nav-item.open>.sub-toggle svg,.nav-item.is-held>.sub-toggle svg{transform:rotate(180deg)}
  .sub-toggle:focus-visible{outline:2px solid var(--brass-deep);outline-offset:-1px;box-shadow:none}
  .logo,.header__cta{position:relative;z-index:7}
  /* Dropdowns hang from the header's lower edge. A list is open while its item has .open (its arrow button)
     or, with a mouse, while the pointer is on the item; it waits a moment before opening and closing.
     .is-held keeps a list open while the pointer is on its way to it across other names (see the hover rules below).
     .is-shut closes a list at once and keeps it closed until the pointer has left (Escape, a second click).
     A small list under one of the last three items opens leftwards, to stay on the screen. */
  .sub{position:absolute;top:100%;left:0;z-index:5;min-width:256px;max-width:calc(100vw - 40px);background:var(--white);border-top:1px solid var(--line);border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:var(--shadow-panel);visibility:hidden;opacity:0;transform:translateY(6px);transition:opacity .18s ease .1s,transform .18s ease .1s,visibility 0s linear .28s}
  /* Windows contrast themes drop shadows, so there the panel gets a drawn edge */
  @media (forced-colors:active){.sub{border:1px solid}}
  /* With reduced motion there is no fade to cover the gap, so the list goes all at once after the same short wait */
  @media (prefers-reduced-motion:reduce){.sub{transition-delay:.1s}}
  .sub>ul{max-height:calc(100vh - var(--header-h,76px) - 94px);overflow-y:auto;padding:12px 8px 14px}
  .nav-item.open>.sub,.nav-item.is-held>.sub{z-index:6;visibility:visible;opacity:1;transform:none;transition-delay:.1s}
  .nav-item.is-shut>.sub{transition:none}
  .nav-item:nth-last-child(-n+3)>.sub:not(.sub--mega){left:auto;right:0}
  .nav-item--mega{position:static}
  .sub--mega{left:20px;right:20px;max-width:none;display:grid;grid-template-columns:1fr 292px;overflow:hidden}
  .sub--mega>ul{display:grid;grid-template-columns:repeat(3,1fr);align-content:start;gap:2px 18px;padding:24px 22px 26px}
  /* A menu that has outgrown its row. The script puts one of two classes on <html>. .bar-tight closes the items up
     a little, which is often enough for one or two more. Otherwise .bar-stacked gives the header two rows:
     the logo and the phone button above a hairline, the menu below it. */
  .bar-tight .nav-link{padding:0 10px}
  .bar-tight .nav-link::after{left:10px}
  .bar-tight .nav-link:not(.nav-link--parent)::after{right:10px}
  .bar-tight .sub-toggle{margin-left:-7px}
  .bar-tight .nav-link--parent::after{right:-17px}
  .bar-stacked .header .wrap{min-height:0}
  .bar-stacked .header .wrap::before{content:"";order:2;flex:0 0 100%;border-top:1px solid var(--line)}
  .bar-stacked .logo,.bar-stacked .header__cta{margin-top:12px;margin-bottom:12px}
  .bar-stacked .header__cta{margin-left:auto}
  .bar-stacked .nav{order:3;flex:0 0 100%;margin-left:-13px}
}
/* With a mouse. While the pointer travels from a name to its open list, it may cross other names: the script
   then puts .is-aiming on the menu and .is-held on the item, and the names in between do not react. */
@media (min-width:65.0625em) and (hover:hover){
  .nav:not(.is-aiming) .nav-item:hover>.nav-link{color:var(--bay-deep)}
  .nav:not(.is-aiming) .nav-item:hover>.nav-link::after{transform:scaleX(1)}
  .nav:not(.is-aiming) .nav-item:hover:not(.is-shut)>.sub-toggle{color:var(--brass-deep)}
  .nav:not(.is-aiming) .nav-item:hover:not(.is-shut)>.sub-toggle svg{transform:rotate(180deg)}
  .nav:not(.is-aiming) .nav-item:hover:not(.is-shut)>.sub{z-index:6;visibility:visible;opacity:1;transform:none;transition-delay:.1s}
  .nav:not(.is-aiming) .nav-item.is-prompt:hover:not(.is-shut)>.sub{transition-delay:0s}
  .nav.is-aiming .nav-item:not(.is-held)>.nav-link:not(.is-active):not([aria-current]){color:var(--text)}
}
/* A finger needs a bigger target than the small arrow */
@media (min-width:65.0625em) and (pointer:coarse){.sub-toggle::before{content:"";position:absolute;inset:-12px -9px}}
@media (min-width:65.0625em) and (max-width:71.25em){.nav-link{padding:0 10px}.nav-link::after{left:10px}.nav-link:not(.nav-link--parent)::after{right:10px}.sub-toggle{margin-left:-7px}.nav-link--parent::after{right:-17px}.bar-stacked .nav{margin-left:-10px}}

@media not all and (min-width:65.0625em){
  .burger{display:flex;order:3}
  .header__cta{order:2;margin-left:auto}
  /* The menu opens as a sheet that fills the screen below the header. The script sets --nav-top to the header's
     lower edge and --nav-bottom to the height of the Call / WhatsApp / Quote bar where that is showing. */
  .nav{position:fixed;left:0;right:0;top:var(--nav-top,76px);bottom:var(--nav-bottom,0px);display:block;margin:0;padding:6px max(20px,env(safe-area-inset-right)) calc(30px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));background:var(--bay);color:var(--on-dark);overflow-y:auto;overscroll-behavior:contain;visibility:hidden;opacity:0;transform:translateY(-8px)}
  /* It fades in; it closes at once, so it can never be tabbed into while on its way out */
  .nav.open{visibility:visible;opacity:1;transform:none;transition:opacity .22s ease,transform .22s ease}
  /* The page behind is held still. Where its scrollbar took up room, the script asks for that room to be kept,
     so the header does not jump sideways as the sheet opens. */
  .menu-open{overflow:hidden}
  .menu-gutter{scrollbar-gutter:stable}
  .nav-item{flex-wrap:wrap;border-bottom:1px solid var(--rule-dark)}
  .nav-link{flex:1;align-self:auto;padding:16px 0;font:500 1.5rem/1.2 var(--display);letter-spacing:-.01em;color:var(--white);white-space:normal}
  .nav-link:hover{color:var(--white)}
  .nav-link.is-active,.nav-link[aria-current=page],.nav-link.is-active:hover,.nav-link[aria-current=page]:hover{color:var(--brass)}
  .sub-toggle{width:52px;height:52px;margin:0 -14px 0 0;padding:0;border-radius:50%;color:var(--brass)}
  .sub-toggle svg{width:16px;height:16px}
  .nav-item.open>.sub-toggle svg{transform:rotate(180deg)}
  .sub{display:none;width:100%;padding:0 0 18px}
  .nav-item.open>.sub{display:block}
  /* Each list hangs from a brass line, like stops on a route */
  .sub li{break-inside:avoid;border-left:1px solid rgba(194,154,86,.75);margin-left:3px}
  .sub li a{padding:9px 8px 9px 20px;color:var(--on-dark)}
  .sub li a::before{left:-3.5px;border-color:var(--brass)}
  .sub li a[aria-current=page]{color:var(--white)}
  /* Short names (suburbs) sit two to a row on a phone; longer ones (services) get the full width until there is room */
  .sub--pairs>ul{columns:2;column-gap:20px}
  .sub__aside{display:block;background:none;padding:14px 0 0 3px}
  .sub__aside strong,.sub__aside p,.sub__aside .btn{display:none}
  .sub__all{display:inline-block;margin:0;padding:6px 0}
  .topbar__left{display:none}
  .topbar .wrap{justify-content:center}
  .topbar__right{flex-wrap:wrap;justify-content:center;row-gap:2px}
  @media (min-width:32.5em){.sub--mega>ul{columns:2;column-gap:20px}}
  @media (max-width:22.4em){.sub--pairs>ul{columns:1}}
  @media (hover:hover){.sub li a:hover{color:var(--white)}}
  /* Without scripting the sheet cannot be opened, so the whole menu is simply shown in full.
     The second copy of each "no script" block is for a script that failed to load: its tag then puts .js-failed on <html>. */
  @media (scripting:none){
    .burger{display:none}
    .header{position:static}
    .header .wrap{flex-wrap:wrap}
    .logo{margin:21px 0}
    .nav{position:static;order:4;flex:0 0 calc(100% + 40px);margin:0 -20px;padding-bottom:20px;visibility:visible;opacity:1;transform:none;overflow:visible}
    .sub{display:block}
  }
  .js-failed .burger{display:none}
  .js-failed .header{position:static}
  .js-failed .header .wrap{flex-wrap:wrap}
  .js-failed .logo{margin:21px 0}
  .js-failed .nav{position:static;order:4;flex:0 0 calc(100% + 40px);margin:0 -20px;padding-bottom:20px;visibility:visible;opacity:1;transform:none;overflow:visible}
  .js-failed .sub{display:block}
}
@media (max-width:47.5em){
  .header__cta{display:none}
  .burger{margin-left:auto}
  .header .wrap{min-height:68px}
  .nav{top:var(--nav-top,68px)}
}
/* Without scripting, nothing can press the arrow buttons. On wide screens each list opens as you tab into its item. */
@media (scripting:none){
  .sub-toggle{display:none}
  .nav-link--parent::after{right:13px}
  .nav-item:focus-within>.sub{z-index:6;visibility:visible;opacity:1;transform:none;transition:none}
}
.js-failed .sub-toggle{display:none}
.js-failed .nav-link--parent::after{right:13px}
.js-failed .nav-item:focus-within>.sub{z-index:6;visibility:visible;opacity:1;transform:none;transition:none}

/* Hero */
.hero{background:var(--bay);color:#E6EFEC;padding:56px 0 64px}
.hero h1{color:var(--white)}
.hero--photo{background-size:cover;background-position:center}
.hero__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:start}
.hero__hours{display:inline-block;font-weight:600;color:var(--brass);margin-bottom:14px}
.hero__sub{font-size:1.2rem;max-width:46ch;color:#D5E2DE}
.hero .btn-row{margin:26px 0 30px}
.route{display:flex;align-items:flex-start;margin:28px 0 6px;max-width:520px}
/* The three stops keep to one line each while there is room. When there is not (a narrow screen, large text) they
   give way: a name takes two lines, and its text stops growing where three stops would no longer fit. */
.route__stop{flex:0 1 auto;font-size:min(.9rem,4.2vw);color:#D5E2DE;position:relative;padding-top:20px}
.route__stop::before{content:"";position:absolute;top:0;left:0;width:11px;height:11px;border-radius:50%;border:2px solid var(--brass);background:var(--bay)}
.route__stop:last-child::before{background:var(--brass)}
.route__line{flex:1;height:2px;background:var(--brass);opacity:.6;margin:5px 10px 0 -2px;min-width:24px}
.ticks{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.96rem}
.ticks li{display:flex;align-items:center;gap:8px}
.ticks svg{width:16px;height:16px;color:var(--brass);flex:none}
.hero--page{padding:44px 0 48px}
.hero--page h1{font-size:clamp(2rem,4.4vw,3.2rem)}
.hero__sub--wide{max-width:60ch}
.btn-row--hero{margin-top:22px}
.crumbs{font-size:.9rem;margin-bottom:16px;color:#B9CCC7}
.crumbs a{color:#D5E2DE}
@media (max-width:56.25em){.hero__grid{grid-template-columns:1fr;gap:32px}.hero{padding:36px 0 44px}}
/* The narrowest phones: each stop takes two lines from the start, which leaves the line between them longer */
@media (max-width:26.25em){.route__stop{width:min-content;font-size:min(.84rem,4.2vw);line-height:1.25}}

/* Quote form */
.quote{background:var(--white);color:var(--text);border-radius:var(--r-lg);padding:26px;border:1px solid var(--line);box-shadow:0 18px 40px -30px rgba(11,42,38,.45)}
.hero .quote{border-color:transparent;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.quote h2{font-size:1.6rem;margin-bottom:.3em}
.quote__steps{list-style:none;display:flex;gap:18px;padding:0;margin:0 0 18px;font-size:.9rem;color:var(--muted)}
.quote__steps li{display:flex;align-items:center;gap:8px}
.quote__steps b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line);font-size:.8rem}
.quote__steps li.is-on{color:var(--bay-deep);font-weight:600}
.quote__steps li.is-on b{background:var(--bay);border-color:var(--bay);color:var(--white)}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.choice{font:500 .98rem/1.25 var(--body);text-align:left;padding:14px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--white);color:var(--text);cursor:pointer}
.choice:hover{border-color:var(--bay);background:var(--paper)}
.choice:last-child:nth-child(odd){grid-column:1/-1}
.field{margin-bottom:12px}
.field label{display:block;font-size:.88rem;font-weight:600;margin-bottom:4px}
.field label em{font-style:normal;font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:1rem;padding:11px 12px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--white);color:var(--text)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--bay);box-shadow:0 0 0 3px rgba(18,59,54,.15)}
.field .err{display:none;color:#A32D1F;font-size:.85rem;margin-top:4px}
.field.bad input{border-color:#A32D1F}
.field.bad .err{display:block}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quote__picked{display:flex;justify-content:space-between;gap:12px;background:var(--paper);border-radius:var(--r-sm);padding:9px 12px;font-size:.92rem;margin-bottom:14px}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--bay);text-decoration:underline;cursor:pointer}
.quote__alt{font-size:.9rem;color:var(--muted);margin:14px 0 0;text-align:center}
.quote__done h3{margin-bottom:.4em}
.quote noscript p{background:var(--paper);border-radius:var(--r-sm);padding:12px;margin:0}
[hidden]{display:none!important}
@media (max-width:30em){.field-row,.choices{grid-template-columns:1fr}.field-row>*,.choices>*{min-width:0}.quote{padding:20px}}

/* Sections */
.section{padding:76px 0}
.section--tint{background:var(--paper)}
.section--dark{background:var(--bay);color:#DDE8E5}
.section--dark h2,.section--dark h3{color:var(--white)}
.section--tight{padding:48px 0}
.section__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:34px;flex-wrap:wrap}
.section__head p{margin:0;color:var(--muted);max-width:58ch}
.section__head h2{margin-bottom:.3em}
@media (max-width:43.75em){.section{padding:52px 0}}

/* Trust strip */
.strip{border-bottom:1px solid var(--line)}
.strip ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.strip li{padding:24px 22px;border-left:1px solid var(--line);font-size:.95rem;color:var(--muted)}
.strip li:first-child{border-left:0;padding-left:0}
.strip strong{display:block;font-family:var(--display);font-size:1.2rem;font-weight:500;color:var(--bay-deep)}
@media (max-width:53.75em){.strip ul{grid-template-columns:1fr 1fr}.strip li{border-left:0;padding:16px 0;border-top:1px solid var(--line)}.strip li:nth-child(-n+2){border-top:0}}

/* Service cards: ruled grid, not boxed cards */
.services{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.services>li{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 24px;background:var(--white);display:flex;flex-direction:column;position:relative}
.services h2,.services h3{font-size:1.35rem;line-height:1.2;margin-bottom:.35em}
.services h2 a,.services h3 a{text-decoration:none;color:inherit}
.services h2 a::after,.services h3 a::after{content:"";position:absolute;inset:0}
.services p{color:var(--muted);font-size:.97rem;margin-bottom:1.1em}
.services .more{margin-top:auto;font-weight:600;color:var(--brass-deep);font-size:.95rem}
.services>li:hover{background:var(--paper)}
.services>li:hover .more{text-decoration:underline}
.services>li.services__cta{background:var(--bay);color:#DDE8E5;grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.services__cta h2,.services__cta h3{color:var(--white)}
.services__cta p{color:#DDE8E5;margin:0}
.services--four{grid-template-columns:repeat(4,1fr)}
@media (max-width:56.25em){.services,.services--four{grid-template-columns:1fr 1fr}}
@media (max-width:36.25em){.services,.services--four{grid-template-columns:1fr}}

/* Steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;counter-reset:s}
.steps li{counter-increment:s;border-top:2px solid var(--brass);padding-top:18px}
.steps li::before{content:counter(s);font-family:var(--display);font-size:2.6rem;line-height:1;color:var(--brass-deep);display:block;margin-bottom:10px}
.steps p{color:var(--muted);margin:0}
@media (max-width:47.5em){.steps{grid-template-columns:1fr;gap:24px}}

/* Why + side panel */
.split{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:start}
.split__intro{margin-bottom:32px}
.reasons{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:26px 32px}
.reasons strong{display:block;font-family:var(--display);font-size:1.25rem;font-weight:500;color:var(--white);margin-bottom:.2em}
.section--tint .reasons strong,.reasons--light strong{color:var(--bay-deep)}
.panel{background:var(--white);color:var(--text);border-radius:var(--r-lg);padding:26px}
.panel h3,.section--dark .panel h3{margin-bottom:.6em;color:var(--bay-deep)}
.section--tint .panel,.panel--line{border:1px solid var(--line)}
.checks{list-style:none;margin:0 0 20px;padding:0}
.checks li{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--mist)}
.checks li:last-child{border-bottom:0}
.checks svg{width:18px;height:18px;color:var(--brass-deep);flex:none;margin-top:4px}
.checks small{display:block;color:var(--muted)}
@media (max-width:56.25em){.split{grid-template-columns:1fr;gap:32px}}
@media (max-width:35em){.reasons{grid-template-columns:1fr}}

/* Reviews */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.review{margin:0;border-left:2px solid var(--brass);padding:4px 0 4px 20px}
.review blockquote{margin:0 0 12px;font-family:var(--display);font-size:1.22rem;line-height:1.4;color:var(--bay-deep)}
.review figcaption{font-size:.92rem;color:var(--muted)}
.stars{color:var(--brass-deep);letter-spacing:2px;font-size:.95rem;margin-bottom:8px}
.callbox{margin-top:40px;background:var(--bay);color:#DDE8E5;border-radius:var(--r-lg);padding:26px 30px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.callbox h3{color:var(--white);margin:0 0 .15em}
.callbox p{margin:0}
@media (max-width:56.25em){.reviews{grid-template-columns:1fr}}

/* Suburbs by region: a bay green rail with the region and its drive times, and the list of suburbs.
   Phones: each rail is a bar that opens and closes its list. Tablets (from 47.5em, 760px at the usual
   text size): a band above each list. Wide screens (from 62.5em, 1000px): the rail runs down the left. */
.find{position:relative;flex:1 1 280px;max-width:360px}
.find svg{position:absolute;left:18px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--muted);pointer-events:none}
.find input{display:block;width:100%;font:inherit;font-size:1rem;line-height:1.3;padding:14px 18px 14px 46px;border:1.5px solid var(--line);border-radius:999px;background:var(--white);color:var(--text);-webkit-appearance:none;appearance:none}
.find input::placeholder{color:var(--muted);opacity:1}
.find input:focus{outline:none;border-color:var(--bay);box-shadow:0 0 0 3px rgba(18,59,54,.15)}
.find input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin:0 -4px 0 8px;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566864' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/16px no-repeat}
.cov{background:var(--white);background-clip:padding-box;border:1px solid transparent;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-panel)}
.cov__region+.cov__region .cov__rail{border-top:1px solid var(--rule-dark)}
.cov__rail{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px;background:var(--bay);color:#D5E2DE;padding:18px 12px 18px 22px}
.cov__name{grid-column:1;margin:0;font-size:1.34rem;line-height:1.18;color:var(--white)}
.cov__count{grid-column:1;margin:.3em 0 0;font-size:.9rem;color:var(--on-dark-soft)}
.cov__toggle{grid-column:2;grid-row:1/span 2;display:none;place-items:center;width:44px;height:44px;padding:0;background:none;border:0;border-radius:50%;color:var(--brass);cursor:pointer}
.cov__toggle::after{content:"";position:absolute;inset:0}
.cov__toggle svg{width:16px;height:16px;transition:transform .2s ease}
.cov__region.is-open .cov__toggle svg{transform:rotate(180deg)}
/* Drive times: label, a dotted leader, then the figure. The two rows share their columns, so the figures line up
   and each stays beside its label. Where room is short the leader goes first, then the label takes a second line;
   a long figure wraps inside its own column (up to 55% of the width). */
.cov__times{grid-column:1/-1;display:grid;grid-template-columns:1fr fit-content(55%);align-items:baseline;gap:7px 10px;margin:16px 10px 2px 0}
.cov__times div{display:contents}
.cov__times dt{display:flex;align-items:baseline;gap:10px;min-width:0;font-size:.93rem}
.cov__times dt::after{content:"";flex:1 1 0;min-width:0;border-bottom:1px dotted rgba(255,255,255,.45);transform:translateY(-.3em)}
.cov__times dd{margin:0;font-family:var(--display);font-size:1.14rem;line-height:1.2;color:var(--brass);text-align:right;font-variant-numeric:lining-nums tabular-nums}
/* As many columns as fit, up to a limit: the widths are in rem, so larger text gets fewer, wider columns */
.cov__list{list-style:none;margin:0;padding:14px 16px 18px 6px;columns:7.2rem 2;column-gap:14px}
.cov__list li{break-inside:avoid}
.cov__list a{position:relative;display:block;padding:8px 0 8px 20px;font-family:var(--display);font-size:1.1rem;line-height:1.25;color:var(--bay-deep);text-decoration:none}
.cov__intro{margin:0;padding:22px 26px 0;color:var(--muted)}
.cov__none{margin:0;padding:34px 26px;text-align:center;color:var(--muted)}
.cov.is-filtering .cov__count{visibility:hidden}
.cov-foot{display:flex;justify-content:space-between;align-items:center;gap:14px 24px;flex-wrap:wrap;margin-top:24px}
.cov-note{margin:0;font-size:.92rem;color:var(--muted)}
.cov-note--page{margin-top:18px}
@media (max-width:23.75em){
  .cov__times{margin-right:0}
  .cov__times dt{font-size:.86rem;gap:8px}
  .cov__times dd{font-size:1.05rem}
}
/* Small screens: the regions fold. They do so only once the script is running (it puts "js" on <html>),
   so with no script, or a script that failed to load, every region simply stays open. */
@media not all and (min-width:47.5em){
  .js .cov__toggle{display:grid}
  .js .cov__region:not(.is-open) .cov__times,.js .cov__region:not(.is-open) .cov__list{display:none}
  .js .cov.is-filtering .cov__region .cov__list{display:block}
  .js .cov.is-filtering .cov__toggle,.js .cov.is-filtering .cov__region .cov__times{display:none}
}
@media (min-width:47.5em){
  .cov__rail{grid-template-columns:1fr minmax(min(17rem,58%),40%);column-gap:36px;padding:20px 28px 22px}
  .cov__times{grid-column:2;grid-row:1/span 2;margin:0}
  .cov__list{padding:16px 22px 20px 8px;columns:10rem 4;column-gap:20px}
}
@media (min-width:62.5em){
  .cov:not(.cov--page) .cov__region{display:grid;grid-template-columns:minmax(min(20.75rem,45%),30%) 1fr}
  .cov:not(.cov--page) .cov__region+.cov__region .cov__list{border-top:1px solid var(--line)}
  .cov:not(.cov--page) .cov__rail{display:block;padding:26px 28px 28px}
  .cov:not(.cov--page) .cov__times{margin:18px 0 0}
  .cov:not(.cov--page) .cov__list{padding:20px 26px 22px 12px}
}
/* The Locations page: every region is its own card, always open, with its description */
.cov--page{display:grid;gap:26px;background:none;border:0;border-radius:0;overflow:visible;box-shadow:none}
.cov--page .cov__region{background:var(--white);background-clip:padding-box;border:1px solid transparent;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-panel)}
.cov--page .cov__region+.cov__region .cov__rail{border-top:0}
.cov--page .cov__rail{display:block;padding:22px 26px 24px}
.cov--page .cov__name{font-size:1.55rem}
.cov--page .cov__times{margin:16px 0 0}
.cov--page .cov__list{padding:12px 20px 20px 6px;columns:7.2rem 2}
.cov--page .cov__none{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow-panel)}
.find--page{max-width:none;margin-bottom:26px}
@media (min-width:38.75em){
  .cov--page .cov__rail{display:grid;grid-template-columns:1fr minmax(min(16.5rem,58%),43%);column-gap:34px}
  .cov--page .cov__times{grid-column:2;grid-row:1/span 2;margin:0}
  .cov--page .cov__list{columns:10rem 3}
}
/* Without scripting the finder cannot work, so it is not shown */
@media (scripting:none){.find{display:none}}
.js-failed .find{display:none}
/* The narrowest phones: a little less padding in the Locations page cards, so both drive times keep to one line each */
@media (max-width:23.75em){
  .cov--page .cov__rail{padding:20px 20px 22px}
  .cov__intro{padding:20px 20px 0}
  .cov--page .cov__list{padding-left:0;padding-right:14px}
}

/* A short list of names as links, in ruled columns */
.names{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);column-gap:36px}
.names li{border-bottom:1px solid var(--line);transition:border-color .18s ease}
.names a{display:block;padding:15px 0;font-family:var(--display);font-size:1.16rem;line-height:1.25;color:var(--bay-deep);text-decoration:none}
@media (max-width:53.75em){.names{grid-template-columns:1fr 1fr}}
@media (max-width:32.5em){.names{grid-template-columns:1fr}}

/* FAQ */
.faq{max-width:820px}
.faq h2{margin-bottom:.9em}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;font-weight:600;font-size:1.06rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:12px;font-size:1.6rem;font-weight:400;color:var(--brass-deep);transition:transform .15s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);max-width:68ch;margin:0 0 18px}
.faq__more{margin:24px 0 0;font-weight:600}

/* FAQs page: topic links, then one group of questions per topic */
.faq-topics{margin-bottom:38px}
.faq-topics .taglist{margin:0}
.faq-group{margin-bottom:46px}
.faq-group:last-of-type{margin-bottom:0}
.faq-group h2{font-size:1.6rem;border-bottom:1px solid var(--line);padding-bottom:.45em;margin-bottom:0}
.panel .btn-row{margin-top:4px}

/* Closing band */
.band{background:var(--bay-deep);color:#DDE8E5;padding:60px 0}
.band .wrap{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.band h2{color:var(--white);margin-bottom:.25em}
.band p{margin:0;max-width:52ch}

/* Prose pages */
.prose{max-width:70ch}
.prose>:first-child{margin-top:0}
.prose--after{margin-top:28px}
.prose__lead-image{border-radius:var(--r-lg);margin-bottom:1.4em;height:auto}
.prose h2{font-size:1.75rem;margin-top:1.6em}
.prose h3{margin-top:1.4em}
.prose li{margin-bottom:.35em}
.cols{display:grid;grid-template-columns:1.35fr .65fr;gap:52px;align-items:start}
.cols aside{display:grid;gap:20px}
/* Side by side, the form's column may take the little extra its date and time boxes need; stacked, neither part may outgrow the screen */
@media (max-width:58.75em){.cols{grid-template-columns:1fr}.cols>*,.cols aside>*{min-width:0}}
.taglist{list-style:none;padding:0;margin:0 0 1em;display:flex;flex-wrap:wrap;gap:8px}
.taglist li a,.taglist li span{display:block;padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:.92rem;text-decoration:none;color:var(--text);background:var(--white)}
.taglist li a:hover{border-color:var(--bay);color:var(--bay)}

/* Fleet */
.fleet{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.car{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--white)}
.car__photo{position:relative;overflow:hidden;aspect-ratio:16/9;background:repeating-linear-gradient(135deg,var(--mist) 0 14px,var(--paper) 14px 28px);display:grid;place-items:center;color:var(--muted);font-size:.92rem;text-align:center}
.car__photo span{padding:16px}
.car__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.car__body{padding:22px 24px 24px}
.car__body h2{font-size:1.6rem}
.car__body p{color:var(--muted)}
.car dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:.95rem}
.car dt{font-weight:600}
.car dd{margin:0;color:var(--muted)}
@media (max-width:47.5em){.fleet{grid-template-columns:1fr}}

/* Blog */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.post-card{border-top:2px solid var(--brass);padding-top:18px}
.post-card h2{font-size:1.45rem;line-height:1.2;margin-top:.3em}
.post-card h2 a{text-decoration:none;color:inherit}
.post-card h2 a:hover{text-decoration:underline}
.post-card p{color:var(--muted)}
.post-card time,.meta{font-size:.9rem;color:var(--muted)}
@media (max-width:53.75em){.posts{grid-template-columns:1fr}}

/* Contact */
.contact-list{list-style:none;margin:0;padding:0}
.contact-list li{padding:14px 0;border-bottom:1px solid var(--line)}
.contact-list span{display:block;font-size:.88rem;color:var(--muted)}
.contact-list a,.contact-list b{font-family:var(--display);font-size:1.3rem;font-weight:500;color:var(--bay-deep);text-decoration:none;overflow-wrap:anywhere}
.contact-list a:hover{text-decoration:underline}
.contact-links{margin-top:20px;display:flex;gap:18px;flex-wrap:wrap}
.map-link{margin-top:10px}
.map{background:var(--mist);border:0;width:100%;height:340px;border-radius:var(--r-lg);margin-top:28px}

/* Footer */
.footer{background:var(--bay-deep);color:#B9CCC7;padding:60px 0 110px;font-size:.95rem;border-top:1px solid rgba(255,255,255,.08)}
.footer a{color:#DDE8E5;text-decoration:none}
.footer a:hover{color:var(--brass);text-decoration:underline}
.footer__grid{display:grid;grid-template-columns:1.3fr 1fr 1.6fr .8fr;gap:36px}
.footer a{overflow-wrap:anywhere}
.footer h2{font-family:var(--body);font-size:.95rem;font-weight:700;color:var(--white);letter-spacing:0;margin-bottom:.9em}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{padding:3px 0}
.footer .logo{color:var(--white);display:inline-block;margin-bottom:14px}
.footer .logo span{color:var(--brass)}
.footer__loc{columns:2;column-gap:20px}
.footer__base{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.88rem}
@media (max-width:58.75em){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:35em){.footer__grid{grid-template-columns:1fr}}
@media not all and (max-width:47.5em){.footer{padding-bottom:40px}}

/* Sticky mobile bar */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;grid-template-columns:1.3fr 1fr 1fr;gap:8px;padding:10px max(12px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:var(--white);border-top:1px solid var(--line)}
/* Three buttons share a phone's width, so their text stops growing where it would no longer fit (large text settings) */
.mbar .btn{padding:.75em .6em;font-size:min(.93rem,4.65vw)}
.mbar--two{grid-template-columns:1.3fr 1fr}
@media (max-width:47.5em){.mbar{display:grid}html{--room-bottom:84px}}

/* ==========================================================================
   WordPress additions
   Everything above this line is the same stylesheet the static site uses.
   Below: blocks inside page content, alignment, comments, pagination, search,
   and the admin bar.
   ========================================================================== */

/* The sticky header sits below the admin bar when you are logged in */
.admin-bar .header{top:32px}
@media (max-width:782px){.admin-bar .header{top:46px}}
@media (max-width:600px){.admin-bar .header{top:0}}
/* ...and what the page scrolls to (links within a page, keyboard focus) stops clear of the toolbar as well as the
   header. The room is named again here because WordPress sets one of its own, for the toolbar alone. Focus inside
   the toolbar counts like focus inside the header: it does not move, so the page must not scroll to it. */
html:has(.admin-bar){--clear:calc(var(--header-h,76px) + 52px);scroll-padding-top:var(--room-top)}
@media (max-width:782px){html:has(.admin-bar){--clear:calc(var(--header-h,76px) + 66px)}}
@media (max-width:600px){html:has(.admin-bar){--clear:calc(var(--header-h,76px) + 20px)}}
html:has(#wpadminbar :focus){--room-top:0px;--room-bottom:0px}

/* Helper classes WordPress expects every theme to style */
.screen-reader-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{background:var(--white);clip-path:none;color:var(--bay);display:block;font-size:1rem;height:auto;left:8px;padding:12px 16px;top:8px;width:auto;z-index:100000}
.alignleft{float:left;margin:.3em 1.4em 1em 0}
.alignright{float:right;margin:.3em 0 1em 1.4em}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.alignwide,.alignfull{max-width:100%}
.wp-caption{max-width:100%}
.wp-caption-text,.gallery-caption,.prose figcaption{font-size:.88rem;color:var(--muted);margin-top:.5em;text-align:center}
.sticky,.bypostauthor{display:block}

/* List styles offered in the editor: Ticks and Pills */
ul.is-style-checks{list-style:none;padding:0;margin:0 0 20px}
ul.is-style-checks>li,.prose ul.is-style-checks>li{position:relative;margin:0;padding:9px 0 9px 28px;border-bottom:1px solid var(--mist)}
ul.is-style-checks>li:last-child{border-bottom:0}
ul.is-style-checks>li::before{content:"";position:absolute;left:0;top:13px;width:18px;height:18px;background-color:var(--brass-deep);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
ul.is-style-tags{list-style:none;padding:0;margin:0 0 1em;display:flex;flex-wrap:wrap;gap:8px}
ul.is-style-tags>li,.prose ul.is-style-tags>li{margin:0;padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:.92rem;background:var(--white)}

/* Questions (Details blocks) written inside page content */
.prose details{border-bottom:1px solid var(--line)}
.prose summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;font-weight:600;font-size:1.06rem;position:relative}
.prose summary::-webkit-details-marker{display:none}
.prose summary::after{content:"+";position:absolute;right:6px;top:12px;font-size:1.6rem;font-weight:400;color:var(--brass-deep);transition:transform .15s}
.prose details[open] summary::after{transform:rotate(45deg)}
.prose details p{color:var(--muted)}

/* Answers written under FAQs can hold lists as well as paragraphs */
.faq details ul,.faq details ol{color:var(--muted);max-width:68ch;margin:0 0 18px}
.faq details li{margin-bottom:.3em}

/* Common blocks inside page content */
.prose img{height:auto;border-radius:var(--r-md)}
.prose figure{margin:1.6em 0}
.prose blockquote{border-left:2px solid var(--brass);margin:1.6em 0;padding:4px 0 4px 20px;font-family:var(--display);font-size:1.22rem;line-height:1.4;color:var(--bay-deep)}
.prose blockquote p:last-of-type{margin-bottom:0}
.prose blockquote cite{display:block;font-family:var(--body);font-size:.9rem;font-style:normal;color:var(--muted);margin-top:.6em}
.prose .wp-block-table{overflow-x:auto;margin:1.6em 0}
.prose table{width:100%;border-collapse:collapse;font-size:.96rem}
.prose th,.prose td{border:0;border-bottom:1px solid var(--line);padding:10px 12px;text-align:left}
.prose th{font-weight:600;color:var(--bay-deep)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.prose pre{background:var(--paper);padding:16px;border-radius:var(--r-sm);overflow:auto;font-size:.9rem}
.prose .wp-block-button__link{display:inline-flex;font:600 1rem/1.2 var(--body);padding:.85em 1.3em;border-radius:999px;background:var(--bay);color:var(--white);text-decoration:none}
.prose .wp-block-button__link:hover{background:var(--bay-deep);color:var(--white)}
.prose .is-style-outline .wp-block-button__link{background:transparent;color:var(--bay);border:1.5px solid currentColor}
.prose .wp-block-embed iframe{max-width:100%}
.page-links{margin-top:1.4em;font-weight:600}

/* Search form */
.search-form{display:flex;gap:8px;max-width:480px}
.search-form label{flex:1}
.search-form .search-field,.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%;font:inherit;font-size:1rem;padding:11px 12px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--white);color:var(--text)}
.search-form .search-submit,.comment-form .submit{font:600 1rem/1.2 var(--body);padding:.85em 1.3em;border-radius:999px;border:0;background:var(--bay);color:var(--white);cursor:pointer}
.search-form .search-submit:hover,.comment-form .submit:hover{background:var(--bay-deep)}

/* Older and newer pages of articles */
.pagination{margin-top:40px}
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap}
.page-numbers{display:inline-block;padding:8px 14px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--text)}
.page-numbers.current{background:var(--bay);border-color:var(--bay);color:var(--white)}
a.page-numbers:hover{border-color:var(--bay);color:var(--bay)}

/* Comments */
.comments{margin-top:3em;border-top:1px solid var(--line);padding-top:1.6em}
.comments__list,.comments__list .children{list-style:none;padding:0;margin:0}
.comments__list .children{padding-left:1.4em}
.comment-body{padding:16px 0;border-bottom:1px solid var(--mist)}
.comment-author .avatar{border-radius:50%;float:left;margin-right:10px}
.comment-metadata,.comment-notes,.logged-in-as{font-size:.88rem;color:var(--muted)}
.comment-form label{display:block;font-size:.88rem;font-weight:600;margin-bottom:4px}
.comment-form-cookies-consent label{display:inline;font-weight:400}