/* ==========================================================================
   ORLIS STUDIO — style.css
   Palette : ivoire / sable / bois / métal noir / or
   ========================================================================== */

:root{
  --ink:        #15130f;
  --ink-2:      #211d17;
  --ivory:      #f5f0e6;
  --ivory-2:    #ece1cb;
  --sand:       #ddcba9;
  --wood:       #5b4128;
  --gold:       #ab8850;
  --gold-soft:  #c8ab78;
  --white:      #fffdf9;
  --line:       rgba(21,19,15,.14);
  --line-soft:  rgba(21,19,15,.08);
  --line-dark:  rgba(245,240,230,.16);
  --shade:      rgba(21,19,15,.55);

  --font-display: 'Fraunces', 'Iowan Old Style', serif;
  --font-body: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;

  --gutter: clamp(20px, 4vw, 56px);
  --maxw: 1360px;
  --ease: cubic-bezier(.22,.68,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.06;
  margin:0;
  letter-spacing:-.01em;
}
h1 em, h2 em, h3 em{ font-style:italic; font-weight:400; color:var(--wood); }
.dark-view h1 em, .dark-view h2 em{ color:var(--gold-soft); }
p{ margin:0; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

.ar{ display:inline-block; transition:transform .35s var(--ease); }
a:hover .ar{ transform:translate(3px,-2px); }

::selection{ background:var(--wood); color:var(--white); }

/* ---------- shared eyebrow / labels ---------- */
.eyebrow{
  font-family:var(--font-body);
  font-size:.8rem;
  letter-spacing:.02em;
  color:var(--gold-soft);
  margin-bottom:14px;
}
.eyebrow.dark{ color:var(--wood); }

.mini-label{
  font-size:.8rem;
  color:var(--wood);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.mini-label i{
  font-style:normal;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px; height:26px;
  border:1px solid var(--line);
  border-radius:50%;
  font-size:.68rem;
  color:var(--ink);
}

.circle-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:.95rem;
  color:var(--ink);
  padding-bottom:3px;
  border-bottom:1px solid var(--line);
  width:fit-content;
}
.circle-link:hover{ border-color:var(--wood); color:var(--wood); }

.button{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 28px;
  border-radius:2px;
  font-size:.95rem;
  border:1px solid transparent;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.button.light{ background:var(--ivory); color:var(--ink); }
.button.light:hover{ background:var(--white); }
.button.dark{ background:var(--ink); color:var(--ivory); }
.button.dark:hover{ background:var(--wood); }
.button.whatsapp{ background:transparent; border-color:var(--line-dark); color:var(--ivory); }
.button.whatsapp:hover{ border-color:var(--gold-soft); color:var(--gold-soft); }

.underlink{ display:inline-flex; align-items:center; gap:8px; font-size:.95rem; }

/* ---------- reveal-on-scroll (single restrained treatment) ---------- */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].in{ opacity:1; transform:translateY(0); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gutter);
  color:var(--ivory);
  transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.solid{
  background:rgba(21,19,15,.92);
  backdrop-filter:blur(10px);
  padding-top:16px; padding-bottom:16px;
  box-shadow:0 1px 0 var(--line-dark);
}

.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  width:30px; height:30px; border-radius:50%;
  border:1.4px solid currentColor; position:relative; flex:none;
}
.brand-mark::after{
  content:""; position:absolute; left:50%; top:14%; bottom:10%; width:1.4px;
  background:currentColor; transform:translateX(-50%) rotate(14deg);
}
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-name{ font-family:var(--font-display); font-size:1.15rem; letter-spacing:.03em; }
.brand-sub{ font-size:.58rem; letter-spacing:.28em; opacity:.7; margin-top:3px; }

.main-nav{ display:flex; gap:34px; }
.main-nav a{ font-size:.88rem; display:flex; align-items:center; gap:7px; opacity:.85; transition:opacity .25s; }
.main-nav a span{ font-size:.65rem; color:var(--gold-soft); }
.main-nav a:hover, .main-nav a.active{ opacity:1; }
.main-nav a.active{ color:var(--gold-soft); }

.header-contact{
  font-size:.88rem; padding:11px 20px; border:1px solid currentColor; border-radius:2px;
  display:flex; align-items:center; gap:8px;
  transition:background .3s, color .3s;
}
.header-contact:hover{ background:var(--ivory); color:var(--ink); }

.mobile-menu{
  display:none; width:38px; height:30px; border:0; background:none; color:inherit;
  cursor:pointer; flex-direction:column; justify-content:space-between; padding:3px 2px;
}
.mobile-menu span{ display:block; height:1.4px; background:currentColor; transition:transform .3s var(--ease), opacity .3s var(--ease); }
.mobile-menu[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.mobile-menu[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.mobile-menu[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

.mobile-panel{
  position:fixed; inset:0; z-index:99;
  background:var(--ink); color:var(--ivory);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:110px var(--gutter) 50px;
  transform:translateY(-100%); transition:transform .5s var(--ease);
}
.mobile-panel.open{ transform:translateY(0); }
.mobile-panel nav{ display:flex; flex-direction:column; gap:6px; }
.mobile-panel nav a{
  font-family:var(--font-display); font-size:2rem; padding:14px 0;
  border-bottom:1px solid var(--line-dark); display:flex; align-items:baseline; gap:16px;
}
.mobile-panel nav a span{ font-size:.9rem; color:var(--gold-soft); font-family:var(--font-body); }
.mobile-panel-foot{ display:flex; flex-direction:column; gap:8px; font-size:.95rem; opacity:.8; }

/* ==========================================================================
   VIEWS — page switching
   ========================================================================== */
.view{ display:none; }
.view.active{ display:block; }

/* ==========================================================================
   HOME — HERO
   ========================================================================== */
.hero{
  position:relative; height:100svh; min-height:560px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--ink);
}
.hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero-shade{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(21,19,15,.6) 0%, rgba(21,19,15,.2) 30%, rgba(21,19,15,.3) 58%, rgba(21,19,15,.9) 100%);
}
.hero-content{ position:relative; color:var(--white); padding:0 var(--gutter) 70px; max-width:900px; }
.hero-content h1{ font-size:clamp(2.6rem, 6vw, 5rem); color:var(--white); margin-bottom:22px; }
.hero-copy{ font-size:1.05rem; max-width:46ch; color:rgba(255,253,249,.82); margin-bottom:34px; }
.hero-actions{ display:flex; align-items:center; gap:30px; flex-wrap:wrap; }
.hero-actions .underlink{ color:var(--white); }

.hero-bottom{
  position:relative; display:flex; justify-content:space-between; align-items:center;
  padding:0 var(--gutter) 30px; color:rgba(255,253,249,.75); font-size:.78rem;
}
.scroll-cue{ display:flex; align-items:center; gap:10px; }
.scroll-cue i{
  width:26px; height:1px; background:currentColor; position:relative; overflow:hidden;
}
.scroll-cue i::after{
  content:""; position:absolute; inset:0; background:var(--gold-soft);
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{ 0%{ transform:translateX(-100%);} 50%{ transform:translateX(0);} 100%{ transform:translateX(100%);} }

/* ---------- home sections ---------- */
.home-intro{
  display:grid; grid-template-columns:220px 1fr; gap:var(--gutter);
  padding:120px var(--gutter) 100px; max-width:var(--maxw); margin:0 auto;
  border-bottom:1px solid var(--line);
}
.intro-body h2{ font-size:clamp(1.9rem,3.4vw,2.9rem); margin-bottom:26px; max-width:14ch; }
.intro-body p{ max-width:58ch; color:var(--ink-2); font-size:1.02rem; margin-bottom:30px; }

.home-project{ padding:100px var(--gutter) 0; max-width:var(--maxw); margin:0 auto; }
.project-label{ font-size:.8rem; color:var(--wood); margin-bottom:22px; }
.project-large-image{ aspect-ratio:16/8.5; overflow:hidden; }
.project-large-image img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.home-project:hover .project-large-image img{ transform:scale(1.035); }
.project-caption{
  display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap;
  padding:34px 0 100px; border-bottom:1px solid var(--line);
}
.project-caption p{ font-size:.85rem; color:var(--wood); margin-bottom:12px; }
.project-caption h2{ font-size:clamp(1.6rem,2.8vw,2.3rem); max-width:16ch; }
.project-caption a{ font-size:.95rem; border-bottom:1px solid var(--line); padding-bottom:3px; white-space:nowrap; }
.project-caption a:hover{ color:var(--wood); border-color:var(--wood); }

.home-services{ padding:100px var(--gutter); max-width:var(--maxw); margin:0 auto; border-bottom:1px solid var(--line); }
.services-head{ margin-bottom:56px; }
.services-head h2{ font-size:clamp(2rem,4vw,3.1rem); }
.service-list a{
  display:flex; align-items:center; gap:24px;
  padding:26px 4px; border-top:1px solid var(--line);
  font-family:var(--font-display); font-size:clamp(1.3rem,2.6vw,1.9rem);
  transition:padding-left .35s var(--ease), color .35s var(--ease);
}
.service-list a:last-child{ border-bottom:1px solid var(--line); }
.service-list a span{ font-family:var(--font-body); font-size:.8rem; color:var(--wood); width:24px; }
.service-list a em{ font-style:normal; flex:1; }
.service-list a b{ font-weight:400; font-size:1.1rem; color:var(--wood); }
.service-list a:hover{ padding-left:16px; color:var(--wood); }

.home-method-teaser{ padding:100px var(--gutter); max-width:var(--maxw); margin:0 auto; border-bottom:1px solid var(--line); }
.method-teaser-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:26px;
  padding:36px 0 44px; border-top:1px solid var(--line); margin-top:8px;
}
.method-teaser-row div{ display:flex; flex-direction:column; gap:8px; }
.method-teaser-row b{ font-family:var(--font-display); font-size:1.2rem; font-weight:500; }
.method-teaser-row span{ font-size:.85rem; color:var(--ink-2); opacity:.7; }

.home-cta{
  padding:150px var(--gutter); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:26px;
  background:var(--ink); color:var(--ivory);
}
.home-cta h2{ font-size:clamp(2.2rem,5vw,3.8rem); color:var(--ivory); }
.home-cta .eyebrow{ margin:0; }

/* ==========================================================================
   INNER VIEWS
   ========================================================================== */
.inner-view{ padding-top:120px; }
.view-hero{
  display:grid; grid-template-columns:1.3fr 1fr; gap:40px;
  padding:0 var(--gutter) 70px; max-width:var(--maxw); margin:0 auto;
  border-bottom:1px solid var(--line); align-items:end;
}
.view-hero h1{ font-size:clamp(2.3rem,5vw,4rem); }
.view-hero > p{ font-size:1.05rem; color:var(--ink-2); max-width:42ch; padding-bottom:6px; }
.view-hero.dark-view{ background:var(--ink); color:var(--ivory); margin:0 0 70px; padding:150px var(--gutter) 70px; border-bottom:none; }
.view-hero.dark-view > p{ color:rgba(245,240,230,.75); }

.back-row{ max-width:var(--maxw); margin:0 auto; padding:60px var(--gutter) 110px; }
.back-row a{ font-size:.92rem; display:inline-flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding-bottom:3px; }
.back-row a:hover{ color:var(--wood); border-color:var(--wood); }
.back-row.dark{ color:var(--ivory); }
.back-row.dark a{ border-color:var(--line-dark); }
.back-row.dark a:hover{ color:var(--gold-soft); border-color:var(--gold-soft); }

/* ---------- services grid ---------- */
.service-detail-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); max-width:var(--maxw); margin:0 auto 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.service-detail-grid article{ background:var(--ivory); padding:38px 34px 44px; position:relative; }
.service-detail-grid span{ font-size:.8rem; color:var(--wood); }
.detail-image{ aspect-ratio:4/3.1; overflow:hidden; margin:20px 0 26px; }
.detail-image img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.service-detail-grid article:hover .detail-image img{ transform:scale(1.06); }
.service-detail-grid h2{ font-size:1.4rem; margin-bottom:12px; }
.service-detail-grid p{ font-size:.92rem; color:var(--ink-2); opacity:.8; max-width:32ch; }

/* ---------- project pages ---------- */
.project-page{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter) 60px; }
.project-page.second-project{ padding-top:80px; border-top:1px solid var(--line); margin-top:20px; }
.project-meta{
  display:flex; gap:40px; align-items:center; flex-wrap:wrap;
  padding-bottom:26px; font-size:.85rem; color:var(--wood);
}
.project-meta strong{ font-family:var(--font-display); font-size:1.1rem; color:var(--ink); font-weight:500; }
.project-hero-image{ aspect-ratio:16/8.6; overflow:hidden; margin-bottom:44px; }
.project-hero-image img{ width:100%; height:100%; object-fit:cover; }
.project-title{
  display:grid; grid-template-columns:1fr 1fr; gap:50px;
  padding-bottom:50px; align-items:start;
}
.project-title h2{ font-size:clamp(1.7rem,3vw,2.5rem); }
.project-title p{ color:var(--ink-2); font-size:1rem; padding-top:8px; }
.gallery{ display:grid; gap:16px; margin-bottom:16px; }
.gallery.three{ grid-template-columns:1.3fr 1fr 1fr; }
.gallery.four{ grid-template-columns:repeat(4,1fr); }
.gallery.two{ grid-template-columns:1fr 1fr; margin-bottom:0; }
.gallery.two img{ aspect-ratio:4/2.7; }
.gallery img{ width:100%; aspect-ratio:3/3.6; object-fit:cover; }
.gallery.three img:first-child{ aspect-ratio:4/3.6; }
.credit{ font-size:.82rem; color:var(--wood); padding-top:26px; }

/* ---------- project videos (reel row) ---------- */
.project-videos{ margin:44px 0 6px; }
.videos-label{ font-size:.8rem; color:var(--wood); margin-bottom:18px; }
.video-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.video-card{ position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--ink); }
.video-card video{ width:100%; height:100%; object-fit:cover; display:block; }
.video-card span{
  position:absolute; left:14px; bottom:14px; font-size:.8rem; color:var(--ivory);
  background:rgba(21,19,15,.55); padding:6px 12px;
}

/* ---------- comparison slider ---------- */
.comparison-block{ margin-top:70px; padding-top:60px; border-top:1px solid var(--line); }
.comparison-heading{ max-width:640px; margin-bottom:34px; }
.comparison-heading span{ font-size:.8rem; color:var(--wood); display:block; margin-bottom:14px; }
.comparison-heading h3{ font-size:clamp(1.5rem,2.6vw,2rem); margin-bottom:14px; }
.comparison-heading p{ color:var(--ink-2); font-size:.98rem; }

.compare{ position:relative; }
.compare-media{
  position:relative; width:100%; aspect-ratio:16/9.4; overflow:hidden;
  cursor:ew-resize; user-select:none; background:var(--ink);
  --p:50%;
}
.compare-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.compare-overlay{
  position:absolute; inset:0; width:100%; height:100%;
  clip-path:inset(0 calc(100% - var(--p)) 0 0);
}
.compare-handle{
  position:absolute; top:0; bottom:0; left:var(--p); width:0;
  transform:translateX(-50%);
}
.compare-handle::before{
  content:""; position:absolute; top:0; bottom:0; left:0; width:2px; background:var(--white);
  transform:translateX(-50%);
}
.compare-knob{
  position:absolute; top:50%; left:0; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%; background:var(--white);
  display:flex; align-items:center; justify-content:center; gap:4px;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.compare-knob i{ width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; }
.compare-knob i:first-child{ border-right:8px solid var(--ink); }
.compare-knob i:last-child{ border-left:8px solid var(--ink); }
.compare-tag{
  position:absolute; bottom:18px; font-size:.78rem; padding:8px 14px;
  background:rgba(21,19,15,.72); color:var(--ivory); white-space:nowrap;
}
.compare-tag.left{ left:18px; }
.compare-tag.right{ right:18px; }
#compareRange{
  position:absolute; inset:0; width:100%; height:100%; margin:0;
  opacity:0; cursor:ew-resize; appearance:none;
}

/* ---------- méthode ---------- */
.method-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-dark);
  max-width:var(--maxw); margin:0 auto;
}
.method-grid div{ background:var(--ink); color:var(--ivory); padding:46px 30px 54px; }
.method-grid span{ font-family:var(--font-display); font-size:1.6rem; color:var(--gold-soft); }
.method-grid h2{ font-size:1.5rem; color:var(--ivory); margin:26px 0 12px; }
.method-grid p{ font-size:.92rem; color:rgba(245,240,230,.7); max-width:24ch; }
#methode{ background:var(--ink); padding-bottom:0; }
#methode .back-row{ background:var(--ink); }

/* ---------- studio ---------- */
.studio-split{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:center;
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter) 40px;
}
.studio-logo{ background:var(--ink); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.studio-logo img{ width:100%; height:100%; object-fit:cover; }
.studio-text h2{ font-size:clamp(1.6rem,2.8vw,2.3rem); margin:16px 0 20px; max-width:16ch; }
.studio-text > p:last-of-type{ color:var(--ink-2); font-size:1rem; max-width:46ch; margin-bottom:30px; }
.swatches{ display:flex; gap:22px; flex-wrap:wrap; }
.swatches div{ display:flex; align-items:center; gap:9px; font-size:.85rem; color:var(--ink-2); }
.swatches i{ width:20px; height:20px; border-radius:50%; border:1px solid var(--line); display:block; }

/* ---------- contact ---------- */
.contact-view{ background:var(--ink); color:var(--ivory); min-height:100svh; padding-top:150px; }
.contact-big{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter) 70px; border-bottom:1px solid var(--line-dark); }
.contact-big h1{ font-size:clamp(2.6rem,7vw,5.4rem); color:var(--ivory); margin:6px 0 24px; }
.contact-big > p:not(.eyebrow){ font-size:1rem; color:rgba(245,240,230,.7); max-width:56ch; margin-bottom:40px; }
.contact-actions{ display:flex; gap:20px; flex-wrap:wrap; }
.contact-lines{
  max-width:var(--maxw); margin:0 auto; padding:60px var(--gutter);
  display:grid; grid-template-columns:1fr 1fr; gap:30px;
}
.contact-lines span{ display:block; font-size:.82rem; color:var(--gold-soft); margin-bottom:10px; }
.contact-lines strong{ font-family:var(--font-display); font-size:1.6rem; font-weight:400; }
.contact-view .back-row{ padding-top:0; }
.contact-view .back-row a{ border-color:var(--line-dark); }
.contact-view .back-row a:hover{ color:var(--gold-soft); border-color:var(--gold-soft); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:var(--ink); color:var(--ivory); }
.footer-top{
  max-width:var(--maxw); margin:0 auto; padding:80px var(--gutter) 50px;
  display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:40px;
}
.footer-brand .brand-name{ font-family:var(--font-display); font-size:1.5rem; }
.footer-brand .brand-sub{ font-size:.7rem; letter-spacing:.28em; opacity:.65; margin-left:8px; }
.footer-brand p{ margin-top:16px; color:rgba(245,240,230,.65); font-size:.92rem; max-width:32ch; }
.footer-nav{ display:flex; flex-direction:column; gap:12px; font-size:.95rem; }
.footer-nav a{ opacity:.8; width:fit-content; }
.footer-nav a:hover{ opacity:1; color:var(--gold-soft); }
.footer-contact{ display:flex; flex-direction:column; gap:12px; font-size:.95rem; align-items:flex-start; }
.footer-contact a:hover{ color:var(--gold-soft); }
.footer-bottom{
  max-width:var(--maxw); margin:0 auto; padding:26px var(--gutter);
  border-top:1px solid var(--line-dark); display:flex; justify-content:space-between;
  font-size:.8rem; color:rgba(245,240,230,.55);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:980px){
  .main-nav, .header-contact{ display:none; }
  .mobile-menu{ display:flex; }
  .home-intro, .view-hero{ grid-template-columns:1fr; }
  .mini-label{ margin-bottom:14px; }
  .method-teaser-row{ grid-template-columns:repeat(2,1fr); }
  .service-detail-grid{ grid-template-columns:repeat(2,1fr); }
  .method-grid{ grid-template-columns:repeat(2,1fr); }
  .studio-split{ grid-template-columns:1fr; }
  .studio-logo{ max-width:320px; }
  .footer-top{ grid-template-columns:1fr; gap:30px; }
}
@media (max-width:640px){
  .gallery.three, .gallery.four{ grid-template-columns:repeat(2,1fr); }
  .video-row{ grid-template-columns:1fr 1fr; }
  .video-row .video-card:last-child{ grid-column:1 / -1; max-width:50%; margin:0 auto; }
  .project-title{ grid-template-columns:1fr; gap:20px; }
  .service-detail-grid{ grid-template-columns:1fr; }
  .method-grid{ grid-template-columns:1fr; }
  .contact-lines{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; gap:8px; }
  .compare-tag{ display:none; }
  .hero-bottom{ flex-direction:column; align-items:flex-start; gap:10px; }
}