/* ============================================================
   Our Water Adventures — the service catalogue
   ------------------------------------------------------------
   Loaded by services.php only. Every selector is prefixed .svc
   or .svc-card, and the palette lives in tokens scoped to .svc,
   so nothing in here can reach the rest of the site.

   The page is deliberately light where the rest of the site is
   dark: this is the shop floor, and a catalogue you are meant to
   compare prices on wants daylight. The header, footer and type
   are the site's own.
   ============================================================ */

.svc{
  --sv-teal:#0E9488;
  --sv-tealD:#0A7A70;
  --sv-mint:#E6F5F2;
  --sv-ink:#0B2A33;
  --sv-mut:#5F7883;
  --sv-line:#E2ECEE;
  --sv-card:#FFFFFF;

  position:relative;
  overflow:hidden;
  padding:clamp(26px,4.4vw,52px) 0 clamp(54px,7vw,92px);
  background:
    radial-gradient(120% 70% at 82% -6%, rgba(14,148,136,.10) 0%, rgba(14,148,136,0) 62%),
    linear-gradient(180deg,#E9F6F6 0%,#F3FBFB 38%,#FFFFFF 100%);
  color:var(--sv-ink);
  font-family:var(--body);
}

.svc__wrap{
  position:relative;
  z-index:1;
  max-width:1420px;
  margin:0 auto;
  padding:0 var(--gut);
}

/* Visually hidden, still read aloud — the filter controls carry
   their labels this way because the design has none. */
.svc .u-sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---- Ornament ---------------------------------------------- */

.svc__frond{
  position:absolute;top:-34px;left:-56px;width:clamp(170px,17vw,250px);height:auto;
  color:rgba(11,124,110,.20);pointer-events:none;transform:rotate(-7deg);transform-origin:0 0;
}
.svc__gulls{
  position:absolute;top:clamp(46px,7vw,86px);left:46%;width:clamp(70px,7vw,104px);height:auto;
  color:rgba(11,42,51,.14);pointer-events:none;
}
@media(max-width:900px){ .svc__gulls{display:none} }

/* ---- Head + filters ---------------------------------------- */

.svc__head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:22px clamp(20px,3vw,44px);
  margin:0 0 clamp(26px,3.4vw,40px);
}
.svc__intro{flex:1 1 420px;min-width:0}

.svc__eyebrow{
  display:flex;align-items:center;gap:10px;
  margin:0 0 10px;
  font-family:var(--display);font-style:italic;font-weight:500;
  font-size:clamp(15px,1.5vw,18px);
  color:var(--sv-teal);
}
.svc__eyebrow svg{width:38px;height:10px;flex:0 0 auto;opacity:.75}

.svc__title{
  margin:0;
  font-family:var(--display);font-weight:700;
  font-size:clamp(34px,4.7vw,58px);
  line-height:1.02;letter-spacing:-.015em;
  color:var(--sv-ink);
}
.svc__title em{font-style:normal;color:var(--sv-teal)}

.svc__lead{
  margin:12px 0 0;
  font-size:clamp(14.5px,1.15vw,16px);
  color:var(--sv-mut);
}

.svc__filters{
  display:flex;flex-wrap:wrap;gap:12px;
  flex:0 1 auto;
}
.svc__sel,.svc__search{
  position:relative;display:flex;align-items:center;
  height:52px;
  background:var(--sv-card);
  border:1px solid var(--sv-line);
  border-radius:13px;
  box-shadow:0 1px 2px rgba(11,42,51,.05);
  transition:border-color .18s,box-shadow .18s;
}
.svc__sel:focus-within,.svc__search:focus-within{
  border-color:var(--sv-teal);
  box-shadow:0 0 0 3px rgba(14,148,136,.14);
}
.svc__sel{padding:0 36px 0 42px}
.svc__sel--sort{padding-left:18px}

.svc__seli{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--sv-mut);pointer-events:none;
}
.svc__caret{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--sv-mut);pointer-events:none;
}

.svc__sel select{
  appearance:none;-webkit-appearance:none;
  border:0;background:none;outline:none;
  font:600 14px/1 var(--body);color:var(--sv-ink);
  cursor:pointer;width:100%;padding:0;
}

.svc__search{padding:0 16px 0 42px;min-width:min(280px,72vw)}
.svc__find{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;padding:0;border:0;border-radius:8px;
  background:none;color:var(--sv-mut);cursor:pointer;
  transition:color .18s,background-color .18s;
}
.svc__find svg{width:18px;height:18px;display:block}
.svc__find:hover{color:var(--sv-teal);background:rgba(14,148,136,.09)}
.svc__find:focus-visible{outline:2px solid var(--sv-teal);outline-offset:1px}
.svc__search input{
  border:0;background:none;outline:none;width:100%;
  font:500 14px/1 var(--body);color:var(--sv-ink);
}
.svc__search input::placeholder{color:#93A9B1}
.svc__search input::-webkit-search-cancel-button{cursor:pointer}

.svc__go{
  height:52px;padding:0 20px;border:0;border-radius:13px;cursor:pointer;
  background:var(--sv-teal);color:#fff;font:700 14px var(--body);
}

.svc__flash{
  margin:0 0 20px;padding:13px 18px;border-radius:12px;
  background:#FFF3F4;border:1px solid #F6D2D6;color:#8A2432;font-size:14.5px;
}

/* ---- Cards --------------------------------------------------
   Editorial rather than compact. The previous grid packed as many
   272px cards into the row as would fit — five on a wide monitor —
   which made the photographs small and the whole page read as a
   dense list. Three to a row is the standard here, so each card is
   wide enough for a landscape photograph to carry the page.

   The frame is a thin line and an almost invisible shadow. Heavy
   shadow reads as a widget; a hairline border and a lot of white
   reads as print, which is what the reference does. */

.svc__grid{
  display:grid;gap:clamp(20px,2vw,30px);
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.svc-card{
  display:flex;flex-direction:column;
  background:var(--sv-card);
  border:1px solid var(--sv-line);
  /* Square, near enough. The old 19px radius was the single thing
     doing most of the work to make these look like app tiles. */
  border-radius:3px;
  /* Clips the photograph's hover zoom. It could not before, because
     the round activity icon deliberately hung past the bottom edge;
     that icon is now a line of type inside the card. */
  overflow:hidden;
  box-shadow:0 1px 2px rgba(11,42,51,.04);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.svc-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(11,42,51,.09);
  border-color:rgba(14,148,136,.28);
}
.svc-card[hidden]{display:none}

/* One ratio for every photograph on the page, whatever shape the
   file is. Several of these are portrait and one is 3:2; cover
   crops them all to the same landscape window so the row of titles
   underneath lines up. */
.svc-card__media{
  position:relative;
  aspect-ratio:3/2;
  /* A flex item's automatic minimum size is its content size, so
     without this a tall image grows the box and aspect-ratio never
     gets a look in. */
  min-height:0;
  overflow:hidden;
  background:#DCEBEC;
}
.svc-card__media img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.3,1);
}
.svc-card:hover .svc-card__media img{transform:scale(1.055)}

.svc-tag{
  position:absolute;top:14px;left:14px;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px 6px 9px;border-radius:2px;
  font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 3px 10px rgba(11,42,51,.18);
}
.svc-tag svg{width:13px;height:13px;flex:0 0 auto}

/* Three states, not the four in the design: only the labels the
   site itself publishes survived. Colour carries no information on
   its own here — the word is always spelled out beside it. */
.svc-tag--popular{background:#0B2F45;color:#fff}
.svc-tag--popular svg{color:#FFC93C}
.svc-tag--hire   {background:#fff;color:#8A6412}
.svc-tag--hire svg{color:#E8A317}
.svc-tag--tide   {background:#D6F2EA;color:#0A6D62}

.svc-card__body{
  display:flex;flex-direction:column;flex:1;
  padding:clamp(20px,1.7vw,26px);
}

/* What this is, above what it is called. Small, spaced and in the
   teal, so it is read as a label and not as a first sentence. */
.svc-card__k{
  display:flex;align-items:center;gap:7px;
  margin:0 0 10px;
  font-size:10.5px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;line-height:1;
  color:var(--sv-teal);
}
.svc-card__ki{display:inline-flex;flex:0 0 auto}
.svc-card__ki svg{width:15px;height:15px}

/* The name carries the card, and it is set in the display face the
   page's own heading uses rather than the body sans — that is the
   single change that makes the row read as editorial. Not enlarged
   much: prominence here comes from the serif and the space around
   it, not from size. */
.svc-card__t{
  margin:0;
  font-family:var(--display);font-weight:700;
  font-size:clamp(19px,1.5vw,22px);
  line-height:1.22;letter-spacing:-.01em;
  color:var(--sv-ink);
}
/* The heading is the link to the course's own page. It inherits
   everything above, so the underline on hover is the only visible
   difference. */
.svc-card__t a{color:inherit;text-decoration:none}
.svc-card__t a:hover,
.svc-card__t a:focus-visible{text-decoration:underline;text-underline-offset:3px}

.svc-card__d{
  margin:10px 0 0;
  font-size:14px;line-height:1.62;color:var(--sv-mut);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.svc-card__meta{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  /* The bottom margin is the minimum gap above the rule; margin-top
     on the footer has to stay `auto` so the price line sits on the
     floor of the card however short the description is. */
  margin:16px 0 20px;
  font-size:13px;font-weight:600;color:var(--sv-mut);
}
.svc-card__meta svg{width:15px;height:15px;flex:0 0 auto;color:var(--sv-teal)}
.svc-card__dot{opacity:.5}

.svc-card__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:18px;
  border-top:1px solid var(--sv-line);
}
/* Down a step from --num-md. A price is information on this card,
   not the headline — the reference sets its figures smaller than
   the name they belong to, and enlarging them here was pulling the
   eye to the money before the course. */
.svc-card__p{
  font-family:var(--num-font);
  font-size:var(--num-sm);font-weight:var(--num-weight);
  letter-spacing:var(--num-track);line-height:var(--num-lh);
  font-variant-numeric:tabular-nums;
  color:var(--sv-ink);
  white-space:nowrap;
}
/* "Price on request" is a sentence, not a number, so it drops to
   the body size rather than shouting at the same weight as a real
   price. */
.svc-card__p--ask{
  font-family:var(--body);
  font-size:13.5px;font-weight:700;letter-spacing:0;color:var(--sv-mut);
  white-space:normal;
}

.svc-book{
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 17px;border:0;border-radius:2px;cursor:pointer;
  background:var(--sv-teal);color:#fff;
  font:800 11.5px/1 var(--body);letter-spacing:.075em;text-transform:uppercase;
  white-space:nowrap;
  transition:background .18s,transform .18s,box-shadow .18s;
}
.svc-book svg{width:14px;height:14px;transition:transform .18s}
.svc-book:hover{background:var(--sv-tealD);box-shadow:0 6px 16px rgba(14,148,136,.28)}
.svc-book:hover svg{transform:translateX(3px)}
.svc-book:active{transform:scale(.97)}
.svc-book:focus-visible{outline:3px solid rgba(14,148,136,.4);outline-offset:2px}
/* The enquiry card uses a link rather than a submit, because there
   is nothing to submit. Same button, minus the underline. */
a.svc-book{text-decoration:none}

.svc__empty{
  margin:26px 0 0;padding:22px;border-radius:14px;text-align:center;
  background:#fff;border:1px dashed var(--sv-line);color:var(--sv-mut);font-size:15px;
}
.svc__empty a{color:var(--sv-teal)}

/* The currency caveat under the grid. Quiet, but not hidden — it
   qualifies every price above it. */
.svc__note{
  margin:20px 0 0;max-width:66ch;
  font-size:12.8px;line-height:1.6;color:var(--sv-mut);
}

/* ---- Reassurance strip -------------------------------------- */

.svc__trust{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;list-style:none;
  margin:clamp(26px,3vw,38px) 0 0;padding:clamp(20px,2.2vw,28px) 8px;
  background:#fff;border:1px solid var(--sv-line);border-radius:19px;
  box-shadow:0 4px 18px rgba(11,42,51,.05);
}
.svc__trust li{
  display:flex;align-items:flex-start;gap:14px;
  padding:4px clamp(14px,1.6vw,24px);
}
.svc__trust li + li{border-left:1px solid var(--sv-line)}
.svc__trusti{
  flex:0 0 auto;display:grid;place-items:center;
  width:46px;height:46px;border-radius:50%;
  background:var(--sv-mint);color:var(--sv-teal);
  /* Grid centres the box, not the glyph. line-height:0 stops any
     inline leading being counted around the svg, and each icon is
     drawn centred on 12,12 of its own viewBox, so the two agree. */
  line-height:0;
}
.svc__trusti svg{display:block;width:24px;height:24px;overflow:visible}
.svc__trust b{display:block;font-size:14.8px;font-weight:800;color:var(--sv-ink);line-height:1.3}
.svc__trust span{display:block;margin-top:3px;font-size:13px;line-height:1.45;color:var(--sv-mut)}

/* ---- Responsive --------------------------------------------- */

/* Tablet: two to a row. Three at this width leaves each card too
   narrow for a 3:2 photograph to be worth printing. */
@media(max-width:1024px){
  .svc__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:1080px){
  .svc__trust{grid-template-columns:repeat(2,1fr);gap:18px 0}
  .svc__trust li:nth-child(odd){border-left:0}
}
@media(max-width:900px){
  .svc__head{align-items:flex-start}
  .svc__filters{flex:1 1 100%}
  .svc__sel,.svc__search{flex:1 1 190px}
  .svc__search{min-width:0}
}
@media(max-width:640px){
  /* One to a row, and the card keeps its proportions rather than
     growing tall: same 3:2 image, same padding. */
  .svc__grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .svc__trust{grid-template-columns:1fr;gap:16px 0;padding:20px 4px}
  .svc__trust li{border-left:0!important}
  .svc__filters{gap:10px}
  .svc__sel,.svc__search{flex:1 1 100%;height:48px}
  .svc-card__d{-webkit-line-clamp:4}
}

@media(prefers-reduced-motion:reduce){
  .svc-card,.svc-book,.svc-book svg,.svc-card__media img{transition:none}
  .svc-card:hover{transform:none}
  /* The photograph zoom is motion too, and a large one. */
  .svc-card:hover .svc-card__media img{transform:none}
  .svc-book:hover svg{transform:none}
}

/* ---- Activity bar --------------------------------------------
   Sits between the filters and the grid. These are links, not
   buttons: each is the URL for that activity, and the same URL a
   Book Now button on that activity's own page points at.

   It scrolls sideways rather than wrapping on a narrow screen —
   six activities across a phone would otherwise become three
   stacked rows and push the first course card off the fold. The
   negative margin lets the row bleed to the screen edge so a
   half-visible chip signals there is more to swipe to. */
.svc__acts{
  display:flex;gap:8px;align-items:center;
  margin:clamp(18px,2.2vw,26px) 0 clamp(4px,1vw,10px);
  padding-bottom:2px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.svc__acts::-webkit-scrollbar{display:none}

.svc__act{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px 9px 13px;border-radius:999px;
  border:1px solid var(--sv-line);background:var(--sv-card);
  color:var(--sv-mut);text-decoration:none;
  font-size:13.5px;font-weight:700;line-height:1;
  white-space:nowrap;
  transition:color .18s,border-color .18s,background-color .18s;
}
/* Each activity's own mark, in the link's colour so it goes white
   with the pill when that activity is the one showing. */
.svc__acti{width:17px;height:17px;flex:0 0 auto;display:block}
.svc__act:hover,
.svc__act:focus-visible{color:var(--sv-teal);border-color:var(--sv-teal)}

.svc__act.is-on{
  background:var(--sv-teal);border-color:var(--sv-teal);color:#fff;
}
.svc__act.is-on:hover,
.svc__act.is-on:focus-visible{background:var(--sv-tealD);border-color:var(--sv-tealD);color:#fff}

/* The empty notice carries links now, so they have to read as
   links against the muted paragraph they sit in. */
.svc__empty a{color:var(--sv-teal);font-weight:700}

@media(max-width:640px){
  .svc__acts{
    margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1);
    padding-left:var(--gut);padding-right:var(--gut);
  }
  .svc__act{padding:8px 14px;font-size:13px}
}

/* ---- Rentals page ---------------------------------------------
   rentals.php borrows this stylesheet whole, so the gear cards and
   the course cards are the same object and stay that way. Only the
   two differences live here: the head has no filter form beside it,
   and each card carries a line of availability.

   Scoped under .svc--rent so nothing in this block can reach
   services.php. */

/* With nothing to sit next to, the intro is measured rather than
   stretched — a lead running the full width of a 1420px page is a
   wall of text. */
.svc__head--solo{display:block}
.svc__head--solo .svc__intro{max-width:none}
.svc__head--solo .svc__lead{max-width:56ch}

/* Availability, between the duration and the price. Green when the
   gear is free, muted when it is not: the state has to be legible
   without reading the sentence, and it is never red — nothing has
   gone wrong, the boards are simply out. */
.svc-rent__av{
  display:flex;align-items:center;gap:7px;
  margin:8px 0 0;
  font-size:13px;font-weight:700;line-height:1.4;
  color:var(--sv-teal);
}
.svc-rent__av svg{flex:0 0 auto;width:15px;height:15px}
.svc-rent__av.is-none{color:var(--sv-mut);font-weight:600}

/* The closing notes carry links on this page. */
.svc--rent .svc__note a{color:var(--sv-teal);font-weight:700}

@media(max-width:640px){
  .svc-rent__av{font-size:12.5px}
}

/* ---- Custom dropdowns -----------------------------------------
   The two filters share one control. A native <select> cannot be
   styled inside — no icons, no checkmark, no animation — so this
   replaces it visually while the real <select> stays in the form
   and stays the source of truth.

   Nothing here is visible until the script has run: .svc-dd is
   display:none and only the enhanced state shows it. With the
   script off, the native selects are what you get, and they work
   exactly as they always did. That is why the fallback cannot rot
   — it is not a copy, it is the original. */

.svc-dd{display:none;position:relative}
.svc__filters.is-dd .svc-dd{display:block}
.svc__filters.is-dd .svc__sel{display:none}

/* The closed control. Same 52px, same 13px radius, same border and
   shadow as the search field beside it, so the row reads as one set
   of controls rather than three sizes. */
.svc-dd__btn{
  display:flex;align-items:center;gap:10px;
  width:100%;height:52px;padding:0 14px 0 16px;
  background:var(--sv-card);
  border:1px solid var(--sv-line);
  border-radius:13px;
  box-shadow:0 1px 2px rgba(11,42,51,.05);
  font:600 14px/1 var(--body);color:var(--sv-ink);
  cursor:pointer;text-align:left;
  transition:border-color .18s,box-shadow .18s,background-color .18s;
}
.svc-dd__btn:hover{border-color:rgba(14,148,136,.45)}
.svc-dd__btn:focus-visible{
  outline:none;border-color:var(--sv-teal);
  box-shadow:0 0 0 3px rgba(14,148,136,.14);
}
.svc-dd.is-open .svc-dd__btn{
  border-color:var(--sv-teal);
  box-shadow:0 0 0 3px rgba(14,148,136,.14);
}

.svc-dd__lead{flex:0 0 auto;width:18px;height:18px;color:var(--sv-mut)}
.svc-dd__lead svg{width:100%;height:100%;display:block}
.svc-dd__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* "Sort by:" is a quiet prefix, not part of the value. */
.svc-dd__pre{color:var(--sv-mut);font-weight:600}

.svc-dd__caret{
  flex:0 0 auto;width:16px;height:16px;color:var(--sv-mut);
  transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
.svc-dd__caret svg{width:100%;height:100%;display:block}
.svc-dd.is-open .svc-dd__caret{transform:rotate(180deg)}

/* The panel floats over the cards. Absolute, so opening one never
   moves the grid underneath — the layout must not jump when a
   filter is opened and closed. */
.svc-dd__panel{
  position:absolute;z-index:60;
  top:calc(100% + 8px);left:0;
  min-width:100%;width:max-content;max-width:min(320px,calc(100vw - 32px));
  padding:6px;margin:0;list-style:none;
  background:var(--sv-card);
  border:1px solid var(--sv-line);
  border-radius:13px;
  box-shadow:0 18px 40px -12px rgba(11,42,51,.28),0 2px 6px rgba(11,42,51,.06);
  max-height:min(60vh,340px);overflow-y:auto;
  opacity:0;transform:translateY(-6px) scale(.985);
  transition:opacity .16s ease,transform .16s cubic-bezier(.2,.7,.3,1);
  pointer-events:none;
}
.svc-dd.is-open .svc-dd__panel{
  opacity:1;transform:none;pointer-events:auto;
}
/* A panel that would run off the right edge opens from the right. */
.svc-dd--right .svc-dd__panel{left:auto;right:0}

.svc-dd__opt{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:9px;
  font:600 14px/1.25 var(--body);color:var(--sv-ink);
  cursor:pointer;user-select:none;
  transition:background-color .14s,color .14s;
}
.svc-dd__opt:hover,
.svc-dd__opt.is-active{background:var(--sv-mint);color:var(--sv-tealD)}
.svc-dd__opti{flex:0 0 auto;width:17px;height:17px;color:var(--sv-mut)}
.svc-dd__opti svg{width:100%;height:100%;display:block}
.svc-dd__opt:hover .svc-dd__opti,
.svc-dd__opt.is-active .svc-dd__opti{color:var(--sv-teal)}
.svc-dd__optt{flex:1 1 auto;min-width:0}

/* The tick, and the teal that goes with being the current choice. */
.svc-dd__tick{flex:0 0 auto;width:16px;height:16px;color:var(--sv-teal);opacity:0}
.svc-dd__tick svg{width:100%;height:100%;display:block}
.svc-dd__opt[aria-selected="true"]{color:var(--sv-tealD);background:rgba(14,148,136,.07)}
.svc-dd__opt[aria-selected="true"] .svc-dd__tick{opacity:1}
.svc-dd__opt[aria-selected="true"] .svc-dd__opti{color:var(--sv-teal)}

@media(max-width:900px){
  /* Equal widths in the wrapped row, and a panel that can never be
     wider than the screen it opens on. */
  .svc-dd{flex:1 1 190px}
  .svc-dd__panel{max-width:calc(100vw - 28px)}
}
@media(max-width:640px){
  .svc-dd__panel{width:100%;max-width:100%}
}
@media(prefers-reduced-motion:reduce){
  .svc-dd__panel,.svc-dd__caret{transition:none}
}

/* Shilling price under a converted one on the catalogue cards. */
.svc-card__base{display:block;font-family:var(--r-mono);font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#8A94A0;margin-top:2px}

/* ============================================================
   The booking-widget look (8 September 2026)
   ------------------------------------------------------------
   The school books through a LeadConnector calendar today, and the
   owner asked for this catalogue to be laid out the way that page
   is: a plain "Services" row with the category, sort and search
   controls beside it, then a four-across grid of rounded white
   cards — photograph, name, three lines of copy with a Learn more
   link, a clock and the duration, the price bottom-left and a blue
   Book button bottom-right. On a phone each card turns sideways,
   photograph on the left, so six fit on a screen instead of one.

   Scoped to .svc--lc so the rules above stay the fallback and the
   rentals page, which borrows this stylesheet, gets the same look
   by carrying the same class.
   ============================================================ */
.svc--lc{
  --lc-blue:#2563EB;
  --lc-blueD:#1D4ED8;
  --lc-ink:#101828;
  --lc-mut:#667085;
  --lc-line:#E4E7EC;
  background:#F7F8FA;
  padding:clamp(18px,2.4vw,28px) 0 clamp(48px,6vw,80px);
}
/* the activity row stays: the owner wants Kitesurfing, SUP and the
   rest as links above the cards, not only inside the dropdown */
.svc--lc .svc__frond,.svc--lc .svc__gulls,.svc--lc .svc__eyebrow,.svc--lc .svc__lead{display:none}
.svc--lc .svc__head{align-items:center;gap:14px 20px;margin:0 0 18px}
.svc--lc .svc__intro{flex:1 1 auto}
.svc--lc .svc__title{
  font-family:var(--body);font-weight:600;font-size:20px;line-height:1.2;
  letter-spacing:-.01em;color:var(--lc-ink);
}
.svc--lc .svc__filters{gap:10px}
.svc--lc .svc__sel,.svc--lc .svc__search,.svc--lc .svc-dd__btn{
  height:40px;border-radius:8px;border:1px solid var(--lc-line);
  box-shadow:none;background:#fff;font-size:14px;color:var(--lc-ink);
}
.svc--lc .svc__sel{min-width:160px}
.svc--lc .svc__search{min-width:220px}
.svc--lc .svc__search input{font-size:14px}
.svc--lc .svc__filters.is-dd .svc__go{display:none}
.svc--lc .svc__go{height:40px;border-radius:8px;background:var(--lc-blue);font-size:13.5px}

/* The cards themselves keep the site's own design above - framed,
   the display face for the name, the teal button. Only the page
   head and the toolbar take the widget's plainer look. */

/* Learn more, at the foot of a card's copy, in the site's teal. */
.svc-card__more{
  display:block;text-align:right;margin:4px 0 0;
  font-size:13px;font-weight:700;color:var(--sv-teal);text-decoration:none;
}
.svc-card__more:hover,.svc-card__more:focus-visible{text-decoration:underline;text-underline-offset:3px}

/* ---- The grouped front view ------------------------------------
   Five cards: three across, then two centred beneath them, each the
   width of a three-column cell so the second row lines up with the
   first rather than stretching to fill it. A flex row rather than
   the grid, because a grid cannot centre a short last row. */
.svc--groups .svc__grid{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(20px,2vw,30px);
  max-width:1180px;margin:0 auto;
}
.svc--groups .svc-card{
  flex:0 1 calc((100% - 2 * clamp(20px,2vw,30px)) / 3);
  min-width:0;
}
.svc--groups .svc-card__media a{display:block;height:100%}
@media(max-width:1024px){
  .svc--groups .svc-card{flex-basis:calc((100% - clamp(20px,2vw,30px)) / 2)}
}
@media(max-width:640px){
  .svc--groups .svc-card{flex-basis:100%}
}

/* ============================================================
   RENTALS — one card, the period switched on it, the items as
   a list of choices, and a Booking details panel beside it.
   After the school's own booking page. The period radios are a
   pill pair; data-len on the form (and :has() where the script
   has not run) says which period's list is showing.
   ============================================================ */
.svc-rent__opts{
  display:flex;gap:4px;margin:0;padding:3px;border:1px solid var(--sv-line);
  border-radius:999px;background:#F3F5F7;width:max-content;max-width:100%;
}
.svc-rent__opt{position:relative;flex:1 1 auto}
.svc-rent__opt input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.svc-rent__opt span{
  display:block;padding:7px 16px;border-radius:999px;
  font-size:12.5px;font-weight:700;line-height:1;white-space:nowrap;color:var(--sv-mut);
  transition:background-color .18s,color .18s;
}
.svc-rent__opt input:checked + span{background:var(--sv-teal);color:#fff}
.svc-rent__opt input:focus-visible + span{outline:2px solid var(--sv-teal);outline-offset:2px}

.rentl{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:clamp(20px,3vw,40px);
  align-items:start;margin-top:clamp(6px,1vw,14px)}
.rentl__back{display:inline-flex;align-items:center;gap:6px;color:var(--sv-teal);font-weight:700;
  font-size:14px;text-decoration:none;margin-bottom:8px}
.rentl__back svg{width:18px;height:18px}
.rentl__h{font-size:clamp(19px,2vw,24px);font-weight:600;color:var(--sv-ink);margin:0 0 16px;
  padding-bottom:14px;border-bottom:1px solid var(--sv-line)}
.rentl__card{background:var(--sv-card);border:1px solid var(--sv-line);border-radius:14px;
  padding:clamp(14px,1.8vw,22px)}
.rentl__cardhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rentl__cardhead img{width:96px;height:64px;object-fit:cover;border-radius:8px;flex:0 0 auto}
.rentl__cardtitle{flex:1 1 220px;min-width:0}
.rentl__cardtitle b{display:block;font-size:17px;font-weight:700;color:var(--sv-ink)}
.rentl__cardtitle span{display:block;font-size:13px;color:var(--sv-mut);margin-top:3px}
.rentl__period{flex:0 0 auto}
.rentl__label{margin:20px 0 6px;font-size:13.5px;color:var(--sv-mut)}
.rentl__list{list-style:none;margin:0;padding:0}
.rentl__list li{border-top:1px solid var(--sv-line)}
.rentl__list li:first-child{border-top:0}
.rentl__row{display:grid;grid-template-columns:22px minmax(0,1fr) auto auto;gap:12px;align-items:center;
  padding:13px 4px;cursor:pointer;position:relative}
.rentl__row input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.rentl__mark{width:18px;height:18px;border-radius:50%;border:2px solid #B8C6CC;background:#fff;
  transition:border-color .15s,box-shadow .15s}
.rentl__row input:checked ~ .rentl__mark{border-color:var(--sv-teal);box-shadow:inset 0 0 0 4px #fff;background:var(--sv-teal)}
.rentl__row input:focus-visible ~ .rentl__mark{outline:2px solid var(--sv-teal);outline-offset:2px}
.rentl__name{font-size:14.5px;font-weight:600;color:var(--sv-ink);display:flex;flex-direction:column;gap:2px;min-width:0}
.rentl__name small{font-size:11.5px;font-weight:600;color:var(--sv-teal)}
.rentl__row.is-off{cursor:default}
.rentl__row.is-off .rentl__name{color:var(--sv-mut)}
.rentl__row.is-off .rentl__name small{color:#B04A3A}
.rentl__dur{font-size:13px;color:var(--sv-mut);white-space:nowrap}
.rentl__price{font-size:15px;font-weight:700;color:var(--sv-ink);white-space:nowrap;text-align:right;
  display:flex;flex-direction:column;align-items:flex-end}
.rentl__price small{font-family:var(--r-mono);font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--sv-mut)}

.rentl__main[data-len="hour"] .rentl__list--day,
.rentl__main[data-len="day"]  .rentl__list--hour{display:none}
.rentl__main:has(input[name="period"][value="day"]:checked)  .rentl__list--hour{display:none}
.rentl__main:has(input[name="period"][value="day"]:checked)  .rentl__list--day{display:block}
.rentl__main:has(input[name="period"][value="hour"]:checked) .rentl__list--day{display:none}
.rentl__main:has(input[name="period"][value="hour"]:checked) .rentl__list--hour{display:block}

.rentl__side{background:var(--sv-card);border:1px solid var(--sv-line);border-radius:14px;
  padding:clamp(16px,1.8vw,22px);position:sticky;top:90px}
.rentl__sideh{font-size:18px;font-weight:700;color:var(--sv-ink);margin:0 0 12px;padding-bottom:12px;
  border-bottom:1px solid var(--sv-line)}
.rentl__k{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--sv-mut);margin:10px 0 8px}
.rentl__k svg{width:18px;height:18px}
.rentl__sum{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:start;
  padding-bottom:14px;border-bottom:1px solid var(--sv-line)}
.rentl__sumname{font-size:14px;font-weight:600;color:var(--sv-ink);display:flex;flex-direction:column;gap:3px}
.rentl__sumname small{font-size:12.5px;font-weight:600;color:var(--sv-teal)}
.rentl__sumdur{font-size:13px;color:var(--sv-mut);white-space:nowrap}
.rentl__sumprice{font-size:15px;color:var(--sv-ink);white-space:nowrap}
.rentl__next{margin:0;padding:6px 0 0}
.rentl__next div{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--sv-line);font-size:13.5px}
.rentl__next dt{color:var(--sv-mut);margin:0}
.rentl__next dd{margin:0;color:var(--sv-ink);font-weight:600;text-align:right}
.rentl__total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:14px 0 2px;
  font-size:14.5px;font-weight:700;color:var(--sv-ink)}
.rentl__total b{font-size:18px}
.rentl__base{margin:0 0 14px;text-align:right;font-family:var(--r-mono);font-size:10.5px;font-weight:700;
  letter-spacing:.06em;color:var(--sv-mut)}
.rentl__go{width:100%;justify-content:center;margin-top:6px}

@media(max-width:860px){
  .rentl{grid-template-columns:1fr}
  .rentl__side{position:static}
}
@media(max-width:560px){
  .rentl__row{grid-template-columns:22px minmax(0,1fr) auto;row-gap:2px}
  .rentl__dur{grid-column:2;font-size:12px}
  .rentl__price{grid-column:3;grid-row:1 / span 2}
  .rentl__cardhead img{display:none}
}