/* ============================================================
   editorial.css — the preview's aesthetic, applied to the site.
   ------------------------------------------------------------
   Load order: site-graphite.css  ->  editorial.css
   This file changes STRUCTURE and TYPE only; all colour still comes
   from site-graphite.css. Delete the one <link> tag that loads it to
   go back to the current look. Nothing else is edited.

   Deliberately NOT included: forcing headings to uppercase. The
   preview's hero was three short words; real page titles here run to
   78 characters ("Office Fit-Out & Commercial Maintenance in Jumeirah
   Village Triangle (JVT)"), which in giant condensed caps wraps badly
   and reads as shouting.
   ============================================================ */

:root{
  --r:0px;                      /* square corners, per the reference grid */
  --ease-lux:cubic-bezier(.16,1,.3,1);
}

/* ---- 1. Hairlines instead of shadows ----------------------
   Shadows imply softness; a rule implies engineering. Depth is
   removed almost entirely and the border carries the structure. */
:root{
  --shadow-sm:0 0 0 rgba(0,0,0,0);
  --shadow-md:0 1px 2px rgba(20,22,24,.04);
  --shadow-lg:0 2px 10px rgba(20,22,24,.07);
}
.card,.slide,.hook-card,.consult-box,.svc-card,.area-card,.prog-card{
  box-shadow:none;
  border:1px solid var(--silver-line);
}

/* ---- 2. Square everything ---------------------------------
   A few components hardcode their own radius rather than using
   var(--r), so they are squared explicitly. */
.btn,.btn-lg,.pill,.tag,.badge,.card,.slide,.chip,
.div-links a,.tb-pill,.hero-sub,
input,select,textarea,.searchbar,.searchbar input,
.hook-card,.consult-box,.book-band,.faq-item{
  border-radius:0;
}
/* Kept round on purpose: circular by design, not decoration. */
.fab,.avatar{ border-radius:50%; }   /* .f-social a is square: see the social row below */

/* ---- 3. Editorial type ------------------------------------
   Tighter leading and slight negative tracking on headings; a
   longer measure and more generous line-height on body copy. */
h1{ line-height:1.02; letter-spacing:-.022em; }
h2{ line-height:1.08; letter-spacing:-.015em; }
h3{ line-height:1.16; letter-spacing:-.01em; }
p,li{ line-height:1.75; }

/* Wide-tracked mono eyebrows, as in the preview. */
.eyebrow,.kicker{
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
}

/* Buttons: condensed, wide-tracked, uppercase. Short strings only,
   so caps are safe here in a way they are not on headings. */
.btn,.btn-lg{
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:600;
}

/* ---- 4. Slow, mechanical motion ---------------------------
   0.7s on the custom curve. Hover is gated to real pointers so a
   finger tap on a phone never sticks in a hover state. */
.card,.slide,.hook-card,.svc-card,.area-card,.prog-card,.faq-item{
  transition:border-color .7s var(--ease-lux),
             box-shadow   .7s var(--ease-lux),
             transform    .7s var(--ease-lux);
}
.btn,.btn-lg{
  transition:background .7s var(--ease-lux),
             color      .7s var(--ease-lux),
             border-color .7s var(--ease-lux),
             transform  .15s var(--ease-lux);
}
.btn:active,.btn-lg:active{ transform:scale(.97); }

@media (hover:hover) and (pointer:fine){
  .card:hover,.slide:hover,.svc-card:hover,.area-card:hover,.prog-card:hover{
    border-color:var(--steel);
    transform:translateY(-4px);
    box-shadow:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .card,.slide,.hook-card,.svc-card,.area-card,.prog-card,
  .faq-item,.btn,.btn-lg{ transition:none; }
}

/* ============================================================
   Footer — two tiers
   ------------------------------------------------------------
   The old single row mixed three different SHAPES of content:
   a paragraph, a contact block, and link lists. Forcing them into
   one grid squeezed the brand text into a 9-line ribbon and left
   voids under the short columns.

   Tier 1 holds the two prose-shaped blocks (brand and contact).
   Tier 2 holds only link lists, so the columns are directly
   comparable. "Company" was also carrying 11 links against 8 and
   10 beside it; its five knowledge links are now "Resources",
   giving 10 / 8 / 6 / 5.
   ============================================================ */

/* ---- Tier 1: brand + contact ---- */
.f-top{
  display:grid;
  /* 1.15/1 rather than 1.5/1: at 1.5 the brand column was far wider
     than its own text, opening a dead zone before the contact block. */
  grid-template-columns:1.15fr 1fr;
  gap:40px 48px;
  align-items:start;
  padding-bottom:38px;
  border-bottom:1px solid rgba(255,255,255,.13);
}
.f-blurb{
  max-width:60ch;          /* a readable measure, not a narrow ribbon */
  margin:16px 0 22px;
  line-height:1.75;
}
.f-reach .f-contact{ margin:0; padding:0; list-style:none; }

/* ---- Tier 2: four comparable link columns ---- */
.f-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:34px 30px;
  align-items:start;
  padding:36px 0 44px;
}
.f-grid > .f-col{ min-width:0; }

/* Headings share one baseline across every column, and a rule above
   each ties the group together — so columns of different natural
   length read as deliberate rather than ragged. */
footer h4{
  margin:0 0 14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.13);
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;
  font-size:.86rem; letter-spacing:.16em; text-transform:uppercase;
  line-height:1.2;
}
.f-top h4{ padding-top:0; border-top:0; }   /* tier 1 already has its own rule */

footer .f-grid ul,
footer .f-reach ul{ margin:0; padding:0; list-style:none; }
footer .f-grid li{ margin:0 0 9px; line-height:1.5; }

/* info@downtownservices.ae is one unbreakable token; let it break
   rather than push out of its column. */
footer .f-contact a,
footer .f-contact span{ overflow-wrap:anywhere; }

@media (max-width:1080px){
  .f-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .f-top{ grid-template-columns:1fr; gap:28px; }
}
@media (max-width:520px){
  .f-grid{ grid-template-columns:1fr; gap:22px; }
}

/* ---- Social row -------------------------------------------
   The four icons read as one segmented control rather than four
   floating boxes: a single outer hairline with the icons divided
   by internal rules. Same logic as the rest of the theme — the
   structure comes from the line, not from spacing or shadow.
   ------------------------------------------------------------ */
.f-social{
  display:inline-flex;
  gap:0;                                    /* joined, not spaced */
  border:1px solid rgba(255,255,255,.22);
  flex-wrap:nowrap;
  width:max-content;
  max-width:100%;
}
.f-social a{
  width:44px; height:44px;                  /* 44px = the minimum comfortable tap target */
  display:inline-flex; align-items:center; justify-content:center;
  border:0;
  border-left:1px solid rgba(255,255,255,.22);
  border-radius:0;
  color:inherit;
  transition:background .5s cubic-bezier(.16,1,.3,1),
             color      .5s cubic-bezier(.16,1,.3,1);
}
.f-social a:first-child{ border-left:0; }   /* no seam against the outer frame */
.f-social svg{ width:17px; height:17px; fill:currentColor; }

/* Hover fills the single cell instead of lifting it out of the row —
   lifting would break the shared edge that makes it read as one unit. */
@media (hover:hover) and (pointer:fine){
  .f-social a:hover{
    background:var(--bone,#EDEDEB);
    color:var(--royal-deep);
    transform:none;
  }
}
.f-social a:focus-visible{
  outline:2px solid var(--bone,#EDEDEB);
  outline-offset:-2px;
}