/* ==========================================================================
   Tirumala Printers — stylesheet
   Palette taken straight from the logo: deep teal, temple gold, CMYK ribbon.
   ========================================================================== */

:root{
  --teal:#0C3B35;
  --teal-800:#0A322D;
  --teal-900:#072522;
  --teal-050:#F1F6F4;
  --gold:#C9A227;
  --gold-soft:#E8C766;

  --cyan:#00AEEF;
  --magenta:#EC008C;
  --yellow:#FFD100;
  --key:#141414;

  --ink:#14201E;
  --muted:#5C6B68;
  --line:#E2E7E5;
  --line-soft:#EDF1EF;
  --bg:#FFFFFF;
  --bg-alt:#F7F9F8;

  --radius:10px;
  --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(12,59,53,.06), 0 1px 3px rgba(12,59,53,.05);
  --shadow-md:0 6px 24px rgba(12,59,53,.09);
  --shadow-lg:0 18px 48px rgba(12,59,53,.14);

  --wrap:1240px;
  --gut:20px;

  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}
ul{margin:0; padding:0; list-style:none}
h1,h2,h3,h4{margin:0; line-height:1.2; font-weight:700; letter-spacing:-.01em}
p{margin:0}

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

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gut)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:16px; z-index:999; background:#fff; padding:12px 18px; border-radius:8px; box-shadow:var(--shadow-md)}

/* --- CMYK ribbon: the signature device, straight off the logo ------------- */
.ribbon{display:flex; height:4px; width:100%}
.ribbon i{flex:1; display:block}
.ribbon i:nth-child(1){background:var(--cyan)}
.ribbon i:nth-child(2){background:var(--magenta)}
.ribbon i:nth-child(3){background:var(--yellow)}
.ribbon i:nth-child(4){background:var(--key)}
.ribbon--sm{height:3px; width:56px; border-radius:2px; overflow:hidden}

/* ==========================================================================
   Header
   ========================================================================== */
.utility{background:var(--teal-900); color:#CFE0DB; font-size:12.5px}
.utility .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:38px; flex-wrap:wrap}
.utility a{color:#CFE0DB}
.utility a:hover{color:#fff}
.utility-left{display:flex; align-items:center; gap:8px}
.utility-right{display:flex; align-items:center; gap:20px}
.utility-right a{display:inline-flex; align-items:center; gap:6px}
.dot{width:4px;height:4px;border-radius:50%;background:var(--gold);flex:none}

.site-header{position:sticky; top:0; z-index:60; background:#fff; border-bottom:1px solid var(--line)}
body.nav-open .site-header{z-index:100}
.site-header .ribbon{position:absolute; top:0; left:0}
.header-main{display:flex; align-items:center; gap:24px; padding-top:14px; padding-bottom:14px}

.brand{display:flex; align-items:center; gap:12px; flex:none}
.brand img{width:58px; height:auto; flex:none}
.brand-text{display:flex; flex-direction:column; line-height:1}
.brand-name{font-family:var(--serif); font-size:21px; font-weight:700; color:var(--teal); letter-spacing:.04em; text-transform:uppercase}
.brand-sub{font-size:9px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--key); margin-top:3px}
.brand-tag{font-size:9px; color:var(--muted); letter-spacing:.04em; margin-top:3px}

.search{flex:1; max-width:620px; position:relative}
.search input{
  width:100%; height:44px; padding:0 52px 0 16px; font-size:14px;
  border:1.5px solid var(--line); border-radius:var(--radius); background:var(--bg-alt); color:var(--ink);
  transition:border-color .15s, background .15s;
}
.search input::placeholder{color:#8A9996}
.search input:focus{background:#fff; border-color:var(--teal); outline:none}
.search button{
  position:absolute; right:5px; top:5px; width:42px; height:34px; border:0; border-radius:7px;
  background:var(--teal); color:#fff; display:grid; place-items:center;
}
.search button:hover{background:var(--teal-800)}

.header-actions{display:flex; align-items:center; gap:8px; flex:none}
.icon-btn{
  display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:var(--radius);
  border:1.5px solid var(--line); background:#fff; color:var(--ink); font-size:13px; font-weight:600;
  transition:border-color .15s, color .15s;
}
.icon-btn:hover{border-color:var(--teal); color:var(--teal)}
.icon-btn strong{display:block; font-size:13px}
.icon-btn small{display:block; font-size:10.5px; color:var(--muted); font-weight:500}
.btn-quote{background:var(--gold); border-color:var(--gold); color:#241C00}
.btn-quote:hover{background:#B8931F; border-color:#B8931F; color:#241C00}

.nav-toggle{display:none; width:44px; height:44px; border:1.5px solid var(--line); border-radius:var(--radius); background:#fff; place-items:center}

/* --- primary nav + mega menu --------------------------------------------- */
.primary-nav{border-top:1px solid var(--line-soft); background:#fff}
.primary-nav > .wrap{display:flex; align-items:center; gap:2px; flex-wrap:wrap}
.nav-item{position:relative}
.nav-link{
  display:inline-flex; align-items:center; gap:5px; padding:13px 14px;
  font-size:13.5px; font-weight:600; color:var(--ink); border-bottom:3px solid transparent;
  background:none; border-top:0; border-left:0; border-right:0;
}
.nav-link:hover, .nav-item:hover .nav-link, .nav-link[aria-expanded="true"]{color:var(--teal); border-bottom-color:var(--gold)}
.nav-link .chev{width:9px; height:9px; opacity:.55; transition:transform .18s}
.nav-item:hover .chev{transform:rotate(180deg)}
.nav-link--accent{color:var(--magenta)}
.nav-link--active{color:var(--teal); border-bottom-color:var(--gold)}

.mega{
  position:absolute; left:0; top:100%; z-index:70;
  min-width:660px; background:#fff; border:1px solid var(--line); border-radius:0 0 var(--radius-lg) var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:24px; display:none; grid-template-columns:1fr 1fr 250px; gap:28px;
}
.nav-item:hover .mega, .mega:hover, .nav-item:focus-within .mega{display:grid}
.nav-item:last-child .mega, .nav-item:nth-last-child(2) .mega{left:auto; right:0}
.mega h4{font-size:11px; text-transform:uppercase; letter-spacing:.13em; color:var(--muted); margin-bottom:12px; font-weight:700}
.mega li + li{margin-top:2px}
.mega li a{display:block; padding:6px 8px; margin-left:-8px; font-size:13.5px; border-radius:6px; color:#25322F}
.mega li a:hover{background:var(--teal-050); color:var(--teal)}
.mega-promo{background:var(--teal-050); border-radius:var(--radius); padding:18px; align-self:start}
.mega-promo .eyebrow{font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--gold); margin-bottom:8px}
.mega-promo h5{font-size:15px; margin:0 0 6px; color:var(--teal)}
.mega-promo p{font-size:12.5px; color:var(--muted); margin-bottom:12px}
.mega-promo a{font-size:12.5px; font-weight:700; color:var(--teal); border-bottom:2px solid var(--gold); padding-bottom:1px}

/* mobile drawer */
.drawer-backdrop{display:none}
@media (max-width:1024px){
  .search{display:none}
  .nav-toggle{display:grid}
  .primary-nav{
    position:fixed; inset:0 auto 0 0; width:min(340px,88vw); background:#fff; z-index:90;
    transform:translateX(-100%); transition:transform .25s ease; overflow-y:auto; border-top:0;
    box-shadow:var(--shadow-lg);
  }
  .primary-nav.open{transform:none}
  .primary-nav > .wrap{display:block; padding-top:16px; padding-bottom:40px}
  .nav-item{border-bottom:1px solid var(--line-soft)}
  .nav-link{width:100%; justify-content:space-between; padding:15px 4px; border-bottom:0}
  .mega{
    position:static; display:none; grid-template-columns:1fr; min-width:0; box-shadow:none;
    border:0; padding:0 4px 16px; gap:18px;
  }
  .nav-item:hover .mega{display:none}
  .nav-item.open .mega{display:grid}
  .nav-item.open .chev{transform:rotate(180deg)}
  .mega-promo{display:none}
  .drawer-backdrop.show{display:block; position:fixed; inset:0; background:rgba(7,37,34,.45); z-index:80}
}
@media (max-width:1024px){
  .header-main{gap:12px}
  .brand{flex:1; min-width:0}
}
@media (max-width:640px){
  .brand-tag{display:none}
  .brand img{width:42px}
  .brand-name{font-size:18px}
  .brand-sub{font-size:8px; letter-spacing:.18em}
  .header-main{padding-top:10px; padding-bottom:10px; gap:10px}
  .header-actions .icon-btn:not(.btn-quote){display:none}
  .header-actions .label-hide{display:none}
  .btn-quote{padding:10px 14px; font-size:13px; white-space:nowrap}
  .utility-left{display:none}
  .utility .wrap{justify-content:center}
  .utility-right{gap:22px}
  .nav-toggle{width:40px; height:40px}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{background:linear-gradient(160deg,var(--teal) 0%, var(--teal-900) 100%); color:#fff; position:relative; overflow:hidden}
.hero::after{
  content:''; position:absolute; right:-140px; top:-140px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,39,.22),transparent 62%);
}
.hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding-top:64px; padding-bottom:64px}
.hero .eyebrow{display:inline-flex; align-items:center; gap:10px; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:18px}
.hero h1{font-family:var(--serif); font-size:clamp(34px,4.4vw,56px); line-height:1.08; letter-spacing:-.015em; margin-bottom:18px}
.hero h1 em{font-style:normal; color:var(--gold-soft)}
.hero p.lede{font-size:16.5px; color:#C6DAD5; max-width:52ch; margin-bottom:28px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:30px}
.hero-stats{display:flex; gap:34px; flex-wrap:wrap; padding-top:26px; border-top:1px solid rgba(255,255,255,.16)}
.hero-stats div strong{display:block; font-family:var(--serif); font-size:28px; color:#fff; line-height:1}
.hero-stats div span{font-size:12px; color:#9FBDB6; letter-spacing:.04em}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:var(--radius); font-size:14.5px; font-weight:700;
  border:2px solid transparent; transition:transform .12s, background .15s, border-color .15s, color .15s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--gold); color:#241C00; border-color:var(--gold)}
.btn-primary:hover{background:#DDB63C; border-color:#DDB63C}
.btn-ghost{border-color:rgba(255,255,255,.35); color:#fff}
.btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.08)}
.btn-dark{background:var(--teal); color:#fff; border-color:var(--teal)}
.btn-dark:hover{background:var(--teal-800); border-color:var(--teal-800)}
.btn-outline{border-color:var(--line); color:var(--ink); background:#fff}
.btn-outline:hover{border-color:var(--teal); color:var(--teal)}
.btn-block{width:100%}

/* hero card — the press sheet */
.press-sheet{
  background:#fff; border-radius:var(--radius-lg); padding:26px; box-shadow:var(--shadow-lg); color:var(--ink);
}
.press-sheet .sheet-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.press-sheet h3{font-size:16px; color:var(--teal)}
.press-sheet .sheet-note{font-size:12px; color:var(--muted); margin-bottom:18px}
.press-list{display:grid; gap:10px}
.press-list li{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line);
  border-radius:var(--radius); font-size:13.5px; font-weight:600; transition:border-color .15s, background .15s;
}
.press-list li:hover{border-color:var(--teal); background:var(--teal-050)}
.press-list .swatch{width:26px; height:26px; border-radius:6px; flex:none}
.press-list small{margin-left:auto; font-weight:500; color:var(--muted); font-size:11.5px}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr; gap:36px; padding-top:44px; padding-bottom:44px}
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section{padding:60px 0}
.section--alt{background:var(--bg-alt)}
.section--tight{padding:44px 0}
.section-head{margin-bottom:28px; max-width:760px}
.section-head .ribbon--sm{margin-bottom:14px}
.section-head h2{font-family:var(--serif); font-size:clamp(24px,3vw,34px); color:var(--teal); margin-bottom:8px}
.section-head p{color:var(--muted); font-size:15px}
.section-head-row{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; flex-wrap:wrap}
.section-head-row .section-head{margin-bottom:0}
.link-more{font-size:13.5px; font-weight:700; color:var(--teal); display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.link-more:hover{color:var(--gold)}

/* --- category strip ------------------------------------------------------- */
.cat-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.cat-tile{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 14px;
  text-align:center; transition:transform .15s, box-shadow .15s, border-color .15s; position:relative; overflow:hidden;
}
.cat-tile::after{content:''; position:absolute; inset:auto 0 0 0; height:3px; background:var(--accent,var(--teal)); transform:scaleX(0); transform-origin:left; transition:transform .2s}
.cat-tile:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:transparent}
.cat-tile:hover::after{transform:scaleX(1)}
.cat-tile{padding:24px 18px}
.cat-tile svg{width:86px; height:64px; margin:0 auto 14px}
.cat-tile strong{display:block; font-size:14.5px; margin-bottom:4px}
.cat-tile span{font-size:11.5px; color:var(--muted)}
@media (max-width:1100px){.cat-strip{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.cat-strip{grid-template-columns:repeat(2,1fr)}}

/* --- product grid --------------------------------------------------------- */
.grid{display:grid; gap:18px}
.grid-6{grid-template-columns:repeat(6,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1100px){.grid-6{grid-template-columns:repeat(4,1fr)} .grid-4{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.grid-6,.grid-4{grid-template-columns:repeat(3,1fr)} .grid-3{grid-template-columns:repeat(2,1fr)} .grid-2{grid-template-columns:1fr}}
@media (max-width:560px){.grid-6,.grid-4,.grid-3{grid-template-columns:repeat(2,1fr)}}

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .15s, box-shadow .15s, border-color .15s;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#D3DCD9}
.card-media{aspect-ratio:5/4; background:var(--bg-alt); display:grid; place-items:center; padding:14px; border-bottom:1px solid var(--line-soft); position:relative}
.card-media svg{width:84%; height:84%}
.card-body{padding:13px 14px 15px; display:flex; flex-direction:column; gap:4px; flex:1}
.card-body h3{font-size:13.5px; font-weight:650; line-height:1.3}
.card-body .spec{font-size:11.5px; color:var(--muted); flex:1}
.card-price{font-size:12.5px; font-weight:700; color:var(--teal); margin-top:6px; display:flex; align-items:baseline; gap:5px}
.card-price span{font-size:10.5px; font-weight:500; color:var(--muted)}
.badge{
  position:absolute; top:10px; left:10px; z-index:2; font-size:10px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; padding:4px 8px; border-radius:20px; background:var(--magenta); color:#fff;
}
.badge--gold{background:var(--gold); color:#241C00}
.badge--teal{background:var(--teal); color:#fff}

/* --- feature banner ------------------------------------------------------- */
.banner{
  background:var(--teal); color:#fff; border-radius:var(--radius-lg); padding:44px; overflow:hidden;
  display:grid; grid-template-columns:1.2fr .8fr; gap:36px; align-items:center; position:relative;
}
.banner::before{content:''; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg,var(--cyan) 0 25%,var(--magenta) 25% 50%,var(--yellow) 50% 75%,var(--key) 75% 100%)}
.banner h2{font-family:var(--serif); font-size:clamp(24px,3vw,34px); margin-bottom:12px}
.banner p{color:#BDD3CE; margin-bottom:22px; font-size:15px}
.banner-side{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius); padding:22px}
.banner-side li{display:flex; gap:11px; align-items:flex-start; font-size:13.5px; color:#DCEAE6}
.banner-side li + li{margin-top:12px}
.banner-side .tick{color:var(--gold); flex:none; margin-top:3px}
@media (max-width:820px){.banner{grid-template-columns:1fr; padding:30px}}

/* --- steps ---------------------------------------------------------------- */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:0; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:#fff}
.step{padding:26px 24px; border-right:1px solid var(--line); position:relative}
.step:last-child{border-right:0}
.step-no{font-family:var(--serif); font-size:34px; color:var(--line); line-height:1; margin-bottom:12px; display:block}
.step h3{font-size:15px; color:var(--teal); margin-bottom:6px}
.step p{font-size:13px; color:var(--muted)}
.step::after{content:''; position:absolute; left:0; bottom:0; width:100%; height:3px; background:var(--accent); opacity:.85}
@media (max-width:1100px){.steps{grid-template-columns:repeat(3,1fr)} .step:nth-child(3n){border-right:0} .step:nth-child(-n+3){border-bottom:1px solid var(--line)}}
@media (max-width:520px){.steps{grid-template-columns:1fr} .step{border-right:0; border-bottom:1px solid var(--line)}}

/* --- trust badges --------------------------------------------------------- */
.trust{display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:26px 22px}
.trust-item{display:flex; gap:14px; align-items:flex-start}
.trust-item .ico{width:42px; height:42px; border-radius:10px; background:var(--teal-050); color:var(--teal); display:grid; place-items:center; flex:none}
.trust-item h3{font-size:14px; margin-bottom:3px}
.trust-item p{font-size:12.5px; color:var(--muted)}
@media (max-width:900px){.trust{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.trust{grid-template-columns:1fr}}

/* --- capability spec list ------------------------------------------------- */
.spec-table{width:100%; border-collapse:collapse; font-size:14px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.spec-table th,.spec-table td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--line-soft)}
.spec-table th{background:var(--teal-050); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); font-weight:700}
.spec-table tr:last-child td{border-bottom:0}
.spec-table td:first-child{font-weight:600}

/* --- testimonials --------------------------------------------------------- */
.quote-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; display:flex; flex-direction:column; gap:14px}
.quote-card .mark{font-family:var(--serif); font-size:44px; line-height:.6; color:var(--gold)}
.quote-card p{font-size:14.5px; color:#25322F; flex:1}
.quote-card footer{font-size:12.5px; color:var(--muted)}
.quote-card footer strong{display:block; color:var(--ink); font-size:13.5px}

/* --- FAQ ------------------------------------------------------------------ */
.faq{border-top:1px solid var(--line); max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  padding:18px 40px 18px 0; font-size:15px; font-weight:650; cursor:pointer; position:relative; list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+'; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-size:22px; font-weight:400; color:var(--gold); line-height:1;
}
.faq details[open] summary::after{content:'\2013'}
.faq details[open] summary{color:var(--teal)}
.faq .answer{padding:0 40px 20px 0; font-size:14px; color:var(--muted)}

/* --- SEO prose block ------------------------------------------------------ */
.prose{max-width:900px; font-size:14.5px; color:var(--muted)}
.prose h2{font-family:var(--serif); color:var(--teal); font-size:26px; margin-bottom:14px}
.prose h3{font-size:15.5px; color:var(--ink); margin:24px 0 6px}
.prose p + p{margin-top:12px}
.prose-cols{columns:2; column-gap:40px}
@media (max-width:760px){.prose-cols{columns:1}}

/* --- forms ---------------------------------------------------------------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field{display:flex; flex-direction:column; gap:6px}
.field--full{grid-column:1/-1}
.field label{font-size:12.5px; font-weight:650; color:var(--ink)}
.field label span{color:var(--magenta)}
.field input,.field select,.field textarea{
  border:1.5px solid var(--line); border-radius:var(--radius); padding:11px 13px; font-size:14px;
  font-family:inherit; color:var(--ink); background:#fff; width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal); outline:none}
.field textarea{min-height:120px; resize:vertical}
.field .hint{font-size:11.5px; color:var(--muted)}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}

.panel{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px}
.panel--teal{background:var(--teal); color:#fff; border-color:var(--teal)}
.panel--teal h3{color:#fff}
.panel--teal a{color:var(--gold-soft)}

.contact-list li{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-soft); align-items:flex-start}
.contact-list li:last-child{border-bottom:0}
.contact-list .ico{width:38px;height:38px;border-radius:9px;background:var(--teal-050);color:var(--teal);display:grid;place-items:center;flex:none}
.contact-list h4{font-size:12px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); margin-bottom:3px; font-weight:700}
.contact-list p{font-size:14.5px; font-weight:600}
.contact-list a{color:var(--teal)}

/* --- page header ---------------------------------------------------------- */
.page-head{background:var(--teal); color:#fff; padding:46px 0}
.page-head .crumbs{font-size:12.5px; color:#9FBDB6; margin-bottom:12px}
.page-head .crumbs a{color:#9FBDB6}
.page-head .crumbs a:hover{color:#fff}
.page-head h1{font-family:var(--serif); font-size:clamp(28px,4vw,42px); margin-bottom:10px}
.page-head p{color:#BDD3CE; max-width:64ch; font-size:15.5px}

/* --- footer --------------------------------------------------------------- */
.site-footer{background:var(--teal-900); color:#A9C2BC; font-size:13.5px; padding-top:52px}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; padding-bottom:40px}
.footer-brand img{width:120px; margin-bottom:16px; filter:brightness(0) invert(1) opacity(.95)}
.footer-brand p{margin-bottom:18px; max-width:38ch}
.site-footer h4{color:#fff; font-size:12px; letter-spacing:.13em; text-transform:uppercase; margin-bottom:16px}
.site-footer li + li{margin-top:9px}
.site-footer a:hover{color:#fff}
.socials{display:flex; gap:10px}
.socials a{width:36px;height:36px;border-radius:9px;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;color:#A9C2BC}
.socials a:hover{background:rgba(255,255,255,.1); color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1); padding-top:18px; padding-bottom:18px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px}
@media (max-width:900px){.footer-top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr; gap:28px}}

/* --- floating whatsapp ---------------------------------------------------- */
.fab{
  position:fixed; right:18px; bottom:18px; z-index:70; width:54px; height:54px; border-radius:50%;
  background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:var(--shadow-lg);
  transition:transform .15s;
}
.fab:hover{transform:scale(1.06)}

/* --- misc ----------------------------------------------------------------- */
.chip{display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:20px; background:var(--teal-050); color:var(--teal); font-size:12px; font-weight:650}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.note{background:#FFF8E1; border:1px solid #F0DFA8; border-left:4px solid var(--gold); border-radius:var(--radius); padding:14px 16px; font-size:13px; color:#6B5610}
.note strong{color:#4A3B06}
.center{text-align:center}
.mt-24{margin-top:24px}
.mt-32{margin-top:32px}

/* ==========================================================================
   Additions: gallery, reviews, service pages
   ========================================================================== */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
@media (max-width:900px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
.gallery-item{
  aspect-ratio:1; border-radius:var(--radius); border:1px solid var(--line); background:var(--bg-alt);
  display:grid; place-items:center; padding:18px; position:relative; overflow:hidden; text-align:center;
}
.gallery-item svg{width:74%; height:74%}
.gallery-item figcaption{
  position:absolute; inset:auto 0 0 0; padding:9px 12px; font-size:11.5px; font-weight:600;
  background:linear-gradient(transparent,rgba(7,37,34,.88)); color:#fff; text-align:left;
}
.gallery-note{margin-top:18px}

.stars{color:var(--gold); font-size:14px; letter-spacing:2px}

.svc-hero{display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center}
@media (max-width:820px){.svc-hero{grid-template-columns:1fr}}
.tick-list li{display:flex; gap:11px; align-items:flex-start; font-size:14.5px}
.tick-list li + li{margin-top:11px}
.tick-list .tick{color:var(--gold); flex:none; margin-top:4px}

.owner-row{display:flex; gap:18px; flex-wrap:wrap}
.owner{display:flex; align-items:center; gap:13px; border:1px solid var(--line); border-radius:var(--radius); padding:14px 18px; background:#fff}
.owner .avatar{width:44px;height:44px;border-radius:50%;background:var(--teal);color:var(--gold-soft);display:grid;place-items:center;font-family:var(--serif);font-size:19px;font-weight:700;flex:none}
.owner strong{display:block; font-size:14.5px}
.owner span{font-size:12px; color:var(--muted)}

.map-embed{border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; height:100%; min-height:340px; background:var(--bg-alt)}
.map-embed iframe{width:100%; height:100%; min-height:340px; border:0; display:block}

.status-msg{margin-top:14px; background:var(--teal-050); border:1px solid #CFE0DB; border-radius:var(--radius); padding:12px 14px; font-size:13.5px; color:var(--teal)}