/* ==========================================================================
   DanMar Plantation — site stylesheet
   Single stylesheet shared by every page. Sections in order:
   tokens · base · buttons · header · hero · banner · components · page bits ·
   footer · responsive
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Palette — sampled from the lodge great room (HuntingLodgePhotos/P1328453,
   shipped as lodge-great-room-*.jpg). The twelve dominant colour clusters in
   that photograph are, in order of area:

     #311D14  #92765F  #494644  #482B1B  #47362E  #342F2D
     #614432  #7A5D48  #AA8E77  #605E5C  #754B32  #8C6449

   which is three families and nothing else: charcoal (the cabinetry and the
   painted walls), oak and leather (the trusses, the floor, the chairs), and
   linen (the upholstery and the plaster). The tokens below are those three
   families, darkened at the bottom end so type stays readable on them.

   No gold, no orange, no colour that isn't in that room.
   --------------------------------------------------------------------------- */
:root{
  --ink:        #14100C;   /* deepest brown-black, the shadow under the trusses */
  --ink-2:      #1C1712;
  --ink-3:      #262019;   /* the charcoal cabinetry */
  --ink-4:      #33291F;
  --bone:       #EDE6DA;   /* linen */
  --bone-2:     #C8BBA9;
  --muted:      #8E8272;
  /* Accent is oak and leather — #8C6449 and #92765F, lifted for contrast.
     Variable names stay as they were so nothing else has to move. */
  --brass:      #A88968;
  --brass-lit:  #C9AE8E;
  --line:       rgba(237,230,218,.13);
  --line-soft:  rgba(237,230,218,.07);

  --serif: "Hoefler Text","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:  ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --shell: min(1240px, 92vw);
  --r: 3px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone-2);
  font-family:var(--sans);
  font-size:clamp(15.5px,.35vw + 14.6px,17px);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{
  font-family:var(--serif); color:var(--bone); font-weight:400;
  letter-spacing:-.015em; line-height:1.1; margin:0; text-wrap:balance;
}
p{margin:0 0 1.1em; text-wrap:pretty}
p:last-child{margin-bottom:0}
::selection{background:var(--brass); color:var(--ink)}

.shell{width:var(--shell); margin-inline:auto}
.shell-narrow{width:min(820px,92vw); margin-inline:auto}
.section{padding:clamp(64px,8vw,124px) 0; position:relative}
.section-tight{padding:clamp(44px,5vw,72px) 0}
.bg-2{background:var(--ink-2)}
.bg-3{background:var(--ink-3)}

.eyebrow{
  font-family:var(--sans); font-size:.7rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--brass);
  margin:0 0 1.4rem; display:flex; align-items:center; gap:.75rem;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--brass); opacity:.7; flex:none}

h1{font-size:clamp(2.4rem,6vw,4.4rem)}
h2{font-size:clamp(1.9rem,4vw,3.2rem)}
h3{font-size:clamp(1.2rem,1.7vw,1.55rem)}
.lede{font-size:clamp(1.05rem,1.2vw,1.28rem); line-height:1.6; color:var(--bone-2); max-width:62ch}
.dim{color:var(--muted)}
.fine{font-size:.82rem; line-height:1.55; color:var(--muted)}
.measure{max-width:64ch}

/* buttons ---------------------------------------------------------------- */
/* Buttons are deliberately quiet. A filled button is a shout, and a page with
   six of them is a room where everyone is shouting — so the fill is a muted
   taupe rather than gold, the weight is lighter, and nothing jumps on hover.
   Use at most one .btn-primary per screenful. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95em 1.7em; border-radius:var(--r); border:1px solid transparent;
  font-family:var(--sans); font-size:.76rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  cursor:pointer; transition:.35s var(--ease); background:none; color:inherit; white-space:nowrap;
}
.btn-primary{background:var(--brass); color:#14100C; border-color:var(--brass)}
.btn-primary:hover{background:var(--brass-lit); border-color:var(--brass-lit)}
.btn-ghost{border-color:var(--line); color:var(--bone)}
.btn-ghost:hover{border-color:var(--brass); color:var(--brass-lit)}
.btn-light{border-color:rgba(255,248,235,.4); color:#F3ECE1}
.btn-light:hover{border-color:#F3ECE1; background:rgba(255,248,235,.08)}
/* pay.html is the first page with a button that can be off. Without this it
   still looks pressable while the card form is loading, or after it failed. */
.btn:disabled,.btn[disabled]{opacity:.4; cursor:not-allowed; pointer-events:none}

/* A text link that carries a call to action without becoming a box. This is
   the default on the homepage; .btn-primary is saved for the closing panel. */
.btn-quiet{
  display:inline-flex; align-items:center; gap:.7rem; padding:0;
  font-family:var(--sans); font-size:.76rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  color:var(--brass-lit); border-bottom:1px solid rgba(168,137,104,.4);
  padding-bottom:.5rem; transition:.35s var(--ease);
}
.btn-quiet:hover{color:var(--bone); border-bottom-color:var(--bone)}
.btn-quiet::after{content:"\2192"; font-size:1rem; transition:transform .35s var(--ease)}
.btn-quiet:hover::after{transform:translateX(4px)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--brass-lit); outline-offset:3px
}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--brass);color:#14100C;padding:.8rem 1.2rem}
.skip:focus{left:12px;top:12px}

/* ==========================================================================
   header
   ========================================================================== */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--brass);z-index:120;transition:width .1s linear}

header.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:clamp(13px,1.5vw,20px) 0; transition:.45s var(--ease);
  border-bottom:1px solid transparent;
}
header.nav.stuck{
  background:rgba(20,16,12,.92); backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  padding:10px 0; border-bottom-color:var(--line-soft);
}
/* interior pages sit on a photo banner too, so the bar starts transparent everywhere */
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:2rem}

.brand{display:flex; align-items:center; text-decoration:none; flex:none}
.brand img{
  height:clamp(30px,3.2vw,40px); width:auto;
  filter:invert(1); opacity:.95;   /* logo is black line art on transparent */
  transition:opacity .3s var(--ease);
}
.brand:hover img{opacity:1}

.menu{display:flex; align-items:center; gap:clamp(.9rem,1.9vw,2rem); list-style:none; margin:0; padding:0}
.menu a{
  text-decoration:none; font-size:.74rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--bone-2); position:relative; padding:.4rem 0;
  transition:color .3s var(--ease);
}
.menu a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--brass);transition:width .35s var(--ease)}
.menu a:hover{color:var(--bone)}
.menu a:hover::after{width:100%}
.menu a[aria-current="page"]{color:var(--brass-lit)}
.menu a[aria-current="page"]::after{width:100%}

.nav-cta{display:flex;align-items:center;gap:.9rem;flex:none}

.burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:none;border-radius:var(--r);cursor:pointer;position:relative}
.burger i{position:absolute;left:12px;right:12px;height:1.5px;background:var(--bone);transition:.35s var(--ease)}
.burger i:nth-child(1){top:16px}
.burger i:nth-child(2){top:22px}
.burger i:nth-child(3){top:28px}
body.menu-open .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){opacity:0}
body.menu-open .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.drawer{
  position:fixed; inset:0; z-index:99; background:var(--ink-2);
  display:flex; flex-direction:column; padding:6rem 6vw calc(3rem + env(safe-area-inset-bottom));
  opacity:0; visibility:hidden; transform:translateY(-12px); transition:.4s var(--ease);

  /* This used to be justify-content:center with no overflow. A centred flex
     column that is taller than its container spills off BOTH ends, and with
     nothing scrollable the top and bottom items simply cannot be reached —
     you get the middle of the menu and nothing else. It only showed up once
     the menu grew past a phone screen, which is to say the moment Book and
     its five items went in.

     Top-aligned and scrollable instead. On a phone the menu fills the screen
     anyway, so there is nothing left to centre. */
  justify-content:flex-start;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  /* Keep the scroll in the menu: without this, reaching either end hands the
     gesture to the page behind and the menu appears to stick. */
  overscroll-behavior:contain;
}
/* And stop the page behind scrolling while the menu is open, which is the
   other half of the same complaint. */
body.menu-open{overflow:hidden}
body.menu-open .drawer{opacity:1;visibility:visible;transform:none}
.drawer ul{list-style:none;margin:0 0 2.2rem;padding:0}
.drawer li{border-bottom:1px solid var(--line-soft)}
/* Scoped to nav: these are the big serif MENU links. Unscoped, this rule also
   caught the Call and Email buttons in .drawer-cta — .drawer a (0,1,1) outranks
   .btn (0,1,0) — and rendered them as 1.65rem serif capitals that overflowed
   their own borders. Nobody had reported it because, until the menu was made
   scrollable, nobody could get to the bottom of the drawer to see it. */
.drawer nav a{display:block;padding:.95rem 0;text-decoration:none;font-family:var(--serif);font-size:1.65rem;color:var(--bone)}
.drawer nav a[aria-current="page"]{color:var(--brass-lit)}
.drawer-cta{display:flex;gap:.7rem;flex-wrap:wrap}

/* ==========================================================================
   hero (home) + banner (interior pages)
   ========================================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding:clamp(104px,13vh,160px) 0 clamp(40px,6vh,74px); overflow:hidden; isolation:isolate;
}
.hero-media,.banner-media{position:absolute; inset:0; z-index:-2}
.hero-media img,.banner-media img{width:100%; height:100%; object-fit:cover}
.hero-media::after,.banner-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top,rgba(12,9,6,.92) 0%,rgba(12,9,6,.62) 26%,rgba(12,9,6,.2) 52%,rgba(12,9,6,.42) 100%),
    linear-gradient(to right,rgba(12,9,6,.72) 0%,rgba(12,9,6,.28) 45%,rgba(12,9,6,.05) 75%);
}
/* ---------------------------------------------------------------------------
   Homepage opening: the photograph, then the words.

   The old hero laid a headline and three buttons over the picture. Type on top
   of a photograph means neither reads properly — you darken the image until the
   text is legible, and then the image is mud. So the picture now gets the whole
   frame with nothing on it but the header, and the words sit underneath in the
   dark where they are quiet and easy.
   --------------------------------------------------------------------------- */
.hero-plain{position:relative; overflow:hidden; background:var(--ink); display:flex}
.hero-plain img{
  display:block; width:100%; height:clamp(460px, 82svh, 900px); object-fit:cover;
  /* A wide band cut out of a taller photograph rarely wants its middle. Each
     page sets object-position inline to put the subject where it belongs —
     the room rather than the roof, the dog rather than the sky. */
  object-position:center var(--hero-pos, 50%);
}
/* Two soft gradients, not one flat scrim: a little at the top so the header
   stays legible, and a deeper one at the bottom that the words sit in. The
   middle two thirds of the photograph are left completely alone. */
.hero-plain::before,
.hero-plain::after{content:""; position:absolute; left:0; right:0; pointer-events:none}
.hero-plain::before{top:0; height:180px; background:linear-gradient(to bottom, rgba(12,9,6,.66), rgba(12,9,6,0))}
.hero-plain::after{bottom:0; height:54%; background:linear-gradient(to top, rgba(12,9,6,.86) 0%, rgba(12,9,6,.5) 38%, rgba(12,9,6,0) 100%)}

/* The words, low and left inside the page gutter — where a caption belongs on
   a photograph, rather than stamped across the middle of it.
   The block is anchored to the bottom, so it grows upward: keep it short, or on
   a laptop-height window it climbs into the header and collides with the logo. */
.hero-words{
  position:absolute; left:0; right:0; bottom:clamp(1.8rem,4vw,3.6rem); z-index:2;
}
.hero-words .shell{display:flex; flex-direction:column; align-items:flex-start}
.hero-words .eyebrow{
  color:#E4D8C4; margin-bottom:.9rem; font-size:.66rem;
  text-shadow:0 1px 12px rgba(12,9,6,.9), 0 0 26px rgba(12,9,6,.7);
}
.hero-words .eyebrow::before{background:#E4D8C4}
.hero-words h1{
  color:#F3ECE1; max-width:15ch; font-size:clamp(1.9rem,3.7vw,3.2rem);
  text-shadow:0 2px 30px rgba(12,9,6,.6);
}
.hero-words .lede{
  margin-top:.9rem; max-width:46ch; color:#DCD2C3;
  font-size:clamp(.96rem,1vw,1.08rem); text-shadow:0 1px 18px rgba(12,9,6,.65);
}
.hero-words .btn-quiet{margin-top:clamp(1.2rem,2.2vw,1.8rem)}

/* Short windows: drop the supporting line, keep the headline. */
@media (max-height:820px){
  .hero-words .lede{display:none}
  .hero-words h1{font-size:clamp(1.8rem,3.2vw,2.6rem)}
}
@media (max-width:720px){
  .hero-words{bottom:1.4rem}
  .hero-words h1{max-width:13ch}
  .hero-words .lede{display:none}   /* the photograph and the headline are enough on a phone */
}

/* ---------------------------------------------------------------------------
   Design picker, in the menu bar.

   The alternative designs all live inside the one page — index.html holds six
   homepages, the-place.html holds four — and this swaps between them without
   going anywhere. One URL, no page load, no separate addresses to keep track
   of. Only the hidden variants' images are never fetched, because they are
   loading="lazy" inside a display:none subtree.

   Delete the picker and every .vary block except one to ship a single design.
   --------------------------------------------------------------------------- */
/* Only one design is on screen at a time. */
.vary[hidden]{display:none}

/* Menu items that open a submenu — Home and The Place, each listing the
   alternative designs for that page. Choosing one swaps it in place; the URL
   never changes. Opens on hover and on keyboard focus. */
.menu .has-sub{position:relative}
.caret{
  display:inline-block; width:0; height:0; margin-left:.45rem; vertical-align:middle;
  border-left:3.5px solid transparent; border-right:3.5px solid transparent;
  border-top:4px solid currentColor; opacity:.75;
}
.submenu{
  position:absolute; top:calc(100% + .5rem); left:-.9rem; z-index:110;
  min-width:19rem; margin:0; padding:.45rem; list-style:none;
  background:rgba(20,16,12,.97); backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 18px 46px rgba(8,6,4,.55);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
/* a hover bridge, so the pointer can cross the gap without the menu closing */
.menu .has-sub::after{content:""; position:absolute; left:0; right:0; top:100%; height:.9rem}
.menu .has-sub:hover .submenu,
.menu .has-sub:focus-within .submenu{opacity:1; visibility:visible; transform:none}
.submenu li{margin:0}
.submenu a{
  display:block; padding:.6rem .8rem; border-radius:2px;
  font-size:.74rem; font-weight:500; letter-spacing:.04em; text-transform:none;
  color:var(--bone-2); white-space:nowrap;
}
.submenu a::after{display:none}          /* no underline animation in here */
.submenu a:hover{color:var(--bone); background:var(--ink-3)}
.submenu a[aria-current="true"]{color:var(--brass-lit)}
.submenu a[aria-current="true"]::before{content:"— "; opacity:.7}

/* Eight top-level items plus the phone and the button is a lot of bar. Hand
   over to the burger a little earlier than the old seven-item menu needed. */
@media (max-width:1320px){
  .menu{display:none}
  .burger{display:block}
}

/* In the drawer the designs are an indented list under their parent. */
.drawer-sub > ul{list-style:none; margin:.2rem 0 .6rem; padding:0 0 0 1.1rem; border-left:1px solid var(--line-soft)}
.drawer-sub a{font-size:.86rem !important; letter-spacing:.02em !important; text-transform:none !important; color:var(--muted) !important}
.drawer-sub a:hover{color:var(--bone) !important}
.drawer-sub a[aria-current="true"]{color:var(--brass-lit) !important}

.opening{padding:clamp(56px,8vw,104px) 0 clamp(48px,6vw,80px); text-align:center}
.opening h1{
  font-size:clamp(2rem,4.6vw,3.6rem); max-width:20ch; margin-inline:auto;
  color:var(--bone); line-height:1.12;
}
.opening .lede{
  margin:clamp(1.4rem,2.4vw,2rem) auto 0; max-width:54ch; color:var(--bone-2);
  font-size:clamp(1rem,1.15vw,1.18rem);
}
/* The link and the season badge each get their own line — side by side they
   read as a pair of controls, which is the busyness this page is avoiding. */
.opening-link{margin:clamp(2rem,3.4vw,2.8rem) 0 0}
.opening .season-pill{margin:clamp(1.6rem,2.6vw,2.2rem) auto 0}

.hero-in{position:relative; width:var(--shell); margin-inline:auto}
.hero h1{color:#F3ECE1; max-width:15ch; text-shadow:0 3px 40px rgba(20,12,4,.5)}
.hero .lede{margin-top:1.5rem; color:#DCD2C3}
.hero-eyebrow{color:#C9AE8E}
.hero-eyebrow::before{background:#C9AE8E}
.hero-cta{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.2rem; align-items:center}

.season-pill{
  display:inline-flex; align-items:center; gap:.6rem; margin-top:2.2rem;
  padding:.55rem 1rem; border:1px solid rgba(255,240,215,.28); border-radius:99px;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#DCD2C3;
  background:rgba(20,14,6,.36); backdrop-filter:blur(6px);
}
.season-pill .dot{width:7px;height:7px;border-radius:50%;background:#7E8C6B;box-shadow:0 0 0 4px rgba(140,155,122,.18);flex:none}
.season-pill.off .dot{background:var(--brass)}

/* interior page header */
.banner{
  position:relative; display:flex; align-items:flex-end; isolation:isolate;
  min-height:clamp(360px,54vh,560px);
  padding:clamp(120px,16vh,180px) 0 clamp(36px,5vw,64px); overflow:hidden;
}
.banner-in{position:relative; width:var(--shell); margin-inline:auto}
.banner h1{color:#F3ECE1; max-width:18ch}
.banner .lede{margin-top:1.2rem; color:#DCD2C3; max-width:56ch}
.crumb{
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:#C9AE8E; margin:0 0 1.1rem; display:flex; gap:.55rem; align-items:center;
}
.crumb a{text-decoration:none; opacity:.85}
.crumb a:hover{opacity:1; text-decoration:underline; text-underline-offset:3px}

/* ==========================================================================
   components
   ========================================================================== */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,5rem); align-items:start}
.split-media{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4rem); align-items:center}
.split-media.flip > .media{order:2}

.media{position:relative; border-radius:var(--r); overflow:hidden; background:var(--ink-3)}
.media img{width:100%; height:100%; object-fit:cover; display:block}
.media.tall{aspect-ratio:4/5}
.media.wide{aspect-ratio:3/2}
.media.square{aspect-ratio:1}
.media figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:2rem 1.2rem .9rem;
  background:linear-gradient(transparent,rgba(10,9,6,.88));
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:#DCD2C3;
}

/* video — click to play. preload="none" means nothing downloads until then,
   so a 17 MB flyover costs a visitor who never presses play exactly nothing. */
.video-frame{
  position:relative; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line-soft); background:#000; line-height:0;
}
.video-frame video{width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover}
.video-cap{
  margin-top:.9rem; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); line-height:1.5;
}

/* ticker */
.ticker{background:var(--ink-2); border-block:1px solid var(--line-soft); overflow:hidden; padding:1rem 0; position:relative}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:12%;z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--ink-2),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--ink-2),transparent)}
.ticker-track{display:flex; width:max-content; animation:slide 44s linear infinite}
.ticker-track > span{
  padding:0 2.2rem; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap; display:flex; align-items:center; gap:2.2rem;
}
.ticker-track > span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--brass);opacity:.8}
@keyframes slide{to{transform:translateX(-50%)}}

/* stat row */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft)}
.stat{background:var(--ink); padding:clamp(1.4rem,2.5vw,2rem) clamp(1rem,2vw,1.6rem)}
.bg-2 .stat{background:var(--ink-2)}
.stat b{display:block; font-family:var(--serif); font-size:clamp(1.8rem,3.4vw,2.7rem); color:var(--brass-lit); line-height:1; font-variant-numeric:tabular-nums}
.stat span{display:block; margin-top:.7rem; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}

/* pathway cards (home) */
.paths{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.6vw,1.4rem)}
.path{
  display:flex; flex-direction:column; text-decoration:none; border:1px solid var(--line-soft);
  border-radius:var(--r); overflow:hidden; background:var(--ink-2); transition:.45s var(--ease);
}
.path:hover{transform:translateY(-4px); border-color:rgba(199,154,69,.4)}
.path .media{border-radius:0; aspect-ratio:3/2}
.path img{transition:transform 1s var(--ease)}
.path:hover img{transform:scale(1.05)}
.path-body{padding:clamp(1.4rem,2.2vw,1.9rem); display:flex; flex-direction:column; flex:1}
.path-body h3{margin-bottom:.6rem}
.path-body p{font-size:.9rem; color:var(--muted); margin:0 0 1.2rem}
.path-more{margin-top:auto; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); display:flex; align-items:center; gap:.5rem}
.path:hover .path-more{color:var(--brass-lit)}
.path-more::after{content:"→"; transition:transform .35s var(--ease)}
.path:hover .path-more::after{transform:translateX(4px)}

/* timeline */
.timeline{border-top:1px solid var(--line-soft)}
.step{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(1.2rem,3vw,2.6rem);
  padding:clamp(1.4rem,2.4vw,2rem) 0; border-bottom:1px solid var(--line-soft);
  align-items:baseline; transition:.4s var(--ease);
}
.step:hover{background:linear-gradient(90deg,rgba(199,154,69,.05),transparent)}
.step .num{font-family:var(--serif); font-size:.95rem; color:var(--brass); min-width:2.6rem; font-variant-numeric:tabular-nums; letter-spacing:.1em}
.step h3{margin-bottom:.5rem}
.step p{color:var(--muted); max-width:62ch; margin:0}

/* icon grid */
.incl{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--line-soft)}
.incl-item{background:var(--ink-2); padding:clamp(1.5rem,2.5vw,2.1rem)}
.bg-3 .incl-item{background:var(--ink-3)}
.incl-item svg{width:26px;height:26px;stroke:var(--brass);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:1.1rem}
.incl-item h4{font-family:var(--sans); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone); margin:0 0 .55rem}
.incl-item p{font-size:.88rem; color:var(--muted); margin:0}

/* rate cards */
.rate-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1rem,2vw,1.6rem)}
.card{
  background:var(--ink-2); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:clamp(1.7rem,3.2vw,2.8rem); position:relative; overflow:hidden;
  transition:.45s var(--ease); display:flex; flex-direction:column;
}
.card:hover{border-color:rgba(199,154,69,.4); transform:translateY(-4px); background:var(--ink-3)}
.card .tag{font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--brass); margin-bottom:1rem}
.price{display:flex; align-items:baseline; gap:.5rem; margin:.4rem 0 1.4rem}
.price b{font-family:var(--serif); font-size:clamp(2.5rem,4.6vw,3.7rem); color:var(--bone); line-height:1; font-weight:400}
.price small{font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.card ul{list-style:none; margin:0 0 1.8rem; padding:0; border-top:1px solid var(--line-soft)}
.card li{padding:.72rem 0 .72rem 1.6rem; border-bottom:1px solid var(--line-soft); font-size:.9rem; color:var(--bone-2); position:relative}
.card li::before{content:"";position:absolute;left:0;top:1.3em;width:7px;height:1px;background:var(--brass)}
.card li b{color:var(--bone); font-weight:600}
.card .btn{margin-top:auto; align-self:flex-start}
.card.feature{background:linear-gradient(165deg,var(--ink-3),var(--ink-2)); border-color:rgba(199,154,69,.26)}

.addons{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden}
.addon{background:var(--ink-2); padding:1.4rem 1.6rem; display:flex; justify-content:space-between; align-items:baseline; gap:1rem}
.addon div strong{display:block; color:var(--bone); font-size:.95rem; font-weight:600}
.addon div span{font-size:.8rem; color:var(--muted)}
.addon b{font-family:var(--serif); font-size:1.5rem; color:var(--brass-lit); font-weight:400; white-space:nowrap}

.terms{
  padding:clamp(1.3rem,2.2vw,1.9rem); border:1px dashed var(--line); border-radius:var(--r);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.6rem;
}
.terms h4{font-family:var(--sans); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); margin:0 0 .5rem}
.terms p{font-size:.87rem; color:var(--muted); margin:0}

/* estimator */
.estimator{border:1px solid var(--line-soft); border-radius:var(--r); background:var(--ink-2); overflow:hidden; display:grid; grid-template-columns:1.25fr .95fr}
.est-form{padding:clamp(1.7rem,3vw,2.6rem)}
.est-out{padding:clamp(1.7rem,3vw,2.6rem); background:linear-gradient(165deg,var(--ink-3),var(--ink-4)); border-left:1px solid var(--line-soft)}
.field{margin-bottom:1.4rem}
.field > label{display:block; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:.7rem}
.seg{display:flex; gap:.4rem; flex-wrap:wrap}
.seg input{position:absolute; opacity:0; pointer-events:none}
.seg label{
  flex:1 1 auto; text-align:center; padding:.72rem .9rem; border:1px solid var(--line);
  border-radius:var(--r); cursor:pointer; font-size:.82rem; color:var(--bone-2);
  transition:.3s var(--ease); min-width:60px; user-select:none;
}
.seg label:hover{border-color:var(--brass); color:var(--bone)}
.seg input:checked + label{background:var(--brass); border-color:var(--brass); color:#14100C; font-weight:650}
.seg input:focus-visible + label{outline:2px solid var(--brass-lit); outline-offset:2px}
.check{display:flex; align-items:center; gap:.7rem; padding:.5rem 0; font-size:.9rem; color:var(--bone-2); cursor:pointer}
.check input{width:17px;height:17px;accent-color:var(--brass);flex:none;cursor:pointer}

.est-line{display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0; font-size:.9rem; border-bottom:1px solid var(--line-soft)}
.est-line span{color:var(--muted)}
.est-line b{color:var(--bone); font-weight:600; font-variant-numeric:tabular-nums}
.est-total{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-top:1.3rem; padding-top:1.1rem; border-top:1px solid var(--line)}
.est-total span{font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.est-total b{font-family:var(--serif); font-size:clamp(2rem,3.8vw,2.9rem); color:var(--brass-lit); font-weight:400; font-variant-numeric:tabular-nums; line-height:1}

/* offer bands */
.band{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; margin-bottom:1.2rem; background:var(--ink)}
.bg-2 .band{background:var(--ink-2)}
.band:nth-of-type(even) .band-art{order:2}
.band-body{padding:clamp(1.8rem,3.6vw,3.2rem); display:flex; flex-direction:column; justify-content:center}
.band-art{position:relative; min-height:300px; overflow:hidden; background:var(--ink-3)}
.band-art img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.band-body h3{font-size:clamp(1.45rem,2.5vw,2rem); margin-bottom:1rem}
.band-meta{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem}
.chip{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-2); border:1px solid var(--line); border-radius:99px; padding:.4rem .85rem}
.chip.hot{border-color:rgba(199,154,69,.5); color:var(--brass-lit)}

/* gallery */
.gallery{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(.5rem,1vw,.9rem)}
.gallery figure{margin:0; grid-column:span 2; position:relative; overflow:hidden; border-radius:var(--r); background:var(--ink-3)}
/* 4+2 across the top, then 3+3, then threes. A gallery tiles flush when it
   holds 4, 7, 10 or 13 photos — pick one of those and no row ends short. */
.gallery figure:nth-child(1){grid-column:span 4}
.gallery figure:nth-child(3){grid-column:span 3}
.gallery figure:nth-child(4){grid-column:span 3}
.gallery button{
  display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in;
  position:relative; overflow:hidden;
}
.gallery img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform 1.1s var(--ease)}
.gallery figure:nth-child(1) img{aspect-ratio:16/9}
.gallery figure:nth-child(3) img,.gallery figure:nth-child(4) img{aspect-ratio:3/2}
.gallery button:hover img{transform:scale(1.05)}
.gallery figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:2rem 1.2rem .9rem; pointer-events:none;
  background:linear-gradient(transparent,rgba(10,9,6,.85));
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:#DCD2C3; text-align:left;
}

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:150; background:rgba(8,7,4,.95);
  display:none; align-items:center; justify-content:center; padding:4vh 4vw;
  backdrop-filter:blur(6px);
}
.lightbox[open],.lightbox.show{display:flex}
.lightbox img{max-width:100%; max-height:82vh; object-fit:contain; border-radius:var(--r)}
.lightbox figcaption{margin-top:1rem; text-align:center; font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-2)}
.lightbox figure{margin:0; display:flex; flex-direction:column; align-items:center}
.lb-close{
  position:absolute; top:2vh; right:3vw; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line); background:rgba(20,16,12,.7); color:var(--bone);
  font-size:1.4rem; line-height:1; cursor:pointer; transition:.3s var(--ease);
}
.lb-close:hover{border-color:var(--brass); color:var(--brass-lit)}

/* testimonials --------------------------------------------------------- */
.quotes{columns:2; column-gap:clamp(1rem,2vw,1.6rem)}
.quote{
  break-inside:avoid; margin:0 0 clamp(1rem,2vw,1.6rem);
  padding:clamp(1.6rem,2.8vw,2.4rem);
  border:1px solid var(--line-soft); border-radius:var(--r);
  background:var(--ink-2); transition:.45s var(--ease);
}
.bg-2 .quote{background:var(--ink)}
.quote:hover{border-color:rgba(199,154,69,.35); transform:translateY(-3px)}
.quote::before{
  content:"\201C"; display:block; font-family:Georgia,"Times New Roman",serif;
  font-size:3.4rem; line-height:.5; color:var(--brass); opacity:.5; margin-bottom:1rem;
}
.quote blockquote{
  margin:0; font-family:var(--serif); font-size:clamp(1.05rem,1.35vw,1.25rem);
  line-height:1.45; color:var(--bone);
}
.quote figcaption{
  margin-top:1.3rem; padding-top:1rem; border-top:1px solid var(--line-soft);
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brass);
}
.quote figcaption span{display:block; letter-spacing:.1em; color:var(--muted); margin-top:.35rem; text-transform:none; font-size:.8rem}

/* honest empty state — shown until real quotes are pasted in */
.empty{
  border:1px dashed var(--line); border-radius:var(--r);
  padding:clamp(2rem,5vw,3.6rem); text-align:center;
}
.empty h3{font-size:clamp(1.3rem,2.2vw,1.8rem); margin-bottom:1rem}
.empty p{color:var(--muted); max-width:52ch; margin-inline:auto}
.empty .hero-cta{justify-content:center; margin-top:1.8rem}

/* review platform links */
.review-links{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(1rem,1.6vw,1.4rem)}
.review-link{
  display:flex; align-items:center; gap:1rem; text-decoration:none;
  padding:1.3rem 1.5rem; border:1px solid var(--line-soft); border-radius:var(--r);
  background:var(--ink-2); transition:.35s var(--ease);
}
.bg-2 .review-link{background:var(--ink)}
.review-link:hover{border-color:rgba(199,154,69,.4); transform:translateY(-3px)}
.review-link svg{width:34px; height:34px; flex:none}
.review-link b{display:block; color:var(--bone); font-size:.95rem; font-weight:600}
.review-link span{font-size:.8rem; color:var(--muted)}

/* plan cards */
.plan-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px; background:var(--line-soft)}
.plan-card{background:var(--ink-2); padding:clamp(1.6rem,2.6vw,2.2rem)}
.plan-card h3{font-family:var(--sans); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); margin:0 0 1.1rem}
.plan-card ul{margin:0; padding-left:1.05rem; color:var(--muted); font-size:.9rem}
.plan-card li{margin-bottom:.55rem}
.plan-card li::marker{color:var(--brass)}
.plan-card a{color:var(--bone); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(199,154,69,.55)}
.plan-card a:hover{color:var(--brass-lit)}

.drive{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:1px; background:var(--line-soft)}
.drive div{background:var(--ink-2); padding:1.2rem}
.drive b{display:block; font-family:var(--serif); font-size:1.5rem; color:var(--bone)}
.drive span{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}

/* faq */
details{border-bottom:1px solid var(--line-soft)}
details summary{
  list-style:none; cursor:pointer; padding:1.3rem 3rem 1.3rem 0; position:relative;
  font-family:var(--serif); font-size:clamp(1.05rem,1.6vw,1.3rem); color:var(--bone);
  transition:color .3s var(--ease);
}
details summary::-webkit-details-marker{display:none}
details summary:hover{color:var(--brass-lit)}
details summary::after{
  content:""; position:absolute; right:.4rem; top:50%; width:11px; height:11px;
  border-right:1.5px solid var(--brass); border-bottom:1.5px solid var(--brass);
  transform:translateY(-70%) rotate(45deg); transition:.35s var(--ease);
}
details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
details .answer{padding:0 3rem 1.5rem 0; color:var(--muted); font-size:.94rem}
details[open] .answer{animation:fade .45s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* forms */
.book-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4.5rem)}
form .row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
input[type=text],input[type=tel],input[type=email],input[type=date],select,textarea{
  width:100%; padding:.9rem 1rem; background:var(--ink); border:1px solid var(--line);
  border-radius:var(--r); color:var(--bone); font-family:var(--sans); font-size:.95rem; transition:.3s var(--ease);
}
input::placeholder,textarea::placeholder{color:#6C6759}
input:focus,select:focus,textarea:focus{border-color:var(--brass); background:var(--ink-3)}
textarea{resize:vertical; min-height:96px}
select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--brass) 50%),linear-gradient(135deg,var(--brass) 50%,transparent 50%); background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat}

.contact-card{border:1px solid var(--line-soft); border-radius:var(--r); padding:clamp(1.5rem,2.6vw,2.1rem); background:var(--ink); margin-bottom:1rem}
.bg-2 .contact-card{background:var(--ink-2)}
.contact-card h4{font-family:var(--sans); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin:0 0 .9rem}
.contact-card a{display:block; font-family:var(--serif); font-size:1.35rem; color:var(--bone); text-decoration:none; margin-bottom:.35rem; font-variant-numeric:tabular-nums}
.contact-card a:hover{color:var(--brass-lit)}
.contact-card p{font-size:.88rem; color:var(--muted); margin:0}
.form-note{margin-top:1rem; font-size:.8rem; color:var(--muted)}
.sent{
  margin-top:1rem; padding:1rem 1.2rem; border:1px solid rgba(143,208,122,.35);
  background:rgba(143,208,122,.07); border-radius:var(--r); font-size:.88rem;
  color:#CBD8BC; display:none; white-space:pre-wrap;
}
.sent.show{display:block; animation:fade .4s var(--ease)}

/* closing call to action */
.cta{position:relative; isolation:isolate; padding:clamp(64px,9vw,120px) 0; text-align:center; overflow:hidden}
.cta .hero-media::after{background:linear-gradient(rgba(12,9,6,.82),rgba(12,9,6,.9))}
.cta h2{color:#F3ECE1; margin-inline:auto; max-width:18ch}
.cta p{margin:1.2rem auto 0; max-width:52ch; color:#CFC4B3}
.cta .hero-cta{justify-content:center}
.cta .eyebrow{justify-content:center; color:#C9AE8E}
.cta .eyebrow::before{background:#C9AE8E}
.cta .eyebrow::after{content:""; width:26px; height:1px; background:#C9AE8E; opacity:.7}

/* ==========================================================================
   footer
   ========================================================================== */
footer{background:var(--ink); padding:clamp(3.2rem,6vw,5rem) 0 2rem; border-top:1px solid var(--line-soft)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start}
.foot-grid h5{font-family:var(--sans); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin:0 0 1.1rem}
.foot-grid ul{list-style:none; margin:0; padding:0}
.foot-grid li{margin-bottom:.5rem}
.foot-grid a{text-decoration:none; font-size:.9rem; color:var(--muted); transition:color .3s var(--ease)}
.foot-grid a:hover{color:var(--brass-lit)}
.foot-brand img{height:44px; width:auto; filter:invert(1); opacity:.9; margin-bottom:1.2rem}
.foot-bottom{
  margin-top:clamp(2.2rem,4vw,3.4rem); padding-top:1.5rem; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.76rem; color:#6C6759;
}
/* Brand marks draw their own colour, so the anchor stays out of the way. */
.social{display:flex; gap:.85rem; margin-top:1.5rem}
.social a{
  width:54px; height:54px; border-radius:50%; display:block; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease);
}
.social a:hover{transform:translateY(-3px); filter:saturate(1.15) brightness(1.08)}
.social a:focus-visible{outline:2px solid var(--brass-lit); outline-offset:3px}
.social svg{width:100%; height:100%; display:block}
.social a.fb:hover{box-shadow:0 8px 22px rgba(24,119,242,.35)}
.social a.ig:hover{box-shadow:0 8px 22px rgba(214,0,150,.32)}

/* reveal */
.rv{opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.rv.in{opacity:1; transform:none}
.rv-d1{transition-delay:.08s} .rv-d2{transition-delay:.16s} .rv-d3{transition-delay:.24s}

/* utility spacing */
.mt-1{margin-top:clamp(1.4rem,2vw,2rem)}
.mt-2{margin-top:clamp(2.2rem,4vw,3.4rem)}
.mt-3{margin-top:clamp(3rem,5vw,4.5rem)}

/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width:1120px){
  .menu{display:none}
  .burger{display:block}
}
@media (max-width:1000px){
  .quotes{columns:1}
  .split,.split-media{grid-template-columns:1fr}
  .split-media.flip > .media{order:0}
  .stats{grid-template-columns:repeat(2,1fr)}
  .paths{grid-template-columns:1fr}
  .rate-grid{grid-template-columns:1fr}
  .estimator{grid-template-columns:1fr}
  .est-out{border-left:0; border-top:1px solid var(--line-soft)}
  .band{grid-template-columns:1fr}
  .band:nth-of-type(even) .band-art{order:0}
  .band-art{min-height:230px}
  .book-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery figure,.gallery figure:nth-child(1),.gallery figure:nth-child(4),.gallery figure:nth-child(5){grid-column:span 1}
  .gallery img,.gallery figure:nth-child(1) img,.gallery figure:nth-child(4) img,.gallery figure:nth-child(5) img{aspect-ratio:4/3}
}
@media (max-width:720px){
  /* The sticky bottom bar is gone, so the header keeps its Book button all
     the way down. It was only ever hidden here because the bar carried the
     same button and the two together put booking on screen twice. */
  form .row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .banner{min-height:340px}
}
@media (max-height:760px) and (min-width:721px){
  .hero{padding-top:88px}
  .hero h1{font-size:clamp(2.1rem,4.3vw,3.3rem)}
  .hero .lede{margin-top:1rem; font-size:1rem}
  .hero-cta{margin-top:1.5rem}
  .season-pill{margin-top:1.4rem}
  .hero .eyebrow{margin-bottom:1rem}
}

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

@media print{
  header.nav,.grain,.ticker,.progress,.lightbox{display:none}
  body{background:#fff;color:#000}
  h1,h2,h3,h4{color:#000}
  .hero,.banner{min-height:0;padding:1rem 0}
  .hero-media,.banner-media{display:none}
}

/* ==========================================================================
   pay.html — card payment
   Square renders the card fields inside its own iframe, so #card-container is
   styled from the outside only; the input styling itself is passed to
   payments.card({ style }) in assets/js/pay.js and has to match these tokens
   by hand. If the palette above changes, change it there too.
   ========================================================================== */
#card-container{min-height:90px}
#card-container .sq-card-wrapper{margin:0}

.pay-status{
  margin:0 0 1rem; padding:.85rem 1.05rem; border:1px solid rgba(168,137,104,.4);
  background:rgba(168,137,104,.08); border-radius:var(--r);
  font-size:.83rem; color:var(--bone-2);
}
.pay-error{
  margin:0 0 1rem; padding:.85rem 1.05rem; border:1px solid rgba(193,97,79,.45);
  background:rgba(193,97,79,.09); border-radius:var(--r);
  font-size:.85rem; color:#E9B5A8; display:none;
}
.pay-error.show{display:block; animation:fade .4s var(--ease)}

.pay-trust{
  display:flex; align-items:center; gap:.5rem;
  margin:1rem 0 0; font-size:.78rem; color:var(--muted);
}
.pay-trust svg{flex:none; color:var(--brass)}

.pay-receipt{
  max-width:56ch; margin-inline:auto; padding:clamp(1.7rem,3vw,2.6rem);
  border:1px solid rgba(143,208,122,.3); background:rgba(143,208,122,.05);
  border-radius:var(--r);
}
.pay-receipt h3{font-family:var(--serif); font-size:clamp(1.5rem,2.6vw,2rem); color:var(--bone); font-weight:400}

/* ---------- tower slot picker (book-tower.html) -------------------------
   A date with both halves open reads as one day with two choices, rather than
   two unrelated rows that happen to repeat the date. The picked half stays
   brass-filled like a checked .seg label, so the two controls on this page
   agree with each other.
   ---------------------------------------------------------------------- */
.seg-stack{display:flex; flex-direction:column; gap:1.1rem}

.slot-day{
  border:1px solid var(--line-soft); border-radius:var(--r);
  padding:.9rem .9rem 1rem;
}
.slot-date{
  margin:0 0 .7rem; font-family:var(--sans); font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--brass);
}
.slot-pick{
  display:grid; width:100%; text-align:left; cursor:pointer;
  grid-template-columns:1fr auto; gap:.15rem .9rem; align-items:baseline;
  padding:.8rem .9rem; margin-top:.5rem;
  border:1px solid var(--line); border-radius:var(--r);
  background:none; color:var(--bone-2); font:inherit;
  transition:.3s var(--ease);
}
.slot-pick:first-of-type{margin-top:0}
.slot-pick:hover:not(:disabled){border-color:var(--brass); color:var(--bone)}
.slot-pick:focus-visible{outline:2px solid var(--brass-lit); outline-offset:2px}
.slot-pick:disabled{opacity:.5; cursor:default}
.slot-pick.is-on{background:var(--brass); border-color:var(--brass); color:#14100C}
.slot-pick.is-on .slot-time,
.slot-pick.is-on .slot-dep{color:#14100C; opacity:.75}

.slot-half{font-size:.95rem; font-weight:650}
.slot-price{font-size:.95rem; font-weight:650; text-align:right}
.slot-time{font-size:.8rem; color:var(--bone-3, var(--bone-2)); opacity:.8}
.slot-dep{font-size:.8rem; text-align:right; color:var(--bone-3, var(--bone-2)); opacity:.8}

@media (max-width:460px){
  .slot-pick{grid-template-columns:1fr; gap:.1rem}
  .slot-price,.slot-dep{text-align:left}
}

/* A text button that reads as a link — used for destructive-ish admin actions
   where a full .btn would shout. */
.link-btn{
  background:none; border:0; padding:0; font:inherit; cursor:pointer;
  color:var(--brass-lit); text-decoration:underline; text-underline-offset:3px;
}
.link-btn:hover{color:var(--bone)}
.link-btn:disabled{opacity:.6; cursor:default}

/* ---------- the Book button, which is also a menu -----------------------
   Reuses the .submenu look so the two dropdowns in the bar are plainly the
   same control. The trigger stays a real link to book.html, so clicking
   straight through still works and a keyboard or touch user who never
   hovers is not stranded.
   ---------------------------------------------------------------------- */
.book-menu{position:relative; display:inline-flex}
.book-menu > .btn{display:inline-flex; align-items:center; gap:.45rem}
.book-menu > .btn .caret{
  width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:4px solid currentColor; opacity:.75;
}
/* hover bridge, same trick as .has-sub */
.book-menu::after{content:""; position:absolute; left:0; right:0; top:100%; height:.7rem}
.book-drop{
  position:absolute; top:calc(100% + .5rem); right:0; z-index:120;
  min-width:15rem; margin:0; padding:.45rem; list-style:none;
  background:rgba(20,16,12,.97); backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 18px 46px rgba(8,6,4,.55);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.book-menu:hover .book-drop,
.book-menu:focus-within .book-drop{opacity:1; visibility:visible; transform:none}
.book-drop li{margin:0}
.book-drop a{
  display:block; padding:.6rem .8rem; border-radius:2px;
  font-family:var(--sans); font-size:.74rem; font-weight:500; letter-spacing:.04em;
  color:var(--bone-2); white-space:nowrap; text-decoration:none;
}
.book-drop a:hover{color:var(--bone); background:var(--ink-3)}

/* Below the desktop breakpoint the whole menu is in the drawer, and the
   dropdown would have nothing to attach to. The button goes back to being a
   plain button. */
@media (max-width:1320px){
  .book-drop{display:none}
  .book-menu > .btn .caret{display:none}
}

/* ---------- month calendar (tower admin + tower booking) ----------------
   Shared by admin-tower.html and book-tower.html so the staff calendar and
   the customer calendar are recognisably the same control. Colour carries
   meaning here, so each state also carries a word in its aria-label — a day
   that is merely a different shade of brass is no use to a screen reader.
   ---------------------------------------------------------------------- */
.cal{
  border:1px solid var(--line-soft); border-radius:var(--r);
  padding:.9rem; background:rgba(255,255,255,.012);
}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:.9rem}
.cal-title{
  font-family:var(--sans); font-size:.78rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brass);
}
.cal-nav{
  width:34px; height:34px; border:1px solid var(--line); border-radius:var(--r);
  background:none; color:var(--bone-2); font-size:1.2rem; line-height:1; cursor:pointer;
  transition:.25s var(--ease);
}
.cal-nav:hover{border-color:var(--brass); color:var(--bone)}
.cal-nav:focus-visible{outline:2px solid var(--brass-lit); outline-offset:2px}

.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:.3rem}
.cal-dow{margin-bottom:.3rem}
.cal-dow-cell{
  text-align:center; font-family:var(--sans); font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--bone-2); opacity:.6;
  padding:.3rem 0;
}
.cal-dow-cell abbr{text-decoration:none; border:0}
.cal-cell{min-height:0}
.cal-blank{visibility:hidden}

.cal-day{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.1rem; width:100%; min-height:44px; padding:.35rem .2rem;
  border:1px solid var(--line-soft); border-radius:var(--r);
  background:none; color:var(--bone-2); font:inherit; cursor:pointer;
  transition:.2s var(--ease);
}
.cal-day:hover:not(:disabled){border-color:var(--brass); color:var(--bone)}
.cal-day:focus-visible{outline:2px solid var(--brass-lit); outline-offset:2px}
.cal-day:disabled,.cal-day.is-locked{opacity:.28; cursor:default}
.cal-num{font-size:.9rem; font-weight:600; line-height:1}
.cal-note{font-size:.56rem; letter-spacing:.04em; opacity:.85; line-height:1}

.cal-day.is-today{border-color:var(--brass); border-style:dashed}
.cal-day.is-selected{background:var(--brass); border-color:var(--brass); color:#14100C}
.cal-day.is-selected .cal-note{opacity:.8}

/* on sale — brass outline; booked — solid green; partly booked — both */
.cal-day.has-open{border-color:var(--brass); color:var(--bone)}
.cal-day.has-partial{border-color:var(--brass); background:rgba(199,154,69,.14); color:var(--bone)}
.cal-day.has-booked{
  border-color:rgba(143,208,122,.5); background:rgba(143,208,122,.12); color:var(--bone);
}
.cal-day.is-selected.has-open,
.cal-day.is-selected.has-partial,
.cal-day.is-selected.has-booked{background:var(--brass); color:#14100C}

.cal-key{
  display:flex; flex-wrap:wrap; gap:.9rem; margin-top:.9rem;
  font-family:var(--sans); font-size:.66rem; letter-spacing:.06em; color:var(--bone-2);
}
.cal-key span{display:inline-flex; align-items:center; gap:.4rem}
.cal-key i{width:11px; height:11px; border-radius:2px; border:1px solid var(--line); display:inline-block}
.cal-key i.k-open{border-color:var(--brass)}
.cal-key i.k-partial{border-color:var(--brass); background:rgba(199,154,69,.35)}
.cal-key i.k-booked{border-color:rgba(143,208,122,.6); background:rgba(143,208,122,.3)}

@media (max-width:420px){
  .cal-day{min-height:38px}
  .cal-note{display:none}
}

/* ---------- the day panel under the admin calendar ---------------------- */
.day-panel{
  margin-top:1.6rem; padding:clamp(1.2rem,2.5vw,1.8rem);
  border:1px solid var(--line); border-radius:var(--r);
  background:rgba(255,255,255,.015);
}
.day-panel-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; margin-bottom:1.2rem;
}
.day-panel-head h2{
  font-family:var(--serif); font-weight:400; font-size:clamp(1.2rem,2.4vw,1.6rem);
  color:var(--bone); margin:0;
}
.half-rows{display:flex; flex-direction:column; gap:.7rem}
.half-row{
  display:grid; grid-template-columns:minmax(9rem,1fr) 2fr auto;
  gap:1rem; align-items:center;
  padding:.9rem 1rem; border:1px solid var(--line-soft); border-radius:var(--r);
}
.half-when{display:flex; flex-direction:column; gap:.15rem}
.half-when b{font-size:.95rem; color:var(--bone)}
.half-body{display:flex; flex-direction:column; gap:.2rem}
.half-state{font-size:.9rem; color:var(--bone-2)}
.half-state.is-sold{color:var(--bone)}
.half-sub{font-size:.75rem; color:var(--bone-2); opacity:.75}
.half-act{display:flex; flex-direction:column; gap:.5rem; align-items:flex-end}
.half-btn{padding:.5rem .9rem; font-size:.75rem; white-space:nowrap}

@media (max-width:760px){
  .half-row{grid-template-columns:1fr; gap:.6rem}
  .half-act{align-items:flex-start}
}

/* ---------- half-days inside a calendar cell ----------------------------
   A day that sells in pieces draws a button per piece, so a morning is one
   click from the month view. The cell is a div, not a button: the pieces are
   the buttons, and nesting one inside another is not markup any browser
   agrees on.
   ---------------------------------------------------------------------- */
.cal-day.has-parts{
  cursor:default; gap:.3rem; padding:.35rem .25rem .3rem;
  min-height:72px; justify-content:flex-start;
}
.cal-day.has-parts:hover{border-color:var(--line-soft); color:var(--bone-2)}

.cal-parts{display:flex; flex-direction:column; gap:.18rem; width:100%}
.cal-part{
  display:flex; align-items:baseline; justify-content:center; gap:.25rem;
  width:100%; padding:.16rem .2rem;
  border:1px solid var(--line); border-radius:2px;
  background:none; color:var(--bone-2); font:inherit; cursor:pointer;
  transition:.18s var(--ease);
}
.cal-part:hover:not(:disabled){background:var(--brass); border-color:var(--brass); color:#14100C}
.cal-part:focus-visible{outline:2px solid var(--brass-lit); outline-offset:1px}
.cal-part:disabled{opacity:.35; cursor:default; text-decoration:line-through}
.cal-part.is-on{background:var(--brass); border-color:var(--brass); color:#14100C}

.cal-part-label{font-size:.6rem; font-weight:700; letter-spacing:.06em}
.cal-part-note{font-size:.55rem; opacity:.85}

/* The number is a label here rather than the target, so it steps back. */
.cal-day.has-parts .cal-num{font-size:.78rem; opacity:.8; line-height:1.1}

@media (max-width:560px){
  .cal-day.has-parts{min-height:64px}
  .cal-part-note{display:none}       /* price moves to the aria-label alone */
  .cal-part{padding:.22rem .2rem}
}

/* A half that is not on sale at all still holds its row, so the morning is
   always the top line of a cell and the afternoon always the bottom. Same box,
   no border, nothing to click. */
.cal-part.is-empty{
  border-color:transparent; background:none; pointer-events:none;
  visibility:hidden;
}

/* ---------- calendar legibility ----------------------------------------
   On the booking calendar most days have nothing for sale, so most cells are
   unavailable. At the original .28 the month turned into a grey wash and the
   dates themselves were hard to read — the point of a calendar is that you
   can find the 14th. Unavailable is now dimmed enough to read as unavailable
   but not so far that the number disappears; genuinely past days stay fainter
   still, because those are gone rather than merely unsold.
   ---------------------------------------------------------------------- */
.cal-day:disabled,
.cal-day.is-locked{opacity:.62; cursor:default}
.cal-day.is-past{opacity:.3}

/* The number carries the meaning in a cell that has half-day buttons under
   it, so it should not be the faintest thing in the box. */
.cal-day .cal-num{color:var(--bone); opacity:1}
.cal-day.has-parts .cal-num{font-size:.8rem; color:var(--bone); opacity:1}
.cal-day.is-locked .cal-num{color:var(--bone-2)}

/* Half-day state inside an admin cell. Colour says what happened; the
   aria-label says it in words, including who booked it. */
.cal-part.part-booked{
  border-color:rgba(143,208,122,.45); background:rgba(143,208,122,.14); color:var(--bone);
}
.cal-part.part-booked:hover:not(:disabled){background:rgba(143,208,122,.26); border-color:rgba(143,208,122,.7); color:var(--bone)}
.cal-part.part-none{border-style:dashed; opacity:.55}
.cal-part.part-none .cal-part-note{opacity:.6}

/* ---------- picking several days at once (admin) ------------------------ */
.cal-day.is-marked{
  border-color:var(--brass-lit); box-shadow:inset 0 0 0 1px var(--brass-lit);
}
.cal-day.is-marked .cal-num{color:var(--brass-lit)}
.cal-day.is-marked::after{
  content:"✓"; position:absolute; top:2px; right:4px;
  font-size:.6rem; color:var(--brass-lit); line-height:1;
}
.cal-day{position:relative}

.bulk-bar{
  margin-top:1rem; padding:1rem;
  border:1px solid var(--brass); border-radius:var(--r);
  background:rgba(199,154,69,.06);
}
.bulk-count{
  margin:0 0 .9rem; font-family:var(--sans); font-size:.74rem;
  letter-spacing:.06em; color:var(--bone);
}
.bulk-acts{display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; margin-top:.4rem}
.bulk-acts .btn{padding:.6rem 1.1rem; font-size:.78rem}
.bulk-acts .btn:disabled{opacity:.45; cursor:default}

/* The staff link in the home-page footer. Quiet by default — the same colour
   as the small print around it — and only picks up the brass on hover, so it
   reads as a utility rather than an invitation. */
.foot-staff{
  color:inherit; opacity:.45; text-decoration:none;
  transition:.25s var(--ease);
}
.foot-staff:hover,
.foot-staff:focus-visible{opacity:1; color:var(--brass-lit)}

/* ---------- the tower booking form -------------------------------------
   One column, not two. The summary used to sit in a panel off to the right,
   which meant the figure you were agreeing to was the furthest thing on the
   page from the button you agreed with — and it cost the calendar half its
   width. The calendar is the hard thing to read, so it gets the room.
   ---------------------------------------------------------------------- */
.estimator-wide{grid-template-columns:1fr}
.estimator-wide .est-form{padding:clamp(1.7rem,3vw,2.6rem)}

/* What is about to be charged, sitting directly above the card box. */
.pay-box{
  margin-bottom:1rem; padding:1rem 1.1rem;
  border:1px solid var(--line-soft); border-radius:var(--r);
  background:rgba(255,255,255,.015);
}
.pay-box .est-total{margin-top:.5rem}

/* One row per peg. Two up on a wide screen, stacked on a phone. */
.shooter-names{display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:.7rem}
.shooter-name{display:flex; align-items:center; gap:.6rem}
.shooter-name span{
  flex:none; width:1.6rem; text-align:right;
  font-family:var(--sans); font-size:.7rem; color:var(--brass); opacity:.85;
}
.shooter-name input{flex:1 1 auto; margin:0}


/* ---------- the rotating hero (home page only) -------------------------
   Scoped to .hero-rotate so every other page's hero is untouched: they are
   single photographs and have no business carrying a stacking context.

   The first photograph stays in normal flow and sets the height of the
   section, so with JavaScript off — or before it runs — the hero is exactly
   what it was. The rest are layers over the top, faded in one at a time.
   ---------------------------------------------------------------------- */
.hero-rotate{position:relative}
.hero-rotate .hero-layer{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center var(--hero-pos, 50%);
  /* Well under the three seconds site.js waits between photographs, so each
     one is actually still for most of its turn rather than always fading. */
  opacity:0; transition:opacity .7s var(--ease);
  pointer-events:none;
}
.hero-rotate .hero-layer.is-on{opacity:1}

/* The gradients that make the words legible are drawn by .hero-plain::before
   and ::after. They have to sit above the photographs, not under them. */
.hero-rotate::before,
.hero-rotate::after{z-index:1}

/* z-index ONLY. This rule must not set `position`.
   .hero-words is already position:absolute — that is what lifts the words out
   of flow and lays them over the bottom-left of the photograph. Because this
   selector is two classes to that rule's one, anything it declares wins: a
   `position:relative` here dropped the words back INTO the flex row, so the
   photograph shrank to its natural width and the headline was laid out beside
   it, running off the top of the section. z-index needs no position of its own
   — an absolutely positioned element is already a positioned element. */
.hero-rotate .hero-words{z-index:2}

@media (prefers-reduced-motion: reduce){
  /* No crossfade for anyone who has asked for less movement. site.js does not
     start the rotation at all in that case; this is belt and braces. */
  .hero-rotate .hero-layer{transition:none}
}


/* ---------- hero controls ----------------------------------------------
   Bottom right, opposite the words, which sit bottom left. Quiet until
   hovered: this is a photograph, not a slideshow widget.
   ---------------------------------------------------------------------- */
.hero-nav{
  position:absolute; z-index:3;
  right:clamp(1rem,4vw,3rem); bottom:clamp(1.8rem,4vw,3.6rem);
  display:flex; align-items:center; gap:.7rem;
}
.hero-arrow{
  width:38px; height:38px; flex:none; display:grid; place-items:center;
  border:1px solid rgba(237,230,218,.28); border-radius:50%;
  background:rgba(12,9,6,.42); backdrop-filter:blur(6px);
  color:var(--bone); cursor:pointer; transition:.25s var(--ease);
}
.hero-arrow:hover{background:var(--brass); border-color:var(--brass); color:#14100C}
.hero-arrow:focus-visible{outline:2px solid var(--brass-lit); outline-offset:3px}

.hero-dots{display:flex; align-items:center; gap:.45rem}
.hero-dot{
  width:7px; height:7px; padding:0; flex:none;
  border:1px solid rgba(237,230,218,.5); border-radius:50%;
  background:none; cursor:pointer; transition:.25s var(--ease);
}
.hero-dot:hover{border-color:var(--brass-lit)}
.hero-dot:focus-visible{outline:2px solid var(--brass-lit); outline-offset:3px}
.hero-dot.is-on{background:var(--bone); border-color:var(--bone); transform:scale(1.25)}

@media (max-width:560px){
  /* On a phone the words already fill the bottom of the frame. Keep the
     arrows, drop the dots. */
  .hero-dots{display:none}
  .hero-nav{gap:.5rem}
}


/* ---------- reports (admin-reports.html, staff only) --------------------
   Tables, which the rest of the site has none of. Built for reading a lot of
   rows quickly and for printing: the toolbar, the nav and the footer all drop
   out on paper, and the tables go to black on white so a printed report does
   not cost a cartridge.
   ---------------------------------------------------------------------- */

/* the summary figures across the top */
.rep-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden;
  margin-bottom:clamp(1.6rem,3vw,2.4rem);
}
.rep-stat{background:var(--ink-2); padding:clamp(1.1rem,2vw,1.5rem)}
.rep-stat b{
  display:block; font-family:var(--serif); font-weight:400; line-height:1;
  font-size:clamp(1.5rem,2.8vw,2.1rem); color:var(--brass-lit);
  font-variant-numeric:tabular-nums;
}
.rep-stat span{
  display:block; margin-top:.6rem; font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}

/* the date range + export bar */
.rep-bar{
  display:flex; flex-wrap:wrap; gap:.9rem; align-items:flex-end;
  padding:clamp(1.1rem,2vw,1.5rem);
  border:1px solid var(--line-soft); border-radius:var(--r);
  background:var(--ink-2); margin-bottom:clamp(1.6rem,3vw,2.4rem);
}
.rep-bar .field{margin:0; min-width:150px}
.rep-bar .field > label{margin-bottom:.45rem}
.rep-bar input{margin:0}
.rep-quick{display:flex; flex-wrap:wrap; gap:.45rem; margin-left:auto}

/* a report */
.rep{margin-bottom:clamp(2.4rem,4.5vw,3.6rem)}
.rep-head{
  display:flex; flex-wrap:wrap; gap:.8rem 1.2rem; align-items:baseline;
  margin-bottom:1rem;
}
.rep-head h2{
  font-family:var(--serif); font-weight:400; margin:0;
  font-size:clamp(1.25rem,2.4vw,1.6rem); color:var(--bone);
}
.rep-head .rep-count{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.rep-head .rep-tools{margin-left:auto; display:flex; gap:.9rem}

.rep-wrap{
  border:1px solid var(--line-soft); border-radius:var(--r);
  background:var(--ink-2); overflow-x:auto;
}
table.rep-table{width:100%; border-collapse:collapse; font-size:.85rem; min-width:640px}
.rep-table th,
.rep-table td{padding:.72rem .9rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--line-soft)}
.rep-table thead th{
  position:sticky; top:0; z-index:1; background:var(--ink-3);
  font-family:var(--sans); font-weight:600;
  font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brass);
  white-space:nowrap;
}
.rep-table tbody tr:last-child td{border-bottom:0}
.rep-table tbody tr:hover{background:rgba(199,154,69,.05)}
.rep-table td{color:var(--bone-2)}
.rep-table td.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--bone)}
.rep-table td.who{color:var(--bone); font-weight:600}
.rep-table td.when{white-space:nowrap; color:var(--muted)}
.rep-table td small{display:block; color:var(--muted); font-size:.78rem; margin-top:.2rem}
.rep-table tfoot td{
  border-top:1px solid var(--line); font-weight:600; color:var(--bone);
  background:var(--ink-3); font-variant-numeric:tabular-nums;
}
.rep-table a{color:var(--brass-lit)}

/* a coloured word in a cell: what kind of money, or how they got in touch */
.tag-pill{
  display:inline-block; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:99px; padding:.2rem .6rem; color:var(--bone-2);
  white-space:nowrap;
}
.tag-pill.t-tower{border-color:rgba(199,154,69,.5); color:var(--brass-lit)}
.tag-pill.t-full{border-color:rgba(143,208,122,.5); color:#8FD07A}
.tag-pill.t-off{color:var(--muted)}

.rep-empty{padding:clamp(1.6rem,3vw,2.2rem); color:var(--muted); font-size:.88rem; margin:0}

@media (max-width:700px){
  .rep-quick{margin-left:0; width:100%}
  .rep-head .rep-tools{margin-left:0; width:100%}
}

@media print{
  .nav, .drawer, .progress, .skip, footer,
  .rep-bar, .rep-tools, .book-menu{display:none !important}
  body{background:#fff; color:#000}
  main{padding-top:0}
  .section{padding:0 0 1.2rem}
  .rep{page-break-inside:auto; margin-bottom:1.6rem}
  .rep-head h2, .rep-stat b{color:#000}
  .rep-wrap, .rep-stat, .rep-stats{background:#fff; border-color:#999; overflow:visible}
  table.rep-table{min-width:0; font-size:9.5pt}
  .rep-table thead th{background:#eee; color:#000; position:static}
  .rep-table td, .rep-table th{border-color:#ccc}
  .rep-table td, .rep-table td.who, .rep-table td.when, .rep-table td.num{color:#000}
  .rep-table td small{color:#444}
  .rep-table tfoot td{background:#eee; color:#000}
  .rep-table tr{page-break-inside:avoid}
  .rep-stat span{color:#444}
  a{color:#000; text-decoration:none}
}