/* ============================================================================
   Salih Tacir — shared design system
   ----------------------------------------------------------------------------
   The palette is sampled straight from the film that opens the home page: a
   pure studio black, the LED-tube white, and the candy red off the painted
   panels (#C22125 in the source frames). The rest of the site is built to sit
   quietly next to it — hairline rules, one accent, no gradients doing work that
   type and spacing should do.

   Everything here is shared by every page. The film's own overrides live in
   film.css and load only on the home page.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens --- */
:root, .sw-root{
  --sw-bg:        #050506;
  --sw-ink:       #FFFFFF;
  --sw-ink-soft:  rgba(255,255,255,.56);
  --sw-accent:    #C9CDD2;

  --red:          #C8161D;
  --red-hot:      #E01722;
  /* The brand red is a fill colour: white on it reads at 5.85:1, which is what
     the buttons and the painted panels need. As *type* on the studio black it
     only reaches 3.48:1, so every small red label was failing WCAG AA. This is
     the same hue lifted until it passes (5.17:1 on the page black, 4.99:1 on
     --panel); it is used for text only, never for a fill. */
  --red-ink:      #E8434A;
  --tape:         #E8C547;
  --line:         rgba(255,255,255,.14);
  --line-soft:    rgba(255,255,255,.08);
  --panel:        #0B0B0D;
  --panel-2:      #101013;

  --ink-2:        rgba(255,255,255,.72);
  --ink-3:        rgba(255,255,255,.56);
  /* .40 measured 3.71:1 on the page black — below the 4.5:1 floor, and it was
     carrying the footer blurb, every mono eyebrow, the blog dates and the
     table headers. .48 measures 4.96:1 there and 5.01:1 on --panel, and is
     still a clear step down from --ink-3. */
  --ink-4:        rgba(255,255,255,.48);

  --sw-font-display:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --sw-font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  --hd-h: 68px;                 /* header height, used by scroll-margin */
  --gut: clamp(20px,5vw,64px);  /* page gutter */
}

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

html{
  scroll-behavior:smooth;
  /* The one global guard against sideways scroll. Individual causes are fixed
     at the source (see `min-width:0` on every grid child and the wrapping rules
     on prose); this is the backstop for anything a future edit adds. */
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;background:var(--sw-bg);color:var(--sw-ink);
  font-family:var(--sw-font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;                /* clip, not hidden: keeps position:sticky alive */
}
img,svg,video,iframe{max-width:100%;height:auto;display:block}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:3px}

/* Skip link — visible only when tabbed to. */
.skip{position:fixed;top:-60px;left:12px;z-index:200;background:var(--red);color:#fff;
      padding:12px 18px;border-radius:6px;text-decoration:none;font-weight:600;font-size:.9rem;
      transition:top .2s}
.skip:focus{top:12px}

/* --------------------------------------------------------------- layout --- */
.wrap{width:100%;max-width:1180px;margin:0 auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:820px}
.sec{padding-block:clamp(72px,10vh,132px);scroll-margin-top:calc(var(--hd-h) + 24px)}
.sec--tight{padding-block:clamp(48px,7vh,84px)}
.sec + .sec{border-top:1px solid var(--line-soft)}
/* A hero already carries its own bottom room; the section after it does not
   need a full pad on top as well. */
.hero + .sec{padding-top:clamp(44px,6vh,72px)}
[id]{scroll-margin-top:calc(var(--hd-h) + 24px)}

/* ------------------------------------------------------------ typography --- */
.kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
        color:var(--red-ink);display:flex;align-items:center;gap:12px;margin:0 0 22px;
        line-height:1.4}
.kicker::after{content:"";flex:1 1 24px;min-width:0;height:1px;background:var(--line)}

h1.h,h2.h,h3.h{font-family:var(--sw-font-display);font-weight:600;letter-spacing:-.028em;
                line-height:1.06;margin:0 0 18px;overflow-wrap:break-word}
h1.h{font-size:clamp(2rem,4.6vw,3.4rem)}
h2.h{font-size:clamp(1.8rem,3.5vw,2.9rem)}
h3.h{font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.2}
.lead{color:var(--ink-3);font-size:clamp(1rem,1.15vw,1.09rem);line-height:1.65;
      max-width:64ch;margin:0}
.lead--wide{max-width:78ch}
.lead strong{color:var(--ink-2);font-weight:500}

/* ---------------------------------------------------------------- header --- */
.hd{position:fixed;inset-inline:0;top:0;z-index:100;
    display:flex;align-items:center;gap:16px;
    min-height:var(--hd-h);padding:12px var(--gut);
    transition:background .35s,border-color .35s,backdrop-filter .35s;
    border-bottom:1px solid transparent}
/* The home page's opening shot is a bright garage; without a wash behind it the
   wordmark and the number sit white-on-light-grey. Fades out once the bar frosts. */
.hd::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  transition:opacity .35s;
  background:linear-gradient(180deg,rgba(5,5,6,.9),rgba(5,5,6,.5) 55%,transparent)}
.hd.is-stuck::before{opacity:0}
.hd.is-stuck{background:rgba(5,5,6,.78);backdrop-filter:blur(14px) saturate(1.2);
             border-bottom-color:var(--line)}
/* Every page except the home page starts against solid black — frost immediately. */
body:not(.has-film) .hd{background:rgba(5,5,6,.78);backdrop-filter:blur(14px) saturate(1.2);
                        border-bottom-color:var(--line)}
body:not(.has-film) .hd::before{opacity:0}
body:not(.has-film) main{padding-top:var(--hd-h)}

.hd__brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:#fff;flex:none}
.hd__mark{width:5px;height:5px;border-radius:50%;background:var(--red);flex:none;order:2}
.hd__name{font-family:var(--sw-font-display);font-weight:600;font-size:1rem;
          letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;order:1}

.hd__nav{display:flex;align-items:center;gap:2px;margin-inline:auto;
         padding:4px;border-radius:8px;
         background:rgba(255,255,255,.04);border:1px solid var(--line);
         backdrop-filter:blur(12px)}
.hd__link{text-decoration:none;color:var(--ink-3);font-size:.82rem;letter-spacing:.01em;
          padding:8px 14px;border-radius:6px;white-space:nowrap;
          transition:color .2s,background .2s}
.hd__link:hover{color:#fff}
.hd__link.is-active{color:#fff;background:rgba(255,255,255,.1)}

.hd__side{display:flex;align-items:center;gap:10px;flex:none;margin-inline-start:auto}
.hd__nav ~ .hd__side{margin-inline-start:0}

.hd__call{display:inline-flex;align-items:center;text-decoration:none;color:#fff;
          font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;
          padding:10px 16px;border-radius:6px;border:1px solid rgba(255,255,255,.24);
          white-space:nowrap;transition:border-color .2s,background .2s}
.hd__call:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.hd__callShort{display:none}

/* language select — native, so it is keyboard- and AT-correct for free */
.langwrap{position:relative;display:inline-flex;align-items:center;flex:none}
.lang{appearance:none;-webkit-appearance:none;font:inherit;font-family:var(--mono);
      font-size:.78rem;letter-spacing:.06em;color:#fff;background:transparent;line-height:1;
      border:1px solid rgba(255,255,255,.24);border-radius:6px;
      padding:10px 28px 10px 12px;cursor:pointer}
.lang:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.lang option{background:#0B0B0D;color:#fff}
.langwrap::after{content:"";position:absolute;inset-inline-end:11px;top:50%;margin-top:-2px;
                 border:4px solid transparent;border-top-color:rgba(255,255,255,.55);
                 pointer-events:none}

/* burger — phones and tablets only */
.burger{display:none;position:relative;width:42px;height:42px;flex:none;padding:0;cursor:pointer;
        background:transparent;border:1px solid rgba(255,255,255,.24);border-radius:6px}
/* All three bars share one centre and are spread by transform alone. Combining
   a translate with a rotate on the same declaration made the closing X come out
   as a chevron — the bars rotate about their own centres, so the offsets have to
   be gone by the time they turn. */
.burger i{position:absolute;left:50%;top:50%;width:17px;height:1.5px;margin-left:-8.5px;
          background:#fff;border-radius:2px;transition:transform .28s cubic-bezier(.22,.61,.36,1),opacity .18s}
.burger i:nth-child(1){transform:translateY(-6px)}
.burger i:nth-child(2){transform:translateY(0)}
.burger i:nth-child(3){transform:translateY(6px)}
.burger[aria-expanded="true"] i:nth-child(1){transform:rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:rotate(-45deg)}

/* ---------------------------------------------------------------- drawer --- */
.drawer{position:fixed;inset:var(--hd-h) 0 0;z-index:95;
        background:rgba(5,5,6,.97);backdrop-filter:blur(18px);
        display:flex;flex-direction:column;justify-content:space-between;
        padding:24px var(--gut) calc(28px + env(safe-area-inset-bottom));
        overflow-y:auto;overscroll-behavior:contain}
.drawer[hidden]{display:none}
.drawer.is-in{animation:drawerIn .28s cubic-bezier(.22,.61,.36,1) both}
@keyframes drawerIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.drawer__nav{display:flex;flex-direction:column;gap:2px}
.drawer__link{text-decoration:none;color:#fff;font-family:var(--sw-font-display);
              font-weight:600;font-size:clamp(1.35rem,6vw,1.7rem);letter-spacing:-.02em;
              padding:14px 0;border-bottom:1px solid var(--line-soft)}
.drawer__link.is-active{color:var(--red-ink)}
.drawer__foot{display:flex;flex-direction:column;gap:10px;margin-top:32px}
body.nav-open{overflow:hidden}

/* ------------------------------------------------------------- crumbs --- */
.crumbs{padding-top:calc(var(--hd-h) + 20px);padding-bottom:0}
body.has-film .crumbs{padding-top:20px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;
           font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-4)}
.crumbs li+li::before{content:"/";margin-inline-end:8px;opacity:.5}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:#fff}
.crumbs span{color:var(--ink-4)}
body:not(.has-film) .crumbs + main,
body:not(.has-film) main:has(+ .ft) {padding-top:0}
body:not(.has-film) .crumbs ~ main{padding-top:0}

/* ------------------------------------------------------------ page hero --- */
.hero{position:relative;isolation:isolate;overflow:hidden;
      padding-block:clamp(56px,9vh,110px);border-bottom:1px solid var(--line-soft)}
.hero__bg{position:absolute;inset:0;z-index:-2;object-fit:cover;width:100%;height:100%;
          opacity:.72;filter:saturate(.9) contrast(1.04)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,6,.55),rgba(5,5,6,.72) 66%,var(--sw-bg)),
             linear-gradient(100deg,rgba(5,5,6,.94) 0%,rgba(5,5,6,.78) 34%,rgba(5,5,6,.22) 76%,transparent)}
/* On a phone the copy runs full width, so the wash has to come from the bottom
   instead of the side or the last line of the lead sits on the car. */
@media (max-width:640px){
  .hero::after{background:linear-gradient(180deg,rgba(5,5,6,.62),rgba(5,5,6,.86) 58%,var(--sw-bg))}
}
.hero h1.h{max-width:20ch}
.hero .lead{margin-top:4px}
.hero__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}

/* ---------------------------------------------------------------- tags --- */
.tags{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.tags li,.tag{background:rgba(255,255,255,.05);border:1px solid var(--line);
              color:var(--ink-2);border-radius:6px;font-weight:450;font-size:.78rem;
              padding:7px 13px;letter-spacing:.01em}

/* -------------------------------------------------------------- buttons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
     text-decoration:none;border:0;border-radius:6px;cursor:pointer;
     font-family:inherit;font-size:.94rem;font-weight:550;padding:15px 28px;
     transition:transform .2s,background .2s,border-color .2s;text-align:center}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:var(--red-hot);transform:translateY(-1px)}
.btn--out{color:#fff;border:1px solid rgba(255,255,255,.24);background:transparent}
.btn--out:hover{border-color:#fff;transform:translateY(-1px)}
.btn--ghost{color:#fff;background:transparent;padding-inline:0;
            border-bottom:1px solid rgba(255,255,255,.3);border-radius:0}
.btn--ghost:hover{border-bottom-color:var(--red)}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* ------------------------------------------------------- hairline grids ---
   A 1px gap over a line-coloured background draws the dividers, so the cells
   never need borders of their own and never double up at the seams. */
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
      margin-top:48px}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid > *{min-width:0}
.cell{background:var(--sw-bg);padding:clamp(24px,3vw,38px);transition:background .3s}
a.cell{text-decoration:none;color:inherit;display:block}
.cell:hover{background:var(--panel)}
.cell h3{font-family:var(--sw-font-display);font-weight:600;font-size:1.08rem;
         margin:0 0 10px;letter-spacing:-.01em;color:#fff}
.cell p{color:var(--ink-3);font-size:.94rem;line-height:1.6;margin:0}
.cell .n{font-family:var(--mono);font-size:.72rem;color:var(--red-ink);display:block;
         margin-bottom:16px;letter-spacing:.1em}
.cell__more{display:inline-block;margin-top:16px;font-size:.82rem;color:var(--ink-4);
            font-family:var(--mono);letter-spacing:.04em}
a.cell:hover .cell__more{color:var(--red-ink)}

/* -------------------------------------------------------------- steps --- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:52px}
.steps > *{min-width:0}
.step{border-top:1px solid var(--line);padding-top:20px}
.step b{font-family:var(--mono);font-weight:500;font-size:.74rem;color:var(--red-ink);
        letter-spacing:.12em;display:block;margin-bottom:12px}
.step h3,.step h4{font-family:var(--sw-font-display);font-weight:600;font-size:1rem;
                  margin:0 0 8px;color:#fff}
.step p{color:var(--ink-3);font-size:.88rem;line-height:1.55;margin:0}

/* --------------------------------------------------------- split blocks ---
   Alternating copy / still. Used on the about + service pages so a long page
   is not one column of text all the way down. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
       gap:clamp(28px,4vw,64px);align-items:center}
.split + .split{margin-top:clamp(56px,7vw,96px)}
.split__media{position:relative;border:1px solid var(--line);overflow:hidden;
              background:var(--panel)}
.split__media img{width:100%;aspect-ratio:16/9;object-fit:cover}
.split--flip .split__copy{order:2}
.split h2.h,.split h3.h{margin-bottom:14px}
.split p{color:var(--ink-3);line-height:1.7;margin:0 0 14px}
.split p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- facts --- */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
       background:var(--line);border:1px solid var(--line);margin:0}
.facts > *{min-width:0}
.fact{background:var(--sw-bg);padding:clamp(22px,3vw,34px)}
.fact dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
         color:var(--ink-4);margin-bottom:10px}
.fact dd{margin:0;font-size:1rem;line-height:1.55;color:rgba(255,255,255,.86);
         overflow-wrap:break-word}
.fact dd a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
.fact dd a:hover{border-bottom-color:var(--red);color:#fff}

/* ------------------------------------------------------------- cta band --- */
.cta-band{border:1px solid var(--line);padding:clamp(30px,5vw,64px);
          display:flex;align-items:center;justify-content:space-between;
          gap:clamp(24px,4vw,48px);flex-wrap:wrap;
          background:linear-gradient(120deg,var(--panel),var(--sw-bg) 62%)}
.cta-band > div{min-width:0}
.cta-band h2{margin:0 0 10px}
.cta-band .btnrow{margin-top:0;flex:none}

/* ----------------------------------------------------------------- prose ---
   Blog article body. Deliberately narrow: 68ch is the readable measure, and a
   post that runs the full 1180px container is the fastest way to make a page
   look unedited. */
.prose{max-width:68ch;color:var(--ink-2);font-size:1.05rem;line-height:1.78;
       overflow-wrap:break-word}
/* One rhythm rule for the whole article: every block clears the one above it,
   and nothing carries a bottom margin of its own. Anything that needs more room
   (h2, h3) raises its own margin-top below. */
.prose > *{margin-top:1.15em;margin-bottom:0}
.prose > *:first-child{margin-top:0}
.prose h2{font-family:var(--sw-font-display);font-weight:600;color:#fff;
          font-size:clamp(1.4rem,2.4vw,1.8rem);letter-spacing:-.02em;line-height:1.2;
          margin-top:2.1em;margin-bottom:.55em;scroll-margin-top:calc(var(--hd-h) + 24px)}
.prose h3{font-family:var(--sw-font-display);font-weight:600;color:#fff;
          font-size:clamp(1.1rem,1.7vw,1.28rem);letter-spacing:-.015em;
          margin-top:1.7em;margin-bottom:.4em}
.prose a{color:#fff;text-decoration:none;border-bottom:1px solid var(--red)}
.prose a:hover{background:rgba(200,22,29,.14)}
.prose strong{color:#fff;font-weight:600}
.prose ul,.prose ol{padding-inline-start:1.35em;color:var(--ink-2)}
.prose li + li{margin-top:.5em}
.prose li::marker{color:var(--red-ink)}
/* The table wrapper takes focus (see posts.mjs) so keyboard users can scroll it;
   :focus-visible above gives it a ring, but it needs somewhere to put one. */
.prose .tablewrap:focus-visible{outline-offset:2px}
.prose blockquote{padding:18px 22px;border-inline-start:2px solid var(--red);
                  background:var(--panel);color:#fff;font-size:1.02rem}
.prose blockquote > *{margin:0}
.prose figure{margin-top:2em}
.prose figure img{width:100%;border:1px solid var(--line)}
.prose figcaption{margin-top:10px;font-size:.82rem;color:var(--ink-4);font-family:var(--mono)}
.prose hr{border:0;border-top:1px solid var(--line);margin-top:2.4em}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--panel);
            padding:2px 6px;border-radius:4px}
/* A note box for the "what to actually ask your body shop" style asides. */
.prose .note{border:1px solid var(--line);background:var(--panel);padding:20px 22px;
             font-size:.98rem}
.prose .note b{color:var(--red-ink);display:block;margin-bottom:6px;
               font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
               text-transform:uppercase}
/* Tables in a post have to scroll inside themselves, never widen the page. */
.prose .tablewrap{overflow-x:auto;border:1px solid var(--line);
                  -webkit-overflow-scrolling:touch}
.prose table{border-collapse:collapse;width:100%;min-width:480px;font-size:.92rem}
.prose th,.prose td{text-align:start;padding:12px 16px;border-bottom:1px solid var(--line-soft)}
.prose th{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
          color:var(--ink-4);background:var(--panel)}
.prose tr:last-child td{border-bottom:0}

/* ----------------------------------------------------------- blog cards --- */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
       gap:1px;background:var(--line);border:1px solid var(--line);margin-top:44px}
.posts > *{min-width:0}
.post{background:var(--sw-bg);padding:clamp(24px,3vw,34px);text-decoration:none;color:inherit;
       display:flex;flex-direction:column;gap:12px;transition:background .3s}
.post:hover{background:var(--panel)}
.post__date{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:var(--ink-4);
            text-transform:uppercase}
.post h2,.post h3{font-family:var(--sw-font-display);font-weight:600;font-size:1.14rem;
                  line-height:1.28;letter-spacing:-.015em;margin:0;color:#fff}
.post p{margin:0;color:var(--ink-3);font-size:.93rem;line-height:1.6}
.post__more{margin-top:auto;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;
            color:var(--ink-4)}
.post:hover .post__more{color:var(--red-ink)}

.artmeta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
         font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--ink-4);
         text-transform:uppercase;margin-bottom:22px}
.artmeta span+span::before{content:"·";margin-inline-end:10px;opacity:.6}

/* ------------------------------------------------------------------ faq ---
   <details>/<summary>: open/close, keyboard and screen-reader semantics with
   no script, and it stays usable if the CSS never arrives. */
.faq{border:1px solid var(--line);margin-top:44px;background:var(--line)}
.faq details{background:var(--sw-bg);border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;list-style:none;padding:22px clamp(20px,3vw,30px);
             display:flex;align-items:flex-start;gap:16px;
             font-family:var(--sw-font-display);font-weight:600;font-size:1.02rem;
             color:#fff;line-height:1.4;transition:background .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--panel)}
.faq summary::after{content:"";flex:none;width:11px;height:11px;margin-top:6px;
  margin-inline-start:auto;border-inline-end:1.5px solid var(--red);
  border-bottom:1.5px solid var(--red);transform:rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq__a{padding:0 clamp(20px,3vw,30px) 24px;color:var(--ink-3);line-height:1.7;
        max-width:72ch}
.faq__a p{margin:0}
.faq__a p + p{margin-top:.9em}

/* ------------------------------------------------------------------ map --- */
.map{border:1px solid var(--line);background:var(--panel);overflow:hidden;
     width:100%;aspect-ratio:16/9}
/* `aspect-ratio` + `min-height` is a contradiction the browser resolves by
   GROWING THE WIDTH: at 350px available the ratio wants 197px of height, the
   min-height demanded 280, and the box widened to 498px to satisfy both. On a
   narrow screen the ratio is the thing that has to give way. */
@media (max-width:560px){ .map{aspect-ratio:auto;height:300px} }
.map iframe{width:100%;height:100%;border:0;filter:grayscale(.3) contrast(1.05)}
.map__none{display:grid;place-items:center;height:100%;padding:32px;text-align:center;
           color:var(--ink-4);font-family:var(--mono);font-size:.8rem;letter-spacing:.08em}

/* -------------------------------------------------------------- footer --- */
.ft{border-top:1px solid var(--line);margin-top:0;background:var(--sw-bg);position:relative;z-index:30}
.ft__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;
          gap:clamp(28px,4vw,56px);padding-block:clamp(48px,6vw,72px)}
.ft__grid > *{min-width:0}
.ft__blurb{color:var(--ink-4);font-size:.9rem;line-height:1.65;margin:16px 0 0;max-width:34ch}
.ft__h{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
       color:var(--ink-4);margin:0 0 16px;font-weight:500}
.ft__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ft__list a{color:var(--ink-2);text-decoration:none;font-size:.92rem}
.ft__list a:hover{color:#fff}
.ft__list span{color:var(--ink-4);font-size:.92rem;line-height:1.5;display:block;
               overflow-wrap:break-word}
.ft__list--contact a{overflow-wrap:break-word}
.ft__bar{display:flex;justify-content:space-between;align-items:center;gap:16px;
         flex-wrap:wrap;padding-block:22px;border-top:1px solid var(--line-soft)}
.ft__bar small{color:var(--ink-4);font-size:.8rem}
.ft__by{font-family:var(--mono);letter-spacing:.1em}

/* ------------------------------------------------------ floating whatsapp --- */
.wa{position:fixed;inset-inline-end:clamp(16px,2.4vw,28px);
    bottom:calc(clamp(16px,2.4vw,28px) + env(safe-area-inset-bottom));z-index:80;
    width:52px;height:52px;border-radius:50%;background:#25D366;display:grid;place-items:center;
    box-shadow:0 10px 30px rgba(0,0,0,.5);transition:transform .2s}
.wa:hover{transform:scale(1.06)}
.wa svg{width:26px;height:26px;fill:#fff}
body.nav-open .wa{opacity:0;pointer-events:none}

/* =============================== responsive =============================== */

/* Tablet / small laptop: the nav bar and the number stop fitting together. */
@media (max-width:1080px){
  .hd__nav{display:none}
  .burger{display:grid}
  .ft__grid{grid-template-columns:1fr 1fr}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .grid--3,.grid--2,.facts{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:1fr;gap:26px}
  .split--flip .split__copy{order:0}
  .cta-band{flex-direction:column;align-items:flex-start}
  .cta-band .btnrow{width:100%}
}
@media (max-width:640px){
  :root{--hd-h:60px}
  .steps{grid-template-columns:1fr;gap:22px}
  .sec{padding-block:clamp(56px,8vh,88px)}
  .hd__name{font-size:.86rem;letter-spacing:.12em}
  /* the full number does not fit next to brand + language + burger at 360px */
  .hd__callFull{display:none}
  .hd__callShort{display:inline}
  .hd__call{padding:10px 13px;font-size:.78rem;letter-spacing:.08em}
  .lang{font-size:.72rem;padding:9px 24px 9px 9px}
  .langwrap::after{inset-inline-end:9px}
  .hd{gap:8px}
  .btnrow{width:100%}
  .btnrow .btn{flex:1 1 160px}
  .ft__grid{grid-template-columns:1fr;gap:34px}
  .cta-band{padding:26px 22px}
  .prose{font-size:1.02rem}
  /* keep the last footer row clear of the floating bubble */
  .ft__bar{padding-bottom:calc(22px + 58px + env(safe-area-inset-bottom))}
}
/* Four things share the bar on a phone: wordmark, language, call, menu. At
   360px they did not fit, and the burger — the only route to the navigation —
   was the one pushed off the edge. Measured, not guessed (tools/audit.mjs):
   the language select is the widest non-essential item, so it drops its label
   and keeps the code first. */
@media (max-width:440px){
  .hd{gap:6px;padding-inline:16px}
  .hd__call{padding:9px 11px;font-size:.74rem;letter-spacing:.06em}
  .lang{padding:9px 22px 9px 8px;font-size:.7rem}
  .langwrap::after{inset-inline-end:8px}
  [dir="rtl"] .lang{padding:9px 8px 9px 22px}
  .burger{width:38px;height:38px}
}
@media (max-width:360px){
  .hd__name{font-size:.72rem;letter-spacing:.06em}
  .lang{font-size:.66rem;padding-inline-start:6px}
  /* Last resort at the very narrowest: the call button goes, because the
     drawer's first two items are already Call and WhatsApp. */
  .hd__call{display:none}
}

/* ================================= RTL ==================================
   Logical properties do most of it. What is left is the two things that are
   not text: the select's own arrow (drawn with a border trick) and the
   dropdown padding. The film's own RTL rules live in film.css — its copy
   column stays physically left because it is placed against the picture, not
   against the reading direction. */
html[lang="ar"],html[lang="fa"]{
  --sw-font-display:"Noto Sans Arabic","Inter Tight",system-ui,sans-serif;
  --sw-font-body:"Noto Sans Arabic","Inter",system-ui,sans-serif;
}
html[lang="ar"] .kicker,html[lang="fa"] .kicker,
html[lang="ar"] .step b,html[lang="fa"] .step b,
html[lang="ar"] .fact dt,html[lang="fa"] .fact dt,
html[lang="ar"] .ft__h,html[lang="fa"] .ft__h,
html[lang="ar"] .post__date,html[lang="fa"] .post__date,
html[lang="ar"] .artmeta,html[lang="fa"] .artmeta,
html[lang="ar"] .crumbs ol,html[lang="fa"] .crumbs ol,
html[lang="ar"] .when b,html[lang="fa"] .when b,
html[lang="ar"] .cell .n,html[lang="fa"] .cell .n,
html[lang="ar"] .post__more,html[lang="fa"] .post__more,
html[lang="ar"] .cell__more,html[lang="fa"] .cell__more,
html[lang="ar"] .btn,html[lang="fa"] .btn,
html[lang="ar"] .lang,html[lang="fa"] .lang{font-family:var(--sw-font-body);letter-spacing:0}
/* A dialled number is a left-to-right run wherever it sits. */
[dir="rtl"] .hd__call,[dir="rtl"] #telFt,[dir="rtl"] #telTxt{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .lang{padding:10px 12px 10px 28px}
@media (max-width:640px){ [dir="rtl"] .lang{padding:9px 9px 9px 24px} }

/* ============================ reduced motion ============================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
                       transition-duration:.01ms!important}
}

/* Hide Turkish-only items (the blog) when another language is active. */
html:not([lang="tr"]) [data-tr-only]{display:none!important}

/* ============================== print ==================================== */
@media print{
  .hd,.drawer,.wa,.crumbs,.hero__bg{display:none!important}
  body{background:#fff;color:#000}
  .prose,.lead,.cell p{color:#000}
}

/* ------------------------------------------------- service page specifics --- */
.svcnum{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--red-ink);
        margin:0 0 14px;line-height:1}
.when{margin:0 0 18px;color:var(--ink-3);font-size:.95rem;line-height:1.65}
.when b{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
        text-transform:uppercase;color:var(--ink-4);margin-bottom:6px;font-weight:500}
.tags a{color:inherit;text-decoration:none}
.tags li:has(a):hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.09)}
.split .tags{margin-top:22px}

/* ------------------------------------------------------------- tick list --- */
.ticks{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.ticks li{position:relative;padding-inline-start:24px;color:var(--ink-3);font-size:.94rem;
          line-height:1.55}
.ticks li::before{content:"";position:absolute;inset-inline-start:0;top:.5em;
  width:7px;height:7px;border-inline-end:1.5px solid var(--red);
  border-bottom:1.5px solid var(--red);transform:rotate(45deg)}

/* -------------------------------------------------------- contact page --- */
.plainlink{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28)}
.plainlink:hover{border-bottom-color:var(--red)}
.cell h3 .plainlink{overflow-wrap:break-word}
.mt-l{margin-top:clamp(28px,4vw,44px)}
/* facts sitting directly under the map: share the hairline instead of doubling it */
.facts--joined{margin-top:-1px}
.hero__meta.btnrow{margin-top:26px}

/* --------------------------------------------------------- article page --- */
.artlead{font-size:clamp(1.08rem,1.5vw,1.22rem);color:var(--ink-2);max-width:60ch;
         line-height:1.6;margin-bottom:0}
.artfig{margin:clamp(30px,4vw,44px) 0 0}
.artfig img{width:100%;border:1px solid var(--line)}
.prose{margin-top:clamp(30px,4vw,44px)}

/* Read by a screen reader and by a crawler, not seen. Used for the home page's
   h1: its heading is spoken by the film, which the engine renders into divs. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
         overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* These blocks carry a top margin because they normally follow a kicker and a
   heading. When one opens a section on its own — the FAQ list under a hero, for
   instance — that margin stacks on top of the section's own padding and reads
   as a hole. */
.sec > .grid:first-child,
.sec > .posts:first-child,
.sec > .faq:first-child,
.sec > .steps:first-child{margin-top:0}