/* ==========================================================================
   LOUIE'S — shared stylesheet
   Edit colors here and both pages change.
   ========================================================================== */

:root{
  /* ── Refined palette ──────────────────────────────── */
  --tomato:#E95B32;        /* Pantone 172 C */
  --tomato-ink:#C13B15;    /* darkened tomato — safe for small text & buttons */
  --saffron:#F2C14E;       /* Pantone 123 C — decorative only, never text on cream */
  --herb:#6F7F45;          /* Pantone 575 C */
  --herb-ink:#62703D;      /* darkened herb — safe for small text & buttons */
  --sea:#5299AE;           /* Pantone 2220 C */
  --deep:#003949;          /* Pantone 309 C — the only ink that passes on cream */
  --cream:#F5EBDD;         /* Pantone 7506 C */
  --cream-hi:#FBF5EC;
  --cream-soft:rgba(245,235,221,.88);
  --rule:rgba(0,57,73,.14);

  --display:'Fraunces', Georgia, 'Times New Roman', serif;
  --body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --shell:1160px;
  --gutter:clamp(18px, 5vw, 40px);
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--cream);
  color:var(--deep);
  font-family:var(--body);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block;}
a{color:inherit;}

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

:focus-visible{
  outline:3px solid var(--tomato-ink);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute; left:-9999px;
  background:var(--deep); color:var(--cream-hi);
  padding:12px 20px; border-radius:0 0 6px 0; z-index:50;
}
.skip:focus{left:0; top:0;}

/* ---------------- wordmark ---------------- */
.wordmark{
  font-family:var(--display);
  font-weight:900;
  font-variation-settings:'opsz' 144;
  letter-spacing:.02em;
  line-height:.9;
  color:var(--herb);
  display:inline-block;
  text-decoration:none;
}
.wordmark .tag{
  display:block;
  font-family:var(--body);
  font-weight:700;
  font-size:.30em;
  letter-spacing:.20em;
  color:var(--tomato-ink);
  margin-top:.34em;
}
.wordmark--rev{color:var(--cream-hi);}
.wordmark--rev .tag{color:var(--saffron);}

/* ---------------- header ---------------- */
.masthead{
  background:var(--cream);
  border-bottom:1px solid var(--rule);
  position:sticky;
  top:0;
  z-index:20;
}
.masthead__in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-block:16px;
}
.masthead .wordmark{font-size:30px;}
.masthead__nav{
  display:flex;
  align-items:center;
  gap:clamp(16px,3vw,32px);
}
.navlink{
  font-size:13px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--deep);
  white-space:nowrap;
}
.navlink:hover{color:var(--tomato-ink);}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--body);
  font-weight:600;
  font-size:14px;
  letter-spacing:.07em;
  text-transform:uppercase;
  text-decoration:none;
  border:0;
  border-radius:999px;
  padding:13px 24px;
  cursor:pointer;
  transition:background-color .16s ease, color .16s ease;
  white-space:nowrap;
}
.btn--solid{background:var(--tomato-ink); color:var(--cream-hi);}
.btn--solid:hover{background:#A22F0F;}
.btn--herb{background:var(--herb-ink); color:var(--cream-hi);}
.btn--herb:hover{background:#4F5B31;}
.btn--ghost{background:transparent; color:var(--deep); box-shadow:inset 0 0 0 1.5px var(--deep);}
.btn--ghost:hover{background:var(--deep); color:var(--cream-hi);}
.btn--rev{background:var(--cream-hi); color:var(--deep);}
.btn--rev:hover{background:#fff;}
.btn svg{flex:none;}

@media (max-width:560px){
  .masthead .wordmark{font-size:23px;}
  .masthead__in .btn{padding:11px 16px; font-size:12px;}
  .masthead__nav .navlink{display:none;}
}

/* ---------------- waves ---------------- */
.wave{display:block; width:100%; height:clamp(28px,4.5vw,54px);}
.wave path{fill:currentColor;}

/* ---------------- hero ---------------- */
.hero{background:var(--cream); padding-block:clamp(48px,8vw,90px) clamp(40px,6vw,72px);}
.hero__in{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,5vw,64px);
  align-items:center;
}
.eyebrow{
  font-size:12px;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--herb-ink);
  margin:0 0 18px;
}
.hero h1{
  font-family:var(--display);
  font-weight:900;
  font-variation-settings:'opsz' 144;
  /* Sized so the longest word — MEDITERRANEAN — fits its column without
     running under the photo. Raise this and it will overlap again. */
  font-size:clamp(34px,5.6vw,64px);
  line-height:.9;
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin:0 0 22px;
  text-wrap:balance;
}
.hero__in > *{min-width:0;}
.hero h1 .l1{color:var(--tomato-ink); display:block;}
.hero h1 .l2{color:var(--herb); display:block;}
.hero__lede{font-size:clamp(18px,2.2vw,21px); line-height:1.45; max-width:27ch; margin:0 0 30px;}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px;}
.hero__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px;
  margin-top:26px; font-size:14px; color:var(--herb-ink);
  font-weight:600; letter-spacing:.05em; text-transform:uppercase;
}
.dot{width:5px; height:5px; border-radius:50%; background:var(--tomato); flex:none;}

/* ---------------- image slots ----------------
   Drop a real photo in by replacing the .plate / .frame__img div
   with:  <img src="images/your-file.jpg" alt="Describe the photo">
   -------------------------------------------- */
.plate{
  position:relative;
  aspect-ratio:1/1;
  border-radius:50%;
  overflow:hidden;
  background:
    radial-gradient(circle at 34% 30%, rgba(242,193,78,.55), transparent 55%),
    radial-gradient(circle at 70% 68%, rgba(233,91,50,.38), transparent 52%),
    linear-gradient(150deg,#ECE2D0,#DED3BE);
  box-shadow:0 22px 50px rgba(0,57,73,.16);
  display:grid;
  place-items:center;
}
.plate::after{
  content:""; position:absolute; inset:7%;
  border-radius:50%; border:1px solid rgba(0,57,73,.12);
}
.slot-note{
  font-size:11px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(0,57,73,.45);
  text-align:center; padding:0 24px; line-height:1.7;
}

/* ---------------- tomato band ----------------
   Cream on Tomato measures 2.96:1 and fails. Deep Water on Tomato is
   3.57:1, which passes for LARGE text only — so everything here is set
   large on purpose. Don't add small copy to this band.
   -------------------------------------------- */
.band-tomato{background:var(--tomato); color:var(--deep);}
.band-tomato .shell{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(20px,4vw,48px); padding-block:clamp(34px,5vw,52px);
}
.band-tomato h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(28px,4.2vw,40px); line-height:1.08;
  margin:0; flex:1 1 320px; text-wrap:balance;
}
.band-tomato p{
  font-family:var(--display); font-style:italic; font-weight:600;
  font-size:clamp(19px,2.1vw,22px); line-height:1.4;
  margin:0; flex:1 1 280px; max-width:32ch;
  padding-left:clamp(20px,3vw,40px);
  border-left:2px solid var(--saffron);
}

/* ---------------- sections ---------------- */
.sect{padding-block:clamp(56px,8vw,96px);}
.sect--alt{background:var(--cream-hi); border-block:1px solid var(--rule);}
.sect__head{max-width:56ch; margin-bottom:clamp(30px,4vw,48px);}
.sect h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(30px,4.6vw,44px); line-height:1.06;
  margin:0 0 14px; color:var(--deep); text-wrap:balance;
}
.sect__head p{margin:0; color:rgba(0,57,73,.78); max-width:52ch;}

/* ---------------- build line ---------------- */
.line{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}
.step{background:var(--cream); padding:26px 22px 28px; display:flex; flex-direction:column; gap:10px;}
.sect--alt .step{background:var(--cream-hi);}
.step__n{
  font-family:var(--display); font-weight:900;
  font-variation-settings:'opsz' 144;
  font-size:15px; color:var(--tomato-ink); letter-spacing:.06em;
}
.step__t{font-family:var(--display); font-weight:600; font-size:21px; line-height:1.1; color:var(--deep); margin:0;}
.step__d{font-size:14.5px; line-height:1.5; color:rgba(0,57,73,.75); margin:0;}
.step__d b{color:var(--herb-ink); font-weight:600;}

/* ---------------- bowls ---------------- */
.bowls{display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:clamp(18px,2.4vw,26px);}
.bowl{
  background:var(--cream-hi);
  border:1px solid var(--rule);
  border-top:3px solid var(--herb);
  padding:26px 24px 28px;
  display:flex; flex-direction:column; gap:12px;
}
.bowl h3{font-family:var(--display); font-style:italic; font-weight:600; font-size:27px; line-height:1; color:var(--herb-ink); margin:0;}
.bowl__vibe{font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--tomato-ink); margin:0;}
.bowl ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; font-size:14.5px; line-height:1.4; color:rgba(0,57,73,.82);}
.bowl li{position:relative; padding-left:15px;}
.bowl li::before{content:""; position:absolute; left:0; top:.55em; width:5px; height:5px; border-radius:50%; background:var(--saffron);}
.bowl li b{color:var(--deep); font-weight:600;}
.vg{
  display:inline-block; font-size:9.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--herb-ink); border:1px solid var(--herb);
  border-radius:999px; padding:2px 7px; margin-left:6px; vertical-align:1px;
}

/* ---------------- deep band ---------------- */
.band-deep{background:var(--deep); color:var(--cream-hi);}
.band-deep .shell{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,5vw,60px); align-items:center;
  padding-block:clamp(52px,7vw,84px);
}
.band-deep .eyebrow{color:var(--saffron);}
.band-deep h2{font-family:var(--display); font-weight:600; font-size:clamp(30px,4.6vw,44px); line-height:1.06; margin:0 0 18px; text-wrap:balance;}
.band-deep p{margin:0 0 14px; max-width:50ch; color:var(--cream-soft);}
/* Heritage tagline — reserved for heritage-forward contexts only */
.heritage{
  font-family:var(--display);
  font-style:italic;
  font-weight:600;
  font-size:clamp(20px,2.4vw,25px);
  color:var(--saffron)!important;
  margin-top:26px!important;
  margin-bottom:0!important;
}
.frame{background:var(--cream-hi); padding:14px 14px 46px; box-shadow:0 18px 40px rgba(0,0,0,.28); transform:rotate(-1.6deg);}
.frame__img{aspect-ratio:4/3; background:linear-gradient(160deg,#CBC3B2,#ABA495); display:grid; place-items:center;}
.frame__cap{font-family:var(--display); font-style:italic; font-size:13.5px; color:rgba(0,57,73,.72); text-align:center; margin-top:14px;}

/* ---------------- signup ---------------- */
.signup{background:var(--cream); padding-block:clamp(54px,7vw,88px);}
.signup__in{max-width:640px; margin-inline:auto; text-align:center;}
.signup h2{
  font-family:var(--display); font-weight:900;
  font-variation-settings:'opsz' 144;
  font-size:clamp(32px,5.2vw,50px); line-height:1;
  text-transform:uppercase; color:var(--herb); margin:0 0 16px; text-wrap:balance;
}
.signup p{margin:0 auto 28px; max-width:44ch; color:rgba(0,57,73,.8);}
.form{display:flex; flex-wrap:wrap; gap:10px; justify-content:center;}
.form input[type=email]{
  flex:1 1 280px; min-width:0;
  font-family:var(--body); font-size:16px; color:var(--deep);
  background:var(--cream-hi);
  border:1.5px solid rgba(0,57,73,.3);
  border-radius:999px; padding:13px 22px;
}
.form input[type=email]::placeholder{color:rgba(0,57,73,.45);}
.form input[type=email]:focus{border-color:var(--herb-ink);}
.form__note{font-size:13px; color:rgba(0,57,73,.62); margin-top:16px;}
.hp{position:absolute; left:-9999px;}

/* ---------------- roles ---------------- */
.hiring .shell{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,56px); align-items:center;}
.roles{display:flex; flex-direction:column; border-top:1px solid var(--rule);}
.role{display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding:15px 0; border-bottom:1px solid var(--rule);}
.role__t{font-family:var(--display); font-weight:600; font-size:20px; color:var(--deep);}
.role__m{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--herb-ink); white-space:nowrap;}

/* role cards (careers page) */
.jobs{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:clamp(18px,2.4vw,26px);}
.job{
  background:var(--cream-hi); border:1px solid var(--rule);
  border-top:3px solid var(--tomato);
  padding:28px 26px 30px; display:flex; flex-direction:column; gap:14px;
}
.job h3{font-family:var(--display); font-weight:600; font-size:25px; line-height:1.05; color:var(--deep); margin:0;}
.job__meta{display:flex; flex-wrap:wrap; gap:8px;}
.chip{
  font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--herb-ink); background:rgba(111,127,69,.12);
  border-radius:999px; padding:5px 11px;
}
.job p{margin:0; font-size:15.5px; line-height:1.55; color:rgba(0,57,73,.82);}
.job ul{margin:0; padding-left:18px; font-size:15px; line-height:1.55; color:rgba(0,57,73,.82); display:flex; flex-direction:column; gap:6px;}
.job ul li::marker{color:var(--tomato);}

/* ---------------- footer ---------------- */
.foot{background:var(--deep); color:var(--cream-hi);}
.foot .shell{padding-block:clamp(44px,6vw,66px) 34px;}
.foot__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:clamp(26px,4vw,44px); align-items:start;}
.foot .wordmark{font-size:34px;}
.foot h3{font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--saffron); margin:0 0 12px;}
.foot p, .foot a{margin:0 0 7px; font-size:15px; color:var(--cream-soft); text-decoration:none; display:block;}
.foot a:hover{color:#fff; text-decoration:underline;}
.foot__base{
  margin-top:clamp(32px,5vw,50px); padding-top:22px;
  border-top:1px solid rgba(245,235,221,.22);
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
  font-size:13px; color:rgba(245,235,221,.66);
}

/* ---------------- responsive ---------------- */
@media (max-width:860px){
  .hero__in{grid-template-columns:1fr;}
  .hero__art{order:-1; max-width:340px; margin-inline:auto; width:100%;}
  .band-deep .shell{grid-template-columns:1fr;}
  .hiring .shell{grid-template-columns:1fr;}
  .band-tomato p{border-left:0; padding-left:0; border-top:2px solid var(--saffron); padding-top:18px;}
}

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