/* ==========================================================================
   SERVICE PAGES — /services/full-home, /modular-kitchens, /wardrobes,
   /renovation, /offices. One stylesheet for the five, because they are one
   template: a page per homepage "Offerings" tile.

   The visual language is the About page's, lifted rather than reinvented:
   General Sans in sentence case with the qualifier dimmed (.dim), a white
   .frame inside a hairline for things that belong together, .disc badges,
   the blue pill, the full-bleed opening photograph, and the dark closing
   band with the oversized mark. If one of those changes on About, change it
   here too.
   ========================================================================== */

@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(/fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(/fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(/fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:"General Sans";src:url(/fonts/general-sans-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Archivo";src:url(/fonts/archivo-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root {
  --bg:#F6F8FB; --surface:#FFFFFF; --ink:#101720; --muted:#5E6A78;
  --dim:#B4BECB;
  --blue:#1155D6; --blue-d:#0D42A8; --dark:#0E1A26; --line:#E2E8F0;
  --r-lg:24px; --r-md:16px;
  --sans: Poppins, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --disp: "General Sans", var(--sans);
  --alt: "Archivo", var(--sans);
  --gut: clamp(1.1rem, 5.42vw, 5rem);
  --maxw: 1560px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.25,1,.5,1);
}
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:clip; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip; }
h1,h2,h3,h4 { margin:0; font-weight:600; }
p { margin:0; }
a { color:inherit; }
img,svg { display:block; max-width:100%; }
ul,ol { margin:0; padding:0; list-style:none; }
figure { margin:0; }
.wrap { max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.masthead:not(.float) { background:transparent; position:relative; z-index:40; }

/* ---- type ---- */
.h1 { font-family:var(--disp); font-weight:600; letter-spacing:-0.035em; line-height:1.03;
  font-size:clamp(2.2rem,5.4vw,4.6rem); text-wrap:balance; }
.h2 { font-family:var(--disp); font-weight:600; letter-spacing:-0.032em; line-height:1.05;
  font-size:clamp(1.85rem,3.9vw,3.1rem); text-wrap:balance; }
.h3 { font-family:var(--disp); font-weight:600; letter-spacing:-0.02em; line-height:1.2;
  font-size:clamp(1.08rem,1.6vw,1.3rem); }
.dim { color:var(--dim); }
.muted { color:var(--muted); }

/* ---- devices ---- */
.frame { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); }
.disc { width:var(--s,38px); height:var(--s,38px); border-radius:50%; flex:none;
  display:grid; place-items:center; }
.disc svg { width:44%; height:44%; }
.disc.dark { background:var(--ink); color:#fff; }
.disc.blue { background:var(--blue); color:#fff; }
.pill { display:inline-flex; align-items:center; gap:0.75rem; border-radius:999px;
  padding:0.35rem 0.35rem 0.35rem 1.4rem; min-height:48px;
  font-size:0.92rem; font-weight:600; text-decoration:none; white-space:nowrap;
  border:1px solid transparent; transition:background .18s, color .18s, border-color .18s; }
.pill.blue { background:var(--blue); color:#fff; }
.pill.blue:hover { background:var(--blue-d); }
.pill.ghost { background:transparent; border-color:var(--line); color:var(--ink); padding-inline:1.4rem; }
.pill.ghost:hover { border-color:#C4CDD8; background:#fff; }
.pill .disc { --s:38px; }
.ondark .pill.ghost { border-color:rgba(255,255,255,.32); color:#fff; }
.ondark .pill.ghost:hover { border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.08); }

/* ---- scroll reveal: one mechanism, as on About ---- */
.rv { opacity:0; transform:translateY(24px);
  transition:opacity .8s var(--ease) var(--d,0ms), transform .8s var(--ease) var(--d,0ms); }
.rv.in { opacity:1; transform:none; }

/* ============ hero ============
   About's opening photograph: full page width, opening from a rounded card
   on reveal (clip-path, never width), washed into the page at both ends so
   the floating header sits on settled ground. See about/index.html for the
   reasons behind each number; they are the same here. */
.hero { padding-block:0 clamp(2rem,4vw,3rem); }
.shot { position:relative; background:var(--bg); aspect-ratio:16/7;
  --cardw: calc(min(var(--vw,100vw), var(--maxw)) - 2 * var(--gut));
  --bleed: calc((var(--vw,100vw) - var(--cardw)) / 2);
  margin:0 calc(-1 * var(--bleed));
  clip-path:inset(0 var(--bleed) round var(--r-lg));
  transition:clip-path 1.05s var(--ease-out) var(--d,0ms),
             opacity .8s var(--ease) var(--d,0ms),
             transform .8s var(--ease) var(--d,0ms); }
.shot.in { clip-path:inset(0 0 round 0); }
@media (max-width:820px){ .shot { aspect-ratio:4/3; } }
.shot img { width:100%; height:calc(100% - 1px); object-fit:cover; }
.shot::after { content:""; position:absolute; inset:0 0 auto; z-index:1; pointer-events:none;
  height:clamp(150px, 30vh, 340px);
  background:linear-gradient(to bottom, rgb(246,248,251) 0%, rgba(246,248,251,.94) 12%,
    rgba(246,248,251,.7) 34%, rgba(246,248,251,.34) 62%, rgba(246,248,251,.12) 82%, rgba(246,248,251,0) 100%); }
.shot::before { content:""; position:absolute; inset:auto 0 0; z-index:1; pointer-events:none;
  height:clamp(130px, 24vh, 290px);
  background:linear-gradient(to top, rgb(246,248,251) 0%, rgba(246,248,251,.95) 10%,
    rgba(246,248,251,.72) 32%, rgba(246,248,251,.36) 60%, rgba(246,248,251,.12) 82%, rgba(246,248,251,0) 100%); }
@media (prefers-reduced-motion: reduce) {
  .shot, .shot.in { clip-path:inset(0 var(--bleed) round var(--r-lg)); transition:none; }
}

/* Where the reader is: back to the homepage band this page came from. */
.crumb { display:flex; gap:0.5rem; align-items:center; margin-top:clamp(1.2rem,2.4vw,1.8rem);
  color:var(--muted); font-size:0.82rem; }
.crumb a { text-decoration:none; }
.crumb a:hover { color:var(--ink); }
.crumb svg { width:14px; height:14px; }

/* The service's name is the page's heading here, unlike About: a visitor
   arriving from a tile or a search needs to be told which service this is. */
.hero-say { margin-top:clamp(0.8rem,1.6vw,1.1rem);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.85fr);
  gap:clamp(1.4rem,4vw,3.5rem); align-items:end; }
@media (max-width:900px){ .hero-say { grid-template-columns:1fr; align-items:start; } }
.hero-lead { color:var(--muted); font-size:clamp(0.98rem,1.15vw,1.08rem); line-height:1.75; }
.hero-lead + .hero-lead { margin-top:1rem; }
.hero-cta { display:flex; flex-wrap:wrap; gap:0.7rem; margin-top:clamp(1.2rem,2.4vw,1.7rem); }

/* ============ section opener ============ */
.secbar { display:flex; align-items:end; justify-content:space-between; gap:1.5rem;
  margin-top:clamp(3.4rem,8vw,6rem); margin-bottom:clamp(1.4rem,3vw,2.2rem); }
.secbar p { color:var(--muted); max-width:46ch; margin-top:0.9rem; }
.secbar .disc { --s:clamp(44px,4vw,56px); }
@media (max-width:640px){ .secbar > .disc { display:none; } }

/* ============ what's included ============
   One framed band: the scope as a list on the left, the choices that come
   with it on the right. The choices are read from /assets/pricing.json where
   the page has them, so they are the same words the estimators price. */
.incl { display:grid; grid-template-columns:1.05fr 0.95fr; }
@media (max-width:960px){ .incl { grid-template-columns:1fr; } }
.incl-list { padding:clamp(1.4rem,3vw,2.6rem); display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.1rem,2.2vw,1.6rem) clamp(1.2rem,3vw,2.4rem);
  align-content:start; }
@media (max-width:620px){ .incl-list { grid-template-columns:1fr; } }
.incl-list li { display:grid; grid-template-columns:auto 1fr; gap:0.8rem; align-items:start; }
.incl-list .tick { width:26px; height:26px; border-radius:50%; background:rgba(17,85,214,.1); color:var(--blue);
  display:grid; place-items:center; margin-top:0.1rem; }
.incl-list .tick svg { width:14px; height:14px; }
.incl-list b { display:block; font-weight:600; font-size:0.98rem; line-height:1.35; }
.incl-list span { display:block; margin-top:0.25rem; color:var(--muted); font-size:0.86rem; line-height:1.55; }
.incl-side { border-left:1px solid var(--line); padding:clamp(1.4rem,3vw,2.6rem);
  display:flex; flex-direction:column; gap:clamp(1.2rem,2.4vw,1.7rem); }
@media (max-width:960px){ .incl-side { border-left:0; border-top:1px solid var(--line); } }
.opt-group h3 { font-size:0.82rem; font-weight:600; color:var(--muted); letter-spacing:0.01em; font-family:var(--sans); }
.chips { display:flex; flex-wrap:wrap; gap:0.45rem; margin-top:0.6rem; }
.chips li { border:1px solid var(--line); background:var(--bg); border-radius:999px;
  padding:0.38rem 0.85rem; font-size:0.86rem; line-height:1.3; }
/* Board chips carry the estimators' swatch square: a small white square
   with the board's photo set in from its top and left. */
.chips.mats li { display:inline-flex; align-items:center; gap:0.55rem; padding:4px 0.85rem 4px 4px; border-radius:12px; }
.chips .mat-sq { position:relative; flex:none; width:30px; height:30px; border-radius:8px; overflow:hidden;
  background:#fff; box-shadow:inset 0 0 0 1px var(--line); }
.chips .mat-sq img { position:absolute; top:9px; left:9px; width:calc(100% - 9px); height:calc(100% - 9px);
  object-fit:cover; display:block; border-top-left-radius:5px; }
.incl-side .note { color:var(--muted); font-size:0.86rem; line-height:1.6; margin-top:auto; }

/* ============ packages (full home) ============ */
.packs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(0.8rem,1.6vw,1.2rem); }
@media (max-width:900px){ .packs { grid-template-columns:1fr; } }
.pack { overflow:hidden; display:flex; flex-direction:column; }
.pack-ph { aspect-ratio:16/10; background:#E1E3E7; }
.pack-ph img { width:100%; height:100%; object-fit:cover; }
.pack-in { padding:clamp(1.1rem,2.2vw,1.5rem); display:flex; flex-direction:column; gap:0.55rem; flex:1; }
.pack-top { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.pack-top b { font-family:var(--disp); font-weight:600; font-size:1.25rem; letter-spacing:-0.02em; }
.pack-top span { color:var(--blue); font-weight:600; letter-spacing:0.04em; }
.pack p { color:var(--muted); font-size:0.9rem; line-height:1.6; }
.pack ul { margin-top:0.3rem; display:grid; gap:0.35rem; }
.pack li { font-size:0.86rem; padding-left:1.1rem; position:relative; }
.pack li::before { content:""; position:absolute; left:0; top:0.6em; width:6px; height:6px; border-radius:50%; background:var(--blue); }
/* One package on its own (Luxury, Value): the photograph beside the words. */
.packs.one { grid-template-columns:1fr; }
.packs.one .pack { flex-direction:row; }
/* The photograph is pinned inside its half, so a portrait picture cannot
   stretch the card to its own height; the words set the height, with a
   floor so a short description still gets a proper picture. */
.packs.one .pack-ph { flex:0 0 46%; aspect-ratio:auto; min-height:320px; position:relative; }
.packs.one .pack-ph img { position:absolute; inset:0; }
.packs.one .pack-in { justify-content:center; padding:clamp(1.4rem,3vw,2.6rem); }
.packs.one .pack-top b { font-size:clamp(1.4rem,2.2vw,1.8rem); }
@media (max-width:760px){ .packs.one .pack { flex-direction:column; } .packs.one .pack-ph { min-height:0; aspect-ratio:16/10; flex-basis:auto; } }

/* ============ the work ============
   Real photographs of the studio's rooms, captioned with what they are.
   Six in a 3x2 grid, the first taking two cells so the band has a lead. */
.work { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(0.6rem,1.2vw,0.9rem); }
@media (max-width:760px){ .work { grid-template-columns:1fr 1fr; } }
.work figure { position:relative; overflow:hidden; border-radius:var(--r-md); background:#E1E3E7; aspect-ratio:4/3; }
.work figure:first-child { grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
@media (max-width:760px){ .work figure:first-child { grid-row:auto; aspect-ratio:16/10; } }
/* Pinned inside the figure, so a photograph's own proportions never size the
   grid: a portrait lead photo otherwise stretched its two rows and opened
   gaps under the small ones beside it. The grid sets every size. */
.work img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
@media (hover:hover){ .work figure:hover img { transform:scale(1.04); } }
.work figcaption { position:absolute; left:0; right:0; bottom:0; padding:2.2rem 1rem 0.85rem;
  color:#fff; font-size:0.84rem; font-weight:500;
  background:linear-gradient(to top, rgba(9,15,23,.72), rgba(9,15,23,0)); }
/* Fewer photographs, same shape: the lead still takes a 2x2 block, and the
   rest fill the columns beside it with no empty cell. */
.work[data-n="5"] { grid-template-columns:repeat(4,minmax(0,1fr)); }
/* Four: the lead, two stacked beside it, and a tall one closing the row. */
/* Placed explicitly: left to auto-placement the two small ones sat side by
   side and the tall one dropped to a third row. */
.work[data-n="4"] { grid-template-columns:repeat(4,minmax(0,1fr)); }
.work[data-n="4"] figure:nth-child(2) { grid-column:3; grid-row:1; }
.work[data-n="4"] figure:nth-child(3) { grid-column:3; grid-row:2; }
.work[data-n="4"] figure:nth-child(4) { grid-column:4; grid-row:1 / span 2; aspect-ratio:auto; }
/* Three: the lead and two stacked beside it; the small ones keep their 4:3,
   which is what gives the rows a height (the photographs are pinned). */
@media (max-width:760px){
  .work[data-n="5"], .work[data-n="4"] { grid-template-columns:1fr 1fr; }
  .work[data-n="4"] figure:nth-child(n+2) { grid-column:auto; grid-row:auto; aspect-ratio:4/3; }
}

/* ============ stages (About's divided band) ============ */
.stepband { display:grid; grid-template-columns:2.15fr 1fr; }
@media (max-width:960px){ .stepband { grid-template-columns:1fr; } }
.steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:760px){ .steps { grid-template-columns:1fr 1fr; } }
.step { padding:clamp(0.95rem,1.6vw,1.25rem); }
.step + .step { border-left:1px solid var(--line); }
@media (max-width:760px){
  .step:nth-child(odd) { border-left:0; }
  .step:nth-child(n+3) { border-top:1px solid var(--line); }
}
.step-mark { width:clamp(46px,4vw,56px); aspect-ratio:1; border-radius:50%;
  border:1px solid var(--line); display:grid; place-items:center;
  font-family:var(--disp); font-weight:600; font-size:0.82rem; letter-spacing:0.02em;
  color:var(--muted); font-variant-numeric:tabular-nums;
  transition:border-color .5s var(--ease), color .5s var(--ease); }
.step.in .step-mark { border-color:var(--blue); color:var(--blue); }
.step h3 { margin-top:clamp(0.7rem,1.3vw,0.9rem); font-size:clamp(1rem,1.25vw,1.15rem); }
.step p { margin-top:0.4rem; color:var(--muted); font-size:0.85rem; line-height:1.6; text-wrap:pretty; }
.stepside { border-left:1px solid var(--line); padding:clamp(1.4rem,2.8vw,2.2rem);
  display:flex; flex-direction:column; justify-content:space-between; gap:clamp(1.4rem,3vw,2rem);
  align-items:flex-start; }
@media (max-width:960px){ .stepside { border-left:0; border-top:1px solid var(--line); } }
.stepside p { color:var(--muted); font-size:0.98rem; line-height:1.65; }

/* ============ questions ============
   Native <details>, so they open without script and are read correctly. */
.faq { display:grid; grid-template-columns:0.95fr 1.15fr; gap:clamp(1.6rem,5vw,5rem); align-items:start; }
@media (max-width:900px){ .faq { grid-template-columns:1fr; } }
.faq-head { position:sticky; top:clamp(7rem,12vw,10rem); }
@media (max-width:900px){ .faq-head { position:static; } }
.faq-head p { color:var(--muted); margin-top:1rem; max-width:38ch; }
.faq-list details { border-top:1px solid var(--line); }
.faq-list details:last-child { border-bottom:1px solid var(--line); }
.faq-list summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:1rem;
  align-items:center; padding:1.15rem 0; font-weight:600; font-size:1rem; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary .disc { --s:30px; background:var(--bg); border:1px solid var(--line); color:var(--ink);
  transition:transform .3s var(--ease), background .2s; }
.faq-list details[open] summary .disc { transform:rotate(45deg); background:#fff; }
.faq-list details p { color:var(--muted); padding:0 3rem 1.2rem 0; line-height:1.7; font-size:0.95rem; }

/* ============ the other services ============ */
.others { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(0.6rem,1.2vw,0.9rem); }
@media (max-width:900px){ .others { grid-template-columns:1fr 1fr; } }
.other { position:relative; overflow:hidden; border-radius:var(--r-md); aspect-ratio:4/3; display:block;
  text-decoration:none; color:#fff; background:#1B2733; }
.other img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.other::after { content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(9,15,23,.78), rgba(9,15,23,.1) 60%, rgba(9,15,23,0)); }
/* .other-nm, not ".other span": the arrow disc is a span too, and took the
   label's position, landing on top of the name. */
.other-nm { position:absolute; left:1rem; right:3.4rem; bottom:0.9rem; z-index:1; font-weight:600; font-size:0.98rem; line-height:1.25; }
.other .disc { position:absolute; right:0.8rem; bottom:0.8rem; z-index:1; --s:32px; background:#fff; color:var(--ink); }
@media (hover:hover){ .other:hover img { transform:scale(1.05); } }

/* ============ close ============
   The band itself (photograph, logo, the join into the footer) is
   assets/close.css, shared with About. Here it only gets the footer's own
   rounded top, so the dark run starts with the same shape it ends on. */
.ondark { background:var(--dark); color:#fff; margin-top:clamp(3.4rem,8vw,6rem);
  border-radius:var(--r-lg) var(--r-lg) 0 0; overflow:hidden; }
.ondark .dim { color:rgba(255,255,255,.32); }
.close-in { display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(1.6rem,5vw,4rem); align-items:end; }
@media (max-width:820px){ .close-in { grid-template-columns:1fr; align-items:start; } }
.close-in > div > p { color:rgba(255,255,255,.66); max-width:44ch; margin-top:clamp(0.9rem,1.8vw,1.2rem); }
.close-row { display:flex; flex-wrap:wrap; gap:0.7rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .rv, .step-mark, .work img, .other img { transition:none; }
  .rv { opacity:1; transform:none; }
}
:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.ondark :focus-visible { outline-color:#fff; }

/* ==========================================================================
   PHONE & TABLET PASS (2026-10-15). Every rule is inside max-width 1024px or
   narrower, so desktop is untouched (proven by an element-position diff at
   1025/1280/1440 against the backup).
   ========================================================================== */
@media (max-width:640px){
  /* A section heading with a button beside it ("Wardrobes we have made." +
     Full gallery) squeezed the heading into a thin column: stack them. */
  .secbar { flex-direction:column; align-items:flex-start; gap:1rem; }
  /* "Other ways we can help" tiles are ~170px wide here: a smaller label and
     arrow so two-word names wrap once, clear of the arrow. */
  .other-nm { left:0.8rem; right:2.7rem; bottom:0.75rem; font-size:0.86rem; }
  .other .disc { --s:28px; right:0.65rem; bottom:0.65rem; }
}