/* ============================================================================
   Compet Concept — shared shell
   ----------------------------------------------------------------------------
   Every page links this file. It owns the brand tokens, the header, the footer
   and the shared components, so the site cannot drift into two design languages
   again — which is exactly what happened when the homepage was rebuilt and the
   nine inner pages were left on their own copies.

   RULE: anything that appears on more than one page lives HERE, never in a
   page's inline <style>. A page's inline block is only for sections unique to
   that page. If you find yourself pasting the same rule into a second page,
   stop and put it in this file instead.
   ========================================================================== */

:root{
  --navy:#14263D;
  --ivory:#F5F1E9;
  --white:#FCFBF8;
  --sand:#D8C9B5;
  --champagne:#A98E72;
  --navy-70: rgba(20,38,61,.7);
  --navy-45: rgba(20,38,61,.45);
  --navy-12: rgba(20,38,61,.12);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Manrope', sans-serif;
  --body: 'Inter', sans-serif;

  /* Page width. It used to be a hard 1320px, which froze the service cards at
     190px wide no matter the screen — on a 2560px display that left 620px of
     dead margin each side. Now it grows with the viewport and only stops at
     1900px, so the grid fills a large screen instead of sitting in the middle
     of it. Every full-width container uses this: .wrap, .navbar, and the hero
     and band inners in index.html. Change it here, not in four places.

     100%, not a vw fraction: a fraction adds margin on mid-size laptops too,
     where there was none to spare. The container's own 40px padding is the
     gutter. */
  --page: min(1900px, 100%);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--white); color:var(--navy); font-family:var(--body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
ul{list-style:none;}

.wrap{max-width:var(--page); margin:0 auto; padding:0 40px;}

/* ---------- Shared components ---------- */

/* Kicker: label first, champagne rule after. The inner pages originally drew
   the rule first; the markup was flipped so both orders cannot coexist. */
.kicker{display:flex; align-items:center; gap:14px; font-family:var(--sans); font-size:11px; font-weight:700;
        letter-spacing:.18em; text-transform:uppercase; color:var(--navy-70);}
.kicker .line{width:44px; height:1px; background:var(--champagne); flex:none;}
.kicker.light{color:rgba(245,241,233,.82);}
.kicker.light .line{background:rgba(245,241,233,.55);}

.eyebrow{font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.18em;
         text-transform:uppercase; color:var(--navy-70);}

/* Sits opposite a .kicker at the head of a grid — homepage services and every
   service page's showcase. */
.view-all{display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-size:11px;
          font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--navy-70); transition:color .3s;}
.view-all:hover{color:var(--navy);}
.view-all .arw{transition:transform .35s ease;}
.view-all:hover .arw{transform:translateX(4px);}

/* The mockup set these lines in a handwriting face. No handwriting fonts on this
   brand — Cormorant Garamond italic carries them instead. */
.tagline{font-family:var(--serif); font-style:italic; font-weight:400; line-height:1.2; letter-spacing:.005em;}

.btn,
.btn-primary{display:inline-flex; align-items:center; gap:12px; font-family:var(--sans); font-weight:700;
             font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; padding:17px 26px; border-radius:2px;
             transition:background .35s ease, color .35s ease;}
.btn-navy,
.btn-primary{background:var(--navy); color:var(--ivory);}
.btn-navy:hover,
.btn-primary:hover{background:#0d1a2b;}
.btn-light{background:var(--ivory); color:var(--navy);}
.btn-light:hover{background:#fff;}
.btn .arw{transition:transform .35s ease;}
.btn:hover .arw{transform:translateX(4px);}

/* Placeholder block — a slot waiting for a photograph from the client,
   labelled with the exact filename it should become. */
.ph{position:relative; background:linear-gradient(150deg,#ece5d8,#d8c9b5 58%,#c9b79f); overflow:hidden;}
.ph::after{content:attr(data-file); position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
           text-align:center; padding:0 12%; font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:.1em;
           text-transform:uppercase; color:rgba(20,38,61,.42); line-height:1.8; overflow-wrap:anywhere;}

/* ---------- HEADER ---------- */
header{position:sticky; top:0; z-index:60; background:var(--white); border-bottom:1px solid var(--navy-12);}
.navbar{display:flex; align-items:center; gap:26px; max-width:var(--page); margin:0 auto; padding:16px 40px;}
.logo{display:flex; align-items:center; gap:13px; flex:none;}
/* The official double-ring mark. The homepage mockup drew a serif "CC"; that is
   not the brand monogram. */
.logo-icon{width:42px; height:42px; flex:none;}
.footer-top .logo-icon{width:34px; height:34px;}
.logo-text{display:flex; flex-direction:column;}
.logo-word{font-family:var(--serif); font-weight:600; font-size:19px; letter-spacing:.11em; color:var(--navy); white-space:nowrap;}
.logo-sub{font-family:var(--sans); font-weight:600; font-size:8px; letter-spacing:.24em; color:var(--navy-45); margin-top:3px; white-space:nowrap;}
nav.links{display:flex; gap:30px; margin-left:auto; font-family:var(--sans); font-size:11.5px; font-weight:700;
          letter-spacing:.14em; text-transform:uppercase;}
nav.links a{color:var(--navy-70); padding-bottom:5px; transition:color .3s;}
nav.links a:hover{color:var(--navy);}
nav.links a.active{color:var(--navy); border-bottom:1.5px solid var(--navy);}
.nav-right{display:flex; align-items:center; gap:20px; margin-left:auto;}
.nav-cta{font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
         background:var(--navy); color:var(--ivory); padding:15px 26px; border-radius:2px; transition:background .3s; white-space:nowrap;}
.nav-cta:hover{background:#0d1a2b;}
.lang{display:flex; align-items:center; gap:5px; font-family:var(--sans); font-size:11px; font-weight:700;
      letter-spacing:.12em; color:var(--navy-45);}
.burger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px;}
.burger span{width:22px; height:1.5px; background:var(--navy);}
.mobile-menu{display:none; border-top:1px solid var(--navy-12); background:var(--white);}
.mobile-menu a{display:block; padding:15px 22px; font-family:var(--sans); font-size:12px; font-weight:700;
               letter-spacing:.14em; text-transform:uppercase; color:var(--navy-70); border-bottom:1px solid var(--navy-12);}
.mobile-menu.open{display:block;}

/* ============================================================================
   SERVICE PAGE SECTIONS
   ----------------------------------------------------------------------------
   All six service pages share one structure, so it lives here and their inline
   <style> blocks are gone entirely. Adding a seventh service page means writing
   markup only — no CSS.

       page-hero   full-bleed photo, title over it
       intro       copy + list + CTA on the left, photo pair on the right
       showcase    kicker + "view all", then a four-card row
       other-services  cross-links to the rest

   ========================================================================== */

/* ---------- Service page: hero ---------- */
.page-hero{position:relative; min-height:clamp(360px,46vh,540px); display:flex; align-items:flex-end;
           overflow:hidden; background:var(--navy);}
.page-hero .media{position:absolute; inset:0;}
.page-hero .media img,.page-hero .media .ph{width:100%; height:100%; object-fit:cover;}
.page-hero .scrim{position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(18,22,26,.86) 0%, rgba(18,22,26,.46) 48%, rgba(18,22,26,.22) 100%);}
.page-hero .inner{position:relative; z-index:2; width:100%; max-width:var(--page); margin:0 auto;
                  padding:0 40px clamp(38px,4.5vw,60px);}
.page-hero .breadcrumb{font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:.18em;
                       text-transform:uppercase; color:rgba(245,241,233,.6); margin-bottom:18px;}
.page-hero .breadcrumb a:hover{color:var(--ivory);}
.page-hero h1{font-family:var(--serif); font-weight:500; text-transform:uppercase;
              font-size:clamp(32px,4.8vw,60px); line-height:1.06; color:var(--ivory);}
.page-hero .sub{font-family:var(--serif); font-style:italic; font-size:clamp(17px,1.9vw,25px);
                color:rgba(245,241,233,.9); margin-top:10px;}
.page-hero .lede{font-family:var(--body); font-size:14px; line-height:1.8; color:rgba(245,241,233,.78);
                 margin-top:14px; max-width:430px;}

/* ---------- Service page: intro ----------
   photo | copy | photo, echoing the homepage `.about` rhythm but contained,
   not full-bleed. Replaced a two-column "copy left, 4:5 photo pair right"
   layout at the client's request.

   It was full-bleed with 560px panels for one pass and came back as "too big,
   and stuck to the hero". So: the grid now carries `.wrap`'s own constraints
   (`--page` + 40px) instead of a `.wrap` element — that keeps the markup at
   three children — the section has real vertical padding to break away from the
   hero above it, and the panels are a **fixed 4:5, vertically centred**, which
   is what makes them read as photographs beside the copy rather than as three
   equal slabs. `align-items:center` is what lets them be shorter than the copy;
   switch it back to `stretch` and they grow to match it again. */
.intro{background:var(--white); padding:clamp(56px,6.5vw,104px) 0;}
.intro-grid{max-width:var(--page); margin:0 auto; padding:0 40px;
            display:grid; grid-template-columns:1.12fr .88fr;
            gap:clamp(28px,3.4vw,60px); align-items:center;}
/* One SQUARE photograph, copy beside it. The square is safe here in a way a
   fixed 4:5 was not in the three-column version: there the panel had to match
   the copy's height and could not, because its height came from the column
   width. Here the square is the TALLER of the two on every desktop width
   (582 vs ~460 at 1440), so the copy sits inside it and nothing overflows —
   which is why `align-items:center` is correct now and was wrong before. */
.intro-media{position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:2px;}
.intro-media img,.intro-media .ph{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.intro-copy{display:flex; flex-direction:column; justify-content:center;}
.intro h2{font-family:var(--serif); font-weight:500; text-transform:uppercase;
          font-size:clamp(26px,2.6vw,38px); line-height:1.14;}
.intro p{font-family:var(--body); font-size:14.5px; line-height:1.9; color:var(--navy-70);
         margin-top:20px; max-width:440px;}
.intro ul{margin-top:24px;}
.intro li{font-family:var(--body); font-size:14px; color:var(--navy-70); line-height:2.2;
          padding-left:26px; position:relative;}
.intro li::before{content:'→'; position:absolute; left:0; color:var(--champagne);}
.intro .btn{margin-top:28px; align-self:flex-start;}

/* ---------- Service page: showcase ---------- */
.showcase{background:var(--ivory); padding:clamp(54px,6vw,86px) 0;}
.showcase-head{display:flex; align-items:center; justify-content:space-between; gap:24px;
               flex-wrap:wrap; margin-bottom:30px;}
.showcase-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.sc-photo{position:relative; aspect-ratio:4/3; border-radius:2px; overflow:hidden; margin-bottom:14px;}
/* Opt-in portrait cards — currently `travel.html` only, at the client's request.
   Their destination photos come off a phone at 0.56–0.75, so a landscape card
   threw away most of every frame and meant re-cropping each one by hand. 3:4
   matches two of the four sources exactly. Export 900 x 1200 for this variant,
   800 x 600 for the default. **Do not promote this to `.sc-photo` — the other
   six service pages stay 4:3**, which the client asked for explicitly. */
.showcase-grid.portrait .sc-photo{aspect-ratio:3/4;}
/* Fleet-count chip. It sits ON the photo rather than in the card body: in the
   body it pushed the price line 27px down on the two cards that have one, and
   the whole row stopped aligning. */
.sc-chip{position:absolute; top:10px; left:10px; z-index:2; background:rgba(252,251,248,.92); color:var(--navy);
         font-family:var(--sans); font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
         padding:5px 10px; border-radius:20px;}
/* ---------- Horizontal rail ----------
   One row that scrolls, rather than a second row. Four across on desktop; the
   track keeps all six items and the arrows page through them. No prices on the
   cards — clicking a bike goes to the page where the rates live. */
/* The arrows sit at the sides of the rail, straddling the content edge, not in
   the section head. They are centred on the PHOTO rather than on the whole
   card, hence the extra nudge: the name below the photo would otherwise pull
   them visibly low. */
.fleet-wrap{position:relative;}
.rail-btn{position:absolute; top:50%; transform:translateY(calc(-50% - 16px)); z-index:3;
          width:38px; height:38px; display:flex; align-items:center; justify-content:center;
          background:var(--white); border:1px solid var(--navy-12); border-radius:50%; cursor:pointer;
          color:var(--navy-70); box-shadow:0 2px 10px rgba(20,38,61,.08);
          transition:border-color .3s, color .3s, opacity .3s;}
.rail-btn:hover:not(:disabled){border-color:var(--navy); color:var(--navy);}
.rail-btn:disabled{opacity:.25; cursor:default;}
.rail-btn svg{width:15px; height:10px; stroke:currentColor; stroke-width:1.4; fill:none;}
.rail-prev{left:-17px;}
.rail-next{right:-17px;}
/* Below this there is no gutter to straddle, and a phone swipes the rail anyway. */
@media(max-width:620px){ .rail-btn{display:none;} }

.fleet-rail{display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 60px)/4); gap:20px;
            overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
            scrollbar-width:none; -ms-overflow-style:none; padding-bottom:2px;}
.fleet-rail::-webkit-scrollbar{display:none;}
.fleet-rail > .sc{scroll-snap-align:start;}

@media(max-width:1100px){ .fleet-rail{grid-auto-columns:calc((100% - 40px)/3);} }
@media(max-width:780px){  .fleet-rail{grid-auto-columns:calc((100% - 20px)/2);} }
@media(max-width:520px){  .fleet-rail{grid-auto-columns:78%;} }
.sc-photo img,.sc-photo .ph{width:100%; height:100%; object-fit:cover; transition:transform .7s ease;}
.sc:hover .sc-photo img{transform:scale(1.04);}
.sc h3{font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.16em;
       text-transform:uppercase; transition:color .3s;}
.sc:hover h3{color:var(--champagne);}
.sc p{font-family:var(--body); font-size:12.5px; color:var(--navy-45); margin-top:5px;}

/* Six items read better as 3 x 2 than as 4 + 2 orphans. */
.showcase-grid.six{grid-template-columns:repeat(3,1fr); gap:30px 22px;}


@media(max-width:1000px){
  .showcase-grid.six{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:460px){
  .showcase-grid.six{grid-template-columns:1fr;}
}

/* ---------- Service page: cross-links ---------- */
.other-services{background:var(--white); border-top:1px solid var(--navy-12); padding:34px 0;}
.other-services p{font-family:var(--sans); font-size:10.5px; font-weight:700; letter-spacing:.18em;
                  text-transform:uppercase; color:var(--navy-45); text-align:center;}
.other-services .links{display:flex; justify-content:center; flex-wrap:wrap; gap:26px; margin-top:16px;
                       font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.14em;
                       text-transform:uppercase;}
.other-services .links a{color:var(--navy-70); padding-bottom:4px;
                         border-bottom:1px solid transparent; transition:color .3s, border-color .3s;}
.other-services .links a:hover{color:var(--navy); border-bottom-color:var(--champagne);}

@media(max-width:1000px){
  .showcase-grid{grid-template-columns:repeat(2,1fr); gap:26px 20px;}
}
/* Intro collapse — photo + copy first, with the second photo spanning
   underneath as a band, then one column. The spanning photo needs its own
   aspect-ratio: left on 4:5 at full width it would be taller than the screen. */
@media(max-width:860px){
  /* Stacked, and the square becomes a band — a full-width square on a phone is
     taller than the screen and pushes everything below it out of view. */
  .intro-grid{grid-template-columns:1fr; gap:32px;}
  .intro-media{aspect-ratio:4/3;}
  .intro p,.intro li{max-width:none;}
}
@media(max-width:460px){
  .showcase-grid{grid-template-columns:1fr;}
}

/* ---------- Enquiry dialog ----------
   Opened by any [data-enquire] button. Built as a shared component because the
   service pages will want the same thing — the moment it is pasted onto a second
   page it has to be here anyway. */
.enq-btn{display:inline-flex; align-items:center; gap:9px; white-space:nowrap; cursor:pointer;
         font-family:var(--sans); font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
         background:none; color:var(--navy); border:1px solid var(--navy); border-radius:2px; padding:12px 18px;
         transition:background .3s, color .3s;}
.enq-btn:hover{background:var(--navy); color:var(--ivory);}

dialog.enq{border:none; padding:0; background:none; max-width:min(520px, calc(100vw - 32px)); width:100%;
           margin:auto;}   /* auto on all sides is what centres a <dialog> in its viewport box */
dialog.enq::backdrop{background:rgba(14,18,22,.62);}
.enq-panel{position:relative; background:var(--white); border-radius:3px; padding:clamp(26px,4vw,38px);
           max-height:calc(100vh - 48px); overflow-y:auto;}
.enq-close{position:absolute; top:12px; right:12px; width:32px; height:32px; display:flex; align-items:center;
           justify-content:center; background:none; border:none; cursor:pointer; font-size:20px; line-height:1;
           color:var(--navy-45); transition:color .3s;}
.enq-close:hover{color:var(--navy);}
.enq-panel h2{font-family:var(--serif); font-weight:500; text-transform:uppercase; font-size:clamp(22px,3vw,30px);
              line-height:1.12; margin-top:16px;}
.enq-lede{font-family:var(--body); font-size:13.5px; color:var(--navy-70); margin-top:10px;}

.enq-choices{display:grid; gap:10px; margin-top:22px;}
.enq-choice{display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--navy-12);
            border-radius:2px; transition:border-color .3s, background .3s;}
.enq-choice:hover{border-color:var(--navy); background:var(--ivory);}
.enq-choice svg{width:20px; height:20px; flex:none; stroke:var(--navy); stroke-width:1.3; fill:none;
                stroke-linecap:round; stroke-linejoin:round;}
.enq-choice b{display:block; font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.08em;
              text-transform:uppercase; color:var(--navy);}
.enq-choice small{display:block; font-family:var(--body); font-size:11.5px; color:var(--navy-45); margin-top:2px;}

.enq-or{display:flex; align-items:center; gap:14px; margin:24px 0 18px;
        font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:.16em;
        text-transform:uppercase; color:var(--navy-45);}
.enq-or::before,.enq-or::after{content:''; flex:1; height:1px; background:var(--navy-12);}

.enq-form{display:grid; gap:10px;}
.enq-form input,.enq-form textarea{width:100%; font-family:var(--body); font-size:13.5px; color:var(--navy);
  background:var(--ivory); border:1px solid transparent; border-radius:2px; padding:12px 14px; resize:vertical;
  transition:border-color .3s;}
.enq-form input:focus,.enq-form textarea:focus{outline:none; border-color:var(--champagne);}
.enq-form .btn{justify-content:center; margin-top:4px;}
.enq-status{font-family:var(--body); font-size:12px; color:var(--navy-70); min-height:18px;}
.enq-small{font-family:var(--body); font-size:11px; color:var(--navy-45);}

/* ---------- FOOTER ---------- */
footer{background:var(--white); border-top:1px solid var(--navy-12);}
.footer-top{display:grid; grid-template-columns:1.1fr .8fr 1fr .9fr; gap:36px; align-items:center;
            padding:clamp(36px,4vw,54px) 0;}
.footer-nav{display:flex; flex-direction:column; gap:9px; font-family:var(--sans); font-size:10.5px; font-weight:700;
            letter-spacing:.16em; text-transform:uppercase; color:var(--navy-70);}
.footer-nav a:hover{color:var(--navy);}
.socials{display:flex; gap:22px; align-items:center;}
.socials a{color:var(--navy); transition:opacity .3s;}
.socials a:hover{opacity:.6;}
.socials svg{width:19px; height:19px;}
.footer-script{text-align:right; font-size:clamp(17px,1.7vw,22px); color:var(--navy);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;
               border-top:1px solid var(--navy-12); padding:22px 0 26px;
               font-family:var(--body); font-size:11.5px; color:var(--navy-45);}
.footer-bottom .legal{display:flex; gap:14px; align-items:center; flex-wrap:wrap;}
.footer-bottom .legal span{color:var(--navy-12);}
/* The street address stays visible on every page: it has to match the JSON-LD
   NAP block or local SEO suffers. */
.footer-bottom .addr{color:var(--navy-45);}
.footer-bottom a:hover{color:var(--navy);}

/* ---------- RESPONSIVE ----------
   The header overflows first: logo lockup + five nav items + a CTA + the
   language chip. It steps down through three bands before the burger takes over
   at 768px. Never fix an overflow by raising that breakpoint — shrink the
   header instead. That bug has been reintroduced twice already. */
@media(max-width:1180px){
  .navbar{padding:15px 28px; gap:18px;}
  nav.links{gap:20px; font-size:11px; letter-spacing:.11em;}
  .nav-right{gap:14px;}
  .nav-cta{padding:14px 20px; font-size:10.5px; letter-spacing:.11em;}
  .wrap{padding:0 28px;}
}
@media(max-width:1000px){
  .logo-icon{width:36px; height:36px;}
  .logo-word{font-size:16px; letter-spacing:.09em;}
  .logo-sub{font-size:7px;}
  nav.links{gap:14px; font-size:10px;}
  .lang{display:none;}
  .nav-cta{padding:13px 16px; font-size:10px;}
  .footer-top{grid-template-columns:1fr 1fr; gap:30px;}
  .footer-script{text-align:left;}
}
@media(max-width:768px){
  nav.links{display:none;}
  .burger{display:flex;}
  .nav-right{margin-left:auto;}
  .footer-top{grid-template-columns:1fr; gap:26px; text-align:left;}
}
@media(max-width:640px){
  .wrap{padding:0 22px;}
}
@media(max-width:460px){
  .navbar{padding:14px 18px; gap:10px;}
  .logo-icon{width:32px; height:32px;}
  .logo-word{font-size:13.5px;}
  .logo-sub{font-size:6.5px; letter-spacing:.2em;}
  .nav-cta{padding:12px 13px; font-size:9.5px; letter-spacing:.08em;}
}