/* ============================================================================
   Issa Qandil Clinic, website.

   Built on the Advanced Molds Technologies template: the same components, the
   same 5% rule, the same boot block and cache stamps. Softened for a clinic:
   deep jade instead of black, cream instead of white, rounded corners, pill
   buttons, lighter display weights and looser tracking.

   Only the components that exist in the markup are styled here. Add a component
   by appending its own block, not by overriding an earlier one.
   ========================================================================== */

/* ============================================================================
   FONT
   Inter and Noto Sans Arabic, self-hosted. The latin Inter file is preloaded by
   every page; the Arabic file is fetched only where Arabic text is set in it,
   which the unicode-range takes care of. The English pages carry exactly one
   Arabic word, the language switch, and it is set in a system face (see
   LANGUAGE SWITCH below) so those pages never download or wait on the file.
   ========================================================================== */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Noto Sans Arabic";
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url("/assets/fonts/noto-sans-arabic.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}

/* ============================================================================
   TOKENS
   ========================================================================== */
:root{
  /* --ground is a shade darker than --deep and sits behind everything; it only
     shows in the overscroll bounce. Keep them distinct. */
  --ground:#152d26;
  --deep:#1d3a31;        /* hero, dark panels, scrolled header */
  --foot:#17302a;        /* footer, a step under --deep */
  --on-deep:#f4efe6;     /* type on the dark panels: cream, not white */
  --ink:#1f2b26;         /* type on the light panels: green-black, not black */
  --panel:#fffdf9;       /* the light copy panel */
  --paper:#f3eee6;       /* the ground the cards sit on */
  --sage:#dce6dd;
  --clay:#efe1d2;
  --jade:#2f6b5a;
  --gold:#c8a56a;
  --highlight:#2f6b5a;

  /* The card line: a little outside the 5% line so the paper shows around the
     cards. Copy panels pad by (--pad minus this), so text still lands on 5%. */
  --card-inset:clamp(0px,1.4vw,24px);
  /* 5% of the viewport, in vw, never %. See "The 5% rule" in CLAUDE.md. */
  --pad:5vw;
  --gutter:clamp(12px,1.5vw,26px);

  --r-btn:999px;
  --r-card:clamp(14px,1.5vw,22px);
  --sh-sm:0 1px 2px rgba(20,40,32,.06),0 2px 6px rgba(20,40,32,.05);

  --ease-ds:cubic-bezier(.2,.7,.2,1);
  --fast:120ms var(--ease-ds);
  --med:220ms var(--ease-ds);

  --sans:"Inter","Noto Sans Arabic","Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* ============================================================================
   BASE
   ========================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-padding-top:76px}
body{font-family:var(--sans);background:var(--ground);color:var(--on-deep);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;text-rendering:optimizeLegibility}
@supports (font-variation-settings:normal){body{font-optical-sizing:auto}}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
/* Display type is a step lighter and a step looser than AMT's: 600, not 700,
   and tracking that never goes past -.03em. That is most of the softening. */
h1,h2,h3,h4{font-weight:600;letter-spacing:-.022em;line-height:1.1;text-wrap:balance}
h1{letter-spacing:-.03em}
.arrow{display:inline-block;transform:translateY(1px)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid currentColor;outline-offset:3px}
::selection{background:var(--highlight);color:#fff}
main{display:block;background:var(--paper)}

/* ============================================================================
   BUTTON
   Pills. Four variants, two for a dark ground and two for a light one.
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 24px;
  border:1px solid transparent;border-radius:var(--r-btn);background:transparent;
  font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:-.005em;
  cursor:pointer;white-space:nowrap;
  transition:background var(--med),color var(--med),border-color var(--med),
             box-shadow var(--med),transform var(--fast)}
.btn:active{transform:translateY(1px)}
@media(min-width:768px){.btn{height:42px;padding:0 28px;font-size:15.5px}}

/* on dark: solid cream -> hollows out */
.btn.solid{background:var(--on-deep);color:var(--deep);border-color:var(--on-deep);box-shadow:var(--sh-sm)}
.btn.solid:hover{background:transparent;color:var(--on-deep);border-color:rgba(244,239,230,.6);box-shadow:none}
/* on dark: hairline cream -> fills cream */
.btn.ghost{background:transparent;color:var(--on-deep);border-color:rgba(244,239,230,.4)}
.btn.ghost:hover{background:var(--on-deep);color:var(--deep);border-color:var(--on-deep)}
/* on light: solid jade -> hollows out */
.btn.dark-line{background:var(--deep);color:var(--on-deep);border-color:var(--deep);box-shadow:var(--sh-sm)}
.btn.dark-line:hover{background:transparent;color:var(--deep);border-color:rgba(29,58,49,.45);box-shadow:none}
/* on light: hairline jade -> fills jade */
.btn.line{background:rgba(255,255,255,.55);color:var(--deep);border-color:rgba(29,58,49,.22)}
.btn.line:hover{background:var(--deep);color:var(--on-deep);border-color:var(--deep)}
/* The focus ring is drawn in currentColor outside the control, which on the
   solid variants is the colour of the ground they sit on: invisible. Give those
   the contrasting colour instead. */
.btn.solid:focus-visible{outline-color:var(--on-deep)}
.btn.dark-line:focus-visible{outline-color:var(--deep)}

/* ============================================================================
   LOGO
   No artwork yet, so the logo is type: a small ring-and-point mark (an
   acupuncture point) and the name. The same markup serves header, menu and
   footer; only the size changes.
   ========================================================================== */
.logo{display:inline-flex;align-items:center;gap:10px;line-height:1;white-space:nowrap}
.logo-mark{flex:none;width:22px;height:22px;border-radius:50%;
  border:1.5px solid currentColor;
  background:radial-gradient(circle,currentColor 0 2.6px,transparent 3.2px)}
.logo-word{font-size:17px;font-weight:600;letter-spacing:-.015em}
.logo-word span{font-weight:400;opacity:.72}

/* ============================================================================
   HEADER
   Transparent over the hero; solid jade once scrolled. Hides on scroll-down
   and returns on scroll-up (.nav-hidden, toggled in JS).
   ========================================================================== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:90;color:var(--on-deep);
  background:transparent;border-bottom:1px solid transparent;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),background .3s,border-color .3s}
.site-header.scrolled{background:var(--deep);border-bottom-color:rgba(244,239,230,.1)}
.site-header.nav-hidden{transform:translateY(-100%)}

/* Flex while the nav is hidden, grid only once all three items exist; a grid
   with a missing item pushes the controls off the 5% line. */
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;
  height:62px;padding:0 var(--pad)}
.header-logo{justify-self:start}
.header-nav{display:none}
.header-right{justify-self:end;display:flex;align-items:center;gap:6px}

/* Book is the one action a visitor came for, so it lives in the header at
   every width. */
.h-book{display:inline-flex;align-items:center;height:34px;padding:0 16px;border-radius:var(--r-btn);
  background:var(--on-deep);color:var(--deep);font-size:14px;font-weight:600;letter-spacing:-.005em;
  border:1px solid var(--on-deep);transition:background var(--med),color var(--med)}
.h-book:hover{background:transparent;color:var(--on-deep)}
.h-book:focus-visible{outline-color:var(--on-deep)}

.burger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  width:44px;height:44px;margin-inline-end:-10px;transition:opacity .2s}
.burger:hover{opacity:.72}
.burger span{display:block;width:22px;height:1.5px;background:currentColor;border-radius:2px}

@media(min-width:1000px){
  .header-inner{display:grid;grid-template-columns:1fr auto 1fr;height:70px}
  .header-nav{justify-self:center;display:flex;align-items:center;gap:clamp(22px,2.6vw,40px)}
  .header-nav a{position:relative;padding:6px 0;font-size:15px;font-weight:500;letter-spacing:-.008em;
    white-space:nowrap;transition:opacity .2s}
  .header-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
    background:currentColor;transform:scaleX(0);transform-origin:left;
    transition:transform .28s cubic-bezier(.2,.7,.2,1)}
  [dir="rtl"] .header-nav a::after{transform-origin:right}
  .header-nav a:hover::after,.header-nav a[aria-current="page"]::after{transform:scaleX(1)}
  .h-book{height:36px;padding:0 20px;font-size:14.5px}
  .burger{display:none}}

/* ============================================================================
   MOBILE MENU
   ========================================================================== */
.menu{position:fixed;inset:0;z-index:200;display:none;flex-direction:column;overflow-y:auto;
  padding:20px var(--pad) 48px;background:var(--deep);color:var(--on-deep)}
.menu.open{display:flex;animation:menuIn .3s ease both}
@keyframes menuIn{from{opacity:0}to{opacity:1}}
.menu-top{display:flex;align-items:center;justify-content:space-between;height:40px;margin-bottom:40px}
.menu-close{width:44px;height:44px;margin-inline-end:-10px;font-size:28px;font-weight:300;line-height:1;opacity:.9}
.menu-close:hover{opacity:1}
.menu-links{display:flex;flex-direction:column}
.menu-links a{padding:13px 0;font-size:30px;font-weight:500;letter-spacing:-.025em;line-height:1.15;transition:opacity .2s}
.menu-links a:hover{opacity:.6}
/* A column, so a link set in the other direction still starts on the same
   edge as the rest. */
.menu-block{margin-top:44px;display:flex;flex-direction:column;align-items:flex-start}
.menu-block h2{margin-bottom:14px;font-size:12px;font-weight:600;line-height:1.55;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.menu-block a{display:block;padding:5px 0;font-size:17px;font-weight:500;letter-spacing:-.01em;transition:opacity .2s}
.menu-block a:hover{opacity:.72}

/* ============================================================================
   CONTACT OVERLAY
   ========================================================================== */
/* flex-start plus margin:auto, not align-items:center: centred when the card
   fits, and when it does not, it starts at the top and scrolls, instead of
   overflowing above the screen where nothing can reach it. */
.contact-overlay{position:fixed;inset:0;z-index:230;display:none;align-items:flex-start;justify-content:center;
  padding:20px;overflow-y:auto;
  background:rgba(14,30,25,.6);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.contact-overlay.open{display:flex;animation:menuIn .25s ease both}
.contact-card{position:relative;width:100%;max-width:600px;margin:auto;padding:36px 24px 30px;
  background:var(--deep);border:1px solid rgba(244,239,230,.14);border-radius:var(--r-card);color:var(--on-deep)}
@media(min-width:768px){.contact-card{padding:50px 46px 42px}}
.contact-close{position:absolute;top:10px;inset-inline-end:12px;width:44px;height:44px;
  font-size:28px;font-weight:300;line-height:1;opacity:.9}
.contact-close:hover{opacity:1}
.contact-card h2{margin:0;font-size:clamp(28px,7vw,38px);line-height:1.08;letter-spacing:-.03em}
.contact-card p{margin:14px 0 0;max-width:44ch;
  font-size:15.5px;line-height:1.6;letter-spacing:-.005em;opacity:.82}
.contact-rows{display:grid;gap:1px;margin-top:30px;background:rgba(244,239,230,.12);
  border-radius:calc(var(--r-card) - 6px);overflow:hidden}
.contact-row{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  width:100%;min-height:70px;padding:16px 18px;text-align:start;background:var(--deep);transition:background .18s}
.contact-row:hover,.contact-row.copied{background:#24453a}
.contact-row:focus-visible{outline-offset:-4px}
.cr-label{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.cr-value{font-size:18px;font-weight:600;letter-spacing:-.015em;word-break:break-word}
@media(min-width:768px){.cr-value{font-size:20px}}
.cr-copy{position:absolute;top:50%;inset-inline-end:18px;transform:translateY(-50%);
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:0;transition:opacity .18s}
.contact-row:hover .cr-copy,.contact-row.copied .cr-copy{opacity:.7}
.contact-row.copied .cr-copy{opacity:1}
@media(max-width:600px){.cr-copy{display:none}}
.contact-map{display:inline-block;margin-top:22px;padding-bottom:3px;
  font-size:14px;line-height:1.55;opacity:.8;
  border-bottom:1px solid rgba(244,239,230,.3);transition:opacity .2s}
.contact-map:hover{opacity:1}

/* ============================================================================
   RINGS
   The one decorative device on the site: concentric rings around a point, the
   way a ripple spreads from an acupuncture point. Drawn in CSS, so it costs no
   request and stays sharp at any size. It lives on the empty image slots
   (hero, section media, cards); an <img> dropped into a slot covers it.

   Each slot sets --rx/--ry (where the point is) and --rc (ring colour).
   ========================================================================== */
.rings::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at var(--rx,70%) var(--ry,45%),var(--rc) 0 5px,transparent 5.5px),
    repeating-radial-gradient(circle at var(--rx,70%) var(--ry,45%),
      transparent 0 var(--rs,34px),var(--rc) var(--rs,34px) calc(var(--rs,34px) + 1px));
  -webkit-mask-image:radial-gradient(circle at var(--rx,70%) var(--ry,45%),#000 0 12%,transparent var(--rf,62%));
          mask-image:radial-gradient(circle at var(--rx,70%) var(--ry,45%),#000 0 12%,transparent var(--rf,62%))}

/* ============================================================================
   HERO
   No photograph: a jade band with a warm glow and the rings carries it. The
   .hero-media slot is kept, empty, so a picture can go back in by dropping an
   <img> inside it.
   ========================================================================== */
.hero{position:relative;min-height:100svh;overflow:hidden;
  background:
    radial-gradient(55% 60% at 82% 28%,rgba(200,165,106,.16),transparent 70%),
    radial-gradient(60% 55% at 0% 100%,rgba(120,175,150,.16),transparent 70%),
    var(--deep);
  color:var(--on-deep);
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:max(96px,min(40svh,100svh - 470px)) var(--pad) 88px}
@media(min-width:768px){.hero{padding:max(110px,min(44svh,100svh - 440px)) var(--pad) 96px}}

.hero-media{position:absolute;inset:0;z-index:0;
  --rx:86%;--ry:18%;--rs:40px;--rc:rgba(244,239,230,.13);--rf:70%}
@media(min-width:900px){.hero-media{--rx:76%;--ry:46%;--rs:48px;--rf:58%}}
.hero-media picture,.hero-media img{position:absolute;inset:0;width:100%;height:100%}
.hero-media img{object-fit:cover}
.hero-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start}

.eyebrow{margin:0 0 18px;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.72}
.hero-stack{margin:0;max-width:52rem;
  font-size:clamp(40px,9vw,76px);font-weight:600;line-height:1.02;letter-spacing:-.035em}
.hero-sub{margin:20px 0 0;max-width:40ch;
  font-size:18px;font-weight:400;line-height:1.5;letter-spacing:-.01em;opacity:.88}
@media(min-width:768px){.hero-sub{margin-top:24px;max-width:44ch;font-size:21px}}
@media(min-width:1200px){.hero-sub{font-size:22px}}
.hero-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
@media(min-width:768px){.hero-ctas{gap:12px;margin-top:34px}}

/* ============================================================================
   PAGE HERO
   The opening band on a content page. Same jade and glow as the home hero,
   shorter. The measure is capped in rem, never with auto margins, so the
   heading stays on the 5% line.
   ========================================================================== */
.page-hero{position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  min-height:62svh;padding:clamp(108px,10vw,140px) var(--pad) 56px;
  background:
    radial-gradient(50% 70% at 90% 20%,rgba(200,165,106,.14),transparent 70%),
    var(--deep);color:var(--on-deep)}
@media(min-width:768px){.page-hero{min-height:56svh;padding-bottom:76px}}
.page-hero .hero-media{--rx:92%;--ry:30%;--rs:42px;--rf:60%}
.page-hero > :not(.hero-media){position:relative;z-index:1}
.page-hero h1{margin:0;max-width:50rem;
  font-size:clamp(38px,9.5vw,54px);line-height:1.04;letter-spacing:-.032em}
@media(min-width:768px){.page-hero h1{font-size:clamp(54px,6.4vw,84px)}}
.page-hero .lede{margin-top:20px;max-width:40rem;
  font-size:17px;line-height:1.6;letter-spacing:-.008em;opacity:.86}
@media(min-width:768px){.page-hero .lede{margin-top:26px;font-size:19px}}
.page-hero .note{margin-top:18px;max-width:40rem;font-size:14px;line-height:1.55;opacity:.62}
.page-hero .hero-ctas{margin-top:28px}

/* ============================================================================
   SECTION BLOCK
   A copy panel and a media panel, flush at the seam, rounded on the outside,
   inset to the card line on a paper ground.
     (default)   copy panel LEFT at 40%, cream
     .rev        copy panel RIGHT at 40%, media left
     .ink        copy panel jade with cream type
   The media panel is empty: a tone and the rings. Its img rule is already in
   place, so assigning a picture is only a matter of dropping an <img> in.
   ========================================================================== */
/* Padding adds up to --pad, never stacks: the card insets by --card-inset and
   the copy pads by the remainder, so the heading starts on the 5% line. */
.sec-block{display:grid;grid-template-columns:1fr;
  background:var(--paper);padding:var(--gutter) var(--card-inset)}

.sb-text{display:flex;flex-direction:column;justify-content:center;
  background:var(--panel);color:var(--ink);
  padding:clamp(34px,4.5vw,52px) calc(var(--pad) - var(--card-inset))}
.sec-block.ink .sb-text{background:var(--deep);color:var(--on-deep)}

.sb-media{position:relative;overflow:hidden;aspect-ratio:16/10;
  background:var(--sage);--rc:rgba(255,255,255,.62)}
.sb-media img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;display:block}

/* Rounded on the outside only. Stacked on a phone: copy on top, media below. */
.sec-block > :first-child{border-start-start-radius:var(--r-card);border-start-end-radius:var(--r-card)}
.sec-block > :last-child{border-end-start-radius:var(--r-card);border-end-end-radius:var(--r-card)}

@media(min-width:900px){
  .sec-block{grid-template-columns:minmax(0,40fr) minmax(0,60fr);align-items:stretch;min-height:560px}
  .sec-block.rev{grid-template-columns:minmax(0,60fr) minmax(0,40fr)}
  .sec-block.rev .sb-text{order:2}
  .sec-block.rev .sb-media{order:1}
  .sb-media{aspect-ratio:auto}
  /* Side by side, the radius moves to the two outer edges. Logical corners, so
     the Arabic pages mirror on their own. */
  /* Same specificity as the phone rules above, so it actually resets them. */
  .sec-block > :first-child,.sec-block > :last-child{border-radius:0}
  /* the panel on the start side */
  .sec-block:not(.rev):not(.split) > .sb-text,
  .sec-block.rev > .sb-media,
  .sec-block.split > :first-child{border-start-start-radius:var(--r-card);border-end-start-radius:var(--r-card)}
  /* the panel on the end side */
  .sec-block:not(.rev):not(.split) > .sb-media,
  .sec-block.rev > .sb-text,
  .sec-block.split > :last-child{border-start-end-radius:var(--r-card);border-end-end-radius:var(--r-card)}
  /* The seam side pads tighter so the copy is not stranded mid-panel. */
  .sb-text{padding-inline-end:clamp(28px,3.3vw,52px)}
  .sec-block.rev .sb-text{padding-inline-start:clamp(28px,3.3vw,52px);
    padding-inline-end:calc(var(--pad) - var(--card-inset))}
  .sb-media{--rx:62%;--ry:50%;--rs:40px}
  .sec-block.rev .sb-media{--rx:38%}}
[dir="rtl"] .sb-media{--rx:38%}
@media(min-width:900px){[dir="rtl"] .sec-block.rev .sb-media{--rx:62%}}

/* Media tones. Sage is the default. */
.sb-media.tone-clay{background:var(--clay);--rc:rgba(255,255,255,.7)}
.sb-media.tone-deep{background:#24453a;--rc:rgba(244,239,230,.16)}
.sb-media.tone-mist{background:#e7ece6;--rc:rgba(47,107,90,.16)}

.sb-head{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.04;
  font-size:clamp(32px,7vw,44px)}
@media(min-width:900px){.sb-head{font-size:clamp(38px,3.3vw,54px)}}
.sb-sub{margin:16px 0 0;max-width:30rem;
  font-size:17px;font-weight:400;line-height:1.55;letter-spacing:-.008em;opacity:.86}
@media(min-width:900px){.sb-sub{margin-top:20px;font-size:18.5px}}
.sb-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(26px,3vw,36px)}

/* A copy panel can be flipped to jade on its own. The split CTA uses this. */
.sb-text.dark{background:var(--deep);color:var(--on-deep)}

/* ============================================================================
   TAGS
   A short list of conditions inside a copy panel, set as soft pills.
   ========================================================================== */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;list-style:none;max-width:34rem}
.tags li{padding:7px 14px;border-radius:var(--r-btn);
  font-size:14.5px;font-weight:500;line-height:1.3;letter-spacing:-.005em;
  background:rgba(47,107,90,.09)}
.sec-block.ink .tags li,.sb-text.dark .tags li{background:rgba(244,239,230,.1)}

/* ============================================================================
   SPLIT CTA
   The section-block shape with two equal copy panels. Jade first, which on a
   phone means jade on top and cream beneath.
   ========================================================================== */
@media(min-width:900px){
  .sec-block.split{grid-template-columns:1fr 1fr;min-height:340px}
  .sec-block.split .sb-text:first-child{padding-inline-end:clamp(28px,3.3vw,52px)}
  .sec-block.split .sb-text:last-child{padding-inline-start:clamp(28px,3.3vw,52px);
    padding-inline-end:calc(var(--pad) - var(--card-inset))}}
.sec-block.split .sb-head{font-size:clamp(28px,5.5vw,34px)}
@media(min-width:900px){.sec-block.split .sb-head{font-size:clamp(30px,2.4vw,38px)}}
/* The closing band is the last thing before the footer, so it takes the
   bottom gutter the footer would otherwise butt against. */
.sec-block.split{padding-bottom:calc(var(--gutter) * 2)}

/* ============================================================================
   CARD ROW
   A horizontally scrolling row: one card and a peek on a phone, two and a peek
   on a desktop. Native scroll-snap does the work; JS only drives the dots and
   arrows. The cards carry no photograph yet, so each is a tone with a small
   index, a heading, a line of copy and the rings in its corner.
   ========================================================================== */
.cards{background:var(--paper);padding:var(--gutter) 0;position:relative}
.cards-head{margin:clamp(20px,3vw,34px) 0 clamp(16px,2.2vw,24px);padding-inline:var(--pad);
  color:var(--ink);font-weight:600;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(28px,5.5vw,34px)}
@media(min-width:900px){.cards-head{font-size:clamp(30px,2.4vw,38px)}}

/* Padded to --card-inset, NOT --pad, so the cards line up with the section
   cards above and below them. */
.cards-track{position:relative;display:flex;gap:clamp(12px,1.4vw,20px);
  overflow-x:auto;overscroll-behavior-x:contain;
  padding-inline:var(--card-inset);scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--card-inset);scrollbar-width:none}
.cards-track::-webkit-scrollbar{display:none}

.card{flex:none;width:84%;min-height:360px;scroll-snap-align:start;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(24px,3.4vw,36px);border-radius:var(--r-card);
  background:var(--deep);color:var(--on-deep);
  --rx:88%;--ry:14%;--rs:26px;--rf:46%;--rc:rgba(244,239,230,.16)}
.card picture{position:absolute;inset:0;display:block}
.card img{display:block;width:100%;height:100%;object-fit:cover}
.card > :not(picture){position:relative;z-index:1}
[dir="rtl"] .card{--rx:12%}
@media(min-width:700px){.card{width:58%;min-height:380px}}
@media(min-width:1100px){.card{width:40%;min-height:400px}}

.card.tone-sage{background:var(--sage);color:var(--ink);--rc:rgba(255,255,255,.75)}
.card.tone-clay{background:var(--clay);color:var(--ink);--rc:rgba(255,255,255,.8)}
.card.tone-cream{background:var(--panel);color:var(--ink);--rc:rgba(47,107,90,.14);
  box-shadow:inset 0 0 0 1px rgba(29,58,49,.08)}

.card-index{margin-bottom:auto;font-size:13px;font-weight:600;letter-spacing:.14em;opacity:.75}
.card-head{margin:0;font-weight:600;letter-spacing:-.028em;line-height:1.06;
  font-size:clamp(26px,5.4vw,32px)}
@media(min-width:900px){.card-head{font-size:clamp(28px,2.2vw,36px)}}
.card-text{margin-top:12px;max-width:26rem;font-size:16.5px;line-height:1.5;opacity:.84}
.card-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(20px,2.6vw,26px)}

.cards-track.dragging{user-select:none}

.cards-dots{display:flex;justify-content:center;gap:2px;margin-top:clamp(18px,2.4vw,26px)}
.cards-dot{position:relative;width:22px;height:34px;padding:0;background:none;cursor:pointer}
.cards-dot::before{content:"";position:absolute;left:50%;top:50%;
  width:7px;height:7px;border-radius:50%;background:rgba(29,58,49,.6);
  transform:translate(-50%,-50%);transition:background .3s,transform .3s}
.cards-dot:hover::before{background:rgba(29,58,49,.8)}
.cards-dot.active::before{background:var(--deep);transform:translate(-50%,-50%) scale(1.45)}
.cards-dot:focus-visible{outline-color:var(--deep);outline-offset:-4px}

.cards-arrow{display:none}
@media(min-width:900px){
  .cards-arrow{position:absolute;top:calc(50% - 18px);z-index:2;
    display:flex;align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:50%;
    background:rgba(255,253,249,.94);color:var(--deep);
    box-shadow:var(--sh-sm);transition:background var(--med),opacity var(--med)}
  .cards-arrow:hover{background:#fff}
  .cards-arrow[disabled]{opacity:0;pointer-events:none}
  .cards-prev{inset-inline-start:calc(var(--pad) - 18px)}
  .cards-next{inset-inline-end:calc(var(--pad) - 18px)}
  .cards-track{cursor:grab}
  .cards-track.dragging{cursor:grabbing;scroll-snap-type:none}}

/* ============================================================================
   FAQ
   Native <details>, on a cream card inset to the card line like every other
   section. The run of questions is centred and capped in rem.
   ========================================================================== */
.faq{background:var(--paper);padding:var(--gutter) var(--card-inset)}
.faq-inner{background:var(--panel);color:var(--ink);border-radius:var(--r-card);
  padding:clamp(40px,5.5vw,68px) calc(var(--pad) - var(--card-inset))}
.faq-head{margin:0 0 clamp(22px,3vw,34px);text-align:center;
  font-weight:600;letter-spacing:-.03em;line-height:1.06;
  font-size:clamp(28px,5.6vw,40px)}
.faq-item{max-width:46rem;margin-inline:auto;border-top:1px solid rgba(29,58,49,.12)}
@media(min-width:900px){.faq-item{max-width:52rem}}
.faq-item:last-child{border-bottom:1px solid rgba(29,58,49,.12)}
.faq-item summary{list-style:none;cursor:pointer;position:relative;
  padding:clamp(16px,2.4vw,22px) 40px;text-align:center;text-wrap:balance;
  font-weight:600;letter-spacing:-.015em;line-height:1.35;
  font-size:clamp(16px,1.9vw,19px);transition:opacity var(--med)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{opacity:.7}
.faq-item summary::after{content:"";position:absolute;inset-inline-end:8px;
  top:50%;width:12px;height:12px;transform:translateY(-50%);
  background:
    linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat;
  opacity:.5;transition:transform var(--med)}
.faq-item[open] summary::after{
  background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat;
  transform:translateY(-50%) rotate(180deg)}
.faq-item p{margin:0;padding:0 8px clamp(18px,2.6vw,24px);text-align:center;
  font-size:16px;line-height:1.65;letter-spacing:-.005em;opacity:.8}

/* ============================================================================
   FOOTER
   ========================================================================== */
footer{background:var(--foot);color:var(--on-deep);padding:64px var(--pad) 32px;overflow:hidden}
@media(min-width:768px){footer{padding:88px var(--pad) 36px}}

.foot-top{display:grid;gap:48px;margin:0 0 48px}
@media(min-width:900px){
  .foot-top{grid-template-columns:minmax(240px,1fr) 1.4fr;gap:clamp(48px,7vw,110px);margin-bottom:64px}}
.foot-brand{display:flex;flex-direction:column;align-items:flex-start}
.foot-brand .logo-word{font-size:19px}
.foot-brand .logo-mark{width:24px;height:24px}
.foot-tag{margin-top:20px;max-width:30ch;
  font-size:17px;font-weight:400;line-height:1.5;letter-spacing:-.01em;opacity:.84}
@media(min-width:768px){.foot-tag{font-size:18.5px}}

.foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px 24px}
@media(min-width:640px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr;gap:clamp(18px,2.4vw,30px)}}
.foot-col{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.foot-col h2{margin-bottom:6px;font-size:13px;font-weight:600;line-height:1.55;letter-spacing:.12em;text-transform:uppercase;opacity:.65}
.foot-col a,.foot-col p{position:relative;font-size:15px;font-weight:500;transition:opacity .2s;overflow-wrap:anywhere}
.foot-col p{font-weight:400;line-height:1.5;opacity:.8}
.foot-col a:hover{opacity:.72}
.foot-col a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.foot-col a:hover::after{transform:scaleX(1)}
/* A phone number is one object: it must not break, and in an RTL column it is
   isolated so the leading + stays at the front. The same holds for a number
   inside running copy, which carries .tel. */
.foot-col a[href^="tel:"],.tel{white-space:nowrap;unicode-bidi:isolate}

.foot-bottom{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:12px 24px;
  padding-top:24px;border-top:1px solid rgba(244,239,230,.1)}
.foot-legal{margin:0;font-size:13px;opacity:.6}
.foot-switch{display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:600;opacity:.75;transition:opacity var(--med)}
.foot-switch:hover{opacity:1}

/* The wordmark: the name set in type across the full 5%-to-5% band, where AMT
   had its logotype artwork. Sized in vw so it spans the band at every width;
   the two languages carry different sizes because the names differ in length. */
.foot-wordmark{margin:clamp(40px,7vw,80px) 0 clamp(8px,2vw,20px);
  font-size:20.4vw;font-weight:600;line-height:.9;letter-spacing:-.05em;white-space:nowrap;
  color:rgba(244,239,230,.94)}
[dir="rtl"] .foot-wordmark{font-size:16.6vw;line-height:1.3}

/* ============================================================================
   NOT FOUND
   ========================================================================== */
.nf-ar{margin-top:10px;font-size:16px;opacity:.7}

/* ============================================================================
   RIGHT TO LEFT
   Every inline padding and margin above is logical, so the layout mirrors on
   its own. Four things need saying.
   ========================================================================== */
/* 1. Arabic is a connected script; negative tracking pulls the joins apart. */
:root[dir="rtl"] body *{letter-spacing:normal}
/* 2. Arabic ascenders and descenders are taller; display sizes need leading. */
[dir="rtl"] .hero-stack,
[dir="rtl"] .sb-head,
[dir="rtl"] .card-head,
[dir="rtl"] .cards-head,
[dir="rtl"] .faq-head,
[dir="rtl"] .contact-card h2{line-height:1.4}
[dir="rtl"] .page-hero h1{line-height:1.3}
[dir="rtl"] .faq-item summary{line-height:1.6}
[dir="rtl"] .faq-item p,[dir="rtl"] .sb-sub,[dir="rtl"] .page-hero .lede,[dir="rtl"] .hero-sub{line-height:1.85}
/* 3. The small uppercase labels lean on caps and tracking, neither of which
      Arabic has, so at the Latin size they read as footnotes. A step up. */
[dir="rtl"] .eyebrow,[dir="rtl"] .foot-col h2,[dir="rtl"] .menu-block h2{font-size:14.5px;text-transform:none}
[dir="rtl"] .cr-label,[dir="rtl"] .cr-copy{font-size:12.5px}
[dir="rtl"] .foot-legal,[dir="rtl"] .foot-switch{font-size:14px}
/* 4. The chevrons point at a physical side; mirror the glyphs. */
[dir="rtl"] .cards-arrow svg{transform:scaleX(-1)}
[dir="rtl"] .foot-col a::after{transform-origin:right}
/* The hero rings sit on the far side from the copy, so they mirror too. */
[dir="rtl"] .hero-media{--rx:14%}
@media(min-width:900px){[dir="rtl"] .hero-media{--rx:24%}}
[dir="rtl"] .page-hero .hero-media{--rx:8%}

/* ============================================================================
   TOAST
   Raised by the contact card when a number or address is copied.
   ========================================================================== */
#iqToast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  z-index:300;max-width:min(560px,90vw);padding:12px 18px;text-align:center;
  background:var(--deep);color:var(--on-deep);font-size:13.5px;
  border:1px solid rgba(244,239,230,.16);border-radius:14px;box-shadow:0 12px 40px rgba(10,25,20,.35);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
#iqToast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============================================================================
   REDUCED MOTION
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001s!important;transition-duration:.001s!important}}

/* ============================================================================
   LANGUAGE SWITCH
   On the English pages the switch is the only Arabic text. Setting it in a
   system face keeps them from downloading, and the boot cover from waiting on,
   the 166 KB Noto Sans Arabic file for one word.
   ========================================================================== */
a[hreflang="ar"]{font-family:Tahoma,"Segoe UI","Geeza Pro","Noto Naskh Arabic",Arial,sans-serif}

/* ============================================================================
   NO SCRIPT
   Without JS the header never turns solid, so it would float transparent over
   the light sections; and the menu, the contact card and the card arrows have
   nothing to drive them. Let the header scroll away with the hero and hide the
   controls that cannot work. Every destination is still in the footer.
   ========================================================================== */
@media(scripting:none){
  .site-header{position:absolute}
  .burger,[data-contact-open],.cards-arrow{display:none}}