/* ============================================================
   Tregwilym Lodge — shared design system (prototype)
   Premium refresh: emerald + champagne gold, Fraunces + Inter
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --forest:#0d3b31;        /* deep emerald */
  --forest-2:#114a3d;
  --emerald:#1c6b57;
  --moss:#2f9576;          /* brighter accent green */
  --teal:#5dcfcd;          /* TRUE brand teal (from logo) */
  --teal-dark:#2c9a98;     /* readable teal for text/icons on light */
  --teal-tint:#e4f6f5;     /* soft teal wash */
  --cream:#fcf8f8;         /* brand off-white (logo wordmark) */
  --gold:#c8a14a;          /* satin antique gold */
  --gold-dark:#a8842c;
  --gold-bright:#e6cf86;    /* soft champagne highlight */
  --gold-grad:linear-gradient(180deg,#ddc06d 0%,#c6a142 48%,#ad8830 100%); /* restrained metallic */
  --ink:#16231f;
  --muted:#5a6b64;
  --paper:#f4f7f5;         /* cool off-white (no brown) */
  --mist:#e6f0eb;
  --line:#dde6e1;
  --white:#ffffff;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 14px 40px rgba(13,59,49,.12);
  --shadow-sm:0 6px 18px rgba(13,59,49,.08);
  --maxw:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:18px; line-height:1.7; color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif; line-height:1.12; color:var(--forest); font-weight:600; letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,5vw,3.6rem)}
h2{font-size:clamp(1.9rem,3.5vw,2.6rem); margin-bottom:.6rem}
h3{font-size:1.4rem}
p{margin-bottom:1rem}
a{color:var(--emerald); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
.eyebrow{text-transform:uppercase; letter-spacing:.18em; font-size:.78rem; font-weight:700; color:var(--gold-dark); margin-bottom:.7rem}
.center{text-align:center}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:.55rem; font-family:'Inter',sans-serif; font-size:1.02rem;
  font-weight:600; padding:.9rem 1.7rem; border-radius:999px; cursor:pointer; border:2px solid transparent; white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease; text-decoration:none}
.btn:hover{text-decoration:none; transform:translateY(-2px)}
.btn-gold{background:var(--gold-grad); color:#412e06; box-shadow:0 6px 16px rgba(150,115,40,.3); border:1px solid rgba(120,90,25,.3)}
.btn-gold:hover{background:linear-gradient(180deg,#e6cf86 0%,#cba445 55%,#a8842c 100%)}
.btn-green{background:var(--emerald); color:#fff; box-shadow:0 8px 20px rgba(28,107,87,.3)}
.btn-green:hover{background:var(--forest)}
.btn-outline{background:transparent; color:var(--forest); border-color:var(--emerald)}
.btn-outline:hover{background:var(--mist)}
.btn-white{background:#fff; color:var(--forest)}
.btn-white:hover{background:var(--paper)}
.btn-ghost{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{background:rgba(255,255,255,.22)}

/* Top bar */
.topbar{background:var(--forest); color:#dfeee8; font-size:.9rem}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.45rem 28px; flex-wrap:wrap}
.topbar a{color:#fff}
.topbar .tels{font-weight:600}

/* Header */
header.site{position:sticky; top:0; z-index:50; background:rgba(244,247,245,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; padding:.8rem 28px; gap:2rem}
.logo img{height:54px; width:auto}
/* Header brand wordmark — mark + name only (tagline lives elsewhere) */
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; flex-shrink:0}
.brand:hover{text-decoration:none}
.brand-mark{height:50px; width:auto; flex-shrink:0; display:block}
.brand-text{display:flex; flex-direction:column; line-height:1.05}
.brand-name{font-family:'Fraunces',serif; font-size:1.42rem; font-weight:600; color:var(--forest); white-space:nowrap}
.brand-sub{display:none; font-size:.58rem; text-transform:uppercase; letter-spacing:.15em; color:var(--gold-dark); font-weight:600; margin-top:.32rem; white-space:nowrap}
nav.main{margin:0 auto}
nav.main ul{list-style:none; display:flex; flex-wrap:nowrap; gap:1.35rem; align-items:center}
nav.main a{position:relative; white-space:nowrap; color:var(--forest); font-weight:600; font-size:.8rem;
  text-transform:uppercase; letter-spacing:.1em}
/* Compact, tidy header CTAs */
.nav-cta .btn{padding:.6rem 1.25rem; font-size:.92rem; border-width:1.5px}
.nav-cta .btn-gold{box-shadow:0 4px 12px rgba(150,115,40,.25)}
nav.main a::after{content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:center; transition:transform .22s ease}
nav.main a:hover{color:var(--forest); text-decoration:none}
nav.main a:hover::after{transform:scaleX(1)}
.nav-cta{display:flex; gap:.6rem; align-items:center}
.menu-toggle{display:none; background:none; border:0; font-size:1.7rem; cursor:pointer; color:var(--forest)}

/* Hero (homepage) — left-aligned, directional scrim */
.hero{position:relative; color:#fff; overflow:hidden; min-height:min(86vh,780px); display:flex; align-items:center}
.hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(7,33,27,.93) 0%, rgba(7,33,27,.74) 34%, rgba(7,33,27,.34) 66%, rgba(7,33,27,.12) 100%),
             linear-gradient(0deg, rgba(7,33,27,.55), transparent 42%)}
.hero-inner{position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; padding:5rem 28px}
.hero-content{max-width:610px}
.hero h1{color:#fff; margin-bottom:1.25rem; font-size:clamp(2.6rem,4.7vw,4.1rem); line-height:1.07;
  text-shadow:0 2px 26px rgba(0,0,0,.3); text-wrap:balance}
.hero .lede{font-size:1.3rem; line-height:1.55; margin-bottom:2.1rem; color:#e9f3ef; max-width:48ch; text-wrap:pretty}
.hero .btns{display:flex; gap:1rem; flex-wrap:wrap}
.hero .reassure{margin-top:1.9rem; font-size:.96rem; color:#cfe2da; display:inline-flex; align-items:center; gap:.55rem}
.hero .reassure strong{color:var(--gold-bright); font-weight:600}
.hero .reassure svg{width:1.1em;height:1.1em;color:var(--gold-bright);flex-shrink:0}

/* Page hero (inner pages) */
.page-hero{position:relative; color:#fff; text-align:center; background:linear-gradient(135deg,var(--forest),var(--emerald)); overflow:hidden}
.page-hero::before{content:""; position:absolute; inset:0; background:radial-gradient(80% 120% at 100% 0%, rgba(79,190,188,.45), transparent 60%)}
.page-hero .wrap{position:relative; z-index:2; padding:4.2rem 28px}
.page-hero h1{color:#fff}
.page-hero p{color:#dcebe4; font-size:1.2rem; max-width:680px; margin:.7rem auto 0}
.breadcrumb{font-size:.85rem; color:#bcd6cc; margin-bottom:1rem}
.breadcrumb a{color:#dcebe4}

/* Trust bar */
.trust{background:var(--white); border-bottom:1px solid var(--line)}
.trust .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; padding:1.7rem 28px; text-align:center}
.trust .item strong{display:block; font-family:'Fraunces',serif; font-size:1.7rem; color:var(--teal-dark)}
.trust .item span{font-size:.92rem; color:var(--muted)}

/* Free up header space before things get cramped */
@media(max-width:1180px){
  .brand-sub{display:none}
  .nav-cta .btn-outline{display:none}
  nav.main ul{gap:.95rem}
  nav.main a{letter-spacing:.06em; font-size:.76rem}
}

section{padding:4.5rem 0}
.section-head{text-align:center; max-width:760px; margin:0 auto 2.6rem}
.section-head p{color:var(--muted); font-size:1.1rem}
.alt{background:var(--mist)}

/* Cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem; box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.card .ico{width:54px; height:54px; border-radius:14px; background:linear-gradient(135deg,var(--teal-tint),#c9eceb);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin-bottom:1rem}
.card h3{margin-bottom:.4rem}
.card p{font-size:1rem; color:var(--muted); margin-bottom:0}

/* Split */
.split{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center}
.split img{border-radius:var(--radius); box-shadow:var(--shadow); width:100%; height:100%; object-fit:cover; max-height:460px}

/* Fees band */
.fees{background:linear-gradient(135deg,var(--forest),var(--forest-2)); color:#fff; position:relative; overflow:hidden}
.fees::before{content:""; position:absolute; right:-80px; top:-80px; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle,rgba(47,149,118,.45),transparent 70%)}
.fees h2{color:#fff} .fees p{color:#dcebe4}
.fees .grid{display:grid; grid-template-columns:1.2fr 1fr; gap:2.4rem; align-items:center; position:relative; z-index:2}
.fees ul{list-style:none; display:grid; gap:.65rem; margin:1.2rem 0}
.fees li{padding-left:1.9rem; position:relative}
.fees li::before{content:"✓"; position:absolute; left:0; color:var(--gold); font-weight:800}

/* Reviews */
.quote{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem; box-shadow:var(--shadow-sm)}
.quote .stars{color:var(--gold); font-size:1.15rem; margin-bottom:.6rem; letter-spacing:2px}
.quote p{font-size:1.02rem; font-style:italic; color:#2a3a34}
.quote .by{font-style:normal; font-weight:700; color:var(--emerald); font-size:.95rem; margin-bottom:0}
.ciw-band{background:linear-gradient(135deg,var(--mist),#d8ece4); border:1px solid var(--line); text-align:center;
  padding:1.6rem; border-radius:var(--radius); margin-bottom:2.4rem; font-size:1.05rem}
.ciw-band strong{color:var(--forest)}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem}

/* Careers band */
.careers{background:var(--mist)}
.careers .grid{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center}
.careers img{border-radius:var(--radius); box-shadow:var(--shadow)}

/* Contact */
.contact .grid{display:grid; grid-template-columns:1fr 1fr; gap:3rem}
.contact .info p{margin-bottom:.55rem}
.map{border:0; width:100%; height:330px; border-radius:var(--radius); margin-top:1rem}
form .row{display:flex; gap:1rem}
form label{display:block; font-weight:600; margin:.85rem 0 .3rem; font-size:.93rem}
form input, form textarea{width:100%; padding:.75rem .85rem; border:1px solid #c6d2cc; border-radius:10px; font-size:1rem; font-family:inherit; background:#fff}
form input:focus, form textarea:focus{outline:2px solid var(--moss); border-color:var(--moss)}
form .row > div{flex:1}
.form-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem; box-shadow:var(--shadow-sm)}

/* Team grid */
.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem}
.member{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease}
.member:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.member .photo{aspect-ratio:1/1.12; overflow:hidden; background:var(--mist)}
.member .photo img{width:100%; height:100%; object-fit:cover}
.member .body{padding:1.1rem 1.2rem 1.4rem}
.member h3{font-size:1.15rem; margin-bottom:.15rem}
.member .role{color:var(--gold-dark); font-weight:600; font-size:.92rem}
.team-section-title{grid-column:1/-1; margin:1.5rem 0 .2rem; border-top:1px solid var(--line); padding-top:1.8rem}
.team-section-title:first-child{border-top:0; padding-top:0; margin-top:0}

/* Post / EOTM listing */
.post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem}
.post-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease}
.post-card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.post-card .thumb{aspect-ratio:16/10; overflow:hidden; background:var(--mist)}
.post-card .thumb img{width:100%; height:100%; object-fit:cover}
.post-card .pc-body{padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1}
.post-card .badge{display:inline-block; background:var(--mist); color:var(--emerald); font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; padding:.25rem .6rem; border-radius:999px; margin-bottom:.7rem; align-self:flex-start}
.post-card h3{font-size:1.2rem; margin-bottom:.4rem}
.post-card h3 a{color:var(--forest)}
.post-card .date{font-size:.83rem; color:var(--muted); margin-bottom:.6rem}
.post-card p{font-size:.96rem; color:var(--muted)}
.post-card .more{margin-top:auto; font-weight:600; color:var(--emerald)}

/* Employee of the Month gallery */
.eotm-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem}
.eotm-tile{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:transform .18s ease, box-shadow .18s ease}
.eotm-tile:hover{transform:translateY(-5px); box-shadow:var(--shadow); text-decoration:none}
.eotm-tile .pic{position:relative; aspect-ratio:3/4; overflow:hidden}
.eotm-tile .pic img{width:100%; height:100%; object-fit:cover}
.eotm-tile .fallback{display:flex; align-items:center; justify-content:center; height:100%;
  font-family:'Fraunces',serif; font-weight:600; font-size:3.4rem; color:#fff;
  background:linear-gradient(150deg,var(--emerald),var(--teal))}
.eotm-tile .mon{position:absolute; top:.75rem; left:.75rem; background:var(--gold-grad); color:#412e06;
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
  padding:.28rem .65rem; border-radius:999px; border:1px solid rgba(120,90,25,.3)}
.eotm-tile .info{padding:1rem 1.15rem 1.3rem}
.eotm-tile h3{font-size:1.12rem; margin-bottom:.1rem}
.eotm-tile .role{color:var(--teal-dark); font-weight:600; font-size:.9rem}
.year-tabs{display:flex; gap:.5rem; justify-content:center; margin-bottom:2.4rem; flex-wrap:wrap}
.year-tabs a{padding:.5rem 1.2rem; border-radius:999px; font-weight:600; font-size:.95rem; text-decoration:none;
  border:1.5px solid var(--line); color:var(--muted)}
.year-tabs a:hover{border-color:var(--teal); color:var(--teal-dark); text-decoration:none}
.year-tabs a.active{background:var(--emerald); color:#fff; border-color:var(--emerald)}

/* Article / single post */
.article{max-width:760px; margin:0 auto; padding:3.5rem 28px 4.5rem}
.article .meta{color:var(--muted); font-size:.92rem; margin-bottom:1.5rem}
.article .lead{font-size:1.25rem; color:#2a3a34; margin-bottom:1.5rem}
.article h2{font-size:1.7rem; margin:2.2rem 0 .6rem}
.article h3{margin:1.6rem 0 .4rem}
.article ul{margin:0 0 1.2rem 1.3rem}
.article li{margin-bottom:.5rem}
.article .figure{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); margin:1.8rem 0}
.article .caption{font-size:.88rem; color:var(--muted); text-align:center; margin-top:.5rem}
.article .tags{margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--line); font-size:.9rem}
.article .tags a{display:inline-block; background:var(--mist); color:var(--emerald); padding:.2rem .7rem; border-radius:999px; margin:.2rem .25rem .2rem 0}
.callout{background:linear-gradient(135deg,var(--forest),var(--emerald)); color:#fff; border-radius:var(--radius); padding:2rem; margin:2.5rem 0; text-align:center}
.callout h3{color:#fff; margin-bottom:.5rem}
.callout p{color:#dcebe4}

/* Honoree spotlight (single EOTM) */
.spotlight{display:grid; grid-template-columns:.9fr 1.1fr; gap:2.5rem; align-items:center; max-width:980px; margin:0 auto; padding:3.5rem 28px}
.spotlight .photo{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.spotlight .ribbon{display:inline-block; background:var(--gold); color:#3a2c08; font-weight:700; padding:.4rem 1rem; border-radius:999px; font-size:.85rem; margin-bottom:1rem}
.spotlight h1{margin-bottom:.4rem}
.spotlight .who{font-size:1.2rem; color:var(--gold-dark); font-weight:600; margin-bottom:1.2rem}

/* Footer */
footer{background:var(--forest); color:#c8ddd5; padding:3.5rem 0 1.6rem}
footer a{color:#fff}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:2.4rem; margin-bottom:2.2rem}
footer h4{color:#fff; margin-bottom:.8rem}
footer ul{list-style:none} footer li{margin-bottom:.4rem}
.foot-bottom{border-top:1px solid rgba(255,255,255,.16); padding-top:1.3rem; font-size:.85rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; color:#a9c5bb}

/* Sticky mobile call */
.mobile-call{display:none}
.proto-note{background:#fff7e2; border-bottom:1px solid #ecdca0; color:#6b551a; font-size:.85rem; text-align:center; padding:.55rem 28px}

@media(max-width:880px){
  nav.main{display:none}
  .menu-toggle{display:block}
  .trust .wrap{grid-template-columns:repeat(2,1fr); gap:1.4rem 1rem}
  .cards,.grid-3,.post-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .eotm-grid{grid-template-columns:repeat(2,1fr)}
  .split,.fees .grid,.careers .grid,.contact .grid,.foot-grid,.spotlight{grid-template-columns:1fr}
  .nav-cta .btn-outline{display:none}
  .brand-sub{display:none}
  .brand-name{font-size:1.2rem}
  header.site.nav-open nav.main{display:block; position:absolute; top:100%; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--line); box-shadow:var(--shadow)}
  header.site.nav-open nav.main ul{flex-direction:column; align-items:flex-start; gap:0; padding:.5rem 0}
  header.site.nav-open nav.main li{width:100%}
  header.site.nav-open nav.main a{display:block; padding:.9rem 28px; width:100%; border-top:1px solid var(--line)}
  header.site.nav-open nav.main a::after{display:none}
  .mobile-call{display:flex; position:fixed; bottom:0; left:0; right:0; z-index:60;
    background:var(--gold); color:#3a2c08; justify-content:center; gap:.5rem; padding:.95rem; font-weight:700; font-size:1.1rem}
  .mobile-call:hover{text-decoration:none}
  body{padding-bottom:3.5rem}
}

/* ============================================================
   DESIGN SKINS — switch via <html data-theme="...">
   ============================================================ */
html[data-theme="coastal"]{
  --forest:#103a46; --forest-2:#15495a; --emerald:#15727e; --moss:#2aa0ad;
  --teal:#34b6c4; --teal-dark:#1f808c; --teal-tint:#ddf0f3;
  --gold:#c8a14a; --gold-dark:#a8842c; --gold-bright:#e6cf86;
  --gold-grad:linear-gradient(180deg,#ddc06d 0%,#c6a142 48%,#ad8830 100%);
  --paper:#f1f7f8; --mist:#e1eff2; --line:#d6e5e8;
}
html[data-theme="meadow"]{
  --forest:#1f4d39; --forest-2:#2a5d46; --emerald:#2f7d5b; --moss:#52a878;
  --teal:#54bf9f; --teal-dark:#2f8e6f; --teal-tint:#e2f3ec;
  --gold:#cda24a; --gold-dark:#ad8430; --gold-bright:#ecd58c;
  --gold-grad:linear-gradient(180deg,#e3c878 0%,#cda648 48%,#b58c34 100%);
  --paper:#f5f8f3; --mist:#e7f1e8; --line:#dde7dc;
}

/* ============================================================
   ADDITIONAL COMPONENTS
   ============================================================ */
/* Active nav state */
nav.main a.active{color:var(--teal-dark)}
nav.main a.active::after{transform:scaleX(1); background:var(--teal)}

/* Generic intro lede under section heads */
.lead-narrow{max-width:720px;margin:0 auto 0;text-align:center;color:var(--muted);font-size:1.12rem}

/* Stat band */
.statband{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.statband .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; padding:2.6rem 28px; text-align:center}
.statband .n{font-family:'Fraunces',serif; font-size:2.5rem; color:var(--teal-dark); line-height:1}
.statband .l{margin-top:.4rem; color:var(--muted); font-size:.95rem}

/* Video */
.video-frame{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:#0a2a24}
.video-frame video{display:block; width:100%; height:auto}
.video-split{display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center}

/* Steps */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; counter-reset:step}
.step{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.7rem; position:relative; box-shadow:var(--shadow-sm)}
.step::before{counter-increment:step; content:counter(step); display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%; background:var(--gold-grad); color:#412e06; font-family:'Fraunces',serif;
  font-weight:700; font-size:1.2rem; margin-bottom:.9rem}
.step h3{font-size:1.15rem; margin-bottom:.3rem}
.step p{font-size:.96rem; color:var(--muted); margin:0}

/* FAQ accordion */
.faq{max-width:820px; margin:0 auto}
.faq-item{background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:.8rem; overflow:hidden}
.faq-q{width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:1.15rem 1.3rem;
  font-family:'Inter',sans-serif; font-size:1.05rem; font-weight:600; color:var(--forest);
  display:flex; justify-content:space-between; align-items:center; gap:1rem}
.faq-q .chev{transition:transform .2s ease; color:var(--teal-dark); flex-shrink:0; font-size:1.2rem}
.faq-item.open .faq-q .chev{transform:rotate(180deg)}
.faq-a{max-height:0; overflow:hidden; transition:max-height .28s ease; padding:0 1.3rem}
.faq-item.open .faq-a{max-height:420px; padding:0 1.3rem 1.2rem}
.faq-a p{margin:0; color:var(--muted)}

/* Gallery */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.gallery-grid a{border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:3/2; display:block; box-shadow:var(--shadow-sm)}
.gallery-grid img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease}
.gallery-grid a:hover img{transform:scale(1.06)}
.gallery-grid .tall{grid-row:span 2; aspect-ratio:3/4}

/* Vacancies */
.vacancy{display:flex; justify-content:space-between; align-items:center; gap:1.5rem; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem 1.6rem; box-shadow:var(--shadow-sm); margin-bottom:1rem}
.vacancy h3{font-size:1.25rem; margin-bottom:.2rem}
.vacancy .meta{color:var(--muted); font-size:.93rem}
.vacancy .tags span{display:inline-block; background:var(--teal-tint); color:var(--teal-dark); font-size:.78rem;
  font-weight:600; padding:.2rem .6rem; border-radius:999px; margin:.3rem .3rem 0 0}

/* Pillars / benefits with check */
.ticklist{list-style:none; display:grid; gap:.7rem; margin:1rem 0}
.ticklist li{padding-left:1.9rem; position:relative}
.ticklist li::before{content:"✓"; position:absolute; left:0; color:var(--teal-dark); font-weight:800}

/* Big testimonial */
.bigquote{max-width:840px; margin:0 auto; text-align:center}
.bigquote p{font-family:'Fraunces',serif; font-size:1.6rem; line-height:1.4; color:var(--forest); font-style:italic}
.bigquote .by{font-family:'Inter',sans-serif; font-style:normal; font-size:1rem; color:var(--teal-dark); font-weight:600; margin-top:1rem}

/* Fee cards */
.fee-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem}
.fee-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.7rem; box-shadow:var(--shadow-sm)}
.fee-card h3{display:flex; align-items:center; gap:.6rem; margin-bottom:.5rem; font-size:1.25rem}
.fee-card .ic{width:40px;height:40px;border-radius:10px;background:var(--teal-tint);display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.fee-card p{font-size:.98rem; color:var(--muted); margin:0}

/* Skin switcher (prototype control) */
#skinpick{position:fixed; right:16px; bottom:16px; z-index:80; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow); padding:.6rem .7rem; font-family:'Inter',sans-serif}
#skinpick .lab{font-size:.62rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); display:block; margin-bottom:.4rem; text-align:center}
#skinpick .opts{display:flex; gap:.45rem}
#skinpick button{width:30px; height:30px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0}
#skinpick button[data-skin="heritage"]{background:#0d3b31}
#skinpick button[data-skin="coastal"]{background:#15727e}
#skinpick button[data-skin="meadow"]{background:#2f7d5b}
#skinpick button.sel{border-color:var(--gold); box-shadow:0 0 0 2px #fff inset}
@media(max-width:680px){ #skinpick{right:10px; bottom:64px} }

@media(max-width:880px){
  .statband .wrap{grid-template-columns:repeat(2,1fr); gap:1.6rem}
  .steps{grid-template-columns:1fr 1fr}
  .video-split,.fee-cards{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .gallery-grid .tall{grid-row:span 1; aspect-ratio:3/2}
  .vacancy{flex-direction:column; align-items:flex-start}
}

/* ============================================================
   ICON SYSTEM (replaces emojis) — classy line icons
   ============================================================ */
.ico svg, .fee-card .ic svg, .card .ico svg { width:27px; height:27px; }
.ico, .fee-card .ic { color:var(--teal-dark); }
.ic-inline{ width:1.05em; height:1.05em; vertical-align:-0.16em; margin-right:.35rem; flex-shrink:0; }
.menu-toggle svg{ width:26px; height:26px; }
.ribbon .ic-inline{ vertical-align:-0.16em; margin-right:.3rem; }
.info p .ic-inline{ color:var(--teal-dark); }
.btn .ic-inline{ margin-right:.1rem; }

/* Reviews — text left, CIW widget card right */
.reviews-split{display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center}
.widget-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.6rem 1.6rem 1.4rem; text-align:center}
.wc-label{font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); font-weight:700; margin-bottom:1rem}
.ciw-widget{display:flex; justify-content:center}
.mini-quote{border-left:3px solid var(--teal); padding:.1rem 0 .1rem 1.2rem; margin:1.5rem 0; font-style:italic; color:#2a3a34; font-size:1.05rem}
.mini-quote .by{display:block; font-style:normal; font-weight:600; color:var(--teal-dark); font-size:.92rem; margin-top:.6rem}
@media(max-width:880px){ .reviews-split{grid-template-columns:1fr; gap:2rem} }

/* Polish: balanced heading wrap + hero on small screens */
h1, h2{ text-wrap:balance; }
@media(max-width:640px){
  .hero{min-height:auto}
  .hero-inner{padding:3.6rem 22px}
  .hero .lede{font-size:1.14rem}
  .hero .btns{gap:.7rem}
  .hero .btns .btn{flex:1 1 auto; justify-content:center}
}

/* Language toggle + Welsh-mode notice */
.topbar .lang-toggle{color:#fff; text-decoration:underline; text-underline-offset:2px; font-weight:600; cursor:pointer}
.topbar .lang-toggle:hover{color:var(--gold-bright)}
#lang-note{background:var(--teal-tint); color:var(--forest); font-size:.85rem; line-height:1.4;
  text-align:center; padding:.55rem 28px; border-bottom:1px solid var(--line)}

/* EoTM spotlight photo with graceful fallback (until real photo added) */
.eotm-photo{position:relative; min-height:440px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.eotm-photo .eotm-fallback{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-size:6rem; color:#fff; background:linear-gradient(150deg,var(--emerald),var(--teal))}
.eotm-photo img{position:relative; z-index:1; width:100%; height:100%; object-fit:cover; display:block}

/* ============================================================
   EoTM gallery — data-driven cards, month display, year picker
   ============================================================ */
#eotm-controls{display:flex; justify-content:center; align-items:center; gap:.7rem; margin-bottom:2.6rem; flex-wrap:wrap}
#eotm-controls .lbl{font-weight:600; color:var(--forest); font-size:.95rem}
#eotm-year{font-family:'Inter',sans-serif; font-size:1rem; font-weight:600; color:var(--forest); cursor:pointer;
  padding:.6rem 2.6rem .6rem 1.1rem; border:1.5px solid var(--line); border-radius:999px; background:#fff;
  appearance:none; -webkit-appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%232c9a98" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat:no-repeat; background-position:right 1rem center; transition:border-color .15s ease, box-shadow .15s ease}
#eotm-year:hover{border-color:var(--teal)}
#eotm-year:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-tint)}

/* Month chip + top scrim for legibility */
.eotm-tile .pic::before{content:""; position:absolute; top:0; left:0; right:0; height:74px; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,40,33,.42), transparent)}
.eotm-tile .mon{position:absolute; top:.8rem; left:.8rem; z-index:2;
  background:var(--gold-grad); color:#412e06; font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; padding:.32rem .72rem; border-radius:999px; border:1px solid rgba(120,90,25,.3);
  box-shadow:0 2px 6px rgba(0,0,0,.18)}
.eotm-tile .latest-tag{position:absolute; top:.8rem; right:.8rem; z-index:2;
  background:var(--forest); color:#fff; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  padding:.3rem .6rem; border-radius:999px}
.eotm-tile.latest{box-shadow:0 0 0 2px var(--gold), var(--shadow-sm)}
.eotm-tile.latest:hover{box-shadow:0 0 0 2px var(--gold), var(--shadow)}
#eotm-empty{display:none; text-align:center; color:var(--muted); padding:2rem 0}

/* Multi-winner month page — winners row */
.winner-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.6rem; max-width:820px; margin:0 auto 2.4rem}
.winner-card{text-align:center}
.winner-card .ph{aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
  position:relative; background:linear-gradient(150deg,var(--emerald),var(--teal))}
.winner-card .ph img{width:100%; height:100%; object-fit:cover; position:relative; z-index:1}
.winner-card .ph .fb{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-size:3.2rem; color:#fff}
.winner-card h3{margin-top:.8rem; font-size:1.2rem}
.winner-card .role{color:var(--gold-dark); font-weight:600; font-size:.92rem}

/* 4-up card grid (e.g. the four units) → 2x2 → 1 on small screens */
.cards.cards-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){ .cards.cards-4{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .cards.cards-4{grid-template-columns:1fr} }

/* ---- Form submission status + honeypot ---- */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin-top:1rem;padding:.85rem 1rem;border-radius:10px;font-size:.96rem;line-height:1.45}
.form-status.ok{background:#e7f4ee;border:1px solid #bfe3d1;color:#0d3b31}
.form-status.err{background:#fdeceA;background:#fdecec;border:1px solid #f3c9c9;color:#8a2b2b}

/* ---- Contact page two-column layout (collapses on mobile) ---- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
@media(max-width:880px){ .contact-grid{grid-template-columns:1fr} }
/* Team cards: single column on small phones */
@media(max-width:520px){ .team-grid{grid-template-columns:1fr} .eotm-grid{grid-template-columns:1fr} }

/* ---- Useful documents ---- */
.doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.doc-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.9rem;box-shadow:var(--shadow-sm)}
.doc-card .ic{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;
  background:linear-gradient(135deg,var(--teal-tint),#c9eceb);color:var(--emerald);margin-bottom:.9rem}
.doc-card h3{margin-bottom:.4rem}
.doc-card p{color:var(--muted);font-size:.98rem;margin-bottom:1.1rem}
.doc-links{display:flex;gap:.7rem;flex-wrap:wrap}
@media(max-width:880px){ .doc-grid{grid-template-columns:1fr} }

/* ---- Welsh nav fit (longer labels): hide strapline, tighten, collapse earlier ---- */
html[lang="cy"] .brand-sub{display:none}
html[lang="cy"] nav.main ul{gap:1rem}
html[lang="cy"] nav.main a{font-size:.82rem;letter-spacing:.03em}
@media(max-width:1024px){
  html[lang="cy"] nav.main{display:none}
  html[lang="cy"] .menu-toggle{display:block}
  html[lang="cy"] header.site.nav-open nav.main{display:block;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  html[lang="cy"] header.site.nav-open nav.main ul{flex-direction:column;align-items:flex-start;gap:0;padding:.5rem 0}
  html[lang="cy"] header.site.nav-open nav.main li{width:100%}
  html[lang="cy"] header.site.nav-open nav.main a{display:block;padding:.9rem 28px;width:100%;border-top:1px solid var(--line);font-size:1rem}
}

/* ---- Team photo fallback (initial) when an image is missing ---- */
.member .photo.noimg{display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,var(--emerald),var(--teal))}
.member .photo.noimg::after{content:attr(data-initial);font-family:'Fraunces',serif;font-weight:600;font-size:3.4rem;color:#fff}