/* The Olive Board Company — brand site
   Palette: cream #F4F1EA, sage #6B7F6B (existing brand), bark #3A342B,
   walnut #7C5430, linen #EAE6DB, brass #A8894F (new supporting tones) */

@font-face{
  font-family:'Cormorant Garamond';
  src:url('fonts/CormorantGaramond.woff2') format('woff2-variations'),
      url('fonts/CormorantGaramond.woff2') format('woff2');
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  src:url('fonts/CormorantGaramond-Italic.woff2') format('woff2-variations'),
      url('fonts/CormorantGaramond-Italic.woff2') format('woff2');
  font-weight:300 700;
  font-style:italic;
  font-display:swap;
}

@font-face{
  font-family:'Callifornia';
  src:url('fonts/Callifornia.woff2') format('woff2'),
      url('fonts/Callifornia.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --cream:#F4F1EA;
  --linen:#EAE6DB;
  --sage:#6B7F6B;
  --sage-dark:#4E5E4E;
  --bark:#3A342B;
  --walnut:#7C5430;
  --brass:#A8894F;
  --max: 1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; font-size:19px;}
body{
  margin:0;
  background:var(--cream);
  color:var(--bark);
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Cormorant Garamond', serif;
  font-weight:600;
  line-height:1.12;
  margin:0 0 0.4em;
  letter-spacing:0.005em;
  color:var(--bark);
}
h1{font-size:clamp(2.8rem, 5.6vw, 4.4rem); font-weight:600;}
h2{font-size:clamp(2rem, 3.6vw, 2.7rem);}
h3{font-size:1.5rem; font-weight:600;}

/* the flowing signature-script accent (used sparingly, e.g. the logo's "company" wordmark) */
.script{
  font-family:'Callifornia', cursive;
  font-weight:400;
}

p{margin:0 0 1em; max-width:62ch;}
a{color:inherit;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}

/* ---------- Header ---------- */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
  max-width:var(--max); margin:0 auto;
}
.site-header .btn{white-space:nowrap; flex-shrink:0; padding:11px 20px; font-size:0.95rem;}
.site-header .logo{flex-shrink:0;}
.site-header nav.primary{flex-shrink:1; min-width:0;}
.logo{
  display:flex; flex-direction:column; line-height:1; text-decoration:none;
}
.logo img.logo-mark{
  height:70px; width:auto; display:block;
}
.logo .mark{
  font-family:'Cormorant Garamond', serif; font-weight:600; font-size:1.15rem;
  letter-spacing:0.14em; color:var(--bark);
}
.logo .sub{
  font-family:'Callifornia', cursive; font-size:1.3rem;
  color:var(--sage-dark); margin-top:-2px; letter-spacing:0.01em;
}

/* photo utility (replaces flat CSS wood-grain where we have real photography) */
.photo{
  background-size:cover; background-position:center;
}
.photo.tree-board{background-image:url('images/tree-board.jpg');}
.photo.giftwrap{background-image:url('images/giftwrap.jpg');}
.photo.olive-grain{background-image:url('images/olive-grain.jpg');}
.photo.forever-collection{background-image:url('images/forever-collection-personalised-wedding-board.jpg');}
.photo.gather-collection{background-image:url('images/gather-collection-personalised-cheeseboard.jpg');}
.photo.welcome-collection{background-image:url('images/welcome-collection-housewarming-board.jpg');}
.photo.natural-collection{background-image:url('images/natural-collection-unpersonalised-olive-wood-board.jpg');}
.photo.cocktail-collection{background-image:url('images/cocktail-collection-personalised-bar-board.jpg'); background-position:center 75%;}
.photo.board-care{background-image:url('images/olive-wood-board-care-guide.jpg');}
.photo.gifting-christmas{background-image:url('images/gifting-christmas-birthday-cheeseboard.jpg');}
.photo.gifting-anniversary{background-image:url('images/gifting-anniversary-personalised-board.jpg');}
.brand-graphic{width:100%; height:auto; display:block; border-radius:2px;}
nav.primary{display:flex; align-items:center; gap:30px;}
nav.primary a{
  text-decoration:none; font-size:0.92rem; font-weight:500; color:var(--bark);
  padding-bottom:3px; border-bottom:1px solid transparent;
  margin-right:13px; white-space:nowrap;
  transition:border-color .15s ease;
}
nav.primary a:last-child{margin-right:0;}
nav.primary a:hover, nav.primary a[aria-current="page"]{border-color:var(--sage);}
.btn{
  display:inline-block; text-decoration:none;
  background:var(--sage); color:var(--cream);
  padding:11px 24px; border-radius:2px;
  font-size:1.02rem; font-weight:600; letter-spacing:0.015em;
  border:1px solid var(--sage);
  transition:background .15s ease, color .15s ease;
}
.btn:hover{background:var(--sage-dark); border-color:var(--sage-dark);}
.btn.outline{
  background:transparent; color:var(--bark); border:1px solid var(--bark);
}
.btn.outline:hover{background:var(--bark); color:var(--cream);}
.nav-toggle{display:none;}

/* ---------- hairline divider with brass tick ---------- */
.divider{
  max-width:var(--max); margin:0 auto; padding:0 32px;
}
.divider .line{
  height:1px; background:var(--brass); opacity:0.45; position:relative;
}

/* ---------- Hero ---------- */
.hero{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:0;
  align-items:stretch; min-height:520px;
  border-top:1px solid rgba(58,52,43,0.12);
}
.hero-copy{
  padding:70px 32px 70px 32px; display:flex; flex-direction:column;
  justify-content:center; max-width:560px; margin:0 auto 0 auto;
}
.hero-copy .eyebrow-mark{
  width:34px; height:34px; margin-bottom:22px;
}
.lede{font-size:1.12rem; color:var(--bark); max-width:60ch;}
.hero-copy p.lede{max-width:44ch;}
.hero-actions{display:flex; gap:16px; margin-top:14px; flex-wrap:wrap;}
.hero-art{
  position:relative; overflow:hidden;
}
.hero-art svg{position:absolute; inset:0; width:100%; height:100%;}

/* wood-grain texture block, reusable */
.grain{
  position:relative;
  background:
    linear-gradient(115deg, #6d5232 0%, #8a6a41 20%, #6f5636 38%, #967750 55%, #614a2d 72%, #8f7048 88%, #6a5233 100%);
}
.grain.light{
  background:
    linear-gradient(115deg, #cdbfa0 0%, #ddd0b3 22%, #d3c4a2 40%, #e6d9bb 58%, #cabd9d 74%, #ddd0b0 90%, #cabd9c 100%);
}

/* ---------- sections ---------- */
section{padding:88px 0;}
section.tight{padding:56px 0;}
.section-head{max-width:640px; margin-bottom:44px;}
.section-head p{color:var(--bark);}

/* Three-up values row (not numbered — not a sequence) */
.values{
  display:grid; grid-template-columns:repeat(3,1fr); gap:48px;
}
.values-2col{grid-template-columns:repeat(2,1fr);}
.values .value h3{margin-bottom:10px;}
.values .value .icon{width:30px; height:30px; margin-bottom:16px; color:var(--sage);}

/* Featured collections — asymmetric, not identical cards */
.collections{
  display:grid; grid-template-columns:repeat(5,1fr); gap:18px;
}
.collection{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:340px; padding:24px; text-decoration:none; color:var(--cream);
  border-radius:2px; overflow:hidden;
}
.collection::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(30,26,20,0.72) 0%, rgba(30,26,20,0.12) 55%, rgba(30,26,20,0.02) 100%);
}
.collection h3, .collection span{position:relative; z-index:2;}
.collection h3{color:var(--cream); margin-bottom:6px;}
.collection span{
  font-size:0.88rem; letter-spacing:0.02em; opacity:0.92;
  display:inline-flex; align-items:center; gap:6px;
}

/* Story split */
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
.split .art{min-height:400px; border-radius:2px;}
.split.reverse{grid-template-columns:1fr 1fr;}
.split.reverse .art{order:2;}
.split.reverse .copy{order:1;}

/* compact 2-up point list, used beside a tall image */
.mini-points{
  display:grid; grid-template-columns:1fr 1fr; gap:20px 24px;
  margin:22px 0 26px; padding-top:22px; border-top:1px solid rgba(58,52,43,0.14);
}
.mini-point{display:flex; gap:12px; align-items:flex-start;}
.mini-icon{width:30px; height:30px; flex-shrink:0; margin-top:2px;}
.mini-point h4{
  font-family:'Cormorant Garamond', serif; font-weight:600; font-size:1.05rem;
  margin:0 0 4px; color:var(--bark);
}
.mini-point p{font-size:0.92rem; margin:0; max-width:30ch;}
.steps{counter-reset:s; display:flex; flex-direction:column; gap:0;}
.step{
  display:grid; grid-template-columns:64px 1fr; gap:24px;
  padding:26px 0; border-top:1px solid rgba(58,52,43,0.14);
}
.step:last-child{border-bottom:1px solid rgba(58,52,43,0.14);}
.step .num{
  font-family:'Cormorant Garamond', serif; font-size:1.6rem; color:var(--brass);
}

/* faq */
details{
  border-top:1px solid rgba(58,52,43,0.14); padding:20px 0;
}
details:last-of-type{border-bottom:1px solid rgba(58,52,43,0.14);}
summary{
  cursor:pointer; font-family:'Cormorant Garamond', serif; font-size:1.08rem;
  list-style:none; display:flex; justify-content:space-between; align-items:center;
}
summary::-webkit-details-marker{display:none;}
summary .plus{font-size:1.4rem; color:var(--sage); transition:transform .15s ease;}
details[open] summary .plus{transform:rotate(45deg);}
details p{margin-top:14px; color:var(--bark);}

/* gifting occasion list */
.occasions{display:flex; flex-direction:column;}
.occasion{
  display:grid; grid-template-columns:1fr 1.4fr; gap:40px;
  padding:40px 0; border-top:1px solid rgba(58,52,43,0.14);
  align-items:center;
}
.occasion:last-child{border-bottom:1px solid rgba(58,52,43,0.14);}
.occasion .art{min-height:220px; border-radius:2px;}
.occasion:nth-child(even) .art{order:2;}
.occasion:nth-child(even) .copy{order:1;}

/* social strip */
.follow{
  background:var(--sage); color:var(--cream); padding:64px 0; text-align:left;
}
.follow h2{color:var(--cream);}
.follow p{color:#DDE4DA;}
.follow .btn{background:var(--cream); color:var(--sage-dark); border-color:var(--cream);}
.follow .btn:hover{background:transparent; color:var(--cream);}
.follow-row{display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;}

/* contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
.contact-card{
  background:var(--linen); padding:34px; border-radius:2px;
}
.contact-card h3{margin-bottom:14px;}
.contact-card a.btn{margin-top:10px;}

/* blog */
.post-list{display:flex; flex-direction:column;}
.post-card{
  display:grid; grid-template-columns:220px 1fr; gap:28px;
  padding:28px 0; border-top:1px solid rgba(58,52,43,0.14);
  text-decoration:none; color:inherit; align-items:center;
}
.post-list .post-card:last-child{border-bottom:1px solid rgba(58,52,43,0.14);}
.post-card-art{min-height:150px; border-radius:2px;}
.post-date{font-size:0.85rem; color:var(--brass); text-transform:uppercase; letter-spacing:0.06em;}
.post-card h3{margin:6px 0 8px;}
.post-card p{margin:0 0 8px; font-size:0.96rem;}
.post-readmore{font-size:0.9rem; color:var(--sage-dark); text-decoration:underline;}

/* reviews */
.review-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.review-card{
  background:var(--linen); padding:28px; border-radius:2px;
}
.review-card.placeholder{border:1px dashed var(--brass); background:transparent;}
.review-stars{color:var(--brass); letter-spacing:2px; margin:0 0 10px; font-size:0.95rem; max-width:none;}
.review-quote{font-style:italic; margin-bottom:10px;}
.review-author{font-size:0.9rem; color:var(--bark); margin:0;}

/* shared small-print / aside text */
.note{font-size:0.95rem; color:var(--bark); max-width:60ch;}

/* footer brand column */
.footer-tagline{margin-top:14px; color:var(--bark); max-width:34ch;}
footer .script{font-size:1.7rem; color:var(--sage-dark); margin-top:2px;}
/* cookie consent banner */
#cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:999;
  background:var(--bark); color:var(--cream);
  padding:18px 24px;
}
.cookie-banner-inner{
  max-width:var(--max); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  flex-wrap:wrap;
}
.cookie-banner-inner p{
  margin:0; font-size:0.98rem; color:var(--cream); max-width:70ch;
}
.cookie-banner-inner a{color:var(--cream); text-decoration:underline;}
.cookie-banner-actions{display:flex; gap:12px; flex-shrink:0;}
.cookie-banner-actions .btn{padding:10px 20px; font-size:0.92rem;}
.cookie-banner-actions .btn.outline{
  color:var(--cream); border-color:var(--cream); background:transparent;
}
.cookie-banner-actions .btn.outline:hover{background:rgba(244,241,234,0.12);}
@media (max-width: 700px){
  .cookie-banner-inner{flex-direction:column; align-items:flex-start;}
}

footer{
  border-top:1px solid rgba(58,52,43,0.14); padding:52px 0 40px;
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px;
}
footer h4{
  font-family:'Cormorant Garamond', serif; font-size:0.85rem; letter-spacing:0.04em;
  color:var(--sage-dark); margin:0 0 14px;
}
footer ul{list-style:none; margin:0; padding:0;}
footer li{margin-bottom:9px;}
footer a{text-decoration:none; font-size:0.94rem;}
footer a:hover{color:var(--sage-dark);}
.footer-bottom{
  margin-top:44px; padding-top:22px; border-top:1px solid rgba(58,52,43,0.14);
  display:flex; justify-content:space-between; font-size:0.85rem; color:var(--bark);
  flex-wrap:wrap; gap:10px;
}

/* page intro (non-home pages) */
.page-intro{padding:60px 0 20px;}
.page-intro .kicker{
  font-family:'Callifornia', cursive; color:var(--sage-dark); font-size:2.1rem; margin-bottom:4px; display:block;
}

/* responsive */
@media (max-width: 1090px){
  nav.primary{display:none;}
}

@media (max-width: 880px){
  .hero{grid-template-columns:1fr;}
  .hero-art{min-height:320px; order:-1;}
  .values{grid-template-columns:1fr; gap:34px;}
  .collections{grid-template-columns:1fr;}
  .collection, .collection:nth-child(1){min-height:300px;}
  .split, .split.reverse{grid-template-columns:1fr;}
  .split .art, .split.reverse .art{order:-1; min-height:260px;}
  .occasion, .occasion:nth-child(even){grid-template-columns:1fr;}
  .occasion:nth-child(even) .art{order:-1;}
  .occasion .art{min-height:220px;}
  .contact-grid{grid-template-columns:1fr;}
  .post-card{grid-template-columns:1fr;}
  .review-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr; row-gap:30px;}
  .site-header{padding:22px 20px;}
  .wrap, .divider{padding:0 20px;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}