/* ==========================================================================
   RELOOKZ — Hair Fixing Studio
   Single stylesheet for the whole site. Plain CSS, no framework, no build step.
   Edit the variables in :root to re-skin everything at once.
   ========================================================================== */

:root{
  /* --- Brand colours -------------------------------------------------- */
  --ink:        #12151b;   /* main text / logo black                       */
  --ink-soft:   #4a5261;   /* secondary text                               */
  --line:       #e3e7ee;   /* hairline borders                             */
  --paper:      #ffffff;
  --paper-2:    #f5f7fb;   /* alternate section background                 */
  --band-blue:  #e3f2fd;   /* was the black band — light blue, black text  */
  --band-pink:  #fce4ec;   /* was the pink/blue gradient — flat light pink */

  --navy:       #1c4587;   /* primary brand colour. Dark enough to carry text
                              AND to work as a fill, so it needs no second tier. */

  /* Bright accents — DECORATION ONLY (fills, bars, gradients behind no text).
     Never put text on these, and never use them as text. */
  --teal:       #00b39b;
  --violet:     #6c4bf4;
  --amber:      #ffb400;
  --pink:       #ff3d7f;
  --blue:       #1e88ff;
  --green:      #17b978;

  /* Accessible counterparts — these carry text. All >= 4.5:1 on white,
     on --paper-2 and on the pale tint backgrounds. (WCAG 2.2 AA, 1.4.3) */
  --navy-ink:      #1c4587;   /* 9.33:1 on white — same as --navy */
  --navy-ink-dk:   #143462;   /* 12.37:1 — hover */
  --pink-ink:      #b3125a;   /* 6.66:1 */
  --violet-ink:    #4a2fd0;   /* 8.05:1 */
  --green-ink:     #0a6b44;   /* 6.56:1 */
  --amber-ink:     #8a5e00;   /* 5.70:1 */
  --teal-ink:      #00695c;   /* 6.10:1 */

  --whatsapp:      #0a7c42;   /* 5.28:1 with white text */
  --whatsapp-dk:   #086434;

  --focus:      #0b62cc;   /* focus ring: 5.78:1 on white, 3.16:1 on --ink */
  --field:      #767f8f;   /* form control borders: 4.04:1 (1.4.11)        */

  /* --- Layout --------------------------------------------------------- */
  --wrap: 1180px;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(18,21,27,.09);
  --shadow-lg: 0 20px 50px rgba(18,21,27,.16);

  --font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  /* 2.4.11 Focus Not Obscured: shrink the scrollport the browser considers
     "in view" so it never leaves a focused control under the sticky header
     or the fixed call bar. scroll-margin alone is not enough — the browser
     skips scrolling for anything it already counts as visible. */
  scroll-padding-top:110px;
  scroll-padding-bottom:100px;
}

/* ---- Focus (2.4.7 Focus Visible, 1.4.11 Non-text Contrast) --------------
   One ring everywhere. --focus is 5.78:1 on white and 3.16:1 on --ink, so it
   stays visible on light sections, dark sections and coloured buttons alike. */
:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-radius:4px;
}
/* 2.4.11 Focus Not Obscured (Minimum): the header is sticky and the mobile
   call bar is fixed, so anything scrolled to must clear both. */
:target, a, button, input, [tabindex]{
  scroll-margin-top:110px;
  scroll-margin-bottom:96px;
}

/* 2.3.3 / respecting motion preferences */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .btn:hover{ transform:none; }
}

/* Visually hidden but available to screen readers — used to give the
   dot ratings and scrollable tables a real text equivalent. */
.sr-only{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

body{
  margin:0;
  overflow-wrap:break-word;
  font-family:var(--font);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:var(--navy-ink); text-decoration:underline; text-underline-offset:2px; }
a:hover{ text-decoration-thickness:2px; }
/* Navigation, buttons and whole-card links are identified by shape and
   position, not colour, so they carry no underline. (1.4.1) */
.nav a, .btn, .brand, .topbar a, .site-footer a, .card, .tag, .skip,
.hero-facts a, .foot-bottom a{ text-decoration:none; }
.topbar a:hover, .site-footer a:hover, .nav a:hover{ text-decoration:underline; }

h1,h2,h3,h4{ line-height:1.15; margin:0 0 .5em; font-weight:800; letter-spacing:-.02em; }
h1{ font-size:clamp(2rem, 5vw, 3.4rem); }
h2{ font-size:clamp(1.6rem, 3.4vw, 2.5rem); }
h3{ font-size:1.25rem; }
p{ margin:0 0 1em; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px; }

.skip{ position:absolute; left:-9999px; top:0; }
.skip:focus{
  left:10px; top:10px; z-index:999;
  background:#fff; color:var(--ink); font-weight:700;
  padding:12px 20px; border-radius:8px; box-shadow:var(--shadow-lg);
  outline:3px solid var(--focus); outline-offset:2px;
}

/* ==========================================================================
   HEADER + NAV
   ========================================================================== */
.topbar{
  background:var(--band-blue);
  color:var(--ink);
  border-bottom:1px solid #cfe3f7;
  font-size:.85rem;
  letter-spacing:.02em;
}
.topbar .wrap{
  display:flex; flex-wrap:wrap; gap:8px 22px;
  align-items:center; justify-content:center;
  padding-top:8px; padding-bottom:8px; text-align:center;
}
.topbar a{ color:var(--ink); }
.topbar strong{ color:var(--navy-ink); }

.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding-top:12px; padding-bottom:12px;
}
.brand{ display:flex; align-items:center; flex:0 0 auto; }
/* The tagline strip is only ~6% of the artwork's height, so the logo has to
   be set large for "WE MAKE YOU LOOK BETTER" to be readable at all.
   150px puts that line at roughly 9px - do not shrink it below ~130px. */
.brand img{ height:150px; width:auto; }
.brand:hover{ text-decoration:none; }

.nav-toggle{
  display:none; border:1px solid var(--line); background:#fff;
  border-radius:10px; padding:9px 12px; font-size:1.1rem; cursor:pointer; color:var(--ink);
}

.nav{ display:flex; align-items:center; gap:4px; }
.nav a{
  color:var(--ink); font-weight:600; font-size:.97rem;
  padding:9px 13px; border-radius:9px; white-space:nowrap;
}
.nav a:hover{ background:var(--paper-2); text-decoration:none; }
.nav a.active{ color:var(--navy-ink); background:#eef2fa; }

.nav .btn-call{
  background:var(--navy-ink); color:#fff; margin-left:8px;
  box-shadow:0 6px 16px rgba(28,69,135,.28);
}
.nav .btn-call:hover{ background:var(--navy-ink-dk); }
.nav .btn-wa{ background:var(--whatsapp); color:#fff; }
.nav .btn-wa:hover{ background:var(--whatsapp-dk); }

/* Language toggle (EN <-> தமிழ்) */
.nav .lang{
  border:2px solid var(--ink); color:var(--ink);
  font-weight:800; padding:6px 15px; margin-left:8px;
}
.nav .lang:hover{ background:var(--ink); color:#fff; }

/* ==========================================================================
   TAMIL PAGES
   Tamil glyphs are taller and need more room. System fonts only — no web
   fonts are loaded, so nothing extra is downloaded.
   ========================================================================== */
html[lang="ta"] body,
[lang="ta"]{
  font-family:"Nirmala UI","Latha","Noto Sans Tamil","Tamil Sangam MN",
              "Tamil MN",var(--font);
}
html[lang="ta"] body{ line-height:1.9; }
html[lang="ta"] h1,
html[lang="ta"] h2,
html[lang="ta"] h3,
html[lang="ta"] h4{ line-height:1.4; letter-spacing:0; }
html[lang="ta"] h1{ font-size:clamp(1.4rem, 3.5vw, 2.3rem); }

/* Tamil headlines run longer than the English, so the hero text column needs
   more room for each line of the "வழுக்கையுடன் / வாழ்க்கையுடன்" pun to stay
   unbroken — and below that it stacks rather than squeeze. */
@media (min-width:1121px){
  html[lang="ta"] .hero-grid{ grid-template-columns:1.3fr .7fr; gap:44px; }
}
@media (max-width:1120px){
  html[lang="ta"] .hero-grid{ grid-template-columns:1fr; gap:34px; }
}

/* Tamil menu labels are wider than the English ones, so the desktop nav runs
   out of room sooner still. */
@media (max-width:1610px){
  html[lang="ta"] .nav-toggle{ display:block; }
  html[lang="ta"] .nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:2px;
    background:#fff; border-bottom:1px solid var(--line);
    padding:12px 20px 18px; box-shadow:var(--shadow-lg);
  }
  html[lang="ta"] .nav.open{ display:flex; }
  html[lang="ta"] .nav a{ padding:13px 12px; }
  html[lang="ta"] .nav .lang,
  html[lang="ta"] .nav .btn-call,
  html[lang="ta"] .nav .btn-wa{ margin-left:0; margin-top:6px; text-align:center; }
  html[lang="ta"] .nav .lang{ align-self:stretch; }
}
html[lang="ta"] h2{ font-size:clamp(1.35rem, 3vw, 2.05rem); }
html[lang="ta"] h3{ font-size:1.14rem; }
html[lang="ta"] .lead{ font-size:1.1rem; }
/* letter-spacing and uppercase do nothing useful for Tamil script */
html[lang="ta"] .eyebrow,
html[lang="ta"] .tag,
html[lang="ta"] table.data thead th,
html[lang="ta"] .site-footer h3,
html[lang="ta"] .lbl,
html[lang="ta"] .compare .tagline{ letter-spacing:.01em; text-transform:none; }
html[lang="ta"] .eyebrow{ font-size:.9rem; }
html[lang="ta"] table.data thead th{ font-size:.88rem; }
html[lang="ta"] table.data{ min-width:1040px; }
html[lang="ta"] .nav a{ font-size:.93rem; padding:9px 10px; }
html[lang="ta"] .fact b{ font-size:1.9rem; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:700; font-size:1rem; padding:14px 26px;
  border-radius:999px; border:2px solid transparent; cursor:pointer;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn-primary{ background:var(--navy-ink); color:#fff; box-shadow:0 10px 24px rgba(28,69,135,.26); }
.btn-primary:hover{ background:var(--navy-ink-dk); color:#fff; }
.btn-wa{ background:var(--whatsapp); color:#fff; box-shadow:0 10px 24px rgba(10,124,66,.28); }
.btn-wa:hover{ background:var(--whatsapp-dk); color:#fff; }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:#fff; }
.btn-light{ background:#fff; color:var(--ink); }
.btn-sm{ padding:9px 18px; font-size:.9rem; }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
section{ padding:72px 0; }
section.tight{ padding:48px 0; }
.bg-soft{ background:var(--paper-2); }
.bg-ink{ background:var(--band-blue); color:var(--ink); }
.bg-ink h2, .bg-ink h3{ color:var(--ink); }
.bg-ink p{ color:var(--ink); }

.eyebrow{
  display:inline-block; font-size:.78rem; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--navy-ink); margin-bottom:14px;
}
.bg-ink .eyebrow{ color:var(--navy-ink); }

.section-head{ max-width:760px; margin-bottom:44px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head p{ color:var(--ink-soft); font-size:1.08rem; }
.bg-ink .section-head p{ color:var(--ink); }

.rule{
  height:6px; border:0; border-radius:6px; margin:0 0 26px;
  background:linear-gradient(90deg,var(--navy),var(--amber),var(--teal),var(--violet));
  max-width:120px;
}
.section-head.center .rule{ margin-left:auto; margin-right:auto; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(28,69,135,.08), transparent 60%),
    radial-gradient(800px 460px at 88% 0%, rgba(108,75,244,.08), transparent 60%),
    linear-gradient(180deg,#ffffff 0%,#f5f7fb 100%);
  padding:70px 0 80px;
}
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; }
.hero h1 span{
  background:linear-gradient(90deg,var(--navy-ink),var(--violet-ink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .lead{ font-size:1.18rem; color:var(--ink-soft); max-width:560px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin:28px 0 22px; }

.hero-facts{ display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:0; list-style:none; }
.hero-facts li{
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:8px 16px; font-size:.9rem; font-weight:600; box-shadow:var(--shadow);
}
.hero-facts li::before{ content:"✓ "; color:var(--green-ink); font-weight:900; }

/* ==========================================================================
   MEDIA PLACEHOLDERS  (swap for real <img>/<video> — keep the ratio class)
   ========================================================================== */
.media{
  position:relative; overflow:hidden;
  border-radius:var(--radius); background:#e9edf4;
  box-shadow:var(--shadow);
}
.media img, .media video{ width:100%; height:100%; object-fit:cover; display:block; }
/* diagrams are vector — show them whole instead of cropping to fill */
.media img[src$=".svg"]{ object-fit:contain; background:#fff; }
.ratio-4x3{ aspect-ratio:4/3; }
.ratio-1x1{ aspect-ratio:1/1; }
.ratio-3x4{ aspect-ratio:3/4; }
.ratio-16x9{ aspect-ratio:16/9; }

.ph{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; text-align:center; padding:18px;
  background:
    repeating-linear-gradient(45deg,#e9edf4 0 12px,#e3e8f1 12px 24px);
  color:#4a5261; font-size:.85rem; font-weight:600; letter-spacing:.02em;
}
.ph b{ display:block; color:#2c333f; font-size:.95rem; }
.ph code{
  background:#fff; border:1px solid var(--line); border-radius:6px;
  padding:2px 8px; font-size:.78rem; color:var(--ink-soft);
}

/* ==========================================================================
   CARDS / GRIDS
   ========================================================================== */
.grid{ display:grid; gap:26px; }
.g-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;
}
.card-body{ padding:24px; flex:1; display:flex; flex-direction:column; }
.card h3{ margin-bottom:8px; }
.card p{ color:var(--ink-soft); font-size:.98rem; }
.card .card-foot{ margin-top:auto; padding-top:14px; }

.card-top{ height:8px; }
.c-navy{ background:var(--navy); }
.c-teal{ background:var(--teal); }
.c-violet{ background:var(--violet); }
.c-amber{ background:var(--amber); }
.c-pink{ background:var(--pink); }
.c-blue{ background:var(--blue); }
.c-green{ background:var(--green); }

.tag{
  display:inline-block; font-size:.74rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; padding:5px 11px; border-radius:999px;
  background:var(--paper-2); color:var(--ink-soft); margin:0 6px 6px 0;
}
.tag-navy{ background:#eef2fa; color:var(--navy-ink); }
.tag-teal{ background:#e2fbf6; color:var(--teal-ink); }
.tag-violet{ background:#eeeaff; color:var(--violet-ink); }
.tag-amber{ background:#fff5e0; color:var(--amber-ink); }
.tag-pink{ background:#ffe9f1; color:#c9145a; }
.tag-blue{ background:#e6f1ff; color:#0b62cc; }
.tag-green{ background:#e3f8ee; color:var(--green-ink); }

/* Numbered step cards */
.steps{ counter-reset:step; }
.step{ position:relative; padding-left:70px; margin-bottom:30px; }
.step::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:0;
  width:48px; height:48px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:1.15rem; color:#fff;
  background:linear-gradient(135deg,var(--navy-ink),var(--violet-ink));
}
.step h3{ margin-bottom:4px; }
.step p{ color:var(--ink-soft); margin:0; }

/* ==========================================================================
   TABLES
   ========================================================================== */
.table-scroll{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); background:#fff;
}
table.data{ width:100%; border-collapse:collapse; min-width:900px; font-size:.95rem; }
table.data th, table.data td{
  padding:15px 16px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line);
}
table.data thead th{
  background:var(--band-blue); color:var(--ink); font-size:.8rem;
  border-bottom:2px solid #a8cdee;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  position:sticky; top:0;
}
table.data tbody tr:nth-child(even){ background:#fbfcfe; }
table.data tbody tr:hover{ background:#fff7f4; }
table.data td:first-child{ font-weight:700; }
table.data .price{ white-space:nowrap; font-weight:700; color:var(--navy-ink); }
.scroll-hint{
  display:none; font-size:.85rem; color:var(--ink-soft);
  margin:0 0 10px; font-weight:600;
}
/* a fade on the right edge shows there is more table off-screen */
.table-scroll.is-scrollable{
  background-image:linear-gradient(to left, rgba(18,21,27,.10), rgba(18,21,27,0) 42px);
  background-repeat:no-repeat;
  background-size:42px 100%;
  background-position:right center;
  background-attachment:local, scroll;
}

.dots{ letter-spacing:2px; font-size:1.05rem; }
.dots.d5{ color:var(--green-ink); }
.dots.d4{ color:var(--teal-ink); }
.dots.d3{ color:var(--amber-ink); }
.dots.d2{ color:var(--pink-ink); }

/* ==========================================================================
   BEFORE / AFTER
   ========================================================================== */
/* Two customer pairs on gallery.html. If a third pair is ever added, put this
   back to repeat(3,...) so the row fills. */
.ba-grid{ display:grid; gap:26px; grid-template-columns:repeat(2,minmax(0,1fr)); }

.ba{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
}
.ba-pair{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2px; background:var(--line); }
.ba-half{ position:relative; background:#e9edf4; }
.ba-half img{ object-position:center top; }
.ba-half .lbl{
  position:absolute; left:10px; bottom:10px; z-index:2;
  font-size:.68rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px; color:#fff;
}
.lbl-before{ background:#5b6577; }
.lbl-after{ background:#0b8043; }
.ba-cap{ padding:16px 18px; }
.ba-cap h3{ font-size:1.02rem; margin-bottom:4px; }
.ba-cap p{ margin:0; font-size:.88rem; color:var(--ink-soft); }

/* Draggable comparison slider */
.compare{
  position:relative; width:100%; aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--radius); box-shadow:var(--shadow-lg);
  background:#e9edf4; cursor:ew-resize; user-select:none; touch-action:none;
}
.compare .layer{ position:absolute; inset:0; }
.compare .layer img, .compare .layer svg{ width:100%; height:100%; object-fit:cover; }
.compare .layer-after{ clip-path:inset(0 0 0 var(--pos,50%)); }
.compare .handle{
  position:absolute; top:0; bottom:0; left:var(--pos,50%);
  width:4px; margin-left:-2px; background:#fff; z-index:5;
  box-shadow:0 0 0 1px rgba(0,0,0,.15);
}
.compare .handle::after{
  content:"⟨ ⟩"; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:48px; height:48px; border-radius:50%;
  background:#fff; color:var(--ink); font-weight:900; font-size:.9rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.compare .tagline{
  position:absolute; bottom:12px; z-index:6;
  font-size:.7rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px; color:#fff;
}
.compare .tagline.l{ left:12px; background:#5b6577; }
.compare .tagline.r{ right:12px; background:#0b8043; }

.ba-note{
  border-left:5px solid var(--amber); background:#fffaf0;
  padding:16px 20px; border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:.94rem; color:#7a5a12;
}

/* ==========================================================================
   VIDEO CARDS
   ========================================================================== */
.vid{ position:relative; }
.vid .play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.vid .play span{
  width:70px; height:70px; border-radius:50%;
  background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; padding-left:5px;
  box-shadow:0 10px 30px rgba(28,69,135,.42);
}
.vid-time{
  position:absolute; right:10px; bottom:10px; z-index:3;
  background:rgba(18,21,27,.86); color:#fff;
  font-size:.75rem; font-weight:700; padding:4px 9px; border-radius:6px;
}

/* ==========================================================================
   TRANSPARENCY / FACT STRIP
   ========================================================================== */
.facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; background:#c3ddf5; }
.fact{ background:var(--band-blue); padding:28px 20px; text-align:center; }
.fact b{ display:block; font-size:2.1rem; font-weight:900; color:var(--navy-ink); line-height:1.1; }
.fact span{ font-size:.9rem; color:var(--ink); }

.truth{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.truth-item{
  background:#fff; border:1px solid var(--line); border-left:6px solid var(--teal);
  border-radius:var(--radius-sm); padding:20px 22px; box-shadow:var(--shadow);
}
.truth-item h3{ font-size:1.05rem; margin-bottom:6px; }
.truth-item p{ margin:0; color:var(--ink-soft); font-size:.95rem; }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band{
  background:var(--band-pink);
  color:var(--ink); text-align:center; padding:64px 0;
}
.cta-band h2{ color:var(--ink); }
.cta-band p{ color:var(--ink); font-size:1.1rem; max-width:640px; margin:0 auto 26px; }
.cta-band .btn-light{ color:var(--navy-ink); border-color:var(--navy-ink); }
.cta-buttons{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:var(--band-blue); color:var(--ink); padding:52px 0 24px; font-size:.95rem; }
.site-footer a{ color:var(--navy-ink); }
.site-footer a:hover{ color:var(--navy-ink-dk); }
.foot-grid{ display:grid; grid-template-columns:1.4fr minmax(0,1fr) minmax(0,1fr) 1.2fr; gap:34px; }
.site-footer h3{ color:var(--ink); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px; }
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ margin-bottom:9px; }
.foot-logo{ height:150px; width:auto; margin-bottom:14px; }
.foot-bottom{
  border-top:1px solid #c3ddf5; margin-top:36px; padding-top:20px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.85rem;
}

/* Sticky mobile call bar */
.sticky-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:#fff; border-top:1px solid var(--line);
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  gap:10px; box-shadow:0 -6px 22px rgba(18,21,27,.12);
}
.sticky-bar .btn{ flex:1; padding:13px 10px; font-size:.95rem; }

/* ==========================================================================
   SOCIAL MEDIA  (index.html only)
   Two columns. The YouTube card carries .wide and spans both, so the three
   video links sit in one strip instead of leaving half a row empty.
   ========================================================================== */
.soc-grid{ display:grid; gap:22px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.soc-col{
  background:#fff; border:1px solid var(--line); border-top:4px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:22px; min-width:0; display:flex; flex-direction:column;
}
.soc-col.wide{ grid-column:1 / -1; }
.soc-col.fb{ border-top-color:#1877f2; }
.soc-col.ig{ border-top-color:#c32aa3; }
.soc-col.yt{ border-top-color:#e60000; }
.soc-hd{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
/* Each card's name in its own brand colour, darkened only as far as needed
   to clear 4.5:1 on white (1.4.3). The pure brand hues all fail as text:
   #1877f2 = 4.23:1, #dd2a7b = 4.48:1, #ff0000 = 4.00:1. */
.soc-name{ font-weight:800; font-size:1.12rem; color:var(--navy-ink); }
.soc-col.fb .soc-name{ color:#0866ff; }   /* 4.82:1 */
.soc-col.ig .soc-name{ color:#c32aa3; }   /* 5.02:1 */
.soc-col.yt .soc-name{ color:#cc0000; }   /* 5.89:1 */
.soc-tile{
  width:38px; height:38px; border-radius:10px; flex:0 0 38px;
  display:flex; align-items:center; justify-content:center;
}
.soc-tile svg{ width:21px; height:21px; fill:#fff; }
.soc-tile.fb{ background:#1877f2; }
.soc-tile.yt{ background:#e60000; }
.soc-tile.ig{ background:linear-gradient(45deg,#f58529 0%,#dd2a7b 55%,#8134af 100%); }
.soc-feed{ flex:1; }
.soc-foot{ margin:18px 0 0; }

/* --- Facebook: one iframe, Facebook scrolls its own timeline inside it.
   The plugin is asked for a 1400px timeline in a 760px frame so it overflows
   and the visitor gets a scrollbar. Never put scrolling="no" back on it. --- */
.emb{ width:100%; border-radius:10px; }
.emb iframe{
  border:0; width:100%; height:760px; display:block;
  background:var(--paper-2); border-radius:10px;
}

/* --- Instagram: there is no free whole-feed embed, so four single-post
   embeds are stacked and THIS panel does the scrolling. tabindex="0" makes
   it reachable and scrollable by keyboard (2.1.1). --- */
.scrollfeed{
  /* flex:none is load-bearing - .soc-feed sets flex:1, and in a column flex
     container that makes the height flex-driven and ignores the height below,
     so the panel grows to fit all four posts and never scrolls. */
  flex:none; height:760px; overflow-y:auto; overscroll-behavior:contain;
  border:1px solid var(--line); border-radius:10px; background:var(--paper-2);
}
/* Tall enough that a post is never clipped - each iframe carries
   scrolling="no" so only the panel above shows a scrollbar, not every post. */
.scrollfeed iframe{
  border:0; width:100%; height:700px; display:block; background:var(--paper-2);
}
.scrollfeed iframe + iframe{ border-top:1px solid var(--line); }

/* --- YouTube: thumbnails from i.ytimg.com, whole row links out. No player,
   so no Google cookie on page load. Same row shape as ilaiyaraajalive.com -
   thumbnail left, title and date right. Three across, because this card
   spans both columns. --- */
.vidrow{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 26px; }
.vid{ display:flex; gap:14px; align-items:flex-start; padding:12px 0;
      text-decoration:none; color:var(--ink); min-width:0; }
.vid img{ width:124px; flex:0 0 124px; height:auto; aspect-ratio:16/9;
          object-fit:cover; border-radius:var(--radius-sm); background:var(--paper-2); }
.vid .vt{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
          overflow:hidden; font-size:.95rem; line-height:1.45; font-weight:600; }
.vid .vd{ display:block; margin-top:4px; font-size:.85rem; color:var(--ink-soft); }
.vid:hover .vt{ text-decoration:underline; text-underline-offset:2px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .g-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ba-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .foot-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .facts{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* The menu is wider than the layout breakpoint allows once FAQ is in it,
   so it folds to the hamburger on its own schedule. */
@media (max-width:1120px){
  .nav-toggle{ display:block; }
  .nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:2px;
    background:#fff; border-bottom:1px solid var(--line);
    padding:12px 20px 18px; box-shadow:var(--shadow-lg);
  }
  .nav.open{ display:flex; }
  .nav a{ padding:13px 12px; }
  .nav .btn-call, .nav .btn-wa{ margin-left:0; text-align:center; margin-top:6px; }
}

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; gap:34px; }
  .g-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .scroll-hint{ display:block; }
}

@media (max-width:520px){
  .facts{ grid-template-columns:minmax(0,1fr); }
}

@media (max-width:680px){
  body{ font-size:16px; padding-bottom:96px; }
  section{ padding:52px 0; }
  .g-2,.g-3,.g-4,.ba-grid,.truth{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .brand img{ height:120px; }
  .foot-logo{ height:120px; }
  .sticky-bar{ display:flex; }
  .step{ padding-left:0; padding-top:60px; }
  .step::before{ top:0; }
}

@media print{
  .site-header,.sticky-bar,.cta-band,.topbar{ display:none; }
}


/* ==========================================================================
   FORM CONTROLS (1.4.11 Non-text Contrast — a boundary needs 3:1)
   ========================================================================== */
.field{
  padding:10px 14px; font-size:.95rem; min-width:240px;
  border:1px solid var(--field); border-radius:10px;
  color:var(--ink); background:#fff;
}
.field::placeholder{ color:#5b6577; opacity:1; }

/* Keyboard-scrollable tables get a visible boundary when focused */
.table-scroll:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }


/* ==========================================================================
   HERO BEFORE / AFTER  (replaces the drag slider)
   Two photographs side by side, labelled. No interaction to work out.
   ========================================================================== */
.ba-hero{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.ba-hero figure{ margin:0; position:relative; }
.ba-hero img{
  width:100%; height:auto; display:block;
  border-radius:var(--radius); box-shadow:var(--shadow-lg);
  background:#e9edf4;
}
.ba-hero figcaption{
  position:absolute; left:12px; bottom:12px;
  font-size:.72rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; padding:7px 14px; border-radius:999px;
}
.ba-hero .before figcaption{ background:#5b6577; }
.ba-hero .after  figcaption{ background:#0b8043; }
html[lang="ta"] .ba-hero figcaption{ letter-spacing:.01em; text-transform:none; }

/* ==========================================================================
   POWER FOOTER — every branch address, light green
   ========================================================================== */
/* Six branches — 3 x 2 on desktop. Was repeat(5,...) when there were five;
   if a seventh is added, 4 columns keeps the last row from sitting alone. */
.foot-branches{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px 34px; margin:34px 0 8px;
}
.foot-branch h3{ margin-bottom:6px; }
.foot-branch p{ margin:0 0 6px; font-size:.9rem; line-height:1.6; }
.foot-branch .b-phone{ font-weight:700; line-height:2.2; }
.foot-branch .b-map{ margin:0; }
.foot-branch .b-map a{ display:inline-block; padding:5px 0; font-weight:600; }
/* 2.5.8: two numbers stacked with <br> sat 16px apart — too close to pass */
.foot-branch .b-phone a{ display:inline-block; padding:4px 0; }
.foot-links{
  display:flex; flex-wrap:wrap; gap:6px 22px;
  margin-top:30px; padding-top:22px; border-top:1px solid #c3ddf5;
}
.foot-links a{ font-weight:600; }

@media (max-width:1024px){ .foot-branches{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:680px){
  .foot-branches{ grid-template-columns:repeat(1,minmax(0,1fr)); gap:22px; }
  .soc-grid{ grid-template-columns:1fr; }
  .emb iframe, .scrollfeed{ height:620px; }
  .vidrow{ grid-template-columns:1fr; }
  .ba-hero{ gap:10px; }
}


/* ==========================================================================
   TESTIMONIAL CARROUSEL
   Scroll-snap + two buttons. No auto-advance on purpose: a carousel that
   moves by itself has to offer a pause control (WCAG 2.2.2), and it steals
   the reader's place. This one only moves when someone asks it to.
   ========================================================================== */
.carousel{ position:relative; }
.car-track{
  overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; padding:4px;
  scrollbar-width:none;          /* Firefox */
  -ms-overflow-style:none;       /* old Edge */
}
.car-track::-webkit-scrollbar{ display:none; }   /* Chrome, Safari */
.car-track:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }
.car-list{
  display:flex; gap:22px; list-style:none; margin:0; padding:0;
}
.quote{
  flex:0 0 clamp(250px, 31%, 350px);
  scroll-snap-align:start;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:26px 26px 22px;
  display:flex; flex-direction:column;
}
.q-title{
  margin:0 0 12px; font-size:1.02rem; font-weight:800;
  color:var(--navy-ink); line-height:1.3;
}
.quote blockquote{
  margin:0 0 16px; font-size:1.05rem; line-height:1.6; color:var(--ink);
}
.quote blockquote::before{
  content:"\201C"; display:block; font-size:2.6rem; line-height:.6;
  color:var(--navy-ink); margin-bottom:10px; font-weight:900;
}
.quote cite{
  margin-top:auto; font-style:normal; font-weight:700; font-size:.92rem;
  color:var(--navy-ink);
}
.quote .q-where{ display:block; font-weight:400; color:var(--ink-soft); font-size:.86rem; }

.car-nav{ display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }
.car-btn{
  width:46px; height:46px; border-radius:50%;
  border:2px solid var(--navy-ink); background:#fff; color:var(--navy-ink);
  font-size:1.4rem; line-height:1; cursor:pointer;
}
.car-btn:hover{ background:var(--navy-ink); color:#fff; }
.car-btn[disabled]{ opacity:.35; cursor:default; }
.car-btn[disabled]:hover{ background:#fff; color:var(--navy-ink); }

/* ==========================================================================
   FAQ  — native <details>, so it works with no JavaScript at all
   ========================================================================== */
.faq{ max-width:820px; }
.faq details{
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:#fff; margin-bottom:12px; box-shadow:var(--shadow);
}
.faq summary{
  cursor:pointer; list-style:none;
  padding:18px 54px 18px 22px; position:relative;
  font-weight:700; font-size:1.06rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%);
  font-size:1.5rem; font-weight:800; color:var(--navy-ink); line-height:1;
}
.faq details[open] summary::after{ content:"\2013"; }
.faq summary:focus-visible{ outline:3px solid var(--focus); outline-offset:-3px; border-radius:var(--radius-sm); }
.faq details p{ margin:0; padding:0 22px 20px; color:var(--ink-soft); font-size:1rem; }

@media (max-width:680px){
  .quote{ flex-basis:86%; }
  .car-nav{ justify-content:center; }
}


/* ==========================================================================
   SOCIAL ICONS (footer)
   ========================================================================== */
.foot-social{ display:flex; gap:12px; align-items:center; margin:22px 0 0; }
.foot-social a{
  width:44px; height:44px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid #c3ddf5; color:var(--navy-ink);
}
.foot-social a:hover{ background:var(--navy-ink); color:#fff; }
.foot-social svg{ width:22px; height:22px; fill:currentColor; display:block; }

/* the four "how we fix it" method cards */
.method-note{ font-weight:700; color:var(--navy-ink); margin-top:auto; }


/* ==========================================================================
   v7 — VISUAL PASS
   The pages were reading like a manual. These components replace paragraphs
   with pictures, one big number, and one line of copy.
   ========================================================================== */

/* --- PUNCH BAND: one sentence, big type, used instead of an intro paragraph */
.punch{ background:var(--band-blue); padding:54px 0; text-align:center; }
.punch p{
  margin:0 auto; max-width:940px;
  font-size:clamp(1.45rem,3.4vw,2.3rem); font-weight:900; line-height:1.25;
  color:var(--navy-ink);
}
.punch p.sub{
  font-size:1.02rem; font-weight:600; color:var(--ink);
  margin-top:16px; max-width:640px;
}
.punch .cta-buttons{ margin-top:26px; }
/* a band carrying only the small line - no big line above it to sit under */
.punch.tight{ padding:32px 0; }
.punch p.sub:first-child{ margin-top:0; }
html[lang="ta"] .punch p{ font-size:clamp(1.25rem,3vw,1.95rem); line-height:1.45; }

/* --- PHOTO TILES: picture first, a title and one short line under it */
.tiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.tiles.t4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.tile{ margin:0; }
.tile .media{ margin-bottom:13px; }
.tile h3{ font-size:1.05rem; margin:0 0 3px; }
.tile p{ margin:0; font-size:.93rem; color:var(--ink-soft); line-height:1.55; }

/* --- SPEC CARD: photo, name, one giant number, one line, tags */
.spec{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column;
}
.spec > .media{ border-radius:0; box-shadow:none; }
.spec-body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.spec h3{ font-size:1.18rem; margin:0; }
.spec .big{
  display:block; font-size:1.95rem; font-weight:900; line-height:1.1;
  color:var(--navy-ink); margin:12px 0 0;
}
.spec .big-lbl{
  display:block; font-size:.74rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-soft); margin-top:3px;
}
html[lang="ta"] .spec .big-lbl{ letter-spacing:.01em; text-transform:none; font-size:.84rem; }
.spec .line{ margin:14px 0 0; font-size:.97rem; color:var(--ink); line-height:1.6; }
.spec .card-foot{ margin-top:auto; padding-top:16px; display:flex; flex-wrap:wrap; gap:8px; }

/* --- CHIPS: short statements where six paragraphs used to be */
.chips{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.chips.c2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.chip{
  background:#fff; border:1px solid var(--line); border-left:6px solid var(--navy);
  border-radius:var(--radius-sm); padding:16px 18px; box-shadow:var(--shadow);
}
.chip b{ display:block; font-size:1.02rem; color:var(--navy-ink); margin-bottom:4px; }
.chip span{ display:block; font-size:.93rem; color:var(--ink-soft); line-height:1.55; }

/* --- VIDEO BLOCK: the player itself is the content, caption is one line */
.vfeature{ max-width:960px; margin:0 auto; }
.vfeature video{
  width:100%; height:auto; display:block; background:#12151b;
  border-radius:var(--radius); box-shadow:var(--shadow-lg);
}
.vfeature figcaption{
  margin-top:14px; text-align:center; font-size:.98rem; color:var(--ink-soft);
}
.vwall{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.vwall figure{ margin:0; }
.vwall video{
  width:100%; height:auto; display:block; background:#12151b; aspect-ratio:16/9;
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.vwall figcaption{ margin-top:11px; font-weight:700; font-size:1rem; }
.vwall figcaption span{ display:block; font-weight:400; font-size:.9rem; color:var(--ink-soft); }
video:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }

@media (max-width:900px){
  .tiles, .tiles.t4, .chips{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vwall{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:680px){
  .tiles, .tiles.t4, .chips, .chips.c2, .vwall{ grid-template-columns:minmax(0,1fr); }
  .punch{ padding:44px 0; }
}


/* ==========================================================================
   EXAMPLE IMAGES  (gallery.html "Common problems and solutions")
   Composed before/after examples. Not customer records - .illus-note under
   the heading and the alt text of each image are what say so.
   ========================================================================== */
.illus-note{
  font-size:.95rem; color:var(--ink-soft); margin:-10px 0 30px; max-width:640px;
}
.illus-sub{ display:flex; align-items:center; gap:16px; margin:0 0 22px; }
.illus-sub h3{
  margin:0; font-size:.82rem; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:#fff; background:var(--navy-ink);
  padding:8px 20px; border-radius:999px; white-space:nowrap;
}
.illus-sub.women h3{ background:var(--pink-ink); }
.illus-sub::after{ content:""; flex:1; height:1px; background:var(--line); }
html[lang="ta"] .illus-sub h3{ letter-spacing:.01em; text-transform:none; font-size:.95rem; }

.illus{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-bottom:44px; }
.illus figure{ margin:0; position:relative; }
.illus img{
  width:100%; height:auto; display:block; border-radius:var(--radius);
  box-shadow:var(--shadow); background:#e9edf4;
}
.illus figcaption{ margin-top:12px; font-weight:700; font-size:1rem; }

@media (max-width:900px){ .illus{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:680px){ .illus{ grid-template-columns:minmax(0,1fr); } }


/* ==========================================================================
   HOME VIDEO — the clip is shot vertical (9:16), so it is held to a phone-
   sized column instead of running the full width of the page.
   Native <video controls> is used deliberately: the browser's own controls
   are keyboard operable and already named for screen readers, which a
   hand-rolled player would have to reimplement and usually gets wrong.
   ========================================================================== */
.vfeature.portrait{ max-width:360px; }
.vfeature.portrait video{
  width:100%; height:auto; aspect-ratio:9/16; display:block;
  background:#12151b; border-radius:var(--radius); box-shadow:var(--shadow-lg);
}
.vfeature figcaption{ margin-top:14px; text-align:center; font-size:.98rem; color:var(--ink-soft); }

/* the text version of the video, for anyone who cannot watch it */
.vdesc{
  max-width:680px; margin:26px auto 0;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff;
  box-shadow:var(--shadow);
}
.vdesc summary{
  cursor:pointer; list-style:none; padding:15px 50px 15px 20px;
  position:relative; font-weight:700; font-size:1rem;
}
.vdesc summary::-webkit-details-marker{ display:none; }
.vdesc summary::after{
  content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%);
  font-size:1.4rem; font-weight:800; color:var(--navy-ink); line-height:1;
}
.vdesc[open] summary::after{ content:"\2013"; }
.vdesc summary:focus-visible{ outline:3px solid var(--focus); outline-offset:-3px; border-radius:var(--radius-sm); }
.vdesc p{ margin:0; padding:0 20px 18px; color:var(--ink-soft); font-size:.97rem; }
.vdesc p + p{ padding-top:0; }


/* ==========================================================================
   STUDIO PHOTO CARROUSEL (gallery.html)
   Same component as the testimonials — same buttons, same scroll-snap, same
   no-auto-advance rule. Only the slide is different.
   ========================================================================== */
.shot{
  flex:0 0 clamp(260px, 46%, 520px);
  scroll-snap-align:start; margin:0;
}
.shot figure{ margin:0; }
.shot img{
  width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block;
  border-radius:var(--radius); box-shadow:var(--shadow); background:#e9edf4;
}
.shot figcaption{ margin-top:11px; font-weight:700; font-size:1rem; }
@media (max-width:680px){ .shot{ flex:0 0 86%; } }