/* ===================================================================
   ProcidaRide — Refinement layer
   Palette grounded in the island: sea-at-dusk ink, limestone paper,
   antique brass hairlines. Loaded last; overrides base styles only.
   =================================================================== */

:root{
  --paper:#F6F2EA;          /* warm limestone */
  --paper-deep:#EFE9DE;     /* shaded stone, for alternating bands */
  --ink:#16262B;            /* deep marine — the sea at dusk, never pure black */
  --ink-soft:#3A4E54;       /* secondary text */
  --brass:#A2854E;          /* antique brass — hairlines and accents only */
  --brass-soft:rgba(162,133,78,.38);
  --line:rgba(22,38,43,.14);
  --muted:rgba(22,38,43,.56);
  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk',system-ui,sans-serif;
  --wrap:1180px;
}

html,body{background:var(--paper) !important;color:var(--ink) !important}
body{font-size:1.02rem;line-height:1.72;letter-spacing:.004em}
.site-footer{background:var(--paper) !important}

/* ---- Restore ink colour on body copy (base sheet forces #1a1a1a) ---- */
.qa h3,.tile h3,.why-item strong,.ac-item summary,.section-head h2,
.lede,.split p,.tile p,.qa p,.why-item p,.ac-body,.ac-body p{color:var(--ink) !important}
.split p,.tile p,.qa p,.why-item p,.ac-body p{color:var(--ink-soft) !important}
.qa-num,.why-item span,.kicker.navy,.tile-link{color:var(--brass) !important}

/* ---- Typography -------------------------------------------------- */
h1,h2,h3,.lede,.hero-display,.hero-lede,.brand{font-family:var(--display)}

/* Cormorant runs small and light: raise sizes, keep weight airy */
.hero-display{
  font-family:var(--display) !important;
  text-transform:none !important;
  font-weight:300 !important;
  font-size:clamp(3rem,9.2vw,6.6rem) !important;
  line-height:1.02 !important;
  letter-spacing:.005em !important;
  margin:1.1rem 0 1.3rem !important;
  text-shadow:0 1px 3px rgba(0,0,0,.42),0 3px 26px rgba(0,0,0,.4) !important;
}
.hero-sub,.kicker{
  font-family:var(--sans);
  font-size:.66rem !important;
  font-weight:500 !important;
  letter-spacing:.34em !important;
  text-transform:uppercase;
}
.hero-lede{
  font-family:var(--display) !important;
  font-weight:300 !important;
  font-style:italic;
  font-size:clamp(1.2rem,2.5vw,1.65rem) !important;
  line-height:1.5 !important;
  max-width:44ch !important;
  margin-bottom:2.4rem !important;
}
.section-head h2,.lede{
  font-weight:300 !important;
  letter-spacing:.008em;
  line-height:1.18;
}
.section-head h2{font-size:clamp(1.9rem,4.4vw,3rem) !important}
.lede{font-size:clamp(1.55rem,3.6vw,2.4rem) !important;max-width:32ch}
.tile h3,.qa h3{
  font-family:var(--display) !important;
  font-weight:400 !important;
  font-size:1.32rem !important;
  line-height:1.25;
  letter-spacing:.005em;
}
.brand{
  font-family:var(--display) !important;
  font-size:1.5rem !important;
  font-weight:400 !important;
  letter-spacing:.06em !important;
}
.brand span{color:var(--brass) !important;padding:0 .18em}

/* ---- Signature: the brass hairline ------------------------------- */
/* A short rule beneath every section eyebrow — the one repeated
   gesture that ties the pages together. */
.section-head .kicker{position:relative;display:inline-block;padding-bottom:1rem}
.section-head .kicker::after{
  content:"";position:absolute;left:50%;bottom:0;
  width:42px;height:1px;background:var(--brass);transform:translateX(-50%);
}
.section-head h2{margin-top:.2rem}

/* ---- Air: luxury lives in the whitespace -------------------------- */
.section{padding-block:clamp(4.5rem,10vw,8.5rem)}
.section-head{margin-bottom:clamp(2.8rem,6vw,4.5rem)}
.split{gap:clamp(2.5rem,7vw,6rem)}
.grid{gap:clamp(1.8rem,4vw,3.2rem)}

/* ---- Buttons: understated, never shouty --------------------------- */
.btn,.btn-solid{
  font-family:var(--sans);
  font-size:.66rem !important;
  font-weight:500 !important;
  letter-spacing:.26em !important;
  text-transform:uppercase;
  padding:1.05rem 2.1rem !important;
  border-radius:0 !important;
  border:1px solid var(--ink);
  background:transparent;
  color:var(--ink);
  transition:background .35s ease,color .35s ease,border-color .35s ease;
}
.btn-solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-solid:hover{background:transparent;color:var(--ink)}
.btn:hover{background:var(--ink);color:var(--paper)}
/* on photography the buttons invert */
.hero .btn,.final .btn{border-color:rgba(255,255,255,.7);color:#fff;background:transparent}
.hero .btn:hover,.final .btn:hover{background:#fff;color:var(--ink)}
.hero .btn-solid,.final .btn-solid{background:#fff;color:var(--ink);border-color:#fff}
.hero .btn-solid:hover,.final .btn-solid:hover{background:transparent;color:#fff}

/* ---- Navigation --------------------------------------------------- */
.nav-list a{font-size:.66rem !important;letter-spacing:.22em !important;font-weight:500 !important}
.nav-list a::after{background:var(--brass) !important}
.site-header.scrolled{background:rgba(246,242,234,.94) !important;box-shadow:0 1px 0 var(--line) !important}

/* ---- Editorial detail: tiles as magazine plates -------------------- */
.tile-img{background:var(--paper-deep)}
.tile-img img{transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.tile:hover .tile-img img{transform:scale(1.035)}
.tile h3{margin-top:1.25rem}
.tile p{font-size:.94rem}
.tile-link{
  font-family:var(--sans);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;
  margin-top:auto;padding-top:1rem;
}
.tile-link:hover{text-decoration:underline;text-underline-offset:.35em}

/* ---- Rules and dividers ------------------------------------------- */
.ac-item{border-top:1px solid var(--line)}
.ac-item summary{
  font-family:var(--display) !important;
  font-size:1.18rem !important;font-weight:400 !important;
  padding-block:1.4rem;
}
.why-item{border-top:1px solid var(--brass-soft)}
.why-item span{
  font-family:var(--sans);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;
}
.why-item strong{font-family:var(--display);font-weight:400;font-size:1.15rem}
.trust-note{color:var(--muted) !important;font-size:.92rem;font-style:italic}

/* ---- Breadcrumb --------------------------------------------------- */
.breadcrumb ol{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase}

/* ---- Footer ------------------------------------------------------- */
.foot-seo{color:var(--muted) !important;font-size:.86rem;line-height:1.75;max-width:78ch}
.copyright{font-size:.7rem;letter-spacing:.1em;color:var(--muted) !important}

/* ---- Quiet the hero scrim so photography reads richer -------------- */
.hero::after{background:linear-gradient(180deg,rgba(8,20,24,.30) 0%,rgba(8,20,24,.14) 38%,rgba(8,20,24,.52) 100%) !important}

/* ---- Accessibility floor ------------------------------------------ */
a:focus-visible,button:focus-visible,summary:focus-visible,
.btn:focus-visible,.btn-solid:focus-visible{
  outline:2px solid var(--brass);outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
  .tile-img img,.btn,.btn-solid{transition:none !important}
  .tile:hover .tile-img img{transform:none}
}

/* ---- Mobile refinements ------------------------------------------- */
@media (max-width:768px){
  .hero-display{font-size:clamp(2.6rem,13vw,3.6rem) !important}
  .section{padding-block:clamp(3.4rem,11vw,5rem)}
  .btn,.btn-solid{padding:.95rem 1.5rem !important;letter-spacing:.2em !important}
}

/* ===================================================================
   Booking form — refinement on the dark glass panel
   Brass reads as #D9BE86 here: the darker brass disappears on navy.
   =================================================================== */
:root{--brass-light:#D9BE86}

.hero-form{
  background:rgba(14,24,30,.46) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  padding:clamp(1rem,2vw,1.5rem) clamp(1.2rem,3vw,2rem) clamp(.9rem,2vw,1.2rem) !important;
}

/* Micro-labels above the address fields */
.hero-form .fld-label{
  font-family:var(--sans);
  font-size:.58rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--brass-light);
  margin-bottom:.45rem;
  display:block;
}

/* Values set in the display face, hairlines quieter */
.hero-form .ac-wrap input,
.hero-form .num-trigger,
.hero-form .sel-trigger{
  font-family:var(--display) !important;
  font-size:1.12rem !important;
  border-bottom-color:rgba(255,255,255,.32) !important;
  padding:.45rem .1rem .5rem !important;
  transition:border-color .3s ease;
}
.hero-form .ac-wrap input::placeholder{
  font-family:var(--display);
  color:rgba(255,255,255,.5);
  font-style:italic;
}
.hero-form .ac-wrap input:focus,
.hero-form .num-trigger:focus,
.hero-form .sel-trigger:focus{border-bottom-color:var(--brass-light) !important}
.hero-form .num-caret{color:var(--brass-light);font-size:.7rem}

/* Air between rows */
.hero-form .grid-2{gap:1.9rem !important;margin-bottom:.6rem !important}

/* Mode tabs: a brass rule instead of a solid white block */
.hero-form .seg{gap:1.6rem !important;margin-bottom:1.1rem !important;justify-content:center}
.hero-form .seg button{
  flex:0 0 auto !important;
  font-size:.66rem !important;
  letter-spacing:.26em !important;
  padding:.5rem .2rem !important;
  color:rgba(255,255,255,.55) !important;
  border-bottom:1px solid transparent !important;
}
.hero-form .seg button[aria-selected="true"]{
  background:transparent !important;
  color:#fff !important;
  border-bottom-color:var(--brass-light) !important;
}

/* Consent on one line */
.hero-form .bk-consent{
  flex-direction:row !important;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.4rem !important;
  margin-top:1rem !important;
}
.hero-form .bk-consent label{font-size:.72rem !important;color:rgba(255,255,255,.85) !important}

/* Submit */
.hero-form .btn-book{
  font-size:.66rem !important;
  letter-spacing:.28em !important;
  padding:1rem 2.4rem !important;
  margin-top:1rem !important;
  border-color:rgba(255,255,255,.85) !important;
  transition:background .3s ease,color .3s ease;
}
.hero-form .btn-book:hover{background:#fff;color:var(--ink)}

/* Touch targets stay comfortable on phones */
@media (max-width:768px){
  .hero-form .ac-wrap input,
  .hero-form .num-trigger,
  .hero-form .sel-trigger{min-height:44px;font-size:1rem !important}
  .hero-form .grid-2{gap:1.25rem !important}
  .hero-form .fld-label{font-size:.54rem;margin-bottom:.3rem}
  .hero-form .bk-consent{gap:.5rem 1rem !important}
}

/* ===================================================================
   Proportion fixes
   =================================================================== */

/* The booking panel must read without relying on backdrop-filter:
   several browsers and "reduce transparency" settings drop the blur,
   and this is the element that generates enquiries. */
.hero-form{
  background:rgba(12,22,28,.62) !important;
  border:1px solid rgba(255,255,255,.26) !important;
  border-radius:0 !important;
  max-width:980px !important;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7) !important;
}
@supports (backdrop-filter:blur(1px)){
  .hero-form{background:rgba(12,22,28,.52) !important}
}

/* Column counts that match the number of items:
   4 service tiles read as one row; 6 reasons read as two rows of three. */
.grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)) !important}
.why-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)) !important}

/* Display type: 6.6rem overpowered the page at large widths */
.hero-display{font-size:clamp(2.8rem,7.4vw,5.4rem) !important}

/* Consistent image proportion, with a fallback for browsers
   that don't support aspect-ratio */
.tile-img{aspect-ratio:4/5;position:relative}
@supports not (aspect-ratio:1/1){
  .tile-img{height:0;padding-top:125%}
  .tile-img img{position:absolute;inset:0}
}

/* Contrast: the panel and its text must hold on a busy photograph even
   when the blur never happens. Blur, where supported, is a bonus. */
.hero-form{background:rgba(10,20,26,.72) !important}
@supports (backdrop-filter:blur(1px)){
  .hero-form{background:rgba(10,20,26,.56) !important}
}
.hero-form .ac-wrap input::placeholder{color:rgba(255,255,255,.66) !important}
.hero-form .ac-wrap input,
.hero-form .num-trigger,
.hero-form .sel-trigger{color:#fff !important;border-bottom-color:rgba(255,255,255,.42) !important}
.hero-form .seg button{color:rgba(255,255,255,.62) !important}
.hero-form .bk-consent label{color:rgba(255,255,255,.9) !important}

/* ===================================================================
   Image-free page variants
   Used on pages that carry no photography: the hero and closing band
   are built from the brand palette instead of a photograph, so the
   white type keeps its contrast without an image behind it.
   =================================================================== */
.hero--plain{
  min-height:auto;
  padding:clamp(8rem,18vh,12rem) 0 clamp(3.4rem,8vh,5.5rem);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(162,133,78,.20) 0%, rgba(162,133,78,0) 62%),
    linear-gradient(175deg,#1F3942 0%,#16262B 46%,#0E1B20 100%);
}
.hero--plain::after{display:none}
.hero--plain .wrap{padding-bottom:0}
.hero--plain .hero-display{text-shadow:none !important}
.hero--plain .hero-lede{
  text-shadow:none !important;
  color:rgba(255,255,255,.86) !important;
}
.hero--plain .hero-sub{text-shadow:none !important;color:var(--brass-light,#D8C08A) !important}

.final--plain{
  background:linear-gradient(170deg,#1F3942 0%,#16262B 58%,#0E1B20 100%);
}
.final--plain::after{display:none}

/* Text-only tiles: a hairline replaces the photograph as the divider */
.tile--text{
  padding-top:1.4rem;
  border-top:1px solid var(--line);
}
.tile--text h3{margin-top:0}
.tile--text .tile-note{
  font-family:var(--sans);
  font-size:.66rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--brass) !important;
  display:block;
  margin-bottom:.5rem;
}

/* Answer-first summary block: the short, quotable paragraph that
   answer engines lift, set apart from the surrounding prose */
.answer-block{
  max-width:70ch;
  margin:0 auto;
  padding:1.6rem 0 0;
  border-top:1px solid var(--line);
}
.answer-block p{color:var(--ink-soft) !important;margin-bottom:1rem}
.answer-block p:last-child{margin-bottom:0}

/* Footer navigation */
.foot-nav{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:1.6rem 2rem;
  padding-bottom:2.2rem;
  margin-bottom:2rem;
  border-bottom:1px solid var(--line);
  text-align:left;
}
.foot-nav .foot-nav-title{
  font-family:var(--sans);
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--brass) !important;
  margin-bottom:.9rem;
}
.foot-nav ul{list-style:none;margin:0;padding:0}
.foot-nav li{margin-bottom:.45rem}
.foot-nav a{
  font-size:.86rem;
  color:var(--ink-soft) !important;
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.foot-nav a:hover{border-bottom-color:var(--brass-soft)}

/* ===================================================================
   Fix: primary CTA legibility over hero and closing bands
   The max-contrast block forces every element inside .hero / .final to
   white with !important, which also hit the filled button — leaving
   white text on a white button. Restore ink text on the solid button,
   and keep white text only on its transparent hover state.
   =================================================================== */
.hero .btn-solid,
.final .btn-solid,
.hero .hero-ctas .btn-solid,
.final .center-cta .btn-solid{
  color:var(--ink) !important;
  background:#fff !important;
  border-color:#fff !important;
}
.hero .btn-solid:hover,
.hero .btn-solid:focus-visible,
.final .btn-solid:hover,
.final .btn-solid:focus-visible{
  color:#fff !important;
  background:transparent !important;
  border-color:#fff !important;
}