/* ============================================================
   Whitcombe & Sons, demonstration site for Agnew Digital
   Built to SOP section 5.5 (Visual language).
   Deep brand colour + one bright accent, white ground,
   photography carries the heritage, serif display + sans body.
   ============================================================ */

:root{
  --ink:        #241C1D;
  --ink-soft:   #5C5254;
  --white:      #FFFFFF;
  --warm:       #F7F4F1;
  --warm-2:     #EBE5E1;
  --claret:     #6E2F37;
  --claret-deep:#54222A;
  --claret-tint:#F3E9EA;
  --gold:       #C1963C;
  --gold-light: #E0BE72;
  --gold-deep:  #8A6420;
  --star:       #F2B01E;
  --line:       rgba(36,28,29,0.13);
  --shadow:     0 2px 10px rgba(36,28,29,0.07);
  --maxw:       1180px;
  --maxw-text:  700px;
}

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

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:'Nunito Sans', system-ui, sans-serif;
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Source Serif 4', Georgia, serif;
  font-weight:600;
  line-height:1.18;
  margin:0;
  letter-spacing:-0.005em;
}
h1{font-size:clamp(34px,4.8vw,54px);}
h2{font-size:clamp(28px,3.4vw,40px);}
h3{font-size:23px;}
p{margin:0 0 1.1em;}
p:last-child{margin-bottom:0;}
a{color:var(--claret);text-underline-offset:3px;}
a:hover{color:var(--gold-deep);}
ul{margin:0 0 1.1em;padding-left:1.25em;}
li{margin-bottom:.45em;}
img{max-width:100%;display:block;}
:focus-visible{outline:3px solid var(--gold-deep);outline-offset:3px;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.narrow{max-width:var(--maxw-text);}
.centre{text-align:center;}
.centre .narrow{margin-left:auto;margin-right:auto;}

.skip{position:absolute;left:-9999px;top:0;background:var(--claret);color:#fff;padding:12px 20px;z-index:300;}
.skip:focus{left:0;}

.label{
  font-family:'Nunito Sans',sans-serif;
  font-size:14px;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--gold-deep);display:block;margin-bottom:12px;
}
.label-light{color:var(--gold-light);}

/* ---------- demo notice ---------- */
.demobar{
  background:var(--ink);color:#EDE8E4;
  font-size:14.5px;line-height:1.5;padding:9px 24px;text-align:center;
}
.demobar a{color:var(--gold-light);}

/* ---------- brand strip (white) ---------- */
.utility{background:var(--white);border-bottom:1px solid var(--line);}
.utility .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;padding-top:20px;padding-bottom:20px;
}
.wordmark{text-decoration:none;color:var(--ink);display:block;}
.wordmark .name{
  font-family:'Source Serif 4',Georgia,serif;
  font-size:clamp(28px,3.4vw,38px);font-weight:700;
  line-height:1.02;display:block;color:var(--claret);
}
.wordmark .sub{
  font-size:13px;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--gold-deep);display:block;margin-top:6px;
}
.headcall{text-align:right;}
.headcall .tel{
  font-family:'Source Serif 4',Georgia,serif;
  font-size:clamp(28px,3.6vw,38px);font-weight:700;
  color:var(--ink);text-decoration:none;display:block;line-height:1.1;
}
.headcall .tel:hover{color:var(--claret);}
.headcall .hours{display:block;font-size:16.5px;color:var(--ink-soft);margin-top:2px;}

/* ---------- nav bar (claret) ---------- */
.masthead{background:var(--claret);}
.masthead .wrap{padding-top:0;padding-bottom:0;}
nav ul{display:flex;gap:0;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
nav li{margin:0;}
nav a{
  display:block;padding:16px 20px;
  font-size:17px;font-weight:600;color:#fff;text-decoration:none;
  border-bottom:4px solid transparent;
}
nav a:hover{background:var(--claret-deep);color:#fff;}
nav a[aria-current="page"]{border-bottom-color:var(--gold);color:#fff;}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:'Nunito Sans',sans-serif;
  font-size:18px;font-weight:700;
  padding:15px 32px;border-radius:100px;
  border:2px solid var(--claret);background:var(--claret);color:#fff;
  text-decoration:none;min-height:54px;
}
.btn:hover{background:var(--claret-deep);border-color:var(--claret-deep);color:#fff;}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--ink);}
.btn-gold:hover{background:var(--gold-light);border-color:var(--gold-light);color:var(--ink);}
.btn-white{background:#fff;border-color:#fff;color:var(--claret);}
.btn-white:hover{background:var(--warm);border-color:var(--warm);color:var(--claret);}
.btn-outline{background:transparent;color:var(--claret);}
.btn-outline:hover{background:var(--claret);color:#fff;}

/* ---------- photo placeholders ---------- */
.photo{
  position:relative;overflow:hidden;background:var(--warm-2);
  background-image:linear-gradient(135deg, #8A5A57 0%, #6E2F37 45%, #3F2E2A 100%);
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/3;
}
.photo span{
  color:rgba(255,255,255,0.82);
  font-size:13px;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;
  text-align:center;padding:16px;line-height:1.5;max-width:280px;
}
.photo-wide{aspect-ratio:16/9;}

/* ---------- hero ---------- */
.hero{position:relative;background:#3F2E2A;}
.hero-img{
  position:absolute;inset:0;
  background-image:linear-gradient(120deg, #8A5A57 0%, #6E2F37 40%, #33241F 100%);
}
.hero-img::after{content:"";position:absolute;inset:0;background:rgba(28,20,18,0.42);}
.hero-inner{position:relative;padding:96px 0 80px;}
.hero-panel{
  background:rgba(84,34,42,0.86);
  border-bottom:6px solid var(--gold);
  padding:44px 40px;max-width:760px;
}
.hero-panel h1{color:#fff;margin-bottom:16px;}
.hero-panel h1 em{font-style:normal;color:var(--gold-light);}
.hero-panel .strap{font-size:20px;color:rgba(255,255,255,0.9);margin-bottom:28px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.hero-note{
  position:relative;margin-top:26px;color:#fff;font-size:20px;
}
.hero-note a{
  color:#fff;font-family:'Source Serif 4',Georgia,serif;
  font-size:30px;font-weight:700;text-decoration:none;vertical-align:middle;
}
.hero-note a:hover{color:var(--gold-light);}
.hero-tag{
  position:absolute;left:0;top:-34px;
  font-size:14px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--gold-light);
}

/* ---------- sections ---------- */
section{padding:76px 0;}
section.tight{padding:52px 0;}
.on-warm{background:var(--warm);}
.on-claret{background:var(--claret);color:#fff;}
.on-claret h2,.on-claret h3{color:#fff;}
.on-claret a{color:var(--gold-light);}
.on-claret .lede{color:rgba(255,255,255,0.86);}
.rule-top{border-top:1px solid var(--line);}
.lede{font-size:21px;line-height:1.6;color:var(--ink-soft);}
.sect-head{margin-bottom:40px;}
.sect-head h2{margin-bottom:14px;}

/* ---------- triage cards ---------- */
.triage{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.triage a{
  display:block;text-decoration:none;color:var(--ink);
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
}
.triage a:hover{box-shadow:0 6px 18px rgba(36,28,29,0.13);}
.triage .cap{padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.triage h3{font-size:21px;margin:0;}
.triage .chev{color:var(--claret);font-size:22px;line-height:1;}
.triage .sub{padding:0 22px 20px;font-size:16.5px;color:var(--ink-soft);margin:0;}
.triage a.dark{background:var(--ink);}
.triage a.dark h3{color:#fff;}
.triage a.dark .sub{color:rgba(255,255,255,0.78);}
.triage a.dark .chev{color:var(--gold-light);}

/* ---------- generic grids / cards ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}

.card{background:#fff;border:1px solid var(--line);padding:28px 26px;box-shadow:var(--shadow);}
.card h3{margin-bottom:10px;}
.card p{font-size:17px;color:var(--ink-soft);}
.on-warm .card{box-shadow:none;}

/* ---------- Google review cards ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.gcard{background:#fff;border:1px solid var(--line);padding:22px;box-shadow:var(--shadow);}
.gcard-top{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.avatar{
  width:42px;height:42px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:19px;
}
.gcard .who{flex:1;min-width:0;}
.gcard .who b{display:block;font-size:17px;font-weight:700;}
.gcard .who span{display:block;font-size:15px;color:var(--ink-soft);}
.glogo{width:22px;height:22px;flex:none;}
.stars{color:var(--star);letter-spacing:2px;font-size:17px;margin-bottom:8px;}
.gcard p{font-size:16.5px;color:var(--ink);margin:0;}
.gcard .more{font-size:16px;color:var(--ink-soft);text-decoration:underline;}
.gscore{margin-top:26px;font-size:17px;}

/* ---------- branch cards ---------- */
.branch{background:#fff;border:1px solid rgba(255,255,255,0.18);}
.branch-head{background:var(--gold);padding:16px 22px;text-align:center;}
.branch-head h3{color:var(--ink);margin:0;font-size:23px;}
.branch-body{padding:24px 22px;text-align:center;}
.branch-tel{
  display:block;font-family:'Source Serif 4',Georgia,serif;
  font-size:29px;font-weight:700;color:var(--claret);text-decoration:none;margin-bottom:6px;
}
.branch-tel:hover{color:var(--gold-deep);}
.branch address{font-style:normal;color:var(--ink-soft);font-size:17px;margin-bottom:14px;}
.branch dl{margin:0;font-size:16.5px;text-align:center;}
.branch dt{
  font-size:13px;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--gold-deep);margin-top:16px;
}
.branch dd{margin:3px 0 0;color:var(--ink-soft);}
.branch dd a{color:var(--claret);}
.branch .brating{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:16px;color:var(--ink-soft);}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:17px;background:#fff;margin-bottom:12px;border:1px solid var(--line);}
caption{text-align:left;font-family:'Source Serif 4',Georgia,serif;font-size:24px;font-weight:600;padding-bottom:12px;}
th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top;}
thead th{background:var(--claret);color:#fff;font-weight:700;font-size:17px;border-bottom:none;}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
tbody tr:last-child td{border-bottom:none;}
tr.total td{background:var(--claret-tint);font-weight:700;}
.tablenote{font-size:16.5px;color:var(--ink-soft);margin-bottom:36px;}

.spl-intro{background:#fff;border:1px solid var(--line);border-left:6px solid var(--gold);padding:26px 28px;margin-bottom:36px;box-shadow:var(--shadow);}

/* ---------- panels ---------- */
.panel{
  background:#fff;border:1px solid var(--line);
  border-top:6px solid var(--gold);
  padding:40px;box-shadow:var(--shadow);
}

/* ---------- breadcrumbs / page head ---------- */
.crumbs{font-size:16px;color:var(--ink-soft);padding:14px 0;background:var(--warm);border-bottom:1px solid var(--line);}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;}
.crumbs li{margin:0;}
.crumbs li+li::before{content:"›";margin-right:8px;color:var(--gold-deep);}
.pagehead{padding:56px 0 46px;background:var(--warm);border-bottom:1px solid var(--line);}
.pagehead h1{margin-bottom:18px;}

/* ---------- prose ---------- */
.prose{max-width:var(--maxw-text);}
.prose h2{margin:52px 0 16px;}
.prose h3{margin:32px 0 10px;font-size:23px;}
.prose h2:first-child{margin-top:0;}
.callout{background:var(--warm);border-left:6px solid var(--gold);padding:24px 26px;margin:30px 0;}
.callout h3{margin-bottom:8px;font-size:21px;}
.callout .tel-inline{font-family:'Source Serif 4',Georgia,serif;font-size:28px;font-weight:700;text-decoration:none;display:inline-block;}

/* ---------- funeral type entries ---------- */
.type{border-top:1px solid var(--line);padding:36px 0;display:grid;grid-template-columns:260px 1fr;gap:40px;}
.type h3{font-size:26px;}
.type .type-meta{font-size:16.5px;color:var(--gold-deep);font-weight:700;margin-top:8px;}
.on-claret .type{border-top-color:rgba(255,255,255,0.22);}
.on-claret .type .type-meta{color:var(--gold-light);}

/* ---------- memberships ---------- */
.badges{display:flex;flex-wrap:wrap;gap:12px;list-style:none;padding:0;margin:0;}
.badges li{border:1px solid var(--line);background:#fff;padding:10px 18px;font-size:16px;margin:0;}

/* ---------- footer ---------- */
footer{background:var(--claret-deep);color:#fff;padding:62px 0 40px;}
footer h3{color:#fff;}
footer a{color:#fff;}
footer a:hover{color:var(--gold-light);}
.foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}
.foot-branch h3{font-size:21px;margin-bottom:8px;}
.foot-branch address{font-style:normal;font-size:16.5px;color:rgba(255,255,255,0.8);margin-bottom:8px;}
.foot-branch .ftel{font-family:'Source Serif 4',Georgia,serif;font-size:24px;font-weight:700;text-decoration:none;display:block;}
.foot-branch .fhours{font-size:15.5px;color:rgba(255,255,255,0.72);margin-top:6px;}
.foot-links{list-style:none;padding:0;margin:0;}
.foot-links li{margin-bottom:8px;}
.foot-links a{font-size:16.5px;}
.foot-base{border-top:1px solid rgba(255,255,255,0.22);margin-top:44px;padding-top:24px;font-size:15.5px;color:rgba(255,255,255,0.75);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;}

/* ---------- sticky mobile call bar ---------- */
.callbar{display:none;}

/* ---------- cookie notice ---------- */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--ink);color:#EDE8E4;padding:20px 24px;box-shadow:0 -4px 24px rgba(0,0,0,0.22);}
.cookie-in{max-width:var(--maxw);margin:0 auto;display:flex;gap:22px;align-items:center;flex-wrap:wrap;justify-content:space-between;}
.cookie p{font-size:16.5px;margin:0;max-width:620px;}
.cookie a{color:var(--gold-light);}
.cookie-actions{display:flex;gap:12px;flex-wrap:wrap;}
.cookie button{font-family:'Nunito Sans',sans-serif;font-size:16.5px;font-weight:700;padding:12px 26px;min-height:48px;border-radius:100px;border:2px solid #EDE8E4;background:transparent;color:#EDE8E4;cursor:pointer;}
.cookie button:hover{background:#EDE8E4;color:var(--ink);}
.cookie[hidden]{display:none;}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1000px){
  .triage{grid-template-columns:1fr 1fr;}
  .grid-3,.grid-4,.reviews{grid-template-columns:1fr 1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .type{grid-template-columns:1fr;gap:14px;}
  nav a{padding:14px 15px;font-size:16px;}
}

@media (max-width:680px){
  section{padding:52px 0;}
  .utility .wrap{flex-direction:column;align-items:flex-start;gap:12px;}
  .headcall{text-align:left;}
  nav ul{flex-direction:column;}
  nav a{border-bottom:1px solid rgba(255,255,255,0.16);border-left:4px solid transparent;}
  nav a[aria-current="page"]{border-bottom-color:rgba(255,255,255,0.16);border-left-color:var(--gold);}
  .grid-2,.grid-3,.grid-4,.reviews,.triage{grid-template-columns:1fr;gap:22px;}
  .foot-grid{grid-template-columns:1fr;}
  .hero-inner{padding:56px 0 52px;}
  .hero-panel{padding:28px 22px;}
  .hero-tag{position:static;display:block;margin-bottom:8px;}
  .hero-note{margin-top:22px;}
  .panel{padding:26px 22px;}

  .callbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:100;background:var(--claret);border-top:3px solid var(--gold);}
  .callbar a{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px;min-height:62px;color:#fff;text-decoration:none;font-family:'Source Serif 4',Georgia,serif;font-size:24px;font-weight:700;}
  body{padding-bottom:66px;}
  .cookie{bottom:66px;}
}

@media print{
  .utility,.callbar,.cookie,.demobar,nav,.hero{display:none;}
  body{background:#fff;font-size:12pt;}
}