/* ==========================================================================
   Birdy Cart Hire — site styles
   Matches the live birdycart-hire.au look: warm terracotta background,
   white EB Garamond headings, Quicksand body, outlined pill buttons.

   Fonts are self-hosted (assets/fonts) so the site renders identically
   with no internet connection and no dependency on Google's servers.
   ========================================================================== */

/* --- Self-hosted webfonts ------------------------------------------------ */
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/eb-garamond-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/eb-garamond-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/eb-garamond-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/eb-garamond-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/quicksand-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/quicksand-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/quicksand-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/quicksand-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Vollkorn';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/vollkorn-latin-400-normal.woff2') format('woff2')}

:root{
  --clay:#BB5D47;          /* page background */
  --clay-deep:#A8503B;     /* slightly darker panel */
  --clay-soft:#C56E58;     /* lighter panel */
  --cream:#FBEFEB;         /* soft text / tints */
  --white:#FFFFFF;
  --ink:#3A2A24;
  --maxw:1180px;
  --radius:10px;
  --head:"EB Garamond", Georgia, "Times New Roman", serif;
  --sub:"Vollkorn", Georgia, serif;
  --body:"Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ink-dark:#1B1B1B;   /* body text on white sections */
}

/* ==========================================================================
   LIVE PAGE STRUCTURE (measured off birdycart-hire.au at clientWidth 1353)
   The page alternates: terracotta hero -> white -> split band -> white ->
   split band -> white -> white(partners). Split bands are 50/50: terracotta
   text on the left, a full-bleed photo on the right.
   ========================================================================== */

/* White content sections ------------------------------------------------- */
/* Re-measured live 01 Aug at innerWidth 1368. Every section on Home pads
   100px top and bottom (was 72). The white text column is 682.7px of content
   (was 622). Bullets indent 40px (was 22). Section headings leave 40px below
   themselves (was 28) — checked against all three white sections. */
.sec-white{background:#fff;color:var(--ink-dark);padding:100px 0}
@media (max-width:767px){.sec-white{padding:40px 0}}
.sec-white .col{width:682.7px;max-width:calc(100% - 48px);margin:0 auto}
.sec-white p{font-family:var(--body);font-size:18px;font-weight:400;letter-spacing:normal;
  line-height:32.4px;color:var(--ink-dark);margin:0 0 32.4px}
.sec-white p:last-child{margin-bottom:0}
.sec-white ul{list-style:disc;padding-left:40px;margin:0}
.sec-white li{font-family:var(--body);font-size:18px;line-height:27px;color:var(--ink-dark);margin:0}
.sec-white h2,.sec-white h3{font-family:var(--head);font-size:32px;font-weight:400;letter-spacing:2px;
  line-height:40px;color:var(--ink-dark);text-align:center;margin:0 0 40px}

/* Split band: text one side, full-bleed photo the other ------------------ */
.band{display:grid;grid-template-columns:1fr 1fr;background:var(--clay)}
.band-copy{padding:72px 72px 72px 72px;display:flex;flex-direction:column;justify-content:center}
.band-copy .inner{max-width:530px}
.band-copy h2{font-family:var(--head);font-size:44px;font-weight:400;letter-spacing:2px;
  line-height:55px;color:var(--white);text-align:left;margin:0 0 24px}
.band-copy h3{font-family:var(--sub);font-size:22px;font-weight:400;letter-spacing:2px;
  line-height:27.5px;color:var(--white);text-align:left;margin:0 0 24px}
.band-copy p{font-family:var(--body);font-size:18px;font-weight:400;letter-spacing:normal;
  line-height:32.4px;color:var(--white);margin:0 0 32.4px}
.band-copy p:last-of-type{margin-bottom:0}
.band-copy .block + .block{margin-top:56px}
/* Band photo framing — live uses background-size:cover with
   background-position: 30% 54.35%, so mirror that exactly. */
.band-media{position:relative;min-height:420px;overflow:hidden}
.band-media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:30% 54.35%}
@media (max-width:860px){
  .band{grid-template-columns:1fr}
  .band-copy{padding:52px 26px}
  .band-media{min-height:320px;order:-1}
}

/* Pill buttons — exact live colours (measured):
   on white sections  = solid BLACK fill, white text, no border
   on terracotta bands = solid WHITE fill, black text, no border
   (the hero's "Package Pricing" is the only outlined one) */
.btn-pill{display:inline-block;font-family:var(--head);font-size:16px;font-weight:400;
  letter-spacing:2px;line-height:36px;padding:8px 40px;border:0;
  border-radius:48px;text-align:center}
.sec-white .btn-pill{background:#000;color:#fff}
.band-copy .btn-pill{background:#fff;color:#000}
.btn-pill:hover{opacity:.85}

/* ==========================================================================
   PACKAGES PAGE
   Every number below is resolved from the live page's own stylesheet in the
   saved copy (Website/saved existing sites/), at the >=1280px breakpoint —
   not eyeballed. Container 1160px wide with 56px side padding => 1048px of
   content. All sections pad 100px top and bottom. Grids: 48px gutters both
   axes, cells 317.3px. This page is Quicksand-led; a few headings are EB
   Garamond (Check Your Date, Looking for more, FOOD, BEVERAGE, Message Us).
   ========================================================================== */
.pkg-col{width:1160px;max-width:100%;margin:0 auto;padding:0 56px}
@media (max-width:1023px){.pkg-col{padding:0 24px}}
.pkg-band{background:var(--clay);color:var(--white);padding:100px 0}
.pkg-white{background:#fff;color:var(--ink-dark);padding:100px 0}
@media (max-width:767px){.pkg-band,.pkg-white{padding:40px 0}}

/* Enquire pills. Measured live on /packages: BOTH are outlined, not solid —
   transparent fill, 2px border, 190.3x56, radius 48px, padding 8px 40px,
   EB Garamond 16px / 2px tracking. Black on the white section, white on the
   terracotta band. (Home's white sections do use solid black pills, so this
   is scoped to the Packages page rather than changed globally.)
   These were previously scoped to .sec-white/.band-copy, which this page
   never uses, so the buttons rendered with no styling at all. */
.pkg-white .btn-pill{background:transparent;border:2px solid var(--ink-dark);color:var(--ink-dark)}
.pkg-band .btn-pill{background:transparent;border:2px solid var(--white);color:var(--white)}
.pkg-white .btn-pill:hover{background:var(--ink-dark);color:#fff;opacity:1}
.pkg-band .btn-pill:hover{background:var(--white);color:var(--clay);opacity:1}

/* the rule between the category photos and the price list */
.pkg-rule{border:0;border-bottom:1px solid #E17157;width:100%;margin:56px 0 40px}

.pkg-intro{font-family:var(--body);font-size:22px;font-weight:400;line-height:1.5;
  text-align:center;color:var(--white);margin:0 0 44px}
.pkg-title{font-family:var(--body);font-size:44px;font-weight:400;letter-spacing:2px;
  line-height:1.25;text-align:center;color:var(--white);margin:0}
.pkg-sub{font-family:var(--body);font-size:22px;font-weight:400;line-height:1.5;
  text-align:center;color:var(--white);margin:4px 0 48px}
/* Notes under the price list. Live sets these at 20px against 22px prices,
   which is barely a step; Nicole's call is 16px for all three. They now share
   one centred 866px measure (the width the live page uses for its fine print)
   so the three paragraphs stack as a single tidy block rather than mixing a
   full-width left-aligned pair with a narrow centred line. */
.pkg-notes{max-width:866px;margin:56px auto 0;text-align:center}
.pkg-note{font-family:var(--body);font-size:16px;line-height:1.5;color:var(--white);margin:0 0 16px}
.pkg-note:last-child{margin-bottom:0}

/* three-up grids (category photos, packages, menu items) */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
@media (max-width:900px){.grid3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid3{grid-template-columns:1fr}}

.cat-label{font-family:var(--body);font-size:22px;font-weight:400;letter-spacing:2px;
  line-height:1.25;color:var(--white);margin:14px 0 0}

/* a package cell: cart tier icon, then name + right-aligned price, bullets.
   The icon measures 185.5px square on the live page and sits CENTRED in the
   317.3px cell — it does not fill the cell. 31px from icon to package name. */
.pkg-cell .tier-icon{width:185.5px;max-width:100%;height:auto;object-fit:contain;
  display:block;margin:0 auto 31px}
.pkg-cell .row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pkg-cell .name{font-family:var(--body);font-size:22px;font-weight:400;letter-spacing:2px;
  line-height:1.25;color:var(--white)}
.pkg-cell .price{font-family:var(--body);font-size:22px;font-weight:400;line-height:1;
  color:var(--white);text-align:right;white-space:nowrap}
/* live: real disc bullets, ul margin 20px 0, padding-left 40px */
.pkg-cell ul{list-style:disc;margin:20px 0;padding:0 0 0 40px}
.pkg-cell li{font-family:var(--body);font-size:20px;font-weight:400;line-height:1.5;color:var(--white)}

/* "Check Your Date:" row — heading left, button right. Single-cell blocks sit
   24px in from the 1048px column on the live page (the grids don't, because
   their negative margin cancels the cell padding). */
.checkdate{display:flex;align-items:center;justify-content:space-between;gap:32px;
  flex-wrap:wrap;padding:0 24px}
.checkdate h2{font-family:var(--head);font-size:44px;font-weight:400;letter-spacing:2px;
  line-height:1.25;color:var(--ink-dark);text-align:left;margin:0}

/* "Looking for more?" band */
.offer-band h2{font-family:var(--head);font-size:32px;font-weight:400;letter-spacing:2px;
  line-height:1.25;color:var(--white);text-align:center;margin:0 0 40px}
.offer-band p{font-family:var(--body);font-size:20px;line-height:1.8;color:var(--white);
  text-align:center;margin:0}

/* closing CTA — terracotta band. Same layout as "Check Your Date:": text
   left, outlined pill right. Measured live, not centred. */
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:32px;
  flex-wrap:wrap;padding:0 24px}
.cta-band h2{font-family:var(--head);font-size:44px;font-weight:400;letter-spacing:2px;
  line-height:1.25;color:var(--white);margin:0}
.cta-band p{font-family:var(--body);font-size:16px;line-height:1.5;color:var(--white);margin:10px 0 0}

/* Food / Beverage menus */
.menu-head{font-family:var(--head);font-size:32px;font-weight:400;letter-spacing:2px;
  line-height:1.4;color:var(--ink-dark);text-align:center;margin:0 0 100px}
.menu-item .name{font-family:var(--body);font-size:22px;font-weight:400;letter-spacing:2px;
  line-height:1.25;color:var(--ink-dark);display:block;text-align:left;margin:24px 0 0}
.menu-item .lead{font-family:var(--body);font-size:18px;line-height:1.8;color:var(--ink-dark);margin:0}
.menu-item .desc{font-family:var(--body);font-size:18px;line-height:1.8;color:var(--ink-dark);margin:0}
/* Image aspect ratios are taken from what GoDaddy's CDN actually serves, read
   off the srcset in the saved page: menu photos 365x365 rendered as CIRCLES,
   category photos 360x480 (3:4 portrait, cropped). The category files in
   assets/img/live are the CDN's exact crops, not our full-frame originals —
   the live page crops two of them off-centre, so full frames don't match.
   Full frames archived in assets/img/live/_fullframe-originals. */
.menu-item img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:50%;display:block}
.cat-card img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}

/* placeholder for photos not yet saved off the live site */
.photo-slot{width:100%;aspect-ratio:1/1;background:rgba(0,0,0,.06);border:1px dashed rgba(0,0,0,.22);
  display:flex;align-items:center;justify-content:center;font-family:var(--body);font-size:13px;
  color:#8a8a8a;text-align:center;padding:10px}
.pkg-band .photo-slot{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.45);color:#F7E4DE}

/* Partners — live: "Our Partners" in Quicksand 32px, centred, on white ---- */
.partners-title{font-family:var(--body);font-size:32px;font-weight:400;letter-spacing:2px;
  color:var(--ink-dark);text-align:center;margin:0 0 44px}
/* The CDN requests these at h:100, but that is the 2x rendition — measured
   live, the logos in the resting row render about 51px tall, not 100. Same
   intrinsic-density trap as the Packages tier icons. */
.partners-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:34px 56px;max-width:1100px;margin:0 auto}
.partners-grid img{max-height:52px;max-width:200px;width:auto;object-fit:contain}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--body);
  font-size:17px;
  line-height:1.7;
  color:var(--white);
  background:var(--clay);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--white);text-decoration:none}
a:hover{color:var(--cream)}

h1,h2,h3,h4{font-family:var(--head);font-weight:500;line-height:1.18;color:var(--white);
  margin:0 0 .5em;letter-spacing:.01em}
h1{font-size:clamp(2.1rem,4.6vw,3.1rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.4rem}
p{margin:0 0 1rem}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.section{padding:70px 0}
.section--tight{padding:44px 0}
.center{text-align:center}
.lede{font-size:1.12rem;color:var(--cream);max-width:660px}
.center .lede{margin-left:auto;margin-right:auto}
.eyebrow{font-family:var(--body);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  font-size:.76rem;color:var(--cream);margin:0 0 .7rem}

/* Buttons — outlined pill, like the live site --------------------------- */
.btn{
  display:inline-block;font-family:var(--head);font-weight:500;font-size:1.15rem;letter-spacing:.03em;
  padding:14px 40px;border-radius:999px;cursor:pointer;border:1.5px solid var(--white);
  background:transparent;color:var(--white);transition:background .18s,color .18s;
}
.btn:hover{background:var(--white);color:var(--clay)}
.btn--solid{background:var(--white);color:var(--clay)}
.btn--solid:hover{background:var(--cream);color:var(--clay)}

/* Header — centred logo with nav flanking on one line (matches live) ----- */
.site-header{background:var(--clay);padding:24px 0 24px;position:relative}
.header-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  max-width:none;padding:0 48px}
.nav-left{justify-self:start}
.nav-right{justify-self:end}
.brand{justify-self:center;display:block}
/* pinned to 179px wide to match the live site exactly */
.brand img{width:179px;height:auto;display:block}
.nav{display:flex;align-items:center;gap:56px}
.nav a{font-family:var(--head);font-weight:400;font-size:16px;letter-spacing:2px;line-height:24px;
  color:var(--white);padding:0}
.nav a:hover{color:var(--cream)}
/* active page marker: 8x2px white bar, 8px before the word (matches live site) */
.nav a.active::before{content:"";display:inline-block;width:8px;height:2px;
  background:var(--white);margin-right:8px;vertical-align:middle}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;color:#fff;
  position:absolute;left:16px;top:50%;transform:translateY(-50%)}
.nav-toggle span{display:block;width:26px;height:2px;background:#fff;margin:6px 0;transition:.25s}

@media (max-width:760px){
  .site-header{padding:16px 0 12px}
  .header-inner{display:flex;justify-content:center}
  /* keep the 179x94 ratio on mobile — setting height alone squashed it,
     because the desktop rule pins width to 179px */
  .brand img{width:140px;height:auto}
  .nav-toggle{display:block}
  .nav{
    position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
    background:var(--clay-deep);padding:8px 20px 18px;z-index:60;
    transform:translateY(-200%);transition:transform .28s ease;
  }
  .nav-right{top:calc(100% + 0px)}
  .header-inner.nav-open .nav{transform:translateY(0);position:static;background:transparent;padding:6px 0}
  .nav a{padding:12px 4px;font-size:1.3rem;width:100%;text-align:center}
  .nav-toggle.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}

/* Hero ------------------------------------------------------------------- */
/* Hero layout — exact live proportions at desktop:
   text column 415px + 24px gap + 649px square image = 1088px content width. */
.hero{background:var(--clay);padding:42px 0 60px}
/* Live structure: 1160px container with 24px padding -> 1112px row,
   split 463px (text cell, itself padded 24px = 415px of text) + 649px (image). */
.hero .wrap{max-width:1160px;padding:0 24px;display:grid;
  grid-template-columns:463fr 649fr;column-gap:0;align-items:center}
.hero .hero-copy{padding:0 24px}
/* Hero heading — exact live values: EB Garamond 32px / 400 / 4px tracking / 38.4px leading.
   On the live site both lines sit inside one <h1>, separated by a blank line (38.4px). */
.hero h1,
.hero .sub{
  font-family:var(--head);
  font-size:32px;
  font-weight:400;
  letter-spacing:4px;
  line-height:38.4px;
  color:var(--white);
  margin:0;
}
/* the blank line between the two heading blocks is one line-height; 18px down to the bullets */
.hero .sub{margin:38.4px 0 18px}
/* Bullets — live: Quicksand 17px / 2px tracking / 25.5px leading, no extra gap between items.
   25px down to the button. */
.hero ul{list-style:none;padding:0;margin:0 0 25px}
.hero ul li{
  position:relative;
  padding-left:16px;
  color:var(--white);
  font-family:var(--body);
  font-size:17px;
  letter-spacing:2px;
  line-height:25.5px;
  margin:0;
}
.hero ul li::before{content:"\2022";position:absolute;left:0;top:0;color:var(--white);
  font-size:17px;line-height:25.5px;letter-spacing:0}

/* Button — live: 2px white border, 48px radius, EB Garamond 16px / 400 / 2px tracking,
   8px 40px padding, transparent fill (renders 209x56). */
.hero .btn{
  font-family:var(--head);
  font-size:16px;
  font-weight:400;
  letter-spacing:2px;
  line-height:36px;
  padding:8px 40px;
  border:2px solid var(--white);
  border-radius:48px;
  background:transparent;
  color:var(--white);
}
.hero .btn:hover{background:var(--white);color:var(--clay)}

/* Hero photo — uses the actual GoDaddy export (Website/hero image.jpg).
   Measured: content 2088x2320 with transparent margins 136px left / 96px right,
   and the photo itself at alpha 140/255 = 55%. All of that is inside the file,
   so no CSS opacity here — adding any would double up. */
.hero-media img{width:100%;border-radius:0}

@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;gap:32px;text-align:center}
  .hero ul{display:inline-block;text-align:left}
  .hero-media{order:-1}
}

/* Bullet list (body) ----------------------------------------------------- */
.bullets{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.bullets li{position:relative;padding-left:22px;color:var(--white)}
.bullets li::before{content:"•";position:absolute;left:2px;top:-1px;color:var(--white)}
.bullets--2{grid-template-columns:1fr 1fr;gap:8px 34px}
@media (max-width:620px){.bullets--2{grid-template-columns:1fr}}

/* Sections / splits ------------------------------------------------------ */
.section-head{max-width:720px;margin:0 auto 42px;text-align:center}
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split--reverse .split-media{order:2}
.split-media img{border-radius:6px;width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.92)}
@media (max-width:820px){
  .split{grid-template-columns:1fr;gap:28px}
  .split--reverse .split-media{order:0}
}

.grid{display:grid;gap:26px}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid-4{grid-template-columns:1fr}}

.card{background:var(--clay-soft);border:1px solid rgba(255,255,255,.25);border-radius:var(--radius);
  padding:26px}
.card h3{margin-bottom:.3em}
.card p:last-child{margin-bottom:0}

/* Reviews ---------------------------------------------------------------- */
.reviews-head{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:14px}
.stars{color:var(--white);font-size:1.7rem;letter-spacing:4px}
.reviews-score{font-family:var(--head);font-size:1.3rem}
.reviews-score b{font-size:1.7rem}

/* Pricing ---------------------------------------------------------------- */
.price-table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid rgba(255,255,255,.3)}
table.price{width:100%;border-collapse:collapse;min-width:640px}
table.price th,table.price td{padding:15px 18px;text-align:left;border-bottom:1px solid rgba(255,255,255,.22)}
table.price thead th{background:var(--clay-deep);color:#fff;font-family:var(--body);font-weight:600;
  font-size:.82rem;letter-spacing:.05em;text-transform:uppercase}
table.price tbody tr:last-child td{border-bottom:0}
table.price .pkg{font-family:var(--head);font-size:1.25rem}
table.price .price-cell{font-weight:700;white-space:nowrap}
.price-note{font-size:.95rem;color:var(--cream);margin-top:14px}

.addons{display:grid;grid-template-columns:1fr 1fr;gap:34px}
@media (max-width:760px){.addons{grid-template-columns:1fr}}
.addon-col h3{border-bottom:1.5px solid rgba(255,255,255,.4);padding-bottom:8px;margin-bottom:16px}
.addon-col ul{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.addon-col li b{color:var(--white)}
.addon-col li span{display:block;color:var(--cream);font-size:.96rem}

/* ==========================================================================
   GALLERY PAGE (measured off /gallery at clientWidth 1353)
   White page. H1 "Gallery" EB Garamond 32px/2px tracking, centred.
   3-column masonry, 344px columns inside a 1056px container, ~8px gutters.
   20 photos shown, the rest behind a "Show More" text link (Quicksand 16px,
   terracotta, no background).
   ========================================================================== */
/* Re-measured live 01 Aug at innerWidth 1368: section pads 100px top and
   bottom (was 56/64), the column is the standard 1160/56 container giving
   1048px of content (was 1008), the title is 32px/44.8px with 100px below it
   (was 40), and the columns land at 343.8px with 8.2px gutters. */
.gal-page{background:#fff;color:var(--ink-dark);padding:100px 0}
@media (max-width:767px){.gal-page{padding:40px 0}}
.gal-title{font-family:var(--head);font-size:32px;font-weight:400;letter-spacing:2px;
  line-height:1.4;color:var(--ink-dark);text-align:center;margin:0 0 100px}
.gal-col{width:1160px;max-width:100%;margin:0 auto;padding:0 56px}
@media (max-width:1023px){.gal-col{padding:0 24px}}
.gal-grid{columns:3;column-gap:8px}
.gal-grid img{width:100%;margin:0 0 8px;break-inside:avoid;display:block;cursor:pointer}
.gal-grid .gal-hidden{display:none}
.gal-grid.expanded .gal-hidden{display:block}
@media (max-width:900px){.gal-grid{columns:2}}
@media (max-width:560px){.gal-grid{columns:1}}
/* live: 161px below the last photo, Quicksand 16px in #B85B46, no background */
.gal-more{display:block;margin:161px auto 0;background:none;border:0;cursor:pointer;
  font-family:var(--body);font-size:16px;color:#B85B46}
.gal-more:hover{text-decoration:underline}

/* legacy gallery styles (kept for the lightbox) --------------------------- */
.gallery{columns:3;column-gap:16px}
.gallery img{width:100%;margin:0 0 16px;border-radius:6px;break-inside:avoid;cursor:pointer;
  transition:transform .2s;filter:saturate(.94)}
.gallery img:hover{transform:scale(1.015)}
@media (max-width:900px){.gallery{columns:2}}
@media (max-width:560px){.gallery{columns:1}}
.lightbox{position:fixed;inset:0;background:rgba(60,30,22,.94);display:none;align-items:center;
  justify-content:center;z-index:100;padding:20px;cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:6px}
.lightbox .lb-close{position:absolute;top:18px;right:24px;color:#fff;font-size:2.2rem;background:none;
  border:0;cursor:pointer;line-height:1}

/* Partners --------------------------------------------------------------- */
.partners{border-top:1px solid rgba(255,255,255,.25);border-bottom:1px solid rgba(255,255,255,.25)}
.partners .names{display:flex;flex-wrap:wrap;gap:14px 34px;justify-content:center;align-items:center}
.partners .names span{font-family:var(--head);font-size:1.3rem;color:var(--cream)}

/* Terms page --------------------------------------------------------------
   Measured live on /terms-and-conditions at innerWidth 1368. The page is far
   plainer than our first build: white, one 1048px column, a small centred
   EB Garamond title at 22px with 100px of air under it, then a flat run of
   16px/24px Quicksand. Clause headings are bold paragraphs, not headings, and
   there are NO rules between clauses (the live page has zero <hr>). */
.terms-page{background:#fff;color:var(--ink-dark);padding:100px 0}
@media (max-width:767px){.terms-page{padding:40px 0}}
.terms-page .col{width:1160px;max-width:100%;margin:0 auto;padding:0 56px}
@media (max-width:1023px){.terms-page .col{padding:0 24px}}
.terms-title{font-family:var(--head);font-size:22px;font-weight:400;letter-spacing:2px;
  line-height:1.4;color:var(--ink-dark);text-align:center;margin:0 0 100px}
.terms-body p{font-family:var(--body);font-size:16px;font-weight:400;letter-spacing:normal;
  line-height:1.5;color:var(--ink-dark);margin:0}
.terms-body strong{font-weight:700}
.terms-body ul{list-style:disc;margin:16px 0;padding:0 0 0 40px}
.terms-body li{font-family:var(--body);font-size:16px;font-weight:400;line-height:1.5;
  color:var(--ink-dark);margin:0}

/* Contact page ------------------------------------------------------------
   Exact live spec, read off the saved /contact-us page's own stylesheet:
   section = white, padding 100px 0 (40px at <=767); container width steps
   984 -> 1160 -> 1280 with 24px padding (56px from 1024 up); H1 centred,
   EB Garamond 400, 2px tracking, line-height 1.4, #1B1B1B, font-size steps
   28 -> 30 -> 32 -> 36; gap below the H1 is 40px, 100px from 1024 up.
   The form itself keeps the live embed's own styling (820px, centred). */
.contact-page{background:#fff;color:var(--ink-dark);padding:100px 0}
@media (max-width:767px){.contact-page{padding:40px 0}}
.contact-page .col{width:1160px;max-width:100%;margin:0 auto;padding:0 24px}
@media (min-width:1024px){.contact-page .col{width:984px;padding:0 56px}}
@media (min-width:1280px){.contact-page .col{width:1160px}}
@media (min-width:1536px){.contact-page .col{width:1280px}}
.contact-title{font-family:var(--head);font-size:28px;font-weight:400;letter-spacing:2px;
  line-height:1.4;color:var(--ink-dark);text-align:center;margin:0 0 40px}
@media (min-width:768px){.contact-title{font-size:30px}}
@media (min-width:1024px){.contact-title{margin-bottom:100px}}
@media (min-width:1280px){.contact-title{font-size:32px}}
@media (min-width:1536px){.contact-title{font-size:36px}}

/* Footer — measured live at innerWidth 1368, and it is NOT the centred stack
   the earlier note described. It is full width with 56px side padding and
   56px top and bottom, in two rows:
     row 1  copyright hard LEFT (Quicksand 14px/21px), Instagram glyph hard
            RIGHT in a 40px box, the two vertically centred against each other
     row 2  "Terms and Conditions" + "Contact Us" side by side and centred
            (EB Garamond 16px / 2px tracking), 48px below row 1
   The links sit flush against each other; their own padding makes the gap. */
.site-footer{background:#fff;color:var(--ink-dark);padding:56px 0}
.site-footer .footer-row{display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:0 56px}
.site-footer .copy{font-family:var(--body);font-size:14px;font-weight:400;letter-spacing:normal;
  line-height:21px;color:var(--ink-dark);margin:0;text-align:left}
.site-footer .ig{display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:0 0 40px;line-height:0}
.site-footer .ig svg{width:23px;height:23px;display:block}
.site-footer .footer-links{display:flex;justify-content:center;margin-top:48px}
.site-footer .flink{font-family:var(--head);font-size:16px;font-weight:400;
  letter-spacing:2px;line-height:21px;color:var(--ink-dark);padding:8px 17px}
.site-footer .flink:hover{color:var(--clay)}
@media (max-width:760px){
  .site-footer .footer-row{padding:0 24px}
  .site-footer .footer-links{flex-wrap:wrap}
}