/* dealhedges.co.uk — Deal, Kent. Coastal Georgian palette. EB Garamond + IBM Plex Sans. */
:root {
  /* Deal identity — mandatory */
  --bg: #efe7d8;            /* linen */
  --surface: #f6efe1;       /* warm cream */
  --text: #1f2a25;          /* deep */
  --text-soft: #3d556b;     /* slate-blue (Channel) */
  --accent: #a44a33;        /* deep terracotta (pantile) */
  --accent-alt: #2d3d2b;    /* forest */
  --border: #d9cfb9;

  /* Legacy-compat aliases so HTML written by other agents still renders */
  --paper: #faf5e8;
  --chalk: #f4ebd7;
  --ink: #1f2a25;
  --ink-soft: #3d556b;
  --moss-deep: #2d3d2b;
  --moss: #3a4f38;
  --moss-bright: #4a6448;
  --yew: #2d3d2b;
  --rust: #a44a33;
  --rust-deep: #7f3826;
  --gold: #c79742;          /* Georgian gilt */
  --stone: #c9b896;
  --stone-light: #e8ddc2;
  --cream: #f6efe1;
  --rule: #d9cfb9;
  --rule-dark: #b8ac91;

  --shadow: 0 1px 3px rgba(20, 20, 15, 0.06), 0 2px 8px rgba(20, 20, 15, 0.04);
  --shadow-lg: 0 4px 16px rgba(20, 20, 15, 0.08), 0 12px 32px rgba(20, 20, 15, 0.06);
  --max: 1100px;
  --content: 720px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .serif {
  font-family: 'EB Garamond', 'Times New Roman', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--moss-deep);
}
h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); margin: 0 0 0.5em; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.4rem); margin: 1.8em 0 0.6em; }
h3 { font-size: 1.35rem; margin: 1.4em 0 0.4em; }
p { margin: 0 0 1.1em; }

a { color: var(--moss); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--rust); }

.container { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; }
.prose { max-width: var(--content); margin: 0 auto; padding: 0 1.5rem; }

/* Topbar */
.topbar {
  background: var(--moss-deep);
  color: var(--cream);
  font-size: 0.875rem;
  padding: 0.5rem 0;
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.topbar a { color: var(--stone); text-decoration: none; }
.topbar a:hover { color: var(--chalk); }

/* Header */
header.site {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 1.1rem 0;
  position: sticky; top: 0; z-index: 50;
  box-shadow: var(--shadow);
}
header.site .container { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { font-family: 'EB Garamond', serif; font-size: 1.65rem; font-weight: 600; color: var(--moss-deep); text-decoration: none; line-height: 1; }
.brand .ampersand { color: var(--rust); font-style: italic; padding: 0 0.1em; }
.brand small { display: block; font-family: 'IBM Plex Sans', sans-serif; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-top: 0.2rem; }
nav.primary ul { display: flex; gap: 1.8rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
nav.primary a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.95rem; position: relative; padding: 0.25rem 0; }
nav.primary a:hover { color: var(--moss); }
nav.primary a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -0.4rem; height: 2px; background: var(--rust); }

/* Hero — coastal Georgian: forest into slate-blue with a shingle-line silhouette */
.hero {
  background:
    linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.20) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='120' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120 L0 92 Q30 84 60 88 Q90 92 120 82 Q150 72 180 84 Q210 96 240 80 Q270 64 300 78 Q330 92 360 76 Q390 60 420 74 Q450 88 480 72 Q510 56 540 70 Q570 84 600 68 Q630 52 660 66 Q690 80 720 64 Q750 48 780 62 Q810 76 840 60 Q870 44 900 58 Q930 72 960 56 Q990 40 1020 54 Q1050 68 1080 52 Q1110 36 1140 50 Q1170 64 1200 48 L1200 120 Z' fill='%23000' opacity='0.22'/%3E%3C/svg%3E") bottom/100% 120px no-repeat,
    linear-gradient(160deg, var(--moss-deep) 0%, #33463c 55%, #3d556b 100%);
  color: var(--paper);
  padding: 5rem 0 5rem;
  position: relative;
  overflow: hidden;
}
.hero::before {
  /* Cinque Ports gilt motif at low opacity — Georgian gate-fanlight feel */
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cpath d='M70 22 C64 34 58 40 50 42 C58 46 62 54 62 62 C62 54 68 46 70 42 C72 46 78 54 78 62 C78 54 82 46 90 42 C82 40 76 34 70 22 Z M70 70 L70 108 M56 108 L84 108 M60 118 L80 118' fill='none' stroke='%23c79742' stroke-width='0.7' opacity='0.08'/%3E%3C/svg%3E");
  background-size: 220px;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute; right: -100px; bottom: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle at center, rgba(199,151,66,0.14) 0%, transparent 60%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero h1 { max-width: 720px; color: var(--paper); }
.hero .lede { font-size: 1.2rem; max-width: 600px; color: rgba(255,255,255,0.85); margin-bottom: 2rem; }
.hero .section-eyebrow { color: var(--gold); }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Inverted hero variant for inner pages — lighter */
.hero.hero-light {
  background: linear-gradient(180deg, var(--chalk) 0%, var(--paper) 100%);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: 3.5rem 0 2.5rem;
}
.hero.hero-light::after { display: none; }
.hero.hero-light::before { opacity: 0.05; }
.hero.hero-light h1 { color: var(--moss-deep); }
.hero.hero-light .lede { color: var(--ink-soft); }
.hero.hero-light .section-eyebrow { color: var(--rust); }

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.95rem 1.8rem;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 2px;
  transition: all 0.15s ease;
  border: 2px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--rust); color: var(--paper); border-color: var(--rust); }
.btn-primary:hover { background: var(--rust-deep); border-color: var(--rust-deep); color: var(--paper); }
.btn-ghost { background: transparent; color: var(--paper); border-color: var(--paper); }
.btn-ghost:hover { background: var(--paper); color: var(--moss-deep); }
.hero-light .btn-ghost, section:not(.hero) .btn-ghost { color: var(--moss-deep); border-color: var(--moss-deep); }
.hero-light .btn-ghost:hover, section:not(.hero) .btn-ghost:hover { background: var(--moss-deep); color: var(--paper); }

/* Sections */
section { padding: 4rem 0; background: var(--paper); }
section.tight { padding: 2rem 0; }
section.alt { background: var(--chalk); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.section-eyebrow { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--rust); margin: 0 0 0.5em; }

/* Grids */
.grid { display: grid; gap: 1.6rem; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
  .grid-4 .card { padding: 1.4rem; }
}

/* Cards */
.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 1.8rem;
  border-radius: 3px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  box-shadow: var(--shadow);
}
section.alt .card { background: var(--paper); border-color: var(--rule-dark); }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--moss-bright); }
.card h3 { margin-top: 0; }
.card a.card-link { color: var(--moss-deep); text-decoration: none; }
.card a.card-link:hover { color: var(--rust); }
.card .more { display: inline-block; margin-top: 0.5rem; font-size: 0.9rem; font-weight: 600; color: var(--rust); text-decoration: none; }
.card .more::after { content: ' →'; }

/* Guarantees strip */
.guarantees {
  background: linear-gradient(180deg, var(--paper) 0%, var(--chalk) 100%);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.guarantees .grid { gap: 1.4rem; }
.guarantees .promise {
  background: var(--paper); border: 1px solid var(--rule);
  padding: 1.6rem; border-radius: 3px;
  border-left: 3px solid var(--rust);
  box-shadow: var(--shadow);
  position: relative;
}
.guarantees .promise h3 {
  margin: 0 0 0.5em; font-size: 1.15rem; color: var(--moss-deep);
  font-family: 'EB Garamond', serif; font-weight: 600;
}
.guarantees .promise p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); line-height: 1.55; }
.guarantees .promise .icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--moss-deep); color: var(--gold);
  font-family: 'EB Garamond', serif; font-weight: 600;
  margin-bottom: 0.8rem; font-size: 1.15rem;
}
.guarantee-pill {
  display: inline-block; background: var(--moss-deep); color: var(--gold);
  padding: 0.35rem 0.85rem; border-radius: 999px;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em;
  margin: 0.5rem 0.5rem 0 0;
}

/* Featured panel */
.panel {
  background: var(--moss-deep);
  color: var(--paper);
  padding: 2.5rem;
  border-radius: 3px;
  position: relative;
  box-shadow: var(--shadow-lg);
}
.panel h2 { color: var(--paper); margin-top: 0; }
.panel .lede { color: rgba(255,255,255,0.85); }
.panel a { color: var(--gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; font-weight: 600; }
.panel a:hover { color: var(--paper); }

/* Footer */
footer.site {
  background: var(--moss-deep);
  color: var(--stone-light);
  padding: 3rem 0 2rem;
  margin-top: 4rem;
}
footer.site h4 { color: var(--cream); font-size: 1rem; margin: 0 0 0.8em; font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin: 0.4rem 0; }
footer.site a { color: var(--stone-light); text-decoration: none; font-size: 0.95rem; }
footer.site a:hover { color: var(--cream); }
.foot-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.foot-bottom {
  border-top: 1px solid rgba(212, 196, 168, 0.2);
  margin-top: 2.5rem; padding-top: 1.5rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: 0.85rem; color: var(--stone);
}

/* Article */
article.guide { padding: 3rem 0; }
article.guide .meta { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: 0.1em; }
article.guide .meta a { color: var(--moss); }
article.guide blockquote {
  border-left: 3px solid var(--rust);
  margin: 1.8em 0; padding: 0.5em 0 0.5em 1.5em;
  font-style: italic; color: var(--ink-soft);
  font-family: 'EB Garamond', serif; font-size: 1.2rem; line-height: 1.5;
}
article.guide ul, article.guide ol { margin: 0 0 1.2em; padding-left: 1.5em; }
article.guide li { margin: 0.4em 0; }
article.guide .callout {
  background: var(--stone-light);
  border-left: 3px solid var(--gold);
  padding: 1.2rem 1.5rem;
  margin: 1.8em 0;
  border-radius: 0 2px 2px 0;
}
article.guide .callout h4 { margin-top: 0; color: var(--moss-deep); }

/* Jobs feed */
.job {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; align-items: start;
  padding: 1.5rem 0; border-bottom: 1px solid var(--rule);
}
.job:last-child { border-bottom: none; }
.job-date { font-family: 'EB Garamond', serif; font-size: 1.05rem; color: var(--rust); font-weight: 600; min-width: 95px; }
.job-where { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); margin-bottom: 0.3rem; }
.job h3 { margin: 0 0 0.4em; font-size: 1.15rem; }
.job p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }
.job .price { font-family: 'EB Garamond', serif; font-size: 1.3rem; color: var(--moss-deep); font-weight: 600; white-space: nowrap; }

/* Contact form */
.form-grid { display: grid; gap: 1.2rem; max-width: 560px; }
.form-row { display: grid; gap: 1.2rem; grid-template-columns: 1fr; margin-bottom: 1.2rem; }
@media (min-width: 540px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-field { margin-bottom: 1.2rem; }
label, legend { font-weight: 600; font-size: 0.9rem; display: block; margin-bottom: 0.4rem; color: var(--moss-deep); }
input, textarea, select {
  width: 100%; padding: 0.85rem 1rem;
  border: 1px solid var(--rule-dark); background: var(--paper);
  font-family: inherit; font-size: 1rem; color: var(--ink);
  border-radius: 2px;
  transition: border-color 0.15s ease;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--moss); outline-offset: -1px; border-color: var(--moss); }
textarea { min-height: 140px; resize: vertical; }

.form-radio-group { display: flex; gap: 1.5rem; }
.form-radio { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.form-radio input { width: auto; padding: 0; }

.form-alert {
  padding: 0.9rem 1.1rem;
  border-radius: 3px;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}
.form-alert--error { background: #fef0eb; border: 1px solid #f4c5b0; color: #8b3417; }
.form-alert--ok { background: #ecf3ed; border: 1px solid #bcd6c1; color: #1a4423; }

/* Utility */
.muted { color: var(--ink-soft); }
.center { text-align: center; }
.divider-rule { height: 1px; background: var(--rule); margin: 3rem 0; max-width: 80px; }
.divider-rule.center { margin-left: auto; margin-right: auto; }

@media (max-width: 700px) {
  nav.primary ul { gap: 1rem; font-size: 0.9rem; }
  header.site .container { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .hero { padding: 2.5rem 0 2rem; }
  .panel { padding: 2rem 1.5rem; }
  .job { grid-template-columns: 1fr; gap: 0.4rem; }
  .job-date { font-size: 0.95rem; }
}

/* WhatsApp button + QR */
.wa-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: #25d366; color: #fff !important;
  padding: 0.45rem 0.85rem; border-radius: 999px;
  font-weight: 600; font-size: 0.85rem; text-decoration: none !important;
  transition: background 0.15s ease;
}
.wa-btn:hover { background: #1ebe57; color: #fff !important; }
.wa-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn.wa-btn-lg { background: #25d366; border-color: #25d366; color: #fff; padding: 0.95rem 1.6rem; border-radius: 2px; display: inline-flex; align-items: center; gap: 0.6rem; font-size: 1rem; }
.btn.wa-btn-lg:hover { background: #1ebe57; border-color: #1ebe57; color: #fff; }
.btn.wa-btn-lg svg { width: 20px; height: 20px; }
.topbar .wa-btn { padding: 0.25rem 0.7rem; font-size: 0.8rem; }
.topbar .wa-btn svg { width: 14px; height: 14px; }

.wa-qr-card {
  background: var(--cream); border: 1px solid var(--rule); padding: 1.5rem; border-radius: 2px;
  text-align: center; max-width: 280px;
}
.wa-qr-card img { width: 100%; max-width: 220px; height: auto; display: block; margin: 0 auto 0.8rem; }
.wa-qr-card p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.wa-qr-card .num { font-family: 'EB Garamond', serif; font-size: 1.4rem; color: var(--moss-deep); display: block; margin-top: 0.4rem; }

@media (max-width: 700px) {
  .topbar .wa-btn { display: none; }
}

.topbar span em {
  color: var(--gold);
  font-style: italic;
  font-family: 'EB Garamond', serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}