/* S3 Surfaces India — Surface-family pages v1
   Designed to sit alongside the existing home-page styles.css. */

.surface-page{background:var(--paper);color:var(--ink)}
.surface-page .site-header{background:rgba(245,241,234,.97)}
.surface-page .page-hero{background:var(--ink);color:var(--paper);padding:0}
.surface-page .page-hero-inner{width:min(calc(100% - 64px),var(--max));margin:auto;min-height:78vh;display:grid;grid-template-columns:1.02fr .98fr;align-items:stretch}
.surface-page .page-hero-copy{display:flex;flex-direction:column;justify-content:center;padding:100px 74px 90px 0}
.surface-page .page-hero h1{font:400 clamp(58px,7vw,112px)/.92 var(--serif);letter-spacing:-.04em;margin:0;max-width:780px}
.surface-page .page-hero h1 em{font-style:italic}
.surface-page .page-hero-lead{font-size:20px;line-height:1.6;color:var(--muted);max-width:650px;margin:32px 0 0}
.surface-page .page-hero-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:34px}
.surface-page .meta-chip{border:1px solid rgba(245,241,234,.18);padding:9px 12px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,241,234,.72)}
.surface-page .page-hero-media{position:relative;overflow:hidden;min-height:78vh;border-left:1px solid rgba(245,241,234,.12)}
.surface-page .page-hero-media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9) contrast(1.04)}
.surface-page .page-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.25))}
.surface-page .section{padding:120px 0}
.surface-page .section-head{display:grid;grid-template-columns:1fr 1.2fr;gap:70px;align-items:end}
.surface-page .section-head h2{font:400 clamp(44px,5.5vw,82px)/.98 var(--serif);letter-spacing:-.03em;margin:0}
.surface-page .section-head .lede{font-size:18px;color:rgba(17,17,15,.66);max-width:650px;margin:0}
.surface-page .dark-section{background:var(--ink);color:var(--paper)}
.surface-page .dark-section .lede{color:var(--muted)}
.surface-page .story-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:72px}
.surface-page .story-card{padding:42px;min-height:360px;border-top:1px solid var(--line);background:#eee7dd}
.surface-page .story-card.dark{background:#151514;color:var(--paper);border-color:rgba(245,241,234,.16)}
.surface-page .story-card .card-kicker{font-size:9px;letter-spacing:.2em;text-transform:uppercase;opacity:.52}
.surface-page .story-card h3{font:400 clamp(32px,4vw,54px)/1 var(--serif);margin:58px 0 0}
.surface-page .story-card p{max-width:560px;margin:20px 0 0;font-size:16px;color:rgba(17,17,15,.65)}
.surface-page .story-card.dark p{color:rgba(245,241,234,.64)}
.surface-page .split-media{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:stretch;margin-top:72px}
.surface-page .split-media .image-card{min-height:520px;overflow:hidden;background:#d8d1c5}
.surface-page .split-media img{width:100%;height:100%;object-fit:cover;display:block}
.surface-page .spec-band{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;margin-top:72px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.surface-page .spec-item{padding:26px 24px;border-right:1px solid var(--line)}
.surface-page .spec-item:last-child{border-right:0}
.surface-page .spec-item .label{font-size:9px;letter-spacing:.18em;text-transform:uppercase;opacity:.46}
.surface-page .spec-item strong{display:block;font:400 28px/1.05 var(--serif);margin-top:17px}
.surface-page .patina-grid,.surface-page .colour-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:60px}
.surface-page .finish-card{min-height:330px;padding:34px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
.surface-page .finish-card::before{content:"";position:absolute;inset:0;background:linear-gradient(140deg,#8a8175,#4c4742 58%,#b3a99a)}
.surface-page .finish-card.light::before{background:linear-gradient(140deg,#b8b3aa,#8c877f 60%,#d4d0c8)}
.surface-page .finish-card.natural::before{background:linear-gradient(140deg,#9f6d45,#5a4637 58%,#b88962)}
.surface-page .finish-card.quartz-white::before{background:linear-gradient(140deg,#f3f1ec,#d5d0c8 58%,#fffefa)}
.surface-page .finish-card.quartz-charcoal::before{background:linear-gradient(140deg,#323232,#111 62%,#4a4a47)}
.surface-page .finish-card > *{position:relative;z-index:1}
.surface-page .finish-card .finish-name{font:400 34px/1 var(--serif);color:#fff}
.surface-page .finish-card .finish-note{font-size:12px;line-height:1.5;color:rgba(255,255,255,.78);max-width:440px;margin-top:10px}
.surface-page .pattern-intro{margin-top:72px;display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:end}
.surface-page .pattern-intro h3{font:400 43px/1 var(--serif);margin:0}
.surface-page .pattern-intro p{font-size:16px;color:rgba(17,17,15,.64);max-width:650px;margin:0}
.surface-page .pattern-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px}
.surface-page .pattern-tile{min-height:124px;border:1px solid var(--line);padding:15px;display:flex;flex-direction:column;justify-content:space-between;background:#ece6dc}
.surface-page .pattern-tile:nth-child(3n){background:#e2dbd0}
.surface-page .pattern-code{font-size:8px;letter-spacing:.16em;opacity:.45}
.surface-page .pattern-name{font:400 22px/1.05 var(--serif);margin-top:20px}
.surface-page .pattern-note{font-size:10px;line-height:1.45;color:rgba(17,17,15,.56);margin-top:7px}
.surface-page .table-wrap{margin-top:58px;overflow-x:auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.surface-page table{border-collapse:collapse;width:100%;min-width:1060px;font-size:12px}
.surface-page th,.surface-page td{text-align:left;vertical-align:top;padding:15px 12px;border-bottom:1px solid var(--line)}
.surface-page th{font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.55;position:sticky;top:0;background:var(--paper);z-index:1}
.surface-page tbody tr:last-child td{border-bottom:0}
.surface-page td:first-child{font-family:var(--sans);font-weight:600;letter-spacing:.02em}
.surface-page .table-note{margin-top:18px;font-size:12px;line-height:1.55;color:rgba(17,17,15,.56);max-width:980px}
.surface-page .performance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:62px}
.surface-page .performance-card{padding:30px;min-height:170px;border-top:1px solid rgba(245,241,234,.16);background:#151514}
.surface-page .performance-card span{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,241,234,.42)}
.surface-page .performance-card h3{font:400 28px/1.05 var(--serif);margin:42px 0 0}
.surface-page .performance-card p{font-size:14px;color:rgba(245,241,234,.62);margin:12px 0 0}
.surface-page .evidence-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:22px;margin-top:64px}
.surface-page .evidence-card{padding:38px;background:#ece6dc}
.surface-page .evidence-card.dark{background:#141413;color:var(--paper)}
.surface-page .evidence-card .eyebrow{margin-bottom:16px}
.surface-page .evidence-number{font:400 clamp(48px,7vw,84px)/.9 var(--serif);letter-spacing:-.03em}
.surface-page .evidence-card p{font-size:15px;line-height:1.55;color:rgba(17,17,15,.63);max-width:590px;margin:18px 0 0}
.surface-page .evidence-card.dark p{color:rgba(245,241,234,.62)}
.surface-page .legal-note{margin-top:20px;font-size:11px;color:rgba(17,17,15,.52);max-width:720px}
.surface-page .page-cta{background:#11110f;color:var(--paper);padding:78px 0}
.surface-page .page-cta-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.surface-page .page-cta h2{font:400 clamp(40px,5vw,72px)/.96 var(--serif);margin:0;letter-spacing:-.03em}
.surface-page .page-cta p{color:var(--muted);max-width:590px}
.surface-page .page-cta .actions{justify-content:flex-start}
.surface-page .breadcrumb{width:min(calc(100% - 64px),var(--max));margin:0 auto;padding:22px 0 0;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,241,234,.42)}
.surface-page .breadcrumb a{color:rgba(245,241,234,.65)}

@media(max-width:980px){
  .surface-page .page-hero-inner{grid-template-columns:1fr}
  .surface-page .page-hero-copy{padding:90px 0 72px}
  .surface-page .page-hero-media{min-height:52vh;border-left:0;border-top:1px solid rgba(245,241,234,.12)}
  .surface-page .section-head,.surface-page .split-media,.surface-page .page-cta-inner,.surface-page .evidence-grid{grid-template-columns:1fr;gap:34px}
  .surface-page .spec-band{grid-template-columns:1fr}
  .surface-page .spec-item{border-right:0;border-bottom:1px solid var(--line)}
  .surface-page .spec-item:last-child{border-bottom:0}
  .surface-page .pattern-grid{grid-template-columns:repeat(2,1fr)}
  .surface-page .performance-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .surface-page .section{padding:88px 0}
  .surface-page .page-hero-inner,.surface-page .breadcrumb{width:min(calc(100% - 36px),var(--max))}
  .surface-page .page-hero-media{width:calc(100% + 36px);margin-left:-18px}
  .surface-page .page-hero h1{font-size:clamp(50px,15vw,76px)}
  .surface-page .page-hero-lead{font-size:17px}
  .surface-page .story-grid,.surface-page .patina-grid,.surface-page .colour-grid{grid-template-columns:1fr}
  .surface-page .story-card{min-height:320px;padding:30px}
  .surface-page .pattern-grid{grid-template-columns:1fr 1fr}
  .surface-page .performance-grid{grid-template-columns:1fr}
  .surface-page .pattern-intro{grid-template-columns:1fr;gap:24px}
  .surface-page .finish-card{min-height:270px}
}

/* Compatibility layer: surface-family pages use the original compact utility class names. */
.surface-page .nav-wrap{width:min(calc(100% - 56px),var(--max));margin:0 auto;min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.surface-page .brand-s3,.surface-page .brand-word{font-family:var(--serif);font-weight:400}
.surface-page .brand-s3{font-size:31px}
.surface-page .brand-s3 sub{font-size:.55em;vertical-align:-.2em}
.surface-page .brand-word{font-size:30px}
.surface-page .site-nav{display:flex;align-items:center;gap:25px;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.surface-page .site-nav>a{padding:8px 0}
.surface-page .site-nav>a:hover{opacity:.58}
.surface-page .menu-button{display:none;border:1px solid var(--line);background:none;width:46px;height:46px;padding:9px}
.surface-page .menu-button span{display:block;height:1px;background:var(--ink);margin:5px 0}
.surface-page .nav-cta{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 23px;border:1px solid var(--ink);font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.surface-page .actions{display:flex;align-items:center;gap:25px;margin-top:38px;flex-wrap:wrap}
.surface-page .btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 23px;border:1px solid transparent;font-size:10px;letter-spacing:.16em;text-transform:uppercase;transition:.18s ease}
.surface-page .btn-light{background:var(--paper);color:var(--ink)}
.surface-page .btn-dark{background:var(--ink);color:var(--paper)}
.surface-page .btn-outline-light{border-color:rgba(243,239,231,.55);color:var(--paper)}
.surface-page .btn-outline-light:hover{background:var(--paper);color:var(--ink)}
.surface-page .section-paper{background:var(--paper)}
@media(max-width:1080px){.surface-page .site-nav{gap:15px}.surface-page .container,.surface-page .nav-wrap{width:min(calc(100% - 38px),var(--max))}}
@media(max-width:820px){.surface-page .nav-wrap{width:calc(100% - 32px)}.surface-page .menu-button{display:block}.surface-page .site-nav{position:absolute;top:82px;left:0;right:0;display:none;flex-direction:column;align-items:stretch;background:var(--paper);border-bottom:1px solid var(--line);padding:16px;gap:0}.surface-page .site-nav.is-open{display:flex}.surface-page .site-nav>a{padding:16px 0;border-bottom:1px solid var(--line)}.surface-page .nav-cta{text-align:center;margin-top:14px}.surface-page .actions{align-items:flex-start;flex-direction:column}.surface-page .page-hero-inner{grid-template-columns:1fr}.surface-page .page-hero-media{min-height:54vh}}