/* Utah Private Car - variant B shared components (Round F: Dave's review of 2026-10-27, DW E1#45, Dee F1#1).
   Loaded after each page's measured styles (src/data/styles-v2.json), so one rule here sets the same component on
   every page: section title and italic subtitle, cards and their icons, the button, the thumbs-up rating and the
   content tabs. Brand colours, fonts and voice are unchanged; markup hooks come from scripts/v2/revise.py. */

/* ---------- headings: natural rhythm, no cramped wraps */
#main .sec :is(h1,h2,h3){text-wrap:balance}

/* ---------- section lead: title, then its italic subtitle */
#main .sec .sec-title{letter-spacing:.02em;line-height:1.2;margin-bottom:.35em}
#main .sec .sec-subtitle{font-style:italic;font-size:clamp(17px,1.5vw,20px);line-height:1.5;letter-spacing:.01em;margin:0 auto 1.4em;max-width:44em;text-wrap:balance}
#main .sec :is(.tc,.sec-title.tc)~.sec-subtitle,#main .sec .tc .sec-subtitle{text-align:center}
#main .sec .sec-intro{max-width:40em;margin:-.4em auto 1.6em;font-size:17px;line-height:1.6;text-align:center}
/* lines added in Round F have no measured colour of their own (the Divi text module's colour was set for text A never
   showed there): they take the section palette */
#main .sec .sec-lead{display:block;width:min(90%,1080px);margin:0 auto clamp(26px,3vw,44px);padding:0}
#main .sec .sec-lead :is(.col,.mod){display:block;width:auto;max-width:none;padding:0;margin:0;background:none;box-shadow:none}
#main .sec .sec-lead.lead-pad{padding-top:clamp(40px,5vw,72px)}
#main .sec .sec-lead .prose{text-align:center}
#main .sec .sec-lead .prose>:last-child{margin-bottom:0}

/* ---------- cards: evenly padded boxes; icon, title and text balanced inside them */
#main .sec .mod:is(.surf-navy,.surf-cream,.surf-white,.surf-gold):has(>.card){padding:clamp(22px,2.4vw,32px) clamp(20px,2.2vw,30px)}
#main .sec .col:is(.surf-navy,.surf-cream,.surf-white,.surf-gold):has(.card){padding:clamp(22px,2.4vw,32px) clamp(18px,2vw,28px)}
#main .sec .col:is(.surf-navy,.surf-cream,.surf-white,.surf-gold):has(.card)>.mod{padding:0}
#main .sec .card{gap:14px}
#main .sec .card-row{align-items:flex-start;gap:18px}
#main .sec .card-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:auto;height:auto;margin:0;padding:0;font-size:46px;line-height:1;letter-spacing:0}
#main .sec .card-icon .glyph{display:block;width:1em;height:1em;fill:currentColor}
#main .sec .card-row>.card-icon{font-size:34px;margin-top:2px}
#main .sec .card-icon.disc{width:42px;height:42px;border-radius:50%;font-size:21px}
/* free-standing icons share one colour, brand gold (A mixed white, grey and gold, and drew some blank); icons on a
   filled disc keep their measured disc and glyph colours */
#main .sec .card-icon:not(.disc){color:var(--gold);background:none}
#main .sec:not(:first-child) .card-title{font-size:clamp(17px,1.35vw,20px);line-height:1.25;letter-spacing:.02em;margin:0 0 .4em;padding:0}
#main .sec:not(:first-child) .card-body .prose{font-size:16px;line-height:1.55}

/* ---------- one button: header, footer band and in-section calls to action share it */
#main .sec .btn,.site-header .hdr-cta .btn{display:inline-flex;align-items:center;justify-content:center;width:auto;max-width:100%;min-height:44px;margin:0;padding:10px 22px;border:2px solid var(--gold);border-radius:10px;background:var(--wine);color:#f3e9da;font:600 16px/1.3 var(--body);letter-spacing:.02em;text-align:center;text-transform:none;text-decoration:none;box-shadow:inset 0 0 14px rgba(0,0,0,.3)}
#main .sec .btn:is(:hover,:focus-visible),.site-header .hdr-cta .btn:is(:hover,:focus-visible){background:#6c1a1a;color:#fff}
/* Divi's button module was measured as a filled, bordered box around the button (a box inside a box): the module is
   only a container */
#main .sec [data-d^="et_pb_button_"]{background:none;padding:0;border:0;border-radius:0;box-shadow:none}
.site-header .hdr-cta .btn{white-space:nowrap}
/* a button inside a narrow promo card keeps two balanced lines at most */
#main .sec .promo .btn{padding:9px 12px;font-size:15px}
#main .sec .btn{text-wrap:balance}

/* ---------- rating: five gold thumbs-up beside the label */
#main .stars.thumbs{display:inline-flex;align-items:center;gap:.28em;color:var(--gold)}
#main .stars.thumbs .thumb{width:.84em;height:.84em;fill:currentColor}

/* ---------- content tabs: readable in every section colour, clear selected and focus states */
#main .vtabs{padding:14px;border-radius:10px;background:#fff;color:var(--ink)}
#main .vtab-label{color:var(--navy)}
#main .vtab-btn{background:var(--cream);color:var(--navy);border-left:3px solid transparent}
#main .vtab-btn:hover{background:#ece6d8}
#main .vtab-btn[aria-selected=true]{background:var(--navy);color:#fff;border-left-color:var(--gold)}
#main .vtab-pane{color:var(--ink)}
#main .vtab-btn:focus-visible,#main .vtab-pane:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ---------- Destinations menu: Dave's 15 destinations in two columns on desktop */
@media (min-width:981px){.site-header .sub-wide{display:grid;grid-template-columns:repeat(2,minmax(190px,1fr));min-width:430px}}

/* ---------- destinations hub (/destinations-served/): the fleet page's pattern, destinations left, booking right */
#main .sec.hub-sec{padding:clamp(28px,4vw,56px) 0}
#main .hub{display:flex;align-items:flex-start;gap:clamp(24px,4vw,64px);width:min(90%,1360px);margin:0 auto clamp(28px,3vw,44px)}
#main .hub-main{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:18px;color:var(--cream)}
#main .hub-main h1{margin:0;color:var(--cream)}
#main .hub-main .sec-subtitle{margin:0;color:var(--gold);text-align:left}
#main .hub .stars-block{justify-content:flex-start;font-size:24px}
#main .hub .stars-label{margin:0 0 0 12px;color:var(--gold);font:700 22px/1.2 var(--head)}
#main .hub-collage{margin:0}
#main .hub-collage img{display:block;width:100%;max-width:560px;height:auto;margin:0;border-radius:var(--radius)}
#main .hub-list-title{margin:8px 0 0;font-size:clamp(22px,2vw,28px);color:var(--cream)}
#main .dest-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
#main .dest a{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 16px;border:1px solid #ffffff2e;border-radius:10px;background:#ffffff0d;color:var(--cream);font:600 17px/1.3 var(--body);text-decoration:none}
#main .dest a:is(:hover,:focus-visible){background:#ffffff1f;border-color:var(--gold);color:#fff}
#main .dest .card-icon{font-size:22px;color:var(--gold)}
#main .dest-confirm .dest-name::after{content:"Service to confirm";display:block;margin-top:2px;font:500 11px/1.2 var(--body);color:#f3d27a;letter-spacing:.04em}
#main .hub-book{flex:0 0 min(40%,520px);display:flex;flex-direction:column;align-items:center;gap:14px;position:sticky;top:130px}
#main .hub-book img{display:block;width:min(200px,60%);height:auto;margin:0 auto}
#main .hub-book-title{margin:0;color:var(--gold);font:700 clamp(22px,2vw,28px)/1.25 var(--body)}
#main .hub-book .booking{width:100%}
@media (max-width:980px){#main .hub{flex-direction:column}#main .hub-book{position:static;flex-basis:auto;width:100%}}

/* ---------- Round F staging placeholders: copy and graphics awaiting Dave's approval, visibly marked */
#main .copy-pending{margin:.6em 0;padding:10px 14px;border:2px dashed var(--gold);border-radius:8px;background:#d4af371a;color:inherit;font:italic 500 15px/1.45 var(--body)}
#main .graphic-pending{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;aspect-ratio:550/223;border:2px dashed var(--gold);border-radius:var(--radius);background:linear-gradient(135deg,#123c69,#0d2d50);color:var(--cream);text-align:center;padding:16px}
#main .gp-name{font:700 clamp(24px,2.4vw,34px)/1.1 var(--head);letter-spacing:.04em;color:var(--gold)}
#main .gp-note{font:italic 14px/1.4 var(--body)}

/* ---------- fares sections moved from Home to /fair-fares/: shared cards, no measured Divi boxes */
#main .sec.fares{padding:clamp(40px,5vw,72px) 0}
#main .sec.fares .row{width:min(90%,1180px);margin:0 auto clamp(20px,2.4vw,32px);gap:clamp(18px,2.4vw,32px)}
#main .sec.fares .row:last-child{margin-bottom:0}
#main .sec.fares :is(h2){text-align:center}
#main .sec.fares .prose p{text-align:center}
#main .sec.fares .col.surf-cream{background:#fff;border-radius:var(--radius);box-shadow:0 2px 14px rgba(0,0,0,.12);padding:clamp(18px,2vw,26px)}
#main .sec.fares .col h3{text-align:center;margin:.4em 0 .6em;font-size:22px}
#main .sec.fares .pricelist li{padding:6px 0}
#main .sec.fares .iconlist li span{font-weight:600;color:var(--navy)}
#main .sec.fares .iconlist .note{font-weight:400;color:var(--muted)}

/* ======================================================================================================== Unit 1
   (Dave F1#12, Dee F1#13): sections alternate navy and cream (scripts/v2/revise.py assign_themes, counted back from
   the navy footer band), and the theme sets every foreground colour. Selectors use :where() so a theme rule weighs the
   same as the measured per-instance rule it replaces and wins by order; surfaces (cards, quotes) come after and win
   inside the section. The hero and photo banners (t-hero, t-photo) keep their own look. */
#main .t-navy{--bg:var(--navy);--fg:#e9eef4;--head:var(--cream);--sub:#e8cf7a;--link:var(--gold);--price:var(--cream)}
#main .t-cream{--bg:var(--cream);--fg:var(--ink);--head:var(--navy);--sub:#3d5a80;--link:var(--link);--price:var(--navy)}
#main :where(.sec:not(.t-hero)).t-navy,#main :where(.sec:not(.t-hero)).t-cream{background-color:var(--bg);background-image:none;color:var(--fg)}
#main :where(.sec:not(.t-hero)):is(.t-navy,.t-cream){padding-top:clamp(44px,5.5vw,84px);padding-bottom:clamp(44px,5.5vw,84px)}
#main :where(.sec:not(.t-hero)):is(.t-navy,.t-cream) :is(p,li,td,th,dt,dd,blockquote,figcaption,label,small){color:var(--fg)}
#main :where(.sec:not(.t-hero)):is(.t-navy,.t-cream) :is(h1,h2,h3,h4,h5,h6){color:var(--head)}
#main :where(.sec:not(.t-hero)):is(.t-navy,.t-cream) .card-title{color:var(--head)}
#main :where(.sec:not(.t-hero)):is(.t-navy,.t-cream) .prose>p:last-of-type{color:var(--fg)}
#main :where(.sec:not(.t-hero)):is(.t-navy,.t-cream) .prose a:not(.btn):not(.portrait-link){color:var(--link)}
#main :where(.sec:not(.t-hero)):is(.t-navy,.t-cream) .pl-price{color:var(--price)}
#main :where(.sec:not(.t-hero)):is(.t-navy,.t-cream) .lead-pad{padding-top:0}
#main .sec-divide{border-top:3px solid var(--gold)}
/* surfaces inside a section keep their own contrast */
#main :is(.surf-cream,.surf-white,.surf-gold,.quote) :is(p,li,td,th,dt,dd,blockquote,figcaption,label,small){color:var(--ink)}
#main :is(.surf-cream,.surf-white,.surf-gold,.quote) :is(h1,h2,h3,h4,h5,h6){color:var(--navy)}
#main :is(.surf-cream,.surf-white,.surf-gold,.quote) :is(.card-title,.prose>p:last-of-type){color:var(--navy)}
#main :is(.surf-cream,.surf-white,.surf-gold,.quote) .pl-price{color:var(--navy)}
#main :is(.surf-cream,.surf-white,.surf-gold) .prose a:not(.btn){color:var(--link)}
#main :is(.surf-navy,.surf-wine) :is(p,li,td,th,dt,dd,blockquote,figcaption,label,small){color:#eef2f7}
#main :is(.surf-navy,.surf-wine) :is(h1,h2,h3,h4,h5,h6){color:var(--cream)}
#main :is(.surf-navy,.surf-wine) :is(.card-title,.prose>p:last-of-type){color:var(--cream)}
#main :is(.surf-navy,.surf-wine) .prose a:not(.btn){color:var(--gold)}
/* A's text shadows were drawn for white text on its own backgrounds; themed sections set their own contrast */
#main :where(.sec:not(.t-hero)):is(.t-navy,.t-cream) :is(h1,h2,h3,h4,h5,h6,p,li){text-shadow:none}
/* a lone, narrower column (a list or text block) sits centred in its row instead of hanging left */
#main :where(.sec:not(.t-hero)) .row>.col:only-child{margin-left:auto;margin-right:auto}

/* section titles and subtitles: one prominent hierarchy on every page */
#main .sec .sec-title{font-size:clamp(30px,3vw,42px);line-height:1.15;letter-spacing:.015em;margin:0 0 .3em;text-align:center}
#main .sec .sec-subtitle{font-size:clamp(18px,1.6vw,22px);line-height:1.45;text-align:center;color:var(--sub,inherit)}
#main .sec .sec-intro{color:var(--fg,inherit)}

/* vehicle photos with a gallery caption plaque; photo and caption are one link to the fleet page */
#main .portrait{margin:0;display:flex;flex-direction:column;align-items:center}
#main .portrait-link{display:flex;flex-direction:column;align-items:center;color:inherit;text-decoration:none}
#main .plaque{margin-top:14px;padding:8px 20px 9px;min-width:58%;max-width:92%;border:1px solid #b8932b;border-radius:2px;background:#fffdf7;color:var(--navy);text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.2);font:700 14px/1.3 var(--head);letter-spacing:.12em;text-transform:uppercase}
#main .plaque :is(.plaque-title,.plaque-note){display:block;color:var(--navy)}
#main .plaque .plaque-note{margin-top:3px;font:italic 400 14px/1.35 var(--body);letter-spacing:.01em;text-transform:none;color:#4c5866}
#main .portrait-link:is(:hover,:focus-visible) .plaque{border-color:var(--gold);background:#fff;box-shadow:0 3px 12px rgba(0,0,0,.28)}
#main .portrait-link:focus-visible{outline:3px solid var(--gold);outline-offset:4px}

/* Our Solution: three answer cards share the photo's height in equal parts; narrower rows stack them above it */
#main .solution{display:flex;align-items:stretch;gap:clamp(24px,3vw,44px);width:min(90%,1180px);margin:0 auto;padding:0}
#main .solution>.solution-cards{flex:1 1 56%;max-width:none;display:flex;flex-direction:column;gap:20px;min-width:0}
#main .solution-cards>.mod{flex:1 1 0;display:flex;flex-direction:column;justify-content:center;margin:0;max-width:none}
#main .solution>.solution-media{flex:0 1 40%;max-width:none;display:flex;flex-direction:column;gap:12px;min-width:0}
#main .solution-media .media img{display:block;width:100%;height:auto;max-width:none}
@media (max-width:1099px){
  #main .solution{flex-direction:column;align-items:stretch}
  #main .solution>.solution-cards{flex-direction:row;flex-wrap:wrap}
  #main .solution-cards>.mod{flex:1 1 240px}
  #main .solution>.solution-media{align-self:center;width:min(100%,520px)}
}
@media (max-width:767px){#main .solution>.solution-cards{flex-direction:column}}
/* photos A hid on phones (measured display:none) stay visible there */
@media (max-width:767px){#main .sec .col.phone-shown{display:flex}#main .sec .mod.phone-shown{display:block}}

/* ======================================================================================================== Unit 2
   fares: Dave's disclosure and the example label under each fare table; /fair-fares/ puts the booking form beside
   the sample fares under the logo (stacked on narrower screens) */
#main .fares-note{max-width:44em;margin:.4em auto 1.4em;text-align:center;font:italic 400 16px/1.5 var(--body);color:var(--fg,inherit)}
#main .fares-row{width:min(90%,1180px);margin:clamp(14px,2vw,24px) auto 0}
#main .fares-book{display:flex;align-items:flex-start;gap:clamp(24px,3vw,48px);width:min(92%,1360px);margin:0 auto}
#main .fares-main{flex:1 1 0;min-width:0}
#main .sec.fares .fares-main .row{width:100%}
#main .sec.fares .fares-main .row-eq{display:flex;flex-wrap:wrap}
#main .sec.fares .fares-main .row-eq>.col{flex:1 1 220px}
#main .fares-aside{flex:0 0 min(34%,440px);display:flex;flex-direction:column;align-items:center;gap:14px;position:sticky;top:130px}
#main .fares-aside img{display:block;width:min(180px,55%);height:auto;margin:0 auto}
#main .fares-aside .booking{width:100%}
@media (max-width:1279px){#main .fares-book{flex-direction:column}#main .fares-aside{position:static;flex-basis:auto;width:100%;max-width:640px;margin:0 auto}}
#main .sec.fares .col.surf-cream{padding:18px 16px}
#main .sec.fares .pricelist{font-size:15px}
#main .sec.fares .pricelist li{flex-wrap:nowrap}
#main .sec.fares .pl-name{white-space:nowrap}
/* a subtitle or note on a light surface inside a navy section keeps a dark, readable colour */
#main :is(.surf-cream,.surf-white,.surf-gold) :is(.sec-subtitle,.fares-note){color:#3d5a80}

/* ======================================================================================================== Unit 3
   "Make us an offer": an optional invitation under the fares and booking form */
#main .offer-form{width:min(92%,880px);margin:0 auto}
#main .offer-form fieldset{border:0;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center}
#main .offer-form legend{width:100%;margin-bottom:6px;text-align:center;font-weight:600}
#main .offer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px 20px}
#main .offer-form label{display:flex;flex-direction:column;gap:5px;font:600 15px/1.3 var(--body);color:var(--fg,inherit)}
#main .offer-form fieldset label{flex-direction:row;align-items:center;gap:8px;font-weight:400}
#main .offer-form :is(input:not([type=radio]),select,textarea){min-height:44px;padding:9px 12px;border:1px solid #9aa6b2;border-radius:8px;background:#fff;color:var(--ink);font:400 16px/1.4 var(--body)}
#main .offer-form textarea{min-height:90px;resize:vertical}
#main .offer-form .offer-wide{grid-column:1/-1}
#main .offer-form [aria-invalid=true]{border-color:#b3261e;box-shadow:0 0 0 2px #b3261e33}
#main .offer-form :is(input,select,textarea):focus-visible{outline:3px solid var(--gold);outline-offset:1px}
#main .offer-form :disabled{opacity:.6;cursor:not-allowed}
#main .offer-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#main .offer-closed{margin:0 auto 16px;max-width:40em;padding:10px 14px;border-left:4px solid var(--gold);background:#d4af371f;text-align:center}
#main .offer-status{min-height:1.4em;text-align:center;font-weight:600}
#main .offer-row{width:100%}
#main .offer-form [hidden]{display:none}

/* Sliders over a photo (live: Divi's dark slide layout, white text). Text, links and the carousel controls are white
   with a soft shadow so they read on any part of the photo (F1#38 overnight). */
#main .t-photo .slides,#main .t-photo .slides :is(h1,h2,h3,p,div,a:not(.btn)){color:#fff}
#main .t-photo .slides :is(h1,h2,h3,.prose){text-shadow:0 1px 3px rgba(0,0,0,.75),0 0 12px rgba(0,0,0,.45)}
#main .t-photo .slide-controls button{background:rgba(13,45,80,.55)}

/* ---------- Dave's staging review, F1#54 (2026-10-28). Inside a themed section --head is a colour, so the heading
   font is named here. */

/* light sections: no shadow behind text (the "smudge" under the Fair Fares subtitle came from A's measured shadow,
   which outranked the rule above) */
#main .sec:not(.t-hero):not(.t-photo):is(.t-navy,.t-cream) :is(h1,h2,h3,h4,h5,h6,p,li){text-shadow:none}

/* a blue section directly under the blue header gets a gold line between them */
#main>.sec.t-hero.t-navy:first-of-type{border-top:3px solid var(--gold)}

/* Home, Our Discerning Clientele (Dave 2026-10-29): one Flexbox row of equal cards with an even gap, four across,
   two on tablets, one on phones. The repeated class outranks the page's own section rule, which zeroed the column
   gap and stretched the row to full width, so the cards touched. */
#main .wrap>.row.clientele.clientele.clientele{--cg:clamp(14px,1.6vw,22px);display:flex;flex-flow:row wrap;justify-content:center;align-items:stretch;gap:var(--cg);column-gap:var(--cg);width:min(90%,1180px);max-width:none;margin:clamp(18px,2vw,28px) auto 0;padding:0}
#main .wrap>.row.clientele.clientele.clientele>.col{flex:0 0 calc((100% - 3*var(--cg))/4);width:auto;max-width:none;margin:0;min-width:0}
@media (max-width:980px){#main .wrap>.row.clientele.clientele.clientele>.col{flex-basis:calc((100% - var(--cg))/2)}}
@media (max-width:767px){#main .wrap>.row.clientele.clientele.clientele>.col{flex-basis:100%;width:100%}}

/* Home hero logo (Dave 2026-10-29): the image is a square canvas with the oval in its middle two thirds, so it read
   small and sat off-centre, and on phones the text below crowded it. Show only the oval, larger, centred, with clear
   space under it. */
#main [data-d="et_pb_section_0"] [data-d="et_pb_image_0"]{flex:0 0 auto;width:100%;max-width:none;margin:clamp(8px,1.2vw,16px) auto clamp(22px,2.6vw,34px)}
#main [data-d="et_pb_section_0"] [data-d="et_pb_image_0"] img[alt="Utah Private Car Logo"]{width:min(480px,82%);max-width:none;height:auto;aspect-ratio:400/268;object-fit:cover;object-position:50% 50.5%;margin-inline:auto}
@media (max-width:767px){#main [data-d="et_pb_section_0"] [data-d="et_pb_image_0"] img[alt="Utah Private Car Logo"]{width:min(300px,80%)}}

/* Home, Our Solution: the three cards share the photo's height; the tagline sits on its own row, larger */
#main .solution>.solution-media>.mod,#main .solution-media .media{height:100%;margin:0}
#main .solution-media .media img{height:100%;object-fit:cover}
#main .row.solution-tagline{display:block;width:min(90%,1180px);margin:clamp(22px,2.6vw,36px) auto 0;padding:0}
#main .row.solution-tagline>.col{width:auto;max-width:none;margin:0;padding:0}
#main .solution-tagline .tagline{margin:0;text-align:center;font:700 clamp(24px,2.6vw,36px)/1.25 Roboto,"Segoe UI",Helvetica,Arial,sans-serif;letter-spacing:.02em;color:var(--head)}

/* bullets: small gold snowflakes sitewide */
#main .sec .prose ul:not(.faq-topics){list-style:none;padding-left:0}
#main .sec .prose ul:not(.faq-topics)>li{list-style:none;position:relative;padding-left:1.55em}
#main .sec .prose ul:not(.faq-topics)>li::before{content:"";position:absolute;left:.1em;top:.42em;width:.9em;height:.9em;background:var(--gold);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.34 7l17.32 10M3.34 17 20.66 7M12 2 9.6 4.4M12 2l2.4 2.4M12 22l-2.4-2.4M12 22l2.4-2.4M3.34 7l3.3.9M3.34 7l.9 3.3M20.66 17l-3.3-.9M20.66 17l-.9-3.3M3.34 17l.9-3.3M3.34 17l3.3-.9M20.66 7l-.9 3.3M20.66 7l-3.3.9'/%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='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.34 7l17.32 10M3.34 17 20.66 7M12 2 9.6 4.4M12 2l2.4 2.4M12 22l-2.4-2.4M12 22l2.4-2.4M3.34 7l3.3.9M3.34 7l.9 3.3M20.66 17l-3.3-.9M20.66 17l-.9-3.3M3.34 17l.9-3.3M3.34 17l3.3-.9M20.66 7l-.9 3.3M20.66 7l-3.3.9'/%3E%3C/svg%3E") center/contain no-repeat}
#main .row.clientele .prose ul>li{padding-left:1.55em}

/* expanding cards: a large gold button that says "open me", the same on every card; photos above them share one
   shape so each title lines up under its photo */
#main .sec details.faq>summary{gap:14px;cursor:pointer}
#main .sec details.faq>summary::after{content:"+";flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--gold);color:var(--navy);font:700 26px/1 Roboto,"Segoe UI",Helvetica,Arial,sans-serif;box-shadow:0 1px 4px rgba(0,0,0,.35);transform:none;transition:filter .15s}
#main .sec details.faq[open]>summary::after{content:"\2212";transform:none}
#main .sec details.faq>summary:is(:hover,:focus-visible)::after{filter:brightness(1.1)}
#main .sec details.faq>summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
#main .sec .col:has(>.mod>details.faq)>.mod{width:100%;max-width:none;margin-left:0;margin-right:0}
#main .sec .col:has(>.mod>details.faq) figure.media img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

/* the shared footer band (every page): Home's band, no rule under it, less space below "Call Us Anytime" */
#main .sec.ftr-band{padding:clamp(36px,4vw,56px) 0 clamp(22px,2.6vw,32px)}
#main .ftr-band .row{display:grid;grid-template-columns:1.1fr 1fr 1.25fr 1fr;gap:clamp(22px,3vw,48px);width:min(90%,1180px);margin:0 auto;padding:0;border:0}
#main .ftr-band .col{width:auto;max-width:none;margin:0;padding:0;min-width:0}
#main .ftr-band .col:first-child{text-align:center}
#main .ftr-band .col:first-child .media img{width:min(100%,220px);height:auto;margin:0 auto}
#main .ftr-band .mod{margin:0 0 10px;padding:0;background:none;box-shadow:none}
#main .ftr-band h3{margin:0 0 .7em;font:700 18px/1.3 Roboto,"Segoe UI",Helvetica,Arial,sans-serif;letter-spacing:.04em;color:var(--gold)}
#main .ftr-band .promo{padding:0;background:none}
#main .ftr-band .promo h2{margin:.5em 0 .1em;font:700 22px/1.25 Roboto,"Segoe UI",Helvetica,Arial,sans-serif;letter-spacing:.05em}
#main .ftr-band .promo h4{margin:0;font:700 20px/1.3 Roboto,"Segoe UI",Helvetica,Arial,sans-serif;color:var(--gold)}
#main .ftr-band .prose p,#main .ftr-band .prose li{font-size:15px;line-height:1.55;margin:0 0 .35em}
#main .ftr-band .actions{margin:14px 0 0}
#main .ftr-band .btn{font-size:15px;padding:8px 16px}
@media (max-width:980px){#main .ftr-band .row{grid-template-columns:1fr 1fr}}
@media (max-width:600px){#main .ftr-band .row{grid-template-columns:1fr}#main .ftr-band .col{text-align:center}#main .ftr-band .prose ul{display:inline-block;text-align:left}}

/* skier-photo heroes (About, Contact, Fair Fares, FAQ, Privacy, Terms, Reservations): one title and subtitle size and
   position on every page */
/* About Us menu pages, skier photo hero (Dave 2026-10-30): the band always shows the photo's full height, anchored on
   its blue-sky top-left corner, and every size is in --u, one hundredth of that height, so the title and subtitle
   stay in the sky at every width. Wide screens show the whole photo (26.15vw tall, its 1920x502 shape); below about
   1030px the band holds 270px and the far snow on the right is cropped instead. In photo units the sky is clear of
   snow from the left edge to about 92u across and down to about 55u; the text column ends at 92u across and about 46u down. */
#main .sec.hero-skier{--u:max(.2615vw,2.7px);display:block;height:calc(var(--u)*100);min-height:0;padding:0;background-size:auto 100%;background-position:0 0;background-repeat:no-repeat}
#main .sec.hero-skier>.wrap{width:auto;max-width:calc(var(--u)*92);margin:0;padding:1.5em 0 0 1.5em;font-size:calc(var(--u)*4.4)}
#main .sec.hero-skier :is(.row,.col,.mod,.prose){display:block;width:auto;max-width:none;min-height:0;margin:0;padding:0;font-size:inherit}
#main .sec.hero-skier .prose h1{margin:0 0 .3em;font:700 2.4em/1.1 Roboto,"Segoe UI",Helvetica,Arial,sans-serif;letter-spacing:.01em;text-align:left;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.45)}
#main .sec.hero-skier .prose p{margin:0;font:italic 500 1.05em/1.35 Raleway,"Segoe UI",Helvetica,Arial,sans-serif;text-align:left;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}

/* FAQ: a row of topics, then each topic's questions; every answer one click away; two columns on wide screens */
#main .faq-sec .row{display:block;width:auto;margin:0;padding:0}
#main .faq-sec>.wrap{width:min(92%,1180px);margin:0 auto}
#main .faq-intro{padding-top:clamp(8px,1vw,16px)}
#main .faq-intro .sec-intro{margin:0 auto 1em}
#main .faq-topics{display:flex;flex-wrap:wrap;gap:8px 10px;justify-content:center;list-style:none;margin:0 0 clamp(22px,2.6vw,34px);padding:0}
#main .faq-topics li{margin:0;padding:0}
#main .faq-topics a{display:inline-block;padding:7px 14px;border:1.5px solid var(--gold);border-radius:999px;font:600 15px/1.2 Raleway,"Segoe UI",Helvetica,Arial,sans-serif;text-decoration:none;color:inherit}
#main .faq-topics a:is(:hover,:focus-visible){background:var(--gold);color:var(--navy)}
#main .faq-topic{scroll-margin-top:120px;margin:0 0 clamp(22px,2.6vw,34px)}
#main .faq-h{margin:0 0 .4em;padding-bottom:.3em;border-bottom:2px solid var(--gold);font:700 clamp(21px,1.9vw,26px)/1.25 Roboto,"Segoe UI",Helvetica,Arial,sans-serif;text-align:left}
#main .faq-item{border-bottom:1px solid rgba(127,127,127,.3)}
#main .sec details.faq-item>summary{padding:10px 0}
#main .sec details.faq-item>summary::after{width:28px;height:28px;font-size:21px}
#main .faq-item .faq-q{margin:0;font:600 clamp(16px,1.25vw,18px)/1.4 Raleway,"Segoe UI",Helvetica,Arial,sans-serif;letter-spacing:0;text-transform:none;text-align:left}
#main .faq-item .prose{padding:0 0 14px}
#main .faq-end{padding-bottom:clamp(8px,1vw,16px)}
@media (min-width:1024px){#main .faq-sec>.wrap{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;align-items:start}#main .faq-intro,#main .faq-end{grid-column:1/-1}}
/* a joined section's intro (Dave F1#54 continuity): its lead paragraph reads as a lead, centred and measured */
#main .sec .sec-lead .prose p:not(.sec-subtitle){max-width:42em;margin:0 auto .9em;font-size:clamp(17px,1.4vw,20px);line-height:1.6;text-align:center}
#main .sec .sec-lead hr.divider{max-width:42em;margin:14px auto}

/* destination pages with Dave-approved copy: the hero subtitle sits under the left-aligned headline, as on the hub */
#main .sec .dest-subtitle{margin:.2em 0 1em;max-width:none;text-align:left;color:var(--gold)}

/* Oval logos on phones (Dave 2026-10-30): each logo image is a square canvas with the oval in its middle, so on a phone
   it filled the width; show just the oval, smaller. The home hero sets its own size. */
@media (max-width:767px){#main .mod :is(img[src*="b40acf5b930b5b862bd7"],img[src*="1bd0a84755df8f21f550"]){width:min(230px,62%);height:auto;max-width:none;aspect-ratio:480/312;object-fit:cover;object-position:50% 50.2%;margin-inline:auto}}

/* Service-page sidebar beside the service cards (Dave 2026-10-30): no navy panel. On a light section it shows the blue
   logo and navy text; on a navy section the cream logo and the light text stay, on the section's own navy. */
#main .sec:not(.t-navy) .col.side-plain{color:#123c69}
#main .sec:not(.t-navy) .col.side-plain :is(h3,p,li,a,strong){color:#123c69}
#main .col.side-plain>.mod+.mod{margin-top:clamp(12px,1.4vw,18px)}
#main .col.side-plain>.mod{background:none;box-shadow:none}

/* Clientele cards wherever they appear: the cream card look the home page had from its own section styles */
#main .wrap>.row.clientele.clientele.clientele>.col{background:#f7f5f0;color:#123c69;border-radius:10px;box-shadow:0 2px 18px rgba(0,0,0,.3)}
#main .wrap>.row.clientele.clientele.clientele>.col>.mod{padding:20px 16px 18px 20px;text-align:left;color:#123c69;font:400 18px/1.2 Raleway,"Segoe UI",Helvetica,Arial,sans-serif}
#main .wrap>.row.clientele.clientele.clientele>.col>.mod ul{margin:0;padding:0}
#main .wrap>.row.clientele.clientele.clientele>.col>.mod li{margin:0;line-height:1.45}

/* A testimonials row that gave up its clients card (Dave 2026-10-30): the remaining cards share the row evenly, centred */
#main .wrap>.row.row-eq.row-fit{justify-content:center;column-gap:clamp(14px,1.6vw,22px)}
#main .wrap>.row.row-eq.row-fit>.col{flex:1 1 0;max-width:420px}