/* ==========================================================================
   PRIVATE CHEF BODRUM — "LIMEWASH"
   Art direction. Read this before you change anything.

   THE FEEL comes from joyeux-repas.fr: an oversized wordmark that runs off
   both edges, full-bleed photography carrying whole sections, cream type laid
   over it, and one small hot pill as the only loud control.

   THE SECTION ARCHITECTURE comes from welltraveledclub.com: slim bar with a
   centred wordmark, a split hero with an overlapping tilted photo collage, a
   credibility strip, one full-bleed statement over a dark photograph, and a
   horizontal rail of rounded photo cards.

   Three of those WTC sections could not be filled honestly here — there is no
   press coverage, there are no reviews and there are no members. Each was
   replaced with the same SHAPE carrying content that is actually true:
     "as seen in" logo row  -> the peninsula coverage strip (the residency claim)
     testimonial over photo -> the pricing statement (the site's real argument)
     member favourites rail -> what we cook, by cuisine
   Do not reinstate the originals. Inventing press, reviews or members is the
   one failure this site cannot recover from.

   PALETTE — deliberately NOT warm cream + terracotta. That pairing is a named
   generic-AI default, and it is what the first version of this site was
   rejected for. The ground here is a COOL limewash with the yellow taken out,
   and the accent is oxblood, not rust.

   HARD RULES:
     1. One hot colour. Oxblood appears on pills, on the annotated word, and
        nowhere else. If it shows up a fourth time, delete one.
     2. Photography is the design. A section with no photograph gets more air,
        never a decorative box to fill the gap.
     3. Text over a photograph ALWAYS sits on a scrim, and the scrim is part of
        the component, never added case by case. See .shot--scrim.
     4. Radius is 16px on photographic frames and 999px on pills. Nothing else
        gets a radius, and nothing gets a drop shadow except the collage.
     5. NO OPACITY FADE-UP ON SCROLL. Motion is scale, un-crop and colour.
   ========================================================================== */


/* ==========================================================================
   1. RESET
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
  scroll-behavior:smooth;
  scroll-padding-block-start:5.5rem;
}
body{min-block-size:100%;overflow-x:clip}
img,picture,svg,video{display:block;max-inline-size:100%}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:0}
ul,ol{list-style:none;padding:0}
table{border-collapse:collapse}
:where(h1,h2,h3,h4,p,figure,blockquote,dl,dd){margin:0}
summary{cursor:pointer}


/* ==========================================================================
   2. TOKENS
   ========================================================================== */

:root{
  color-scheme:light;   /* light only — see the note below */

  --ground:#EFEDE6;      /* Bodrum whitewash — lime-washed wall, not cream  */
  --ground-2:#E2E0D7;    /* alternate band                                  */
  --ground-3:#FFFFFF;    /* form fields only                                */
  --deep:#DCDFD8;        /* was a dark navy band. The owner does not want dark
                            grounds anywhere, so the one "deep" surface is now a
                            deeper tint of the wall. Type on it is --ink.       */

  --ink:#0E2230;         /* 13.9 on ground · 11.9 on ground-2        AAA    */
  --ink-2:#41565F;       /*  6.6 on ground ·  5.6 on ground-2        AA     */
  --muted:#5A686F;       /*  5.0 on ground · 4.3 on ground-2         AA     */

  --accent:#0F5C86;      /*  6.2 on ground. Bodrum blue. The ONE accent.    */
  --accent-hi:#14719F;   /* hover only — 4.6, never carries small text      */
  --on-accent:#F2F5F6;   /*  6.6 on accent                           AA     */

  --sage:#AEBAC0;        /* photo placeholder + quiet fills, never text     */
  --teal-logo:#0F6F6C;   /* the brand mark only. Never type, never UI.      */
  --sun:#F09B78;         /* the logo's sun. Mark only.                      */

  --rule:rgba(14,34,48,.16);   /* hairlines are LOW contrast here — the      */
  --rule-firm:rgba(14,34,48,.32); /* structure comes from photography and   */
                                  /* air, not from a grid of lines.         */
  --on-shot:#F2F5F6;     /* type laid over photography                      */

  --maxw:1280px;
  --edge:clamp(1.25rem,4.6vw,4.5rem);
  --gap:clamp(.9rem,1.25vw,1.4rem);

  --s1:var(--gap);
  --s2:calc(var(--gap) * 2);
  --s3:calc(var(--gap) * 2.25);
  --s5:calc(var(--gap) * 3.25);
  --s8:calc(var(--gap) * 4.5);   /* was *8 — that put ~370px of nothing between
                                    every pair of sections. A section break needs
                                    to read as a break, not as a missing screen. */

  --r:16px;              /* the only photographic radius                    */

  /* ---- type ----------------------------------------------------------- */
  --ff:'Inter','Inter Fallback',system-ui,-apple-system,sans-serif;
  --ff-disp:'Chivo','Chivo Fallback','Arial Black',Arial,sans-serif;

  --t-mega:clamp(2.6rem,6.6vw,6.4rem);
  --t-xl:clamp(1.9rem,3.9vw,3.4rem);
  --t-lg:clamp(1.35rem,1.05rem + 1.1vw,1.8rem);
  --t-md:1.1875rem;
  --t-base:1.0625rem;
  --t-sm:.9375rem;
  --t-label:.6875rem;

  --e:cubic-bezier(.2,0,0,1);
  --d1:130ms;--d2:200ms;--d3:340ms;
}

/* NO DARK MODE. Removed 2026-07-26 after the owner saw the site on a dark-set
   OS and did not recognise it: the whole design is a lime-washed wall with one
   blue, and inverting that produces a different, worse site. The reference this
   was briefed against has no dark mode either. Do not reintroduce one. */


/* ==========================================================================
   3. FONTS — Fraunces (display) + Inter (body), both from Google Fonts.
   The two faces below are metric-matched substitutes so the swap costs
   approximately no layout shift on the very large headings.
   ========================================================================== */

@font-face{
  font-family:'Inter Fallback';
  src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans'),local('Roboto');
  size-adjust:107%;ascent-override:90%;descent-override:22.4%;line-gap-override:0%;
}
@font-face{
  font-family:'Chivo Fallback';
  src:local('Arial Black'),local('Arial Bold'),local('Helvetica Neue'),local('Liberation Sans');
  size-adjust:98%;ascent-override:92%;descent-override:23%;line-gap-override:0%;
}


/* ==========================================================================
   4. BASE TYPE
   ========================================================================== */

body{
  font-family:var(--ff);
  font-size:var(--t-base);
  line-height:1.6;
  color:var(--ink);
  background:var(--ground);
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.t-disp{
  font-family:var(--ff-disp);
  font-weight:900;
  letter-spacing:-.028em;
  line-height:.98;
  text-transform:uppercase;
  text-wrap:balance;
}
h1{font-size:var(--t-mega)}
h2{font-size:var(--t-xl)}
h3{font-size:var(--t-lg);line-height:1.14}
h4{font-family:var(--ff);font-size:var(--t-base);font-weight:600;line-height:1.3}

/* The annotated word. Italic + oxblood — Fraunces' italic is the reason this
   typeface was chosen, so it is used where it does the most work. */
h1 em,h2 em,.em{font-style:normal;color:var(--accent)}

p{max-inline-size:66ch;text-wrap:pretty}
.lede{font-size:var(--t-md);line-height:1.55;color:var(--ink-2);max-inline-size:46ch}
.small{font-size:var(--t-sm);color:var(--ink-2)}
.muted{color:var(--muted)}
strong,b{font-weight:600}

.label{
  font-family:var(--ff);
  font-size:var(--t-label);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  line-height:1.3;color:var(--accent);
  max-inline-size:none;
}
.label--quiet{color:var(--muted)}

.sr-only{
  position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip{
  position:absolute;inset-block-start:-100%;inset-inline-start:var(--edge);
  z-index:60;background:var(--ink);color:var(--ground);
  padding:.75rem 1.25rem;border-radius:999px;font-size:var(--t-sm);font-weight:600;
}
.skip:focus{inset-block-start:.75rem}
::selection{background:var(--accent);color:var(--on-accent)}


/* ==========================================================================
   5. LAYOUT
   ========================================================================== */

.wrap{inline-size:100%;max-inline-size:var(--maxw);margin-inline:auto;padding-inline:var(--edge)}
.sec{padding-block:var(--sy,var(--s8))}
.sec--tight{--sy:var(--s5)}
.bleed{inline-size:100vw;margin-inline:calc(50% - 50vw)}


/* ==========================================================================
   6. LINKS, BUTTONS, FOCUS
   ========================================================================== */

a{color:inherit}
.link,.prose a,.faq-a a,.foot a,p a{
  color:var(--accent);text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;
  background-size:100% 1px;padding-block-end:1px;
  transition:background-size var(--d3) var(--e);
}
@media (hover:hover){
  .link:hover,.prose a:hover,.faq-a a:hover,.foot a:hover,p a:hover{
    background-size:0 1px;background-position:100% 100%;
  }
}

/* The pill. Small, hot, and the only loud control on the page. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-block-size:54px;padding-inline:1.75rem;
  border-radius:999px;border:1px solid transparent;
  font-family:var(--ff);font-size:var(--t-sm);font-weight:600;
  letter-spacing:.01em;line-height:1;text-decoration:none;cursor:pointer;
  transition:background-color var(--d2) var(--e),color var(--d2) var(--e),
             border-color var(--d2) var(--e);
}
.btn--solid{background:var(--accent);color:var(--on-accent)}
.btn--line{background:transparent;color:var(--ink);border-color:var(--rule-firm)}
.btn--on-shot{background:var(--on-shot);color:var(--ink)}
.btn--sm{min-block-size:42px;padding-inline:1.15rem;font-size:var(--t-label);
  letter-spacing:.12em;text-transform:uppercase}
@media (hover:hover){
  .btn--solid:hover{background:var(--accent-hi)}
  .btn--line:hover{background:var(--ink);color:var(--ground);border-color:var(--ink)}
  .btn--on-shot:hover{background:#fff}
}
.btn[disabled]{opacity:.5;cursor:not-allowed}

:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:3px solid var(--accent);outline-offset:3px;
}

@media (forced-colors:active){
  :where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{outline:3px solid CanvasText}
}


/* ==========================================================================
   7. THE BAR — slim, three-part, centred wordmark. Not sticky: the oversized
   wordmark below is the brand moment, and a sticky bar would compete with it.
   ========================================================================== */

.bar{border-block-end:1px solid var(--rule)}
.bar__in{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:var(--s2);padding-block:1rem;
}
.bar__nav{display:none}
.bar__mark{
  justify-self:center;display:inline-flex;align-items:center;gap:.55rem;
  text-decoration:none;color:var(--ink);
}
.bar__mark svg{inline-size:26px;block-size:26px;flex:0 0 auto}
.bar__mark span{
  font-family:var(--ff);font-size:var(--t-label);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
}
.bar__end{justify-self:end;display:flex;align-items:center;gap:var(--s1)}

@media (min-width:64rem){
  .bar__nav{
    display:flex;align-items:center;gap:var(--s2);justify-self:start;
  }
  .bar__nav a{
    font-size:var(--t-label);font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-2);text-decoration:none;
    transition:color var(--d1) var(--e);
  }
  .bar__nav a[aria-current="page"]{color:var(--accent)}
  @media (hover:hover){.bar__nav a:hover{color:var(--ink)}}
}
/* Below the breakpoint the nav becomes a scrolling strip under the bar, so
   nothing hides behind a toggle and nothing needs JS. */
.navstrip{
  display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:none;
  padding:.7rem var(--edge);border-block-end:1px solid var(--rule);
}
.navstrip::-webkit-scrollbar{display:none}
.navstrip a{
  flex:0 0 auto;font-size:var(--t-label);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);text-decoration:none;
}
.navstrip a[aria-current="page"]{color:var(--accent)}
@media (min-width:64rem){.navstrip{display:none}}


/* ==========================================================================
   8. THE WORDMARK — the joyeux device. One line of the brand name, sized to
   the viewport so it runs off both edges. It is set in the display face at a
   weight the body copy never uses, and it is the largest thing on the site.
   Purely decorative: the accessible name lives in the bar.
   ========================================================================== */

.wordmark{
  display:block;inline-size:100%;overflow:hidden;
  padding-block:clamp(.6rem,1.4vw,1.4rem);
  user-select:none;
}
.wordmark span{
  display:block;white-space:nowrap;
  font-family:var(--ff-disp);
  font-weight:900;
  /* MEASURED, not guessed: 'PRIVATE CHEF BODRUM' in Chivo 900 at -.028em
     tracking is 11.106em wide, so 100vw / 11.106 = 9.00vw fills the viewport
     exactly. Re-measure if the string or the typeface changes — at 10.4vw the
     final M fell off the right edge. */
  font-size:9vw;
  line-height:.9;
  letter-spacing:-.028em;
  text-align:center;
  color:var(--ink);
}


/* ==========================================================================
   9. SHOTS — every photograph on the site is a .shot. The radius, the crop
   and the scrim live here so no page has to invent them.
   ========================================================================== */

.shot{
  position:relative;overflow:hidden;border-radius:var(--r);
  background:var(--sage);
  isolation:isolate;
}
.shot > img{
  inline-size:100%;block-size:100%;object-fit:cover;
  object-position:var(--pos,50% 50%);
}
.shot--tall{aspect-ratio:4/5}
.shot--port{aspect-ratio:3/4}
.shot--sq{aspect-ratio:1}
.shot--wide{aspect-ratio:3/2}
.shot--strip{aspect-ratio:21/9}

/* Rule 3: type over a photograph always sits on a scrim, and the scrim is
   part of the component. The gradient is weighted to the bottom because that
   is where captions and titles sit; the flat layer underneath guarantees the
   minimum ratio even where the image is pale. */
.shot--scrim::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(12,15,16,.78) 0%,rgba(12,15,16,.46) 42%,rgba(12,15,16,.22) 100%);
}
.shot__over{
  position:absolute;inset-inline:0;inset-block-end:0;z-index:2;
  padding:clamp(1rem,2.2vw,1.9rem);
  color:var(--on-shot);
}
.shot__over .label{color:var(--on-shot);opacity:.82}
.shot__over h3{color:var(--on-shot)}

figcaption.cap{
  display:block;margin-block-start:.7rem;
  font-size:var(--t-sm);color:var(--muted);max-inline-size:34ch;
}


/* ==========================================================================
   10. HERO — WTC's split: headline left, tilted photo collage right.
   The collage is three shots at small rotations with real overlap. It is the
   one place on the site permitted a shadow, because without one the layers
   read as a flat mistake rather than a stack.
   ========================================================================== */

.hero{padding-block:clamp(1.5rem,3vw,3rem) var(--s8)}
.hero__grid{display:grid;gap:var(--s3);align-items:center}
.hero__lede{margin-block-start:var(--s2)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-block-start:var(--s3)}

.collage{position:relative;display:block;padding-block-start:var(--s2)}
.collage__grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-template-rows:auto auto;
  gap:0;
}
.collage .shot{box-shadow:0 18px 44px -22px rgba(20,24,26,.5)}
/* The overlaps are small on purpose. Enough that the three read as one stack,
   never so much that a photograph loses its subject behind the one on top —
   which is the failure mode this layout invites. */
.collage .shot:nth-child(1){grid-column:1 / span 4;grid-row:1;rotate:-2deg;z-index:3}
.collage .shot:nth-child(2){grid-column:5 / span 2;grid-row:1 / span 2;rotate:2deg;
  z-index:2;margin-block-start:26%;margin-inline-start:-8%}
.collage .shot:nth-child(3){grid-column:1 / span 3;grid-row:2;rotate:-1deg;
  z-index:4;margin-block-start:-8%;margin-inline-start:8%}

@media (min-width:56rem){
  .hero__grid{grid-template-columns:1.02fr .98fr;gap:var(--s5)}
  .hero{padding-block:clamp(2rem,3.4vw,4rem) var(--s8)}
}


/* ==========================================================================
   11. THE STRIP — WTC's "as seen in" row, carrying the residency claim
   instead of borrowed press logos. Place names, not logos, because place
   names are the thing this business can actually prove.
   ========================================================================== */

.strip{border-block:1px solid var(--rule);padding-block:var(--s1)}
.strip__lead{
  text-align:center;margin-block-end:var(--s2);
}
.strip__names{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.6rem var(--s3);
}
.strip__names li{
  font-family:var(--ff-disp);font-size:clamp(1rem,1.9vw,1.5rem);
  color:var(--ink-2);white-space:nowrap;
}


/* ==========================================================================
   12. THE STATEMENT — WTC's testimonial band, full-bleed over a photograph.
   It carries the pricing argument rather than a review, because there are no
   reviews. Type is centred and large; the scrim comes from .shot--scrim.
   ========================================================================== */

.statement{position:relative;min-block-size:min(62vh,520px);display:grid;background:#1C2A33}
.statement > .shot{position:absolute;inset:0;border-radius:0;block-size:100%}
.statement__in{
  position:relative;z-index:2;align-self:center;text-align:center;
  padding-block:var(--s8);
}
.statement__in .label{color:var(--on-shot);opacity:.8}
.statement h2{
  color:var(--on-shot);margin-block-start:var(--s2);
  max-inline-size:20ch;margin-inline:auto;
}
.statement h2 em{color:#9FD6F2}   /* the accent is unreadable here; this is 10.1 */
.statement p{
  color:var(--on-shot);opacity:.92;margin-block-start:var(--s2);
  max-inline-size:56ch;margin-inline:auto;
}
.statement .btn{margin-block-start:var(--s3)}


/* ==========================================================================
   13. THE RAIL — WTC's card carousel. Native scroll-snap, no JS, no library.
   Cards are photographs with the label laid over the scrim.
   ========================================================================== */

.rail__head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s2);margin-block-end:var(--s3)}
.rail{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(74vw,1fr);
  gap:var(--s1);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding-block-end:.5rem;
  /* the rail runs to the viewport edge so it reads as continuing off-screen */
  margin-inline:calc(var(--edge) * -1);
  padding-inline:var(--edge);
  overscroll-behavior-inline:contain;
}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:start}
.rail .shot{block-size:100%}
@media (min-width:40rem){.rail{grid-auto-columns:minmax(40vw,1fr)}}
@media (min-width:64rem){.rail{grid-auto-columns:minmax(23%,1fr)}}
.rail__hint{margin-block-start:var(--s1);font-size:var(--t-sm);color:var(--muted)}


/* ==========================================================================
   13b. EXAMPLE BRIEFS — this is where a testimonial carousel would normally
   go, and it deliberately is not one.

   Fabricated reviews were asked for and declined: this site publishes on
   /about that it shows no testimonials, fake reviews are unlawful in the UK
   (its strongest market) under the DMCC Act 2024, and the same owner's other
   domain would carry the risk too. These cards do the same commercial job
   honestly — they are worked examples of briefs the kitchen is set up for,
   labelled as examples, in nobody's voice but ours.

   HARD RULE: never add a name, a rating, a date, an avatar or quotation marks
   to these. The moment one of them reads as a person speaking, it is a fake
   review, whatever the heading above it says.
   ========================================================================== */

.briefs{display:grid;gap:var(--s1)}
@media (min-width:44rem){.briefs{grid-template-columns:1fr 1fr}}
@media (min-width:70rem){.briefs{grid-template-columns:repeat(3,1fr)}}

.brief-card{
  border:1px solid var(--rule);border-radius:var(--r);
  padding:var(--s2);background:var(--ground-2);
  display:grid;gap:.6rem;align-content:start;
}
.brief-card__occasion{
  font-family:var(--ff-disp);font-size:var(--t-lg);line-height:1.15;
}
.brief-card__meta{
  display:flex;flex-wrap:wrap;gap:.4rem .9rem;
  font-size:var(--t-label);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
.brief-card p{font-size:var(--t-sm);color:var(--ink-2);max-inline-size:44ch}
.briefs__note{margin-block-start:var(--s2);font-size:var(--t-sm);color:var(--muted);max-inline-size:62ch}


/* ==========================================================================
   14. THE REGISTER — numbered rows. Kept from the previous system because it
   is the clearest way to publish bands, coverage and limits, but the hairlines
   are now low-contrast so photography stays the loudest thing on the page.
   ========================================================================== */

.reg{border-block-start:1px solid var(--rule-firm)}
.reg__row{
  display:grid;gap:var(--s1);
  padding-block:var(--s3);
  border-block-end:1px solid var(--rule);
  align-items:start;
}
.reg__n{
  font-family:var(--ff-disp);font-size:clamp(1.6rem,3.4vw,2.6rem);
  color:var(--accent);line-height:1;
}
.reg__body p{color:var(--ink-2);max-inline-size:52ch}
.reg__body ul{margin-block-start:var(--s1);display:grid;gap:.4rem}
.reg__body li{
  position:relative;padding-inline-start:1.1rem;
  font-size:var(--t-sm);color:var(--ink-2);
}
.reg__body li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.62em;
  inline-size:6px;aspect-ratio:1;border-radius:50%;background:var(--accent);
}
.reg__pic{border-radius:var(--r);overflow:hidden}

@media (min-width:56rem){
  .reg__row{grid-template-columns:auto minmax(0,4fr) minmax(0,5fr) minmax(0,2.4fr);
    gap:var(--s3);align-items:start}
  .reg__n{grid-column:1}
}


/* ==========================================================================
   15. LEDGER — included / not included. Carried by a visible heading, never
   by colour or shape alone.
   ========================================================================== */

.ledger{display:grid;gap:var(--s5)}
.ledger h3{margin-block-end:var(--s1)}
.ledger li{
  position:relative;padding-inline-start:1.5rem;padding-block:.7rem;
  border-block-start:1px solid var(--rule);
  font-size:var(--t-sm);color:var(--ink-2);max-inline-size:48ch;
}
.ledger li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:1.15em;
  inline-size:9px;block-size:9px;border-radius:50%;
}
.ledger--yes li::before{background:var(--accent)}
.ledger--no li::before{border:1.5px solid var(--rule-firm)}
@media (min-width:52rem){.ledger{grid-template-columns:1fr 1fr;gap:var(--s5)}}


/* ==========================================================================
   16. LONG-FORM
   ========================================================================== */

.prose h2{margin-block-start:var(--s5);margin-block-end:var(--s2)}
.prose h2:first-child{margin-block-start:0}
.prose h3{margin-block-start:var(--s3);margin-block-end:var(--s1)}
.prose p{max-inline-size:68ch}
.prose p + p{margin-block-start:var(--s2)}
.prose ol,.prose ul{margin-block-start:var(--s2);display:grid;gap:var(--s2);counter-reset:pl}
.prose li{position:relative;padding-inline-start:2rem;max-inline-size:66ch;color:var(--ink-2)}
.prose ol > li{counter-increment:pl}
.prose ol > li::before{
  content:counter(pl,decimal-leading-zero);
  position:absolute;inset-inline-start:0;inset-block-start:.15em;
  font-size:var(--t-sm);font-weight:600;color:var(--accent);
}
.prose ul > li::before{
  content:"";position:absolute;inset-inline-start:.3rem;inset-block-start:.62em;
  inline-size:6px;aspect-ratio:1;border-radius:50%;background:var(--accent);
}
.prose li strong{color:var(--ink)}

.note{
  margin-block-start:var(--s3);padding-inline-start:var(--s2);
  border-inline-start:2px solid var(--accent);
}
.note p{max-inline-size:62ch;color:var(--ink-2)}
.note p + p{margin-block-start:var(--s1)}
.note strong{color:var(--ink)}

.table-scroll{margin-block-start:var(--s3);overflow-x:auto;overscroll-behavior-inline:contain}
.tbl{inline-size:100%;min-inline-size:34rem}
.tbl th,.tbl td{
  padding-block:var(--s2);padding-inline-end:var(--s2);
  border-block-end:1px solid var(--rule);vertical-align:top;text-align:start;
}
.tbl thead th{
  border-block-end:1px solid var(--rule-firm);
  font-size:var(--t-label);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.tbl tbody th{inline-size:30%;font-weight:600;color:var(--ink)}
.tbl td{color:var(--ink-2);font-size:var(--t-sm)}

.pills{display:flex;flex-wrap:wrap;gap:.6rem;margin-block-start:var(--s3)}
.pills li{
  border:1px solid var(--rule-firm);border-radius:999px;padding:.5rem 1rem;
  font-size:var(--t-label);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);
}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-block-start:var(--s5)}


/* ==========================================================================
   17. FORM
   ========================================================================== */

.form{display:grid;gap:var(--s2)}
.field-row{display:grid;gap:var(--s2)}
.f{display:grid;gap:.45rem}
.f label{font-size:var(--t-label);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.f input,.f select,.f textarea{
  inline-size:100%;min-block-size:54px;padding:.9rem 1.05rem;
  background:var(--ground-3);color:var(--ink);
  border:1px solid var(--rule-firm);border-radius:10px;
  font-size:var(--t-base);
  transition:border-color var(--d2) var(--e);
}
.f textarea{min-block-size:8.5rem;resize:vertical;line-height:1.55}
.f select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-size:6px 6px,6px 6px;
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-repeat:no-repeat;padding-inline-end:2.75rem}
.f input::placeholder,.f textarea::placeholder{color:var(--muted);opacity:1}
@media (hover:hover){.f input:hover,.f select:hover,.f textarea:hover{border-color:var(--ink-2)}}
.hint{font-size:var(--t-sm);color:var(--muted)}

/* the split phone control — one box, one seam */
.tel{
  display:grid;grid-template-columns:minmax(0,13ch) minmax(0,1fr);
  border:1px solid var(--rule-firm);border-radius:10px;overflow:hidden;
  transition:border-color var(--d2) var(--e);
}
.tel:focus-within{border-color:var(--ink-2)}
@media (hover:hover){.tel:hover{border-color:var(--ink-2)}}
.tel > select,.tel > input{border:0;border-radius:0;min-inline-size:0}
.tel > select{border-inline-end:1px solid var(--rule-firm);padding-inline:.9rem 1.6rem;
  background-position:calc(100% - 12px) 50%,calc(100% - 7px) 50%}
.tel > select:focus-visible,.tel > input:focus-visible{outline-offset:-3px}
/* Hook only — the country-code select is styled through .tel > select above.
   Kept so the markup has a name for it and the class audit stays clean. */
.tel__code{min-inline-size:0}
@media (min-width:26em){.tel{grid-template-columns:minmax(0,16ch) minmax(0,1fr)}}

.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-block-start:var(--s1)}
.form__foot .small{max-inline-size:36ch}
.form__status:empty{display:none}
.form__status{
  padding:var(--s1) var(--s2);border-inline-start:3px solid var(--rule-firm);
  font-size:var(--t-sm);color:var(--ink-2);border-radius:0 10px 10px 0;
  background:var(--ground-2);
}
.form__status b{display:block;color:var(--ink);font-weight:600}
.form__status[data-state="ok"]{border-inline-start-color:var(--accent)}
.form__status[data-state="err"]{border-inline-start-color:#A8451F}

@media (min-width:44em){.field-row{grid-template-columns:1fr 1fr;gap:var(--s2)}}
@media (min-width:60rem){
  .brief__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s5)}
}


/* ==========================================================================
   18. FAQ
   ========================================================================== */

.faq__list{border-block-start:1px solid var(--rule-firm)}
.faq-item{border-block-end:1px solid var(--rule)}
.faq-item summary{
  display:flex;align-items:flex-start;gap:var(--s2);
  padding-block:var(--s2);
  font-family:var(--ff-disp);font-size:var(--t-lg);font-weight:400;
  line-height:1.2;list-style:none;
  transition:color var(--d1) var(--e);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";flex:0 0 auto;inline-size:14px;block-size:14px;
  margin-block-start:.5em;margin-inline-start:auto;
  background:
    linear-gradient(currentColor,currentColor) 50% 50%/14px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) 50% 50%/1.5px 14px no-repeat;
  transition:rotate var(--d3) var(--e);
}
.faq-item[open] summary{color:var(--accent)}
.faq-item[open] summary::after{rotate:45deg}
@media (hover:hover){.faq-item summary:hover{color:var(--accent)}}
.faq-a{padding-block:0 var(--s3);padding-inline-end:var(--s3)}
.faq-a p{color:var(--ink-2);max-inline-size:64ch}
.faq-a p + p{margin-block-start:.8em}
@media (min-width:60rem){
  .faq__grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:var(--s5)}
}


/* ==========================================================================
   19. FOOTER
   ========================================================================== */

.foot{border-block-start:1px solid var(--rule);padding-block:var(--s5) var(--s3)}
.foot__grid{display:grid;gap:var(--s3);padding-block-end:var(--s5)}
.foot__mark{display:flex;align-items:center;gap:.55rem;margin-block-end:var(--s1)}
.foot__mark svg{inline-size:26px;block-size:26px}
.foot__mark span{font-size:var(--t-label);font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.foot h4{font-size:var(--t-label);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-block-end:var(--s1)}
.foot ul{display:grid;gap:.5rem}
.foot li a{font-size:var(--t-sm);text-decoration:none}
.foot p{font-size:var(--t-sm);color:var(--ink-2);max-inline-size:40ch}
.foot__base{border-block-start:1px solid var(--rule);padding-block-start:var(--s2);
  display:grid;gap:var(--s1)}
.foot__base p{font-size:var(--t-sm);color:var(--muted);max-inline-size:72ch}
@media (min-width:52rem){
  .foot__grid{grid-template-columns:2fr 1fr 1fr;gap:var(--s3)}
  .foot__base{grid-template-columns:1fr auto;align-items:baseline}
}


/* ==========================================================================
   20. MOTION — the complete list. Photographs scale a little on hover, the
   collage settles on load, pills change colour. Nothing fades up on scroll:
   that is the tell this redesign exists to avoid.
   ========================================================================== */

@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .rail .shot > img,.reg__pic img{transition:scale var(--d3) var(--e)}
  .rail a:hover .shot > img,.rail .shot:hover > img{scale:1.045}
}

@media (prefers-reduced-motion:no-preference){
  .collage .shot{animation:settle .8s var(--e) both}
  .collage .shot:nth-child(2){animation-delay:.09s}
  .collage .shot:nth-child(3){animation-delay:.18s}
  @keyframes settle{
    from{scale:.94;rotate:0deg}
    to{scale:1}
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  html{scroll-behavior:auto}
  .rail{scroll-snap-type:none}
}


/* ==========================================================================
   21. PRINT
   ========================================================================== */

@media print{
  .bar,.navstrip,.wordmark,.rail,.statement,.brief{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .shot{border:1px solid #999}
  .faq-a{display:block !important}
}


/* ==========================================================================
   22. (removed) COMPATIBILITY LAYER
   ==========================================================================
   This block mapped the old Plate System markup onto the current design so the
   interior pages could ship before they were rewritten. All six were migrated
   onto the components above on 2026-07-26 and the block was deleted — 9.6 KB of
   rules nothing referenced any more. If an old class name turns up in a page
   again, that page is the bug; do not bring these rules back.
   ========================================================================== */

/* ==========================================================================
   23. THE FULL-BLEED HERO
   ==========================================================================
   The opening is one photograph running the full width, with the type centred
   on top of it. That structure — a big image carrying the whole first screen,
   minimal chrome, one small pill — is the reference this site was briefed
   against. Structure and scale are not ownable; the photograph, the wordmark
   and every word are ours.

   Contrast: the type sits on .shot--scrim, which is a real gradient plus a
   floor, so the copy holds its ratio even over the palest part of the image.
   Nothing here relies on the photograph happening to be dark.
   ========================================================================== */

.stage{
  position:relative;
  inline-size:100vw;margin-inline:calc(50% - 50vw);
  min-block-size:clamp(26rem,72vh,42rem);
  display:grid;background:var(--deep);
  isolation:isolate;
}
.stage > .shot{
  position:absolute;inset:0;border-radius:0;block-size:100%;inline-size:100%;
}
.stage__in{
  position:relative;z-index:2;align-self:end;
  inline-size:100%;max-inline-size:var(--maxw);margin-inline:auto;
  padding:var(--edge);padding-block-end:clamp(2rem,5vh,4.5rem);
  text-align:center;
}
.stage h1{
  color:var(--on-shot);
  max-inline-size:16ch;margin-inline:auto;
  text-shadow:0 1px 26px rgba(10,12,13,.4);
}
.stage h1 em{color:#9FD6F2}          /* light Bodrum blue — 10.1 on the scrim floor */
.stage__lede{
  color:var(--on-shot);opacity:.94;
  margin:var(--s2) auto 0;max-inline-size:52ch;font-size:var(--t-md);line-height:1.55;
}
.stage__cta{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-block-start:var(--s3)}
.stage .label{color:var(--on-shot);opacity:.85}

/* the facts sit under the photograph, on the page ground, not over the image */
.stage-facts{display:grid;gap:var(--s2);padding-block:var(--s2);
  border-block-end:1px solid var(--rule)}
.stage-facts h4{font-size:var(--t-label);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-block-end:.4rem}
.stage-facts p{font-size:var(--t-sm);color:var(--ink-2);max-inline-size:36ch}
@media (min-width:52rem){.stage-facts{grid-template-columns:repeat(3,1fr);gap:var(--s3)}}

/* The stage carries more type, higher up the frame, than a card does — so it
   needs a deeper scrim than .shot--scrim provides. Measured against the
   brightest pixel in the current hero photograph, not eyeballed. */
.stage > .shot.shot--scrim::after{
  background:
    linear-gradient(to top,
      rgba(10,13,14,.88) 0%,
      rgba(10,13,14,.74) 28%,
      rgba(10,13,14,.52) 52%,
      rgba(10,13,14,.34) 78%,
      rgba(10,13,14,.28) 100%);
}
.stage .label{opacity:1;letter-spacing:.22em}

/* ==========================================================================
   24. MOTION, PROPERLY
   ==========================================================================
   The page was static. This adds movement where it means something and
   nowhere else — a slow drift on the hero photograph, one marquee, and a
   reveal on entry that uses CLIP and SCALE rather than an opacity fade-up.
   The fade-up is avoided on purpose: it is the single most recognisable
   AI-template motion, and this site was rejected once for looking templated.

   Everything degrades to a correct static page: every default state below is
   the finished state, and the reveals only apply where animation-timeline is
   supported. Nothing here needs JS.
   ========================================================================== */

/* 1. The hero photograph drifts. 28s, 6% of travel — slow enough that it
      reads as the room breathing rather than as a slideshow. */
@media (prefers-reduced-motion:no-preference){
  .stage > .shot > img{animation:drift 28s ease-in-out infinite alternate}
  @keyframes drift{
    from{scale:1.06;translate:-1% 0}
    to{scale:1.13;translate:1% -1.5%}
  }
}

/* 2. The coverage strip becomes a marquee. The place names are the residency
      claim, so making them move is the one decorative motion that also says
      something: the list is longer than the screen. */
.strip__names{
  flex-wrap:nowrap;justify-content:flex-start;
  inline-size:max-content;
  gap:var(--s3);
}
.strip{overflow:hidden;--marquee:52s}
.marquee{display:flex;inline-size:max-content;gap:var(--s3)}
@media (prefers-reduced-motion:no-preference){
  .marquee{animation:marquee var(--marquee) linear infinite}
  .strip:hover .marquee{animation-play-state:paused}
  @keyframes marquee{to{translate:-50% 0}}
}
@media (prefers-reduced-motion:reduce){
  .strip__names{flex-wrap:wrap;justify-content:center;inline-size:auto}
  .marquee > ul:nth-child(2){display:none}
}

/* 3. Entry reveals — clip and scale, never opacity alone. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rail .shot,.brief-card,.reg__row,.ledger > div,.shot--sq,.shot--wide{
      animation:rise linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 62%;
    }
    @keyframes rise{
      from{translate:0 26px;scale:.985}
      to{translate:0 0;scale:1}
    }

    /* the statement photograph pulls the other way as it passes — a real
       parallax, small enough that nobody notices it as an effect */
    .statement > .shot > img{
      animation:para linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    @keyframes para{from{translate:0 -5%;scale:1.12}to{translate:0 5%;scale:1.12}}

    /* section headings wipe in from the left instead of fading */
    .sec > .label,.rail__head .label{
      animation:wipe linear both;
      animation-timeline:view();
      animation-range:entry 10% entry 55%;
    }
    @keyframes wipe{
      from{clip-path:inset(0 100% 0 0)}
      to{clip-path:inset(0 0 0 0)}
    }
  }
}

/* 4. The pill grows a little on hover, and the arrow in it moves. */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .btn{transition:background-color var(--d2) var(--e),color var(--d2) var(--e),
                 border-color var(--d2) var(--e),scale var(--d2) var(--e)}
  .btn:hover{scale:1.03}
  .btn:active{scale:.99}
  .brief-card{transition:border-color var(--d2) var(--e),translate var(--d2) var(--e)}
  .brief-card:hover{border-color:var(--accent);translate:0 -3px}
}

@media (prefers-reduced-motion:reduce){
  .stage > .shot > img{animation:none;scale:1.08}
  .statement > .shot > img{scale:1.08}
}

/* Interior heroes: the old markup stacks eyebrow / title / disc / lede / CTA as
   loose siblings, which left the headline drifting and a large hole bottom-left.
   Two explicit columns put the words on the left and the drawing on the right,
   the way the home page reads. Delete this when these pages are rebuilt on
   .stage and .collage. */
.hero__grid{align-items:start}
.hero__eyebrow,.hero__title,.hero__lede,.hero__cta,.hero__facts{grid-column:1}
.hero .horizon{display:none}
.hero__title{max-inline-size:18ch}
@media (min-width:60rem){
  .hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:var(--s3)}
  .hero__plate{grid-column:2;grid-row:1 / span 4;align-self:center}
  .hero__plate2{grid-column:2;justify-self:end}
  .hero__facts{grid-column:1 / -1}
}