/* ═══════════════════════════════════════════════
   G & H INTERIORS — style.css
   Earthy Natural theme: sage / olive, timber, cream
   ═══════════════════════════════════════════════ */
:root {
  --bg: #F3EFE7;
  --paper: #FBF9F5;
  --sand: #E9E2D5;
  --sage: #7F8C74;
  --sage-l: #DDE2D5;
  --olive: #3D4A3A;
  --olive-d: #2F3A2D;
  --wood: #B08A57;
  --wood-d: #86663B;
  --wood-l: #E7D8C1;
  --text: #2E3129;
  --muted: #5E6257;
  --line: #DCD6CA;
  --wa: #138A48;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 22px;
  --wrap: 1240px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 100px; }
body { background: var(--bg); color: var(--text); font: 300 17px/1.7 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 500; background: var(--olive); color: #fff; padding: 10px 18px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; }
.ic { width: 1em; height: 1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ─── Type ─── */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.08; color: var(--olive-d); letter-spacing: -.005em; }
h1 { font-size: clamp(40px, 5vw, 64px); }
h2 { font-size: clamp(34px, 4.3vw, 54px); }
h3 { font-size: 27px; line-height: 1.15; }
h1 em, h2 em { font-style: italic; font-weight: 500; color: var(--wood); }
.lead { font-size: 19px; color: var(--muted); }
.kicker { display: inline-block; padding: 7px 15px; border-radius: 999px; background: var(--sage-l); color: var(--olive); font: 500 12px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.on-dark .kicker, .kicker.light { background: rgba(255,255,255,.13); color: #E4E8DC; }
p + p { margin-top: 14px; }

/* ─── Buttons ─── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 13px 26px; border-radius: 999px; border: 1.5px solid transparent; font: 500 15.5px/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .25s; }
.btn .ic { font-size: 18px; }
.btn:hover { transform: translateY(-1px); }
.btn-olive { background: var(--olive); color: #fff; }
.btn-olive:hover { background: var(--olive-d); }
.btn-wood { background: var(--wood-d); color: #fff; }
.btn-wood:hover { background: #71552F; }
.btn-soft { background: var(--paper); color: var(--olive); border-color: var(--line); }
.btn-soft:hover { border-color: var(--olive); }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: #0F743C; }
.btn-light { background: var(--paper); color: var(--olive-d); }
.btn-light:hover { background: #fff; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--wood-d); text-decoration: none; }
.link-arrow .ic { transition: transform .25s; }
.link-arrow:hover .ic { transform: translateX(4px); }

/* ─── Header ─── */
.site-hdr { position: sticky; top: 12px; z-index: 100; padding: 0 12px; margin-top: 12px; }
.hdr-bar { position: relative; max-width: var(--wrap); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: rgba(251,249,245,.93); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 999px; padding: 8px 10px 8px 24px; box-shadow: 0 8px 30px rgba(46,49,41,.06); transition: box-shadow .3s; }
.scrolled .hdr-bar { box-shadow: 0 12px 34px rgba(46,49,41,.12); }
.logo img { height: 46px; width: auto; }
.nav { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav > li { position: relative; }
.nav a, .nav .dd-btn { display: flex; align-items: center; gap: 6px; padding: 10px 15px; border-radius: 999px; font-size: 15.5px; color: var(--muted); text-decoration: none; background: none; border: 0; cursor: pointer; transition: background .2s, color .2s; }
.nav a:hover, .nav .dd-btn:hover, .nav a[aria-current="page"], .nav .dd-btn.is-current { background: var(--sage-l); color: var(--olive-d); }
.dd-btn .ic { font-size: 15px; transition: transform .2s; }
.dd { position: absolute; top: calc(100% + 10px); left: 50%; width: 300px; transform: translate(-50%, 8px); opacity: 0; visibility: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 8px; list-style: none; box-shadow: 0 22px 44px rgba(46,49,41,.14); transition: opacity .2s, transform .2s, visibility .2s; }
.dd::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.has-dd:hover .dd, .has-dd:focus-within .dd, .has-dd.open .dd { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.has-dd:hover .dd-btn .ic, .has-dd.open .dd-btn .ic { transform: rotate(180deg); }
.dd a { padding: 11px 14px; border-radius: 12px; font-size: 15px; color: var(--text); }
.dd .dd-all { border-bottom: 1px solid var(--line); margin-bottom: 6px; padding-bottom: 6px; }
.dd .dd-all a { justify-content: space-between; font-weight: 500; color: var(--olive-d); }
.dd .dd-all .ic { color: var(--wood-d); }
.hdr-cta { display: flex; align-items: center; gap: 8px; }
.hdr-phone { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; font-weight: 500; color: var(--olive-d); text-decoration: none; border-radius: 999px; }
.hdr-phone:hover { background: var(--sage-l); }
.hdr-cta .btn { min-height: 46px; padding: 11px 22px; }
.menu-btn { display: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--olive); color: #fff; cursor: pointer; align-items: center; justify-content: center; }
.menu-btn .ic { font-size: 21px; }
.menu-btn .i-x { display: none; }
.menu-open .menu-btn .i-menu { display: none; }
.menu-open .menu-btn .i-x { display: block; }
.mnav { display: none; }

/* ─── Sections ─── */
main { display: block; }
.sec { padding: 104px 0; }
.sec-head { text-align: center; max-width: 700px; margin: 0 auto 54px; }
.sec-head h2 { margin-top: 16px; }
.sec-head p { color: var(--muted); margin-top: 14px; }
.sec-head.left { text-align: left; margin-left: 0; }
.paper { background: var(--paper); }
.sand { background: var(--sand); }


/* ─── Home hero ─── */
.hero { padding: 26px 0 48px; }
.hero-card { position: relative; border-radius: calc(var(--r) + 10px); overflow: hidden; min-height: min(660px, calc(100svh - 150px)); display: flex; align-items: flex-end; background: var(--olive-d); }
.hero-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(47,58,45,.5), rgba(47,58,45,0) 60%); }
.hero-copy { position: relative; z-index: 1; margin: 34px; max-width: 580px; background: var(--paper); border-radius: var(--r); padding: 40px 40px 36px; }
.hero-copy h1 { margin: 16px 0 14px; }
.hero-copy p { color: var(--muted); font-size: 18px; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; list-style: none; }
.chip { display: flex; align-items: center; gap: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 9px 20px 9px 9px; font-size: 15px; }
.chip i { width: 34px; height: 34px; border-radius: 50%; background: var(--sage-l); display: grid; place-items: center; color: var(--olive); font-size: 16px; }

/* ─── Inner page hero ─── */
.phero { padding: 30px 0 70px; }
.phero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 26px; align-items: stretch; }
.phero-copy { background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--r) + 6px); padding: 46px 44px; display: flex; flex-direction: column; justify-content: center; }
.phero-copy h1 { margin: 16px 0 14px; font-size: clamp(38px, 4.4vw, 58px); }
.phero-copy p { color: var(--muted); font-size: 18px; }
.phero-img { border-radius: calc(var(--r) + 6px); overflow: hidden; min-height: 420px; background: var(--sand); }
.phero-img img { width: 100%; height: 100%; object-fit: cover; }
.phero.text-only .phero-grid { grid-template-columns: 1fr; }
.phero.text-only .phero-copy { text-align: center; align-items: center; padding: 64px 44px; }
.phero.text-only .phero-copy p { max-width: 640px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--olive-d); text-decoration: underline; }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.phero.text-only .crumbs { justify-content: center; }

/* ─── Services band ─── */
.svc-band { background: var(--olive); color: #E9EBE3; border-radius: calc(var(--r) + 14px); margin: 0 12px; padding: 100px 0; }
.svc-band h2 { color: #fff; }
.svc-band .sec-head p { color: #C9CFC0; }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.svc { background: var(--paper); color: var(--text); border-radius: var(--r); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s; }
.svc:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(0,0,0,.2); }
.svc-img { overflow: hidden; aspect-ratio: 3 / 2; background: var(--sand); }
.svc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.svc:hover .svc-img img { transform: scale(1.05); }
.svc-body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.svc h3 { margin-bottom: 6px; }
.svc p { color: var(--muted); font-size: 15.5px; flex: 1; }
.svc .link-arrow { margin-top: 16px; font-size: 15px; }

/* ─── Split (signature / intro) ─── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.split.rev .split-media { order: 2; }
.split-media { position: relative; }
.split-media img { width: 100%; border-radius: var(--r); object-fit: cover; aspect-ratio: 4 / 4.6; }
.split h2 { margin: 16px 0 18px; }
.split p { color: var(--muted); }
.ticks { list-style: none; display: grid; gap: 12px; margin: 26px 0 32px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.ticks .ic { color: var(--wood-d); font-size: 19px; margin-top: 4px; }
.ticks.two { grid-template-columns: 1fr 1fr; }
.badge-card { position: absolute; right: -22px; bottom: 36px; background: var(--paper); border-radius: 18px; padding: 18px 22px; box-shadow: 0 18px 40px rgba(46,49,41,.14); font-size: 14.5px; color: var(--muted); max-width: 250px; }
.badge-card strong { display: block; font: 600 22px/1.2 var(--serif); color: var(--olive-d); }
.values { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.values li { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.values strong { display: flex; align-items: center; gap: 10px; font: 600 21px/1.2 var(--serif); color: var(--olive-d); margin-bottom: 4px; }
.values .ic { color: var(--wood-d); font-size: 20px; }
.values span { font-size: 14.5px; color: var(--muted); }
.values.three { grid-template-columns: repeat(3, 1fr); }

/* ─── Process panel (hover / tap a step to swap the photo) ─── */
.pp { position: relative; border-radius: calc(var(--r) + 10px); overflow: hidden; height: 620px; background: var(--olive-d); color: #fff; }
.pp-bg { position: absolute; inset: 0; }
.pp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .9s ease, transform 7s ease; }
.pp-img.on { opacity: 1; transform: scale(1); }
.pp::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,36,28,.05) 0%, rgba(30,36,28,.25) 45%, rgba(30,36,28,.88) 100%); pointer-events: none; }
.pp-cols { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); height: 100%; }
.pp-col { position: relative; display: flex; align-items: flex-end; padding: 0 30px 40px; border: 0; border-right: 1px solid rgba(255,255,255,.18); background: transparent; color: inherit; text-align: left; cursor: pointer; transition: background .45s ease; }
.pp-col:last-child { border-right: 0; }
.pp-col:focus-visible { outline: 2px solid var(--wood-l); outline-offset: -4px; }
.pp-bar { position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--wood); }
.pp-col.on .pp-bar { width: 100%; transition: width var(--pp-t, 5s) linear; }
.pp.is-manual .pp-bar { display: none; }
.pp-in { display: block; transition: transform .5s var(--ease); }
.pp-num { display: flex; align-items: center; gap: 12px; font: 500 15px/1 var(--sans); letter-spacing: .18em; color: rgba(255,255,255,.7); margin-bottom: 16px; }
.pp-num i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.55); font-style: normal; font-size: 20px; transition: background .4s, border-color .4s, color .4s; }
.pp-title { display: block; font: 600 30px/1.12 var(--serif); color: #fff; }
.pp-txt { display: block; max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.88); transition: max-height .5s ease, opacity .5s ease, margin .5s ease; }
.pp-col.on { background: rgba(47,58,45,.36); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }
.pp-col.on .pp-in { transform: translateY(-14px); }
.pp-col.on .pp-num i { background: var(--wood); border-color: var(--wood); color: #fff; }
.pp-col.on .pp-txt { max-height: 150px; opacity: 1; margin-top: 12px; }
.pp-col:not(.on):hover .pp-num i { border-color: #fff; }
.pp.compact { height: 540px; }

/* ─── Services landing: one row per service ─── */
.svc-all { display: flex; justify-content: center; margin-top: 44px; }
.svc-rows { display: grid; gap: 28px; }
.svc-row { display: grid; grid-template-columns: 1.05fr 1fr; background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--r) + 6px); overflow: hidden; }
.svc-row.flip .svc-row-img { order: 2; }
.svc-row-img { display: block; min-height: 400px; overflow: hidden; background: var(--sand); }
.svc-row-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.svc-row-img:hover img { transform: scale(1.04); }
.svc-row-body { display: flex; flex-direction: column; justify-content: center; padding: 48px 50px; }
.svc-row-num { font: 500 13px/1 var(--sans); letter-spacing: .2em; color: var(--wood-d); }
.svc-row h2 { font-size: clamp(32px, 3.4vw, 44px); margin: 12px 0 14px; }
.svc-row h2 a { text-decoration: none; }
.svc-row h2 a:hover { color: var(--wood-d); }
.svc-row p { color: var(--muted); }
.svc-row .ticks { margin: 22px 0 4px; gap: 10px 18px; font-size: 15.5px; }

/* ─── Work mosaic (home teaser + Our Work page) ─── */
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; grid-auto-flow: dense; gap: 14px; }
.mosaic .tile { position: relative; display: block; border-radius: 18px; overflow: hidden; background: var(--sand); }
.mosaic .tile.tall { grid-row: span 2; }
.mosaic .tile.wide { grid-column: span 2; grid-row: span 2; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.mosaic a.tile:hover img { transform: scale(1.05); }
.tile-tag { position: absolute; left: 12px; bottom: 12px; background: rgba(251,249,245,.94); color: var(--olive-d); font-size: 13px; font-weight: 500; border-radius: 999px; padding: 6px 12px; }
.more-tile { background: var(--olive) !important; color: #fff; display: flex !important; flex-direction: column; justify-content: flex-end; padding: 30px; text-decoration: none; }
.more-tile strong { font: 600 32px/1.12 var(--serif); }
.more-tile span { display: inline-flex; align-items: center; gap: 8px; color: var(--wood-l); margin-top: 10px; }
.mosaic .tile[hidden] { display: none; }
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 34px; }
.filters button { background: var(--paper); border: 1px solid var(--line); padding: 10px 20px; border-radius: 999px; font-size: 15px; color: var(--muted); cursor: pointer; transition: .2s; }
.filters button:hover { border-color: var(--olive); color: var(--olive-d); }
.filters button[aria-pressed="true"] { background: var(--olive); border-color: var(--olive); color: #fff; }
.load-more { display: flex; justify-content: center; margin-top: 34px; }
.work-note { text-align: center; color: var(--muted); margin-top: 26px; font-size: 15.5px; }

/* ─── Service page gallery ─── */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery a { position: relative; display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--sand); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.gallery a:hover img { transform: scale(1.05); }
.gallery.n1, .gallery.n2 { grid-template-columns: repeat(2, 1fr); }
.gallery.n1 { max-width: 620px; margin: 0 auto; grid-template-columns: 1fr; }
.gallery-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; color: var(--muted); }

/* ─── Option cards ─── */
.opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.opt { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 30px 28px; }
.opt i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sage-l); color: var(--olive); font-size: 22px; margin-bottom: 18px; }
.opt h3 { font-size: 25px; margin-bottom: 8px; }
.opt p { color: var(--muted); font-size: 15.5px; }

/* ─── Other services strip ─── */
.others { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.other { display: block; text-decoration: none; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; }
.other:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(46,49,41,.12); }
.other img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.other span { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; font: 600 19px/1.2 var(--serif); color: var(--olive-d); }
.other .ic { font-size: 16px; color: var(--wood-d); }
.others.six { grid-template-columns: repeat(3, 1fr); }

/* ─── FAQ ─── */
.faq { max-width: 860px; margin: 0 auto; }
details { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; margin-bottom: 12px; padding: 0 26px; }
summary { list-style: none; cursor: pointer; padding: 21px 0; font: 600 22px/1.3 var(--serif); color: var(--olive-d); display: flex; justify-content: space-between; gap: 20px; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 300 28px/1 var(--sans); color: var(--wood-d); transition: transform .25s; }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--muted); padding-bottom: 22px; }
details a { color: var(--wood-d); }

/* ─── Contact / CTA card + forms ─── */
.cta-card { background: var(--sage-l); border-radius: calc(var(--r) + 10px); padding: 64px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; }
.cta-card h2 { margin: 16px 0 14px; }
.cta-card .lead { font-size: 17.5px; margin-bottom: 26px; }
.methods { list-style: none; display: grid; gap: 12px; }
.methods a, .methods span.m { display: flex; align-items: center; gap: 14px; background: var(--paper); border-radius: 999px; padding: 9px 22px 9px 9px; text-decoration: none; font-size: 16px; transition: box-shadow .25s; }
.methods a:hover { box-shadow: 0 8px 20px rgba(46,49,41,.1); }
.methods i { width: 42px; height: 42px; border-radius: 50%; background: var(--olive); color: #fff; display: grid; place-items: center; font-size: 18px; flex: 0 0 42px; }
.methods .wa i { background: var(--wa); }
.methods small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.note-sm { margin-top: 20px; font-size: 15px; color: var(--muted); }
.note-sm a { color: var(--wood-d); }
.form { background: var(--paper); border-radius: var(--r); padding: 36px; }
.form h3 { font-size: 29px; margin-bottom: 4px; }
.form .sub { color: var(--muted); font-size: 15px; margin-bottom: 22px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: block; margin-bottom: 14px; font-size: 14.5px; font-weight: 400; color: var(--olive-d); }
.field .opt-l { color: var(--muted); font-weight: 300; }
.field input, .field select, .field textarea { display: block; width: 100%; margin-top: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; color: var(--text); font: 300 16px/1.4 var(--sans); padding: 13px 15px; }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233D4A3A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.field textarea { min-height: 116px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--sage); outline-offset: 0; border-color: transparent; }
.field input[type="file"] { padding: 10px; background: var(--bg); border-style: dashed; cursor: pointer; }
.pref { border: 0; margin-bottom: 16px; }
.pref legend { font-size: 14.5px; color: var(--olive-d); font-weight: 400; margin-bottom: 8px; }
.pref-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.pref label { position: relative; cursor: pointer; }
.pref input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pref span { display: inline-block; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 14.5px; transition: .2s; }
.pref input:checked + span { background: var(--olive); border-color: var(--olive); color: #fff; }
.pref input:focus-visible + span { outline: 2px solid var(--sage); outline-offset: 2px; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form .btn { width: 100%; margin-top: 4px; }
.form-msg { margin-top: 12px; font-size: 14.5px; color: #9B3B2E; min-height: 1em; }
.form-fine { margin-top: 12px; font-size: 13px; color: var(--muted); }
.form-fine a { color: inherit; }

/* Contact page */
.c-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: start; }
.c-side h2 { font-size: clamp(32px, 3.6vw, 44px); margin: 16px 0 14px; }
.c-side .methods { margin-top: 24px; }
.areas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.area { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 30px 28px; }
.area i { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--sage-l); color: var(--olive); font-size: 22px; margin-bottom: 16px; }
.area h3 { font-size: 27px; margin-bottom: 12px; }
.area ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.area li { padding: 6px 13px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: 14px; }
.areas-note { text-align: center; margin-top: 28px; color: var(--muted); }
.areas-note a { color: var(--wood-d); }

/* Simple content pages */
.prose { max-width: 780px; margin: 0 auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 52px 56px; }
.prose h2 { font-size: 30px; margin: 34px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--muted); }
.prose ul { padding-left: 22px; margin-top: 10px; }
.prose li + li { margin-top: 6px; }
.prose a { color: var(--wood-d); }
.center-card { max-width: 680px; margin: 0 auto; text-align: center; background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--r) + 6px); padding: 64px 44px; }
.center-card .big-ic { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 22px; border-radius: 50%; background: var(--sage-l); color: var(--olive); font-size: 34px; }
.center-card h1 { font-size: clamp(38px, 4.4vw, 54px); margin-bottom: 14px; }
.center-card p { color: var(--muted); }
.center-card .ctas { justify-content: center; }

/* ─── Footer ─── */
.site-ftr { background: var(--olive-d); color: #C3C9BA; margin-top: 90px; padding: 76px 0 34px; font-size: 15px; }
.ftr-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 40px; }
.ftr-brand img { height: 92px; width: auto; margin-bottom: 18px; }
.ftr-brand p { max-width: 330px; }
.site-ftr h4 { font: 500 13px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--wood-l); margin-bottom: 18px; }
.site-ftr ul { list-style: none; display: grid; gap: 10px; }
.site-ftr a { text-decoration: none; transition: color .2s; }
.site-ftr a:hover { color: #fff; }
.ftr-contact a { display: inline-flex; align-items: center; gap: 10px; }
.ftr-contact .ic { color: var(--wood-l); font-size: 17px; }
.ftr-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 54px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); font-size: 14px; color: #A9B0A0; }
.ftr-bottom span { display: inline-flex; flex-wrap: wrap; gap: 6px 18px; }
.ftr-bottom a { color: #C3C9BA; }
.ftr-bottom a:hover { color: #fff; text-decoration: underline; }

/* ─── Fixed contact buttons ─── */
.float-cta { position: fixed; right: 22px; bottom: 22px; z-index: 150; display: flex; flex-direction: column; gap: 12px; }
.float-cta a { position: relative; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; color: #fff; text-decoration: none; box-shadow: 0 10px 26px rgba(0,0,0,.2); transition: transform .25s; }
.float-cta a:hover { transform: scale(1.07); }
.float-cta .ic { font-size: 25px; }
.float-cta .f-wa { background: var(--wa); }
.float-cta .f-call { background: var(--olive); }
.float-cta a span { position: absolute; right: 70px; top: 50%; transform: translate(6px, -50%); white-space: nowrap; background: var(--olive-d); color: #fff; font-size: 14px; padding: 7px 12px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.float-cta a:hover span, .float-cta a:focus-visible span { opacity: 1; transform: translate(0, -50%); }
.mbar { display: none; }

/* ─── Lightbox ─── */
.lb { position: fixed; inset: 0; z-index: 400; display: none; align-items: center; justify-content: center; background: rgba(22,26,20,.95); padding: 60px 70px 110px; }
.lb.on { display: flex; }
.lb img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; }
.lb-btn { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; }
.lb-btn:hover { background: rgba(255,255,255,.24); }
.lb-btn .ic { font-size: 24px; }
.lb-x { top: 16px; right: 16px; }
.lb-p { left: 14px; top: 50%; transform: translateY(-50%); }
.lb-n { right: 14px; top: 50%; transform: translateY(-50%); }
.lb-p .ic { transform: rotate(180deg); }
.lb-bar { position: absolute; left: 16px; right: 16px; bottom: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; color: #E4E8DC; font-size: 15px; text-align: center; }
.lb-bar .btn { min-height: 44px; padding: 10px 20px; }

/* ─── Gentle fade-in on scroll (no sliding) ─── */
.rv { opacity: 0; transition: opacity .7s ease; }
.rv.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
}

/* ═══════════ Responsive ═══════════ */
@media (max-width: 1180px) {
  .hdr-phone span { display: none; }
  .nav a, .nav .dd-btn { padding: 10px 12px; }
  .others { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1020px) {
  .svc-grid, .opts { grid-template-columns: repeat(2, 1fr); }
  .split, .cta-card, .c-grid, .phero-grid { grid-template-columns: 1fr; gap: 44px; }
  .split.rev .split-media { order: 0; }
  .split-media { max-width: 560px; }
  .phero-grid { gap: 18px; }
  .phero-img { min-height: 340px; max-height: 480px; }
  .cta-card { padding: 44px; }
  .mosaic { grid-template-columns: repeat(3, 1fr); }
  .pp-col { padding: 0 20px 34px; }
  .pp-title { font-size: 25px; }
  .svc-row { grid-template-columns: 1fr; }
  .svc-row.flip .svc-row-img { order: 0; }
  .svc-row-img { min-height: 0; aspect-ratio: 16 / 10; }
  .svc-row-body { padding: 36px 36px 40px; }
  .mosaic.teaser { grid-template-columns: 1fr 1fr; }
  .mosaic.teaser .tile.wide { grid-column: span 2; grid-row: span 1; }
  .areas-grid, .values.three { grid-template-columns: 1fr 1fr; }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .nav, .hdr-phone { display: none; }
  .menu-btn { display: inline-flex; }
  .hdr-cta .btn { display: none; }
  .mnav { position: absolute; top: calc(100% + 8px); left: 0; right: 0; display: none; max-height: calc(100svh - 110px); overflow-y: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; box-shadow: 0 22px 44px rgba(46,49,41,.16); }
  .menu-open .mnav { display: block; }
  .mnav ul { list-style: none; }
  .mnav a { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-radius: 12px; text-decoration: none; font-size: 17px; }
  .mnav a[aria-current="page"], .mnav a:hover { background: var(--sage-l); }
  .mnav .sub { margin: 0 0 6px 12px; padding-left: 10px; border-left: 2px solid var(--line); }
  .mnav .sub a { font-size: 15.5px; padding: 10px 14px; color: var(--muted); }
  .mnav-label { display: block; padding: 13px 16px 4px; font-size: 17px; }
  .mnav .btn { width: 100%; margin-top: 10px; }
  .pp { height: auto; min-height: 640px; }
  .pp::after { background: linear-gradient(180deg, rgba(30,36,28,0) 0%, rgba(30,36,28,.1) 26%, rgba(30,36,28,.72) 52%, rgba(30,36,28,.9) 100%); }
  .pp-cols { grid-template-columns: 1fr; height: auto; padding: 250px 22px 18px; }
  .pp-col { display: block; padding: 16px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .pp-col:last-child { border-bottom: 0; }
  .pp-col.on { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pp-col.on .pp-in { transform: translateX(6px); }
  .pp-bar { top: auto; bottom: -1px; height: 2px; }
  .pp-in { display: grid; grid-template-columns: 50px 1fr; column-gap: 14px; align-items: center; }
  .pp-num { grid-row: span 2; margin: 0; align-self: start; }
  .pp-num b { display: none; }
  .pp-title { font-size: 23px; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
  .pp-txt { grid-column: 2; text-shadow: 0 1px 10px rgba(0,0,0,.55); }
  .pp-col.on .pp-txt { margin-top: 6px; }
  .pp.compact { min-height: 600px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; padding-bottom: 74px; }
  .wrap { padding: 0 16px; }
  .sec { padding: 72px 0; }
  .site-hdr { top: 8px; padding: 0 8px; margin-top: 8px; }
  .hdr-bar { padding: 7px 7px 7px 16px; }
  .logo img { height: 38px; }
  .hero { padding: 16px 0 36px; }
  .hero-card { min-height: 0; flex-direction: column; align-items: stretch; border-radius: var(--r); }
  .hero-card > img { position: static; height: 290px; }
  .hero-card::after { display: none; }
  .hero-copy { margin: 0; border-radius: 0; padding: 28px 22px 30px; }
  .ctas .btn { flex: 1 1 100%; }
  .chips { gap: 8px; }
  .chip { font-size: 14px; padding: 7px 16px 7px 7px; }
  .chip i { width: 30px; height: 30px; }
  .phero { padding: 16px 0 50px; }
  .phero-copy { padding: 30px 22px; }
  .phero.text-only .phero-copy { padding: 40px 22px; }
  .phero-img { min-height: 260px; }
  .svc-band { margin: 0 8px; border-radius: var(--r); padding: 70px 0; }
  .svc-grid, .opts, .values, .values.three, .areas-grid, .ticks.two { grid-template-columns: 1fr; }
  .badge-card { right: 12px; bottom: 12px; }
  .split { gap: 36px; }
  .gallery, .gallery.n2 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; gap: 10px; }
  .mosaic .tile.wide { grid-column: span 2; grid-row: span 1; }
  .others, .others.six { grid-template-columns: 1fr 1fr; }
  .cta-card { padding: 26px 16px; border-radius: var(--r); gap: 30px; }
  .form { padding: 24px 16px; }
  .row { grid-template-columns: 1fr; gap: 0; }
  .svc-row-body { padding: 28px 22px 30px; }
  .prose { padding: 32px 22px; }
  .center-card { padding: 44px 22px; }
  .ftr-grid { grid-template-columns: 1fr; gap: 34px; }
  .site-ftr { margin-top: 60px; }
  .float-cta { display: none; }
  .mbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 150; }
  .mbar a { display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; border-radius: 999px; color: #fff; font-weight: 500; font-size: 16px; text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
  .mbar .ic { font-size: 20px; }
  .mbar .m-call { background: var(--olive); }
  .mbar .m-wa { background: var(--wa); }
  .lb { padding: 64px 10px 120px; }
  .lb-p, .lb-n { top: auto; bottom: 70px; transform: none; }
  summary { font-size: 20px; }
  details { padding: 0 18px; }
}
@media (max-width: 380px) {
  .mosaic, .gallery, .gallery.n2, .others, .others.six { grid-template-columns: 1fr; }
  .mosaic .tile.wide { grid-column: auto; }
}

/* iPhone safe areas (viewport-fit=cover) */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
@media (max-width: 760px) {
  .mbar { bottom: calc(12px + env(safe-area-inset-bottom)); left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); }
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
}