/* ==========================================================================
   GoodDay International Tours & Travels — Design System v6 ("warm")
   Ported from the Lovable refresh the client approved: warm navy + orange,
   Poppins, pill nav, big rounded cards, gradient panels, rotating hero.
   Vanilla / zero-dependency. Cascades to all 11 pages.
   ========================================================================== */

:root {
  /* Brand (OKLCH, from the approved Lovable tokens) */
  --navy-deep: oklch(0.22 0.09 262);
  --navy:      oklch(0.31 0.11 262);
  --navy-soft: oklch(0.42 0.09 258);
  --orange:    oklch(0.72 0.18 55);
  --orange-glow: oklch(0.80 0.17 65);
  --orange-press: oklch(0.66 0.18 52);
  --brand-red: oklch(0.63 0.22 27);
  --whatsapp:  oklch(0.66 0.16 152);
  --whatsapp-press: oklch(0.60 0.16 152);
  --ink:       oklch(0.18 0.04 262);

  /* Surfaces / neutrals (warm off-white) */
  --bg:        oklch(0.995 0.004 80);
  --bg-soft:   oklch(0.96 0.012 80);
  --surface:   oklch(1 0 0);
  --foreground: var(--ink);
  --muted:     oklch(0.48 0.03 260);      /* captions / body-2 */
  --muted-2:   oklch(0.60 0.02 260);
  --line:      oklch(0.9 0.015 260);
  --line-soft: oklch(0.93 0.012 260);

  /* semantic aliases used across older markup */
  --ink-2: oklch(0.30 0.03 262);
  --royal: var(--navy);
  --sky:   var(--orange);

  /* Gradients */
  --gradient-hero: linear-gradient(180deg, oklch(0.22 0.09 262 / .12) 0%, oklch(0.22 0.09 262 / .55) 52%, oklch(0.20 0.09 262 / .93) 100%);
  --gradient-brand: linear-gradient(135deg, var(--navy-deep), var(--navy));
  --gradient-accent: linear-gradient(135deg, var(--orange), var(--orange-glow));
  --gradient-sky: radial-gradient(circle at 20% 10%, oklch(0.80 0.17 65 / .28), transparent 55%),
                  radial-gradient(circle at 85% 90%, oklch(0.32 0.11 262 / .30), transparent 60%);

  /* Shadows */
  --shadow-elegant: 0 24px 60px -22px oklch(0.22 0.09 262 / .35);
  --shadow-soft: 0 10px 30px -14px oklch(0.22 0.09 262 / .18);
  --shadow-glow: 0 12px 40px -10px oklch(0.72 0.18 55 / .45);
  --shadow-wa:  0 12px 40px -12px oklch(0.66 0.16 152 / .5);
  --shadow-card: 0 1px 0 oklch(0.22 0.09 262 / .04), 0 8px 24px -12px oklch(0.22 0.09 262 / .14);

  /* Radii */
  --r-4xl: 32px; --r-3xl: 28px; --r-2xl: 22px; --r-xl: 18px; --r: 14px; --r-sm: 11px; --pill: 999px;

  /* Type */
  --text-xs: .78rem; --text-sm: .9rem; --text-base: 1.05rem;
  --text-lg: clamp(1.12rem, 1.4vw, 1.28rem);
  --text-xl: clamp(1.35rem, 2.2vw, 1.6rem);
  --text-2xl: clamp(1.9rem, 4vw, 3rem);
  --text-display: clamp(2.2rem, 6vw, 4.25rem);

  --maxw: 1200px;
  --gutter: clamp(18px, 5vw, 40px);
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-curtain: cubic-bezier(.2,.8,.2,1);
  --focus: 0 0 0 3px oklch(0.72 0.18 55 / .45);

  --ff: 'Poppins', 'Noto Sans Malayalam', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-ml: 'Noto Sans Malayalam', 'Poppins', sans-serif;
}

*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ff); font-size: var(--text-base); line-height: 1.62;
  color: var(--foreground); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--navy-deep); text-decoration: none; }
ul { padding-left: 1.1em; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; }

h1,h2,h3,h4 { color: var(--foreground); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.font-display, h1,h2,h3 { font-family: var(--ff); letter-spacing: -.02em; }
h2 { font-size: var(--text-2xl); font-weight: 600; }
p { text-wrap: pretty; }
.display { font-size: var(--text-display); font-weight: 600; line-height: 1.06; letter-spacing: -.03em; }
.ml { font-family: var(--ff-ml); letter-spacing: 0; }
.num { font-variant-numeric: tabular-nums; }

/* eyebrow / kicker */
.kicker, .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--orange); }
.kicker-line { display:inline-flex; align-items:center; gap:.6em; }
.kicker-line::before { content:""; width:32px; height:1px; background: currentColor; opacity:.5; }

/* Layout */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-sm { max-width: 760px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap-lg { max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
section { padding: clamp(56px, 8vw, 96px) 0; }
.section-soft { background: var(--bg-soft); }
.section-navy, .section-ink { background: var(--navy-deep); color: oklch(1 0 0 / .82); position:relative; }
/* Destinations band — Kerala backwater (teal) meets UAE desert (gold) over navy, with a dune/ripple texture */
#destinations { overflow:hidden; background:
  radial-gradient(72% 95% at 4% -8%, oklch(0.58 0.11 192 / .24), transparent 55%),
  radial-gradient(68% 90% at 106% 110%, oklch(0.72 0.16 62 / .30), transparent 58%),
  linear-gradient(158deg, oklch(0.245 0.09 262), oklch(0.16 0.068 262)); }
#destinations::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.22; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='300' viewBox='0 0 520 300'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.1' opacity='0.6'%3E%3Cpath d='M0 45 C130 14 320 74 520 45'/%3E%3Cpath d='M0 100 C150 70 320 128 520 100'/%3E%3Cpath d='M0 155 C130 126 290 184 520 155'/%3E%3Cpath d='M0 212 C160 184 340 242 520 212'/%3E%3Cpath d='M0 268 C140 240 300 298 520 268'/%3E%3C/g%3E%3C/svg%3E");
  background-size:520px 300px; }
#destinations::after { content:""; position:absolute; right:-6%; top:-30%; width:52%; height:90%; z-index:0; pointer-events:none;
  background: radial-gradient(closest-side, oklch(0.74 0.16 62 / .18), transparent 70%); filter: blur(10px); }
/* Destinations header — side-by-side on desktop, clean stack on mobile */
.dest-head { max-width:none; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px; }
.dest-head-copy { max-width:34ch; }
.dest-ml { color:var(--orange-glow); font-size:var(--text-xl); max-width:18ch; text-align:right; line-height:1.5; font-weight:500; margin-bottom:4px; }
@media (max-width:760px){
  .dest-head { display:block; }
  .dest-head-copy { max-width:none; }
  .dest-ml { text-align:left; max-width:30ch; margin:16px 0 0; font-size:var(--text-lg); }
  #destinations::before { opacity:.13; }
}
/* Services — subtle warm/cool wash behind the white cards */
#services { background:
  radial-gradient(78% 68% at 100% -12%, oklch(0.80 0.17 65 / .30), transparent 60%),
  radial-gradient(72% 72% at -12% 112%, oklch(0.55 0.14 250 / .20), transparent 60%),
  linear-gradient(158deg, oklch(0.985 0.02 72), var(--bg) 55%); }
.section-navy h2, .section-navy h3, .section-ink h2, .section-ink h3 { color:#fff; }
.section-tint { background: var(--bg-soft); }
.lead { font-size: var(--text-lg); color: var(--muted); line-height: 1.6; max-width: 60ch; }
.center { text-align:center; }
.mt-s{margin-top:.5rem}.mt-1{margin-top:1rem}.mt-2{margin-top:1.6rem}.mb-1{margin-bottom:1rem}
.sec-head { max-width: 640px; margin-bottom: clamp(32px,4.5vw,56px); }
.sec-head.center { margin-inline:auto; }
.sec-head h2 { margin-top:.7rem; }
.sec-head p { color: var(--muted); margin-top: 1rem; font-size: var(--text-lg); line-height:1.55; }

/* ---- Buttons ---------------------------------------------------------- */
.btn { --_bg: var(--navy-deep); --_fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family: var(--ff); font-weight:600; font-size: .96rem; line-height:1;
  padding: 14px 24px; min-height:48px; border-radius: var(--pill); border:1.5px solid transparent;
  background: var(--_bg); color: var(--_fg); cursor:pointer; white-space:nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s, border-color .2s, filter .2s;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
.btn:active { transform: translateY(0); }
.btn svg { width:18px; height:18px; }
.btn-lg { padding: 16px 28px; font-size: 1rem; min-height:54px; }
.btn-block { width:100%; }
.btn-wa { --_bg: var(--whatsapp); box-shadow: var(--shadow-wa); }
.btn-wa:hover { --_bg: var(--whatsapp-press); }
.btn-orange, .btn-primary { --_bg: var(--orange); box-shadow: var(--shadow-glow); }
.btn-orange:hover, .btn-primary:hover { --_bg: var(--orange-press); }
.btn-dark { --_bg: var(--navy-deep); }
.btn-light, .btn-outline, .btn-ghost { --_bg: var(--surface); --_fg: var(--navy-deep); border-color: var(--line); box-shadow: var(--shadow-card); }
.btn-light:hover, .btn-outline:hover, .btn-ghost:hover { border-color: var(--orange); filter:none; }
.btn-ghost-light, .btn-outline-light { --_bg: oklch(1 0 0 / .1); --_fg:#fff; border-color: oklch(1 0 0 / .3); backdrop-filter: blur(6px); box-shadow:none; }
.btn-ghost-light:hover, .btn-outline-light:hover { --_bg: oklch(1 0 0 / .18); border-color: oklch(1 0 0 / .5); }

/* ---- Header (pill nav) ------------------------------------------------- */
.site-header { position: sticky; top:0; z-index: 60; border-bottom: 1px solid oklch(0.9 0.015 260 / .5);
  background: oklch(0.995 0.004 80 / .85); backdrop-filter: saturate(150%) blur(16px); transition: box-shadow .3s; }
.site-header.scrolled { box-shadow: var(--shadow-card); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 12px 0; position:relative; }
.brand { display:inline-flex; align-items:center; transition: transform .2s var(--ease); }
.brand:hover { transform: translateY(-1px); }
.brand-full { height:48px; width:auto; border-radius:12px; box-shadow: var(--shadow-soft); display:block; }
.brand:hover .brand-full { box-shadow: var(--shadow-elegant); }
.brand-icon { display:none; }
.nav { display:flex; align-items:center; gap:2px; padding:6px; border-radius: var(--pill);
  border:1px solid oklch(0.9 0.015 260 / .6); background: oklch(1 0 0 / .8); box-shadow: var(--shadow-soft); backdrop-filter: blur(8px); margin:0; list-style:none; }
.nav a { border-radius: var(--pill); padding: 8px 16px; font-size: .92rem; font-weight:500; color: oklch(0.18 0.04 262 / .75); transition: background .2s, color .2s; }
.nav a:hover, .nav a.active { background: var(--bg-soft); color: var(--foreground); }
.header-cta { display:flex; align-items:center; gap:10px; }
.header-phone { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius: var(--pill);
  border:1px solid var(--line); background: var(--surface); font-weight:600; font-size:.9rem; color: var(--navy-deep); }
.header-phone:hover { border-color: var(--orange); }
.header-phone svg { width:16px;height:16px; }
.nav-toggle { display:none; background: var(--surface); border:1px solid var(--line); border-radius: 12px; padding:9px; cursor:pointer; }
.nav-toggle span { display:block; width:22px; height:2px; background: var(--navy-deep); border-radius:2px; margin:5px 0; transition:.3s var(--ease); }

/* ---- Rotating HERO ---------------------------------------------------- */
.hero { position:relative; overflow:hidden; }
.hero-slides { position:absolute; inset:0; z-index:0; }
.hero-slides img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform: scale(1.06); transition: opacity 1.1s var(--ease), transform 6s ease-out; }
.hero-slides img.active { opacity:1; transform: scale(1); }
.hero-overlay { position:absolute; inset:0; z-index:1; background: var(--gradient-hero); }
.hero-inner { position:relative; z-index:2; padding-block: clamp(72px,10vw,128px) clamp(120px,16vw,200px); color:#fff; }
.hero-place { display:inline-flex; align-items:center; gap:.6em; font-size:11px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color: oklch(1 0 0 / .72); }
.hero-place::before { content:""; width:32px; height:1px; background: oklch(1 0 0 / .4); }
.hero-place svg { width:14px; height:14px; }
.hero-rot { }
.hero-kicker { margin-top:24px; font-size:11px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color: var(--orange-glow); }
.hero-ml { margin-top:12px; font-size: var(--text-lg); color: oklch(1 0 0 / .85); font-family: var(--ff-ml); }
.hero-title { margin-top:12px; max-width: 20ch; color:#fff; font-weight:600; letter-spacing:-.03em; line-height:1.06;
  font-size: clamp(2.2rem, 6vw, 4.25rem); text-shadow: 0 2px 30px oklch(0.2 0.09 262 / .35); }
.hero-sub { margin-top:22px; max-width: 44ch; font-size: var(--text-lg); color: oklch(1 0 0 / .85); }
.hero-actions { margin-top: 30px; display:flex; flex-wrap:wrap; gap:12px; }
.hero-assure { margin-top: 34px; display:flex; align-items:center; gap:8px; font-size:.9rem; color: oklch(1 0 0 / .72); }
.hero-assure svg { width:16px;height:16px; color: var(--orange-glow); }
.hero-dots { margin-top: 34px; display:flex; align-items:center; gap:14px; }
.hero-dot { display:inline-flex; align-items:center; gap:8px; background:none; border:0; cursor:pointer; padding:6px 0; }
.hero-dot .bar { height:3px; width:24px; border-radius:3px; background: oklch(1 0 0 / .3); transition: width .5s var(--ease), background .3s; }
.hero-dot .n { font-size:10px; font-weight:600; letter-spacing:.22em; color: oklch(1 0 0 / .5); }
.hero-dot.active .bar { width:48px; background: var(--orange-glow); }
.hero-dot.active .n { color: var(--orange-glow); }
.hero-rot.swap { animation: fadeUp .7s var(--ease) both; }

/* fade/float keyframes */
@keyframes fadeUp { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }
@keyframes gd-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.animate-float { animation: gd-float 6s ease-in-out infinite; }

/* Stats strip overlapping the hero */
.stats-strip { position:relative; z-index:5; margin-top: clamp(-96px,-11vw,-64px); }
.stats-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:1px; overflow:hidden;
  border-radius: var(--r-3xl); border:1px solid oklch(0.9 0.015 260 / .6); background: oklch(0.9 0.015 260 / .6); box-shadow: var(--shadow-elegant); }
.stats-grid .cell { background: var(--surface); padding: 26px 20px; text-align:center; }
.stats-grid .num, .stats-grid .stat { font-size: clamp(1.7rem,3vw,2.3rem); font-weight:600; color: var(--navy-deep); letter-spacing:-.03em; line-height:1; }
.stats-grid .stat.stars { color: var(--orange); }
.stats-grid .lbl { margin-top:8px; font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color: var(--muted); }

/* ---- Services (numbered hairline grid) -------------------------------- */
.svc-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1px; overflow:hidden;
  border-radius: var(--r-3xl); border:1px solid oklch(0.9 0.015 260 / .6); background: oklch(0.9 0.015 260 / .6); box-shadow: var(--shadow-card); }
.svc-tile { background: var(--surface); padding: 32px; display:flex; flex-direction:column; color: var(--foreground); transition: background .25s; position:relative; }
.svc-tile:hover { background: var(--bg-soft); }
.svc-tile .svc-top { display:flex; align-items:flex-start; justify-content:space-between; }
.svc-tile .svc-ico { width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line); background: var(--bg); color: var(--navy-deep); transition: border-color .25s, background .25s, color .25s; }
.svc-tile:hover .svc-ico { border-color: oklch(0.72 0.18 55 / .6); background: oklch(0.72 0.18 55 / .07); color: var(--orange); }
.svc-tile .svc-ico svg { width:24px; height:24px; stroke-width:1.5; }
.svc-tile .svc-n { font-size:11px; font-weight:600; letter-spacing:.22em; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.svc-tile h3 { margin-top:24px; font-size: var(--text-xl); font-weight:600; }
.svc-tile p { margin-top:8px; font-size:.95rem; color: var(--muted); line-height:1.6; }
.svc-tile .svc-foot { margin-top:auto; padding-top:28px; display:flex; align-items:center; justify-content:space-between; }
.svc-tile .price { font-size:.9rem; font-weight:600; color: var(--navy-deep); }
.svc-tile .go { display:inline-flex; align-items:center; gap:5px; font-size:.9rem; font-weight:600; color: oklch(0.22 0.09 262 / .7); transition: gap .2s, color .2s; }
.svc-tile:hover .go { gap:9px; color: var(--orange); }
.svc-tile .go svg { width:16px;height:16px; }

/* ---- Curtain destinations --------------------------------------------- */
.curtain { display:flex; gap:12px; height: clamp(420px, 60vh, 540px); overflow:hidden;
  border-radius: var(--r-4xl); border:1px solid oklch(1 0 0 / .1); background: oklch(1 0 0 / .05); padding:12px; box-shadow: var(--shadow-elegant); }
.curtain-panel { position:relative; overflow:hidden; border-radius: var(--r-2xl); flex: 1 1 0; cursor:pointer;
  transition: flex .9s var(--ease-curtain); color:#fff; }
.curtain-panel.active { flex: 4 1 0; }
.curtain-panel img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform: scale(1.1); transition: transform 1.2s var(--ease); }
.curtain-panel.active img { transform: scale(1.05); }
.curtain-panel .scrim { position:absolute; inset:0; background: oklch(0.22 0.09 262 / .55); transition: opacity .7s; }
.curtain-panel.active .scrim { background: linear-gradient(to top, oklch(0.20 0.09 262 / .92), oklch(0.22 0.09 262 / .3) 55%, transparent); }
.curtain-panel .spine { position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; padding-bottom:32px; transition: opacity .5s; }
.curtain-panel.active .spine { opacity:0; }
.curtain-panel .spine span { writing-mode: vertical-rl; transform: rotate(180deg); font-weight:600; font-size:1.05rem; letter-spacing:.3em; text-transform:uppercase; color: oklch(1 0 0 / .9); }
.curtain-panel .body { position:absolute; inset-inline:0; bottom:0; padding:32px; transform: translateY(16px); opacity:0; transition: transform .7s var(--ease), opacity .7s; }
.curtain-panel.active .body { transform: none; opacity:1; }
.curtain-panel .body .meta { font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color: var(--orange-glow); }
.curtain-panel .body h3 { color:#fff; font-size: clamp(1.8rem,3vw,3rem); font-weight:600; margin-top:8px; }
.curtain-panel .body p { margin-top:10px; max-width:34ch; color: oklch(1 0 0 / .8); }
.curtain-panel .body .cbtn { margin-top:20px; display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius: var(--pill);
  background: oklch(1 0 0 / .12); backdrop-filter: blur(6px); font-size:.9rem; font-weight:600; color:#fff; transition: background .3s; }
.curtain-panel.active:hover .body .cbtn { background: var(--orange); }
.curtain-panel .body .cbtn svg { width:16px;height:16px; }
.curtain-dots { margin-top:22px; display:flex; align-items:center; justify-content:center; gap:8px; }
.curtain-dots button { height:6px; width:8px; border-radius:3px; border:0; background: oklch(1 0 0 / .25); cursor:pointer; transition: width .3s, background .3s; }
.curtain-dots button.active { width:32px; background: var(--orange); }

/* ---- Cards / grids (interior pages) ----------------------------------- */
.grid { display:grid; gap:22px; }
.g-2{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(3,1fr)} .g-4{grid-template-columns:repeat(4,1fr)}
.card { background: var(--surface); border:1px solid oklch(0.9 0.015 260 / .6); border-radius: var(--r-2xl); padding:28px; box-shadow: var(--shadow-card); transition: transform .28s var(--ease), box-shadow .28s; }
.card h3 { font-size: var(--text-lg); margin-bottom:.4rem; }
.card p { color: var(--muted); font-size:.96rem; }
a.card:hover, a.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
a.svc-card { display:flex; flex-direction:column; color: var(--foreground); }
.svc-card .svc-ico { width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--bg);color:var(--navy-deep);margin-bottom:18px; }
.svc-card .svc-ico svg { width:24px;height:24px;stroke-width:1.5; }
a.svc-card:hover .svc-ico { border-color: oklch(0.72 0.18 55 / .6); color: var(--orange); background: oklch(0.72 0.18 55 / .07); }
.svc-card .price { margin-top:auto; padding-top:16px; display:flex; justify-content:space-between; align-items:center; font-weight:600; color:var(--muted); font-size:.9rem; }
.svc-card .price b { color: var(--navy-deep); }
.svc-card .go { color: var(--navy-deep); font-weight:600; display:inline-flex; gap:6px; align-items:center; }
a.svc-card:hover .go { color: var(--orange); }
.feature .svc-ico { background: var(--surface); }

/* Photo cards (kept for any remaining grid use) */
.photo-card { position:relative; border-radius: var(--r-2xl); overflow:hidden; display:flex; align-items:flex-end; min-height:320px; color:#fff; background:#222 center/cover no-repeat; transition: transform .3s var(--ease), box-shadow .3s; }
.photo-card > .pc-img { position:absolute; inset:0; background-size:cover; background-position:center; transition: transform .6s var(--ease); }
.photo-card:hover > .pc-img { transform: scale(1.06); }
.photo-card::after { content:""; position:absolute; inset:0; background: linear-gradient(to top, oklch(0.2 0.09 262 / .8) 5%, transparent 55%); z-index:1; }
.photo-card .pc-body { position:relative; z-index:2; padding:22px; width:100%; }
.photo-card h3 { color:#fff; }
.photo-card .pc-tag { position:absolute; top:16px; left:16px; z-index:2; background: oklch(1 0 0 / .15); backdrop-filter: blur(8px); border:1px solid oklch(1 0 0 / .25); color:#fff; font-size:.72rem; font-weight:600; padding:6px 12px; border-radius: var(--pill); }
a.photo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.media { border-radius: var(--r-2xl); overflow:hidden; background: var(--bg-soft); }
.media img { width:100%; height:100%; object-fit:cover; }

/* Split */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,64px); align-items:center; }
.split-media { min-height: 440px; }

/* Steps */
.steps { display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(18px,3vw,28px); }
.step { padding-top:24px; border-top:2px solid var(--navy-deep); }
.step .n { font-size:.82rem; font-weight:600; color: var(--orange); font-variant-numeric: tabular-nums; }
.step .n::before { content: "0" counter(step); } .steps { counter-reset: step; } .step { counter-increment: step; }
.step h3 { font-size: var(--text-lg); margin: 12px 0 6px; }
.step p { color: var(--muted); font-size:.94rem; }

/* Tables */
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius: var(--r-2xl); background: var(--surface); box-shadow: var(--shadow-card); }
table.price { width:100%; border-collapse:collapse; min-width:540px; font-variant-numeric: tabular-nums; }
table.price th, table.price td { padding:16px 22px; text-align:left; font-size:.96rem; border-bottom:1px solid var(--line-soft); }
table.price thead th { background: var(--bg-soft); color: var(--navy-deep); font-weight:600; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; }
table.price tbody tr { transition: background .2s; } table.price tbody tr:hover { background: var(--bg-soft); }
table.price tbody tr:last-child td { border-bottom:0; }
table.price td .from { color: var(--navy-deep); font-weight:700; }
.note-disc { font-size:.8rem; color: var(--muted); margin-top:14px; }

/* Ticklist */
.ticklist { list-style:none; padding:0; display:grid; gap:14px; }
.ticklist li { display:flex; gap:14px; align-items:flex-start; font-size:1rem; color: var(--ink-2); }
.ticklist li b { color: var(--navy-deep); font-weight:600; }
.ticklist li::before { content:""; flex:none; width:24px; height:24px; margin-top:1px; border-radius:50%;
  background: var(--gradient-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat; box-shadow: var(--shadow-glow); }

/* Callout / lead magnet (gradient brand) */
.callout { background: var(--gradient-brand); color: oklch(1 0 0 / .78); border-radius: var(--r-4xl); padding: clamp(34px,5vw,56px); position:relative; overflow:hidden; box-shadow: var(--shadow-elegant); }
.callout::before { content:""; position:absolute; right:-64px; top:-64px; width:256px; height:256px; border-radius:50%; background: oklch(0.72 0.18 55 / .25); filter: blur(60px); }
.callout::after { content:""; position:absolute; left:-40px; bottom:-80px; width:288px; height:288px; border-radius:50%; background: oklch(0.80 0.17 65 / .15); filter: blur(60px); }
.callout h2, .callout h3 { color:#fff; } .callout p { color: oklch(1 0 0 / .75); }
.callout > * { position:relative; }
.callout.center { text-align:center; }
.callout .lead-form label { color:#fff; }
.callout .lead-form input, .callout .lead-form select { background: oklch(1 0 0 / .96); border-color: transparent; }
.callout .tag { background: oklch(0.72 0.18 55 / .18); color: var(--orange-glow); border-color: transparent; }
.callout .tag-orange { background: var(--orange); color:#fff; }

/* Reviews */
.reviews { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.review { background: var(--surface); border:1px solid oklch(0.9 0.015 260 / .6); border-radius: var(--r-2xl); padding:28px; box-shadow: var(--shadow-card); display:flex; flex-direction:column; }
.review .stars { color: var(--orange); letter-spacing:1px; font-size:.9rem; }
.review p { color: oklch(0.18 0.04 262 / .82); font-size:.98rem; margin:14px 0 0; line-height:1.6; flex:1; }
.review .who { margin-top:22px; padding-top:18px; border-top:1px solid var(--line-soft); display:flex; align-items:center; gap:12px; }
.review .who .av { width:42px;height:42px;border-radius:50%; background: var(--gradient-brand); color:#fff; display:grid; place-items:center; font-weight:600; font-size:.85rem; }
.review .who b { color: var(--foreground); font-size:.9rem; display:block; } .review .who small { color: var(--muted); }
.review-feature { background: var(--gradient-brand); border-color: transparent; color:#fff; box-shadow: var(--shadow-elegant); }
.review-feature p { color:#fff; font-size: var(--text-lg); }
.review-feature .who { border-color: oklch(1 0 0 / .15); }
.review-feature .who b { color:#fff; } .review-feature .who small { color: oklch(1 0 0 / .6); }
.review-feature .who .av { background:#fff; color: var(--navy-deep); }
.review-stack { display:grid; gap:22px; }

/* FAQ */
.faq { display:grid; gap:12px; border:0; }
.faq details { border:1px solid oklch(0.9 0.015 260 / .6); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-card); padding: 4px 24px; transition: box-shadow .3s; }
.faq details[open] { box-shadow: var(--shadow-soft); }
.faq summary { list-style:none; cursor:pointer; padding:20px 0; font-weight:600; color: var(--foreground); display:flex; justify-content:space-between; gap:16px; align-items:center; font-size:1.05rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; flex:none; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background: var(--bg-soft); color: var(--navy-deep); font-size:20px; font-weight:400; transition: transform .3s var(--ease), background .3s, color .3s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--orange); color:#fff; }
.faq .ans { padding: 0 0 22px; color: var(--muted); font-size:.98rem; max-width: 68ch; }
.faq .ans .ml { display:block; color: var(--ink-2); margin-top:10px; }

/* Forms */
.lead-form { display:grid; gap:14px; }
.lead-form label { font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); display:block; margin-bottom:6px; }
.lead-form input, .lead-form select, .lead-form textarea { width:100%; height:52px; padding:0 16px; border:1.5px solid var(--line); border-radius: var(--r); font-family: var(--ff); font-size:1rem; color: var(--foreground); background: var(--surface); transition: border-color .2s, box-shadow .2s; }
.lead-form textarea { height:auto; padding:14px 16px; resize:vertical; }
.lead-form input::placeholder, .lead-form textarea::placeholder { color: oklch(0.6 0.02 260); }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { outline:none; border-color: var(--orange); box-shadow: var(--focus); }
.form-help { font-size:.78rem; color: var(--muted); }
.form-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-card { background: var(--surface); border:1px solid var(--line); border-radius: var(--r-2xl); padding: clamp(24px,3vw,32px); box-shadow: var(--shadow-soft); }
.form-ok { display:none; align-items:center; gap:8px; font-size:.9rem; color: var(--whatsapp); font-weight:600; }
.form-ok.show, .form-ok[style*="block"] { display:flex; }

/* Interior photo hero */
.page-hero { padding: 14px 14px 0; }
.page-hero .ph-frame { position:relative; border-radius: var(--r-4xl); overflow:hidden; min-height: clamp(320px, 44vw, 460px); display:flex; align-items:flex-end;
  background-color: var(--navy-deep); background-repeat:no-repeat; background-size:cover; background-position:center 32%; }
.page-hero .ph-frame::before { content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(92deg, oklch(0.2 0.09 262 / .72) 0%, oklch(0.2 0.09 262 / .42) 42%, oklch(0.2 0.09 262 / .12) 74%, transparent 100%),
              linear-gradient(180deg, transparent 44%, oklch(0.2 0.09 262 / .66) 100%); }
.page-hero .ph-inner { position:relative; z-index:2; padding: clamp(28px,4vw,52px); color:#fff; width:100%; }
.page-hero h1 { color:#fff; max-width:20ch; text-shadow: 0 2px 30px oklch(0.2 0.09 262 / .4); font-weight:600; }
.page-hero p { color:#fff; margin-top:15px; max-width:56ch; font-size: var(--text-lg); text-shadow: 0 1px 18px oklch(0.2 0.09 262 / .4); }
.crumb { font-size:.82rem; color: oklch(1 0 0 / .82); margin-bottom:18px; } .crumb a { color: oklch(1 0 0 / .82); } .crumb a:hover { color:#fff; }
.pill-row { display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.pill { background: oklch(1 0 0 / .13); border:1px solid oklch(1 0 0 / .24); color:#fff; padding:8px 15px; border-radius: var(--pill); font-size:.8rem; backdrop-filter: blur(4px); }
.ph-actions, .hero-cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.hero-video { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center 26%; opacity:0; transition: opacity 1.1s var(--ease); pointer-events:none; }
.ph-frame .hero-video { object-position:center 32%; }
.hero-video.on { opacity:1; }
@media (prefers-reduced-motion: reduce){ .hero-video{ display:none; } }

/* Trust strip (legacy interior) */
.trust-strip { padding: clamp(38px,5vw,56px) 0; }
.trust-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:24px; }
.trust-grid .cell { border-top:2px solid var(--navy-deep); padding-top:18px; }
.trust-grid .num, .trust-grid .stat { font-size: clamp(1.7rem,3vw,2.4rem); font-weight:600; color: var(--navy-deep); letter-spacing:-.03em; }
.trust-grid .lbl { font-size:.84rem; color: var(--muted); margin-top:10px; }
.trust-grid .stars { color: var(--orange); }
.divider { height:1px; background: var(--line); border:0; }

/* Prose */
.prose { max-width: 68ch; }
.prose h2 { margin: 2.4rem 0 .9rem; } .prose h3 { margin: 1.8rem 0 .5rem; }
.prose p { color: var(--ink-2); margin-bottom:1.05rem; } .prose ul { margin-bottom:1.05rem; color: var(--ink-2); } .prose li { margin-bottom:.5rem; }

/* Misc */
.tag { display:inline-block; background: var(--bg-soft); color: var(--ink-2); font-size:.76rem; font-weight:600; padding:6px 13px; border-radius: var(--pill); border:1px solid var(--line); }
.tag-orange { background: oklch(0.72 0.18 55 / .1); color: var(--orange-press); border-color: oklch(0.72 0.18 55 / .24); }
.tagline-caps { letter-spacing:.16em; text-transform:uppercase; color: var(--muted); font-weight:600; font-size:.72rem; }
.info-row { display:flex; gap:16px; align-items:flex-start; margin-bottom:24px; }
.info-row .ic { width:48px;height:48px;border-radius:14px; flex:none; display:grid;place-items:center; background: var(--bg-soft); color: var(--navy-deep); border:1px solid var(--line); }
.info-row .ic svg { width:21px;height:21px; }
.info-row b { color: var(--navy-deep); display:block; font-size:.97rem; margin-bottom:2px; }
.info-row span, .info-row a { color: var(--muted); font-size:.92rem; }
.map-embed { border:0; width:100%; height:100%; min-height:380px; border-radius: var(--r-2xl); }
.arrow-link { display:inline-flex; align-items:center; gap:.4em; font-weight:600; color: var(--navy-deep); }
.arrow-link svg { width:16px;height:16px; transition: transform .25s var(--ease); } .arrow-link:hover svg { transform: translateX(4px); }

/* FAB + mobile bar */
.fab-wa { position:fixed; right:20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index:55; width:56px;height:56px;border-radius:50%; background: var(--whatsapp); display:grid; place-items:center; color:#fff; box-shadow: var(--shadow-wa); transition: transform .3s var(--ease); }
.fab-wa:hover { transform: scale(1.06); } .fab-wa svg { width:28px;height:28px; }
.mobile-bar { display:none; }

/* Footer */
.site-footer { background: var(--navy-deep); color: oklch(1 0 0 / .78); padding-top: clamp(56px,7vw,80px); }
.footer-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap:40px; padding-bottom:44px; }
.site-footer img.flogo { height:52px; margin-bottom:18px; border-radius:11px; box-shadow: 0 0 0 1px oklch(1 0 0 / .08); }
.site-footer h4 { color: var(--orange-glow); font-size:11px; text-transform:uppercase; letter-spacing:.22em; margin-bottom:18px; font-weight:600; }
.site-footer a { color: oklch(1 0 0 / .78); transition: color .2s; } .site-footer a:hover { color: var(--orange-glow); }
.footer-links { list-style:none; padding:0; display:grid; gap:12px; font-size:.92rem; }
.footer-nap { font-size:.92rem; line-height:1.7; } .footer-nap b { color:#fff; }
.footer-bottom { border-top:1px solid oklch(1 0 0 / .1); padding:22px 0; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.8rem; color: oklch(1 0 0 / .5); }
.footer-social { display:flex; gap:10px; }
.footer-social a { width:38px;height:38px;border-radius:50%; background: oklch(1 0 0 / .07); display:grid; place-items:center; transition: background .25s; } .footer-social a:hover { background: oklch(1 0 0 / .14); }
.footer-social svg { width:17px;height:17px; color: oklch(1 0 0 / .8); }

/* ---- Enquiry popup ---------------------------------------------------- */
.gd-popup { position:fixed; inset:0; z-index:100; display:flex; align-items:flex-end; justify-content:center; padding:16px; background: oklch(0.22 0.09 262 / .6); backdrop-filter: blur(4px); animation: fadeUp .4s var(--ease) both; }
.gd-popup[hidden] { display:none; }
.gd-popup-card { position:relative; width:100%; max-width: 440px; overflow:hidden; border-radius: var(--r-3xl); background: var(--surface); box-shadow: var(--shadow-elegant); }
.gd-popup-close { position:absolute; right:16px; top:16px; z-index:2; width:36px;height:36px; border:0; border-radius:50%; background: var(--bg-soft); color: var(--navy-deep); cursor:pointer; display:grid; place-items:center; transition: background .2s, color .2s; }
.gd-popup-close:hover { background: var(--orange); color:#fff; }
.gd-popup-head { background: var(--gradient-brand); color:#fff; padding: 26px 28px; }
.gd-popup-head .k { font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color: var(--orange-glow); }
.gd-popup-head .ml { margin-top:8px; font-size:.86rem; color: oklch(1 0 0 / .8); display:block; }
.gd-popup-head h3 { color:#fff; margin-top:6px; font-size:1.28rem; font-weight:600; line-height:1.25; }
.gd-popup form { padding: 24px 28px 26px; display:grid; gap:16px; }
.gd-popup .fld { display:grid; }
.gd-popup .fld label { font-size:.82rem; font-weight:600; letter-spacing:0; text-transform:none; color: var(--navy-deep); margin-bottom:7px; }
.gd-popup .fld label .opt { color: var(--muted); font-weight:500; }
.gd-popup .fld input, .gd-popup .fld select, .gd-popup .fld textarea { height:50px; }
.gd-popup .fld textarea { height:auto; min-height:66px; }
.gd-popup form .btn { margin-top:4px; }
.gd-popup form .form-help { margin-top:-4px; }
@media (min-width:640px){ .gd-popup { align-items:center; } }

/* ---- Motion reveal ---------------------------------------------------- */
.reveal { opacity:1; transform:none; }
html.io .reveal { opacity:0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.io .reveal.in { opacity:1; transform:none; }
html.io .reveal-stagger > * { opacity:0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
html.io .reveal-stagger.in > * { opacity:1; transform:none; }
html.io .reveal-stagger.in > *:nth-child(2){transition-delay:.06s}
html.io .reveal-stagger.in > *:nth-child(3){transition-delay:.12s}
html.io .reveal-stagger.in > *:nth-child(4){transition-delay:.18s}
html.io .reveal-stagger.in > *:nth-child(5){transition-delay:.24s}
html.io .reveal-stagger.in > *:nth-child(6){transition-delay:.30s}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 980px) {
  .g-4 { grid-template-columns: repeat(2,1fr); }
  .svc-grid { grid-template-columns: repeat(2,1fr); }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .steps { grid-template-columns: repeat(2,1fr); gap:28px; }
  .split { grid-template-columns:1fr; gap:30px; } .split-media { min-height:300px; order:-1; }
  .reviews { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap:34px; }
}
@media (max-width: 760px) {
  .nav, .header-cta { display:none; }
  .nav-toggle { display:block; position:absolute; right:0; top:50%; transform:translateY(-50%); }
  .header-inner { justify-content:center; }
  .brand-full { display:none; }
  .brand-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--navy-deep); box-shadow:var(--shadow-soft); }
  .brand-icon img { width:26px; height:26px; }
  .nav.open { display:flex; position:absolute; top:64px; left:var(--gutter); right:var(--gutter); flex-direction:column; gap:2px; padding:8px; border-radius: var(--r-2xl); box-shadow: var(--shadow-elegant); background: var(--surface); }
  .nav.open a { padding:13px 16px; width:100%; } .nav.open a.active { background: var(--bg-soft); }
  .g-2,.g-3,.g-4,.trust-grid,.svc-grid,.stats-grid,.reviews { grid-template-columns: 1fr 1fr; }
  .fab-wa { display:none; }
  .page-hero { padding:10px 10px 0; }
  .curtain { flex-direction:column; height:auto; gap:10px; }
  .curtain-panel, .curtain-panel.active { flex:none; height: 128px; }
  .curtain-panel.active { height: 300px; }
  .curtain-panel .spine { display:none; }
  .curtain-panel .body { position:relative; opacity:1; transform:none; padding:20px; }
  .curtain-panel:not(.active) .body { padding:20px; }
  .curtain-panel:not(.active) .body h3 { font-size:1.4rem; } .curtain-panel:not(.active) .body p, .curtain-panel:not(.active) .body .cbtn { display:none; }
  .mobile-bar { display:grid; grid-template-columns: repeat(3,1fr); position:fixed; left:0;right:0;bottom:0; z-index:60; background: var(--surface); border-top:1px solid var(--line); box-shadow: 0 -6px 22px -8px oklch(0.22 0.09 262 / .18); padding-bottom: env(safe-area-inset-bottom); }
  .mobile-bar a { display:flex; flex-direction:column; align-items:center; gap:3px; padding:11px 4px; font-size:.72rem; font-weight:600; color: var(--navy-deep); }
  .mobile-bar a svg { width:21px;height:21px; } .mobile-bar a.mb-wa { color: var(--whatsapp-press); }
  .mobile-bar a + a { border-left:1px solid var(--line); }
  body { padding-bottom: 64px; }
}
@media (max-width: 480px) {
  .g-3,.g-4,.svc-grid,.reviews { grid-template-columns:1fr; }
  .stats-grid, .trust-grid { grid-template-columns:1fr 1fr; }
  .steps { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .hero-slides img { transition: opacity .3s; transform:none !important; }
  html.io .reveal, html.io .reveal-stagger > * { opacity:1 !important; transform:none !important; }
}