/* ============================================================
   The Cube Hotel — shared stylesheet (index + privacy)
   Linked once from the shared header. Page-specific blocks are
   inert on pages that don't contain those elements.
   Conflicts between the two originals were resolved as follows:
     • body line-height 1.65 globally; policy prose bumped to 1.7
     • links inherit colour globally; policy prose links are teal
     • eyebrow is teal-deep, overridden to teal on dark sections
     • one button system (.btn + .btn-* variants)
     • one nav (with mobile toggle); footer uses house spacing
   ============================================================ */

  :root{
    --ink:#0c2426;        /* deep ink-teal, near-black            */
    --ink-2:#0f2e30;      /* slightly lifted ink for facets       */
    --teal:#20b2aa;       /* lightseagreen — the accent           */
    --teal-deep:#0c6b66;  /* darker teal for buttons / small text */
    --teal-tint:#e8f4f2;  /* pale teal wash                       */
    --cream:#f8f6f1;      /* warm off-white body background       */
    --paper:#ffffff;
    --sand:#c2a368;       /* restrained warm accent (dining only) */
    --text:#16302f;
    --muted:#5c706f;
    --line:#dfe6e4;
    --display:'Bodoni Moda', Georgia, 'Times New Roman', serif;
    --display-read:'DM Serif Display', Georgia, 'Times New Roman', serif;
    --body:'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --wrap:1180px;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{
    font-family:var(--body);
    color:var(--text);
    background:var(--cream);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}

  /* ---- shared type devices -------------------------------- */
  .eyebrow{
    font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
    color:var(--teal-deep);display:inline-flex;align-items:center;gap:10px;
  }
  .eyebrow svg{width:14px;height:14px;flex:none}
  h1,h2,h3{font-family:var(--display-read);font-weight:400;line-height:1.1;letter-spacing:-.005em}
  h1{font-family:var(--display);font-weight:500;line-height:1.08;letter-spacing:-.01em}
  .lead{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--muted);max-width:54ch}

  .btn{
    display:inline-flex;align-items:center;gap:.6em;font-family:var(--body);
    font-weight:600;font-size:.95rem;letter-spacing:.01em;cursor:pointer;
    padding:.95em 1.7em;border-radius:2px;border:1.5px solid transparent;
    transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
  }
  .btn-primary{background:var(--teal-deep);color:#fff}
  .btn-primary:hover{background:var(--teal);transform:translateY(-1px)}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
  .btn-ghost:hover{border-color:var(--teal-deep);color:var(--teal-deep)}
  .btn-light{background:var(--teal);color:var(--ink)}
  .btn-light:hover{background:#fff;transform:translateY(-1px)}
  .btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.32)}
  .btn-outline-light:hover{border-color:#fff}
  :focus-visible{outline:2px solid var(--teal);outline-offset:3px}

  /* ---- nav ------------------------------------------------- */
  header.nav{
    position:sticky;top:0;z-index:50;background:rgba(248,246,241,.86);
    backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line);
  }
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
  .brand{display:flex;align-items:center;gap:12px;font-family:var(--display);
    font-size:1.18rem;font-weight:600;letter-spacing:.02em;color:var(--ink)}
  .brand .mark{width:26px;height:26px;flex:none;color:var(--teal-deep)}
  .brand:hover{text-decoration:none}
  .nav-links{display:flex;align-items:center;gap:34px}
  .nav-links a{font-size:.92rem;font-weight:500;color:var(--text);position:relative;padding:4px 0}
  .nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;
    background:var(--teal-deep);transition:width .25s ease}
  .nav-links a:hover::after{width:100%}
  .nav-cta{display:flex;align-items:center;gap:16px}
  .nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
  .nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:.25s}

  /* ============================================================
     INDEX (landing) page — hero, sections, rooms, dining, location,
     contact, image slots. Inert on pages without these elements.
     ============================================================ */
  /* ---- hero ------------------------------------------------ */
  .hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
  .hero-facets{position:absolute;inset:0;z-index:-2}
  /* faceted "glass cube" panels built from clip-paths */
  .hero-facets span{position:absolute;display:block;opacity:.9}
  .f1{top:-10%;right:-6%;width:62%;height:120%;
      background:linear-gradient(135deg,var(--ink-2),#13403f);
      clip-path:polygon(28% 0,100% 0,100% 100%,0 100%)}
  .f2{top:-10%;right:-6%;width:46%;height:120%;
      background:linear-gradient(135deg,#15514d,var(--teal-deep));opacity:.55;
      clip-path:polygon(40% 0,100% 0,100% 100%,8% 100%)}
  .f3{top:6%;right:2%;width:30%;height:88%;
      background:linear-gradient(160deg,var(--teal),transparent);opacity:.32;
      clip-path:polygon(46% 0,100% 0,100% 100%,0 100%)}
  /* perforated-facade dot grid, a nod to The Cube's exterior */
  .hero-grid{position:absolute;inset:0;z-index:-1;opacity:.10;
    background-image:radial-gradient(rgba(255,255,255,.9) 1px,transparent 1.4px);
    background-size:26px 26px;mask-image:linear-gradient(105deg,transparent 30%,#000 100%)}
  .hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;
    min-height:min(86vh,760px);padding:80px 0 88px}
  .hero .eyebrow{color:var(--teal)}
  .hero .eyebrow svg path{stroke:var(--teal)}
  .hero h1{font-size:clamp(2.6rem,6vw,4.6rem);margin:22px 0 24px;max-width:14ch}
  .hero h1 em{font-style:italic;color:var(--teal)}
  .hero p.lead{color:rgba(255,255,255,.78);max-width:46ch}
  .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
  /* hero photo slot — sits in the calmer side; works empty, better filled */
  .hero-photo{align-self:stretch;border:1px solid rgba(255,255,255,.14);border-radius:3px;
    background-color:rgba(255,255,255,.05);
    min-height:340px;display:flex;align-items:flex-end;padding:22px;position:relative;overflow:hidden}

  /* ---- generic section ------------------------------------- */
  section{padding:96px 0}
  .sec-head{max-width:60ch}
  .sec-head h2{font-size:clamp(2rem,3.6vw,2.9rem);margin:16px 0 18px}
  .divider{height:1px;background:var(--line);max-width:var(--wrap);margin:0 auto}

  /* About */
  .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .about-copy p+p{margin-top:16px}
  .stat-row{display:flex;gap:38px;margin-top:34px;flex-wrap:wrap}
  .stat .n{font-family:var(--display-read);font-size:2rem;color:var(--ink);line-height:1}
  .stat .l{font-size:.82rem;letter-spacing:.04em;color:var(--muted);margin-top:6px}
  .photo-slot{border:1px solid var(--line);border-radius:3px;background-color:var(--teal-tint);
    min-height:420px;display:flex;align-items:flex-end;padding:20px;position:relative;overflow:hidden}

  /* Stay / rooms */
  .stay{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px;margin-top:48px}
  .card{border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--cream);
    display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease}
  .card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -28px rgba(12,36,38,.5)}
  .card .pic{height:210px;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:14px;
    background-color:var(--teal-tint);
    background-image:var(--img,none);          /* set per room in the PAGE IMAGES block below */
    background-size:cover;background-position:center center;background-repeat:no-repeat}
  .card .pic .tag{position:relative;z-index:1;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
    color:#fff;background:rgba(12,36,38,.6);padding:5px 10px;border-radius:2px}
  .card .body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
  .card h3{font-size:1.3rem;line-height:1.15}
  .card .body p{font-size:.95rem;color:var(--muted);margin-top:10px}
  .card .card-link{margin-top:auto;padding-top:16px;font-family:var(--body);font-weight:600;
    font-size:.86rem;letter-spacing:.02em;color:var(--teal-deep);
    display:inline-flex;align-items:center;gap:.4em;transition:gap .2s ease}
  .card:hover .card-link{gap:.7em}

  /* Dining — warmer register for the steakhouse */
  .dining{background:var(--ink);color:#fff;position:relative;overflow:hidden}
  .dining .hero-grid{opacity:.07}
  .dining-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center;position:relative}
  .dining .eyebrow{color:var(--sand)}
  .dining .eyebrow svg path{stroke:var(--sand)}
  .dining h2{font-size:clamp(2rem,3.6vw,2.9rem);margin:16px 0 20px}
  .dining h2 em{font-style:italic;color:var(--sand)}
  .dining p{color:rgba(255,255,255,.8);max-width:50ch}
  .dining p+p{margin-top:16px}
  .dining .photo-slot{background-color:rgba(255,255,255,.05);
    border-color:rgba(255,255,255,.16);min-height:440px}
  .dining-actions{margin-top:30px}

  /* Location */
  .loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
  .loc-list{list-style:none;margin-top:26px}
  .loc-list li{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
  .loc-list li span:first-child{font-weight:500;color:var(--ink)}
  .loc-list li span:last-child{color:var(--muted);font-size:.92rem;white-space:nowrap}
  .map-slot{border:1px solid var(--line);border-radius:3px;background-color:var(--teal-tint);
    min-height:440px;display:flex;align-items:flex-end;padding:20px;position:relative;overflow:hidden}

  /* ---- feature image slots: shared background + label chip ---- */
  .hero-photo,.photo-slot,.map-slot{
    background-image:var(--img,none);background-size:cover;
    background-position:center center;background-repeat:no-repeat}
  .hero-photo .tag,.photo-slot .tag,.map-slot .tag{position:relative;z-index:1;
    font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#fff;
    background:rgba(12,36,38,.55);padding:5px 10px;border-radius:2px}

  /* corner marker on every image box. Add class "no-corner" to a box to hide its corner. */
  .hero-photo::before,.photo-slot::before,.map-slot::before,.card .pic::before{
    content:"";position:absolute;top:14px;left:14px;width:28px;height:28px;z-index:1;pointer-events:none;
    border-top:2px solid var(--corner,var(--teal-deep));
    border-left:2px solid var(--corner,var(--teal-deep))}
  .no-corner::before{display:none!important}
  /* default corner colours — zero specificity, so the palette classes below always win */
  :where(.card .pic){--corner:#fff}
  :where(.hero-photo){--corner:var(--teal)}
  :where(.dining .photo-slot){--corner:var(--sand)}
  /* CORNER COLOUR — add one of these to an image box to recolour its corner
     (works alongside "no-corner"). Defaults: rooms = white, hero = teal,
     dining = sand, about & location = teal-deep. */
  .corner--teal     {--corner:var(--teal)}      /* #20b2aa */
  .corner--teal-deep{--corner:var(--teal-deep)} /* #0c6b66 */
  .corner--sand     {--corner:var(--sand)}      /* #c2a368 */
  .corner--ink      {--corner:var(--ink)}       /* #0c2426 */
  .corner--white    {--corner:#fff}

  /* ═══════════════════════════════════════════════════════════════
     PAGE IMAGES — every image on the page is set here in one place.
     Paste a URL between the url( ).  Leave a line as "none" to show a
     plain panel with just its label; once a real photo is in, delete
     that slot's <span class="tag"> in the HTML so no caption sits over it.
     (Room category tags — Superior / Standard / Accessible — are meant
     to stay.)
     ═══════════════════════════════════════════════════════════════ */
  /* Feature images */
  .hero-photo {--img:url('assets/img/view-from-the-cube-birmingham.webp')}   /* hero — building exterior / rooftop view */
  .img--about {--img:url('assets/img/the-cube-birmingham.webp')}   /* about — lobby or building */
  .img--dining{--img:url('assets/img/marco-piere-white-steakhouse.webp')}   /* dining — Marco Pierre White steakhouse */
  .map-slot   {--img:url('assets/img/mailbox-night.webp')}   /* location — map or aerial */
  /* Room images */
  .room--superior-double  .pic{--img:url('assets/img/22.webp')}
  .room--standard-twin    .pic{--img:url('assets/img/18.webp')}
  .room--standard-double  .pic{--img:url('assets/img/11.webp')}
  .room--superior-balcony .pic{--img:url('assets/img/9.webp')}
  .room--accessible       .pic{--img:url('assets/img/6.webp')}

  /* Contact / final CTA */
  .contact{background:var(--teal-tint)}
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .contact h2{font-size:clamp(2rem,3.6vw,2.8rem);margin:16px 0 14px}
  .contact .detail{margin-top:22px}
  .contact .detail dt{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:4px}
  .contact .detail dd{font-size:1.05rem;color:var(--ink);margin-bottom:16px}
  .contact .detail a:hover{color:var(--teal-deep)}
  .contact-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}

  /* ============================================================
     PRIVACY page — header band + policy body.
     ============================================================ */
  /* page header */
  .page-head{background:var(--ink);color:#fff;padding:72px 0 64px}
  .page-head h1{font-family:var(--display);font-weight:500;font-size:clamp(2.4rem,5vw,3.4rem);
    line-height:1.08;margin:20px 0 14px}
  .page-head .updated{color:rgba(255,255,255,.7);font-size:.95rem}

  /* policy body */
  .policy{padding:64px 0 84px}
  .policy .col{max-width:740px}
  .policy .intro{font-size:1.12rem;color:var(--text)}
  .policy h2{font-family:var(--display-read);font-weight:400;font-size:1.55rem;line-height:1.2;
    margin:42px 0 12px;color:var(--ink)}
  .policy h3{font-family:var(--display-read);font-weight:400;font-size:1.18rem;margin:24px 0 8px;color:var(--ink)}
  .policy p{margin:0 0 14px}
  .policy ul{margin:0 0 16px;padding-left:22px}
  .policy li{margin-bottom:8px}
  .policy .note{background:var(--teal-tint);border-left:3px solid var(--teal-deep);
    padding:16px 18px;border-radius:0 3px 3px 0;margin:22px 0;font-size:.96rem}
  .policy strong{color:var(--ink)}
  .page-head .eyebrow{color:var(--teal)}      /* eyebrow on dark header */
  .policy{line-height:1.7}                     /* easier reading for prose */
  .policy a{color:var(--teal-deep)}            /* prose links look like links */
  .policy a:hover{text-decoration:underline}

  /* ---- footer (shared) ---------------------------------------- */
  footer.site{background:var(--ink);color:rgba(255,255,255,.72);padding:64px 0 34px}
  .foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px;
    border-bottom:1px solid rgba(255,255,255,.12)}
  .foot-brand .brand{color:#fff;margin-bottom:16px}
  .foot-brand .brand .mark{color:var(--teal)}
  .foot-brand p{font-size:.92rem;max-width:34ch}
  .foot-col h4{font-family:var(--body);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(255,255,255,.5);margin-bottom:16px;font-weight:600}
  .foot-col ul{list-style:none}
  .foot-col li{margin-bottom:10px}
  .foot-col a{font-size:.95rem;color:rgba(255,255,255,.78)}
  .foot-col a:hover{color:var(--teal)}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:18px;
    flex-wrap:wrap;padding-top:26px;font-size:.86rem}
  /* credit: .credit svg covers the logo whether or not it carries a class */
  .credit{display:inline-flex;align-items:center;gap:.5em;flex-wrap:wrap}
  .credit a{color:#fff;font-weight:600;display:inline-flex;align-items:center}
  .credit svg{height:1.4em;width:auto;display:block}
  span.devision{top:-2px!important;position:relative!important}

  /* ---- reveal animation ----------------------------------- */
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

  /* ---- responsive ----------------------------------------- */
  @media (max-width:900px){
    .hero-inner{grid-template-columns:1fr;min-height:0;padding:64px 0 72px}
    .hero-photo{display:none}
    .about-grid,.dining-grid,.loc-grid,.contact-grid{grid-template-columns:1fr;gap:38px}
    .about-grid .photo-slot,.dining .photo-slot{order:-1;min-height:280px}
    .foot-top{grid-template-columns:1fr 1fr}
    .nav-links,.nav-cta .btn{display:none}
    .nav-toggle{display:block}
    .nav-links.open{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;
      gap:0;background:var(--cream);border-bottom:1px solid var(--line);padding:8px 0}
    .nav-links.open a{padding:14px 28px;width:100%}
    .nav-links.open a::after{display:none}
  }
  @media (max-width:560px){
    .foot-top{grid-template-columns:1fr}
    section{padding:72px 0}
    .hero-actions .btn,.contact-actions .btn{flex:1 1 auto;justify-content:center}
  }