/* ============================================================
   IDESIGN GROUP — stylesheet
   Monochrome. Six neutral tones, no colour.

   Built on tokens: every size, space and rule below resolves to
   a value defined in :root. Nothing is set arbitrarily.
   ============================================================ */

/* ---- TT FORS ----------------------------------------------
   Licensed webfont (TypeType). Buy the WEB licence, drop the
   .woff2 files into fonts/, then delete the comment
   markers around the two @font-face rules below.
   Until then the wordmark falls back to Outfit.
------------------------------------------------------------- */
/*
@font-face{
  font-family:'TT Fors';
  src:url('fonts/TTFors-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'TT Fors';
  src:url('fonts/TTFors-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
*/

:root{
  /* ---------- COLOUR ---------- */
  --ink:#111110;      /* headings, primary text        */
  --mid:#403D39;      /* body copy                     */
  --soft:#6B675F;     /* meta, labels — 5.4:1 on paper */
  --line:#E3E0DA;     /* hairlines                     */
  --paper:#FBFAF8;    /* page                          */
  --fill:#F0EEE9;     /* image wells                   */
  --on-ink:#A8A49C;   /* secondary text on ink — 4.9:1 */

  /* ---------- TYPEFACES ---------- */
  --wm:'TT Fors','Outfit',system-ui,sans-serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ---------- TYPE SCALE ----------
     Eight steps, four of them fluid. Nothing in between. */
  --fs-label:11px;                    /* tracked uppercase */
  --fs-caption:12px;                  /* captions, footer  */
  --fs-meta:13px;                     /* secondary lines   */
  --fs-body:15px;                     /* body copy         */
  --fs-lead:clamp(17px,1.6vw,20px);   /* opening statement */
  --fs-row:clamp(22px,2.8vw,30px);    /* index rows        */
  --fs-title:clamp(30px,5vw,52px);    /* page titles       */
  --fs-display:clamp(44px,8vw,88px);  /* wordmark          */

  /* ---------- LINE HEIGHT ---------- */
  --lh-display:.92;
  --lh-tight:1.1;
  --lh-snug:1.3;
  --lh-body:1.6;

  /* ---------- TRACKING ---------- */
  --tr-display:-.035em;
  --tr-title:-.025em;
  --tr-row:-.02em;
  --tr-label:.14em;

  /* ---------- SPACE — 4px base ---------- */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* ---------- LAYOUT ---------- */
  --max:1080px;
  --gutter:var(--s6);
  --header-h:60px;
  --section-y:var(--s7);
  --radius:0;                  /* sharp corners are the brand */
  --hair:1px solid var(--line);
  --tap:44px;                  /* minimum touch target        */

  /* ---------- MOTION ---------- */
  --ease:cubic-bezier(.2,.6,.3,1);
  --dur:.22s;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

/* Body is a column so the footer is pushed to the bottom of short
   pages (404, thanks) instead of floating mid-screen. */
body{
  font-family:var(--sans);background:var(--paper);color:var(--ink);
  font-size:var(--fs-body);line-height:var(--lh-body);font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100vh;display:flex;flex-direction:column;
}
main{flex:1 0 auto}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);width:100%}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}
button{font:inherit}

/* One visible focus ring for every interactive element. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;
}

.wordmark{font-family:var(--wm);font-weight:700;
  letter-spacing:var(--tr-row);line-height:1}

/* Shared label treatment — eyebrows, section headings, tags. */
.lbl,.own,.who,.lst li .m,.ph i{
  font-size:var(--fs-label);font-weight:600;
  letter-spacing:var(--tr-label);text-transform:uppercase;
}

/* Shared action treatment. Every CTA on the site is this one
   component; it was previously three near-identical variants. */
.tail a,.cta a,.btn{
  display:inline-block;font-family:var(--sans);
  font-size:var(--fs-caption);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  background:none;border:none;border-bottom:1px solid var(--ink);
  padding:var(--s1) 0;cursor:pointer;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
/* Only the index CTA is short enough to guarantee one line; the
   branch CTAs run to 45 characters and must be free to wrap. */
.tail a{white-space:nowrap}
.tail a:hover,.cta a:hover,.btn:hover{
  color:var(--soft);border-color:var(--soft);
}

/* skip link — accessibility */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:var(--s3) var(--s4);font-size:var(--fs-meta);z-index:200}
.skip:focus{left:0}

/* ---------- HEADER ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(251,250,248,.93);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:var(--hair);flex:none}
.nav{display:flex;align-items:center;justify-content:space-between;
  height:var(--header-h);gap:var(--s5)}
.nav .mk{font-family:var(--wm);font-weight:700;font-size:var(--fs-body);
  letter-spacing:.01em;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:var(--tap)}
.nav .rt{display:flex;align-items:center;gap:var(--s5)}

/* Every nav link reads the same: one size, one case, one colour.
   HOME was previously uppercase and tracked while Contact beside
   it was sentence case. */
.nav .rt a,.back{font-size:var(--fs-caption);font-weight:500;
  letter-spacing:.01em;text-transform:none;color:var(--soft);
  display:inline-flex;align-items:center;min-height:var(--tap);
  transition:color var(--dur) var(--ease)}
.nav .rt a:hover,.back:hover{color:var(--ink)}

.lang{display:flex;gap:var(--s1);margin-right:calc(var(--s2) * -1)}
.lang button{background:none;border:none;font-family:var(--sans);
  font-size:var(--fs-label);font-weight:600;letter-spacing:.08em;
  cursor:pointer;color:var(--soft);padding:0;
  min-width:var(--tap);min-height:var(--tap);
  display:inline-flex;align-items:center;justify-content:center;
  transition:color var(--dur) var(--ease)}
.lang button.on{color:var(--ink)}
.lang button:hover{color:var(--ink)}

/* ---------- LANDING INDEX ---------- */
.top{padding:var(--s7) 0 var(--s6)}
.top .big{font-family:var(--wm);font-weight:700;font-size:var(--fs-display);
  letter-spacing:var(--tr-display);line-height:var(--lh-display)}
.lockup{display:inline-block}
/* Strapline is stretched flush to the wordmark by script.js.
   Named .strap, not .sub — .sub collided with the submit button
   and gave this paragraph a border and a pointer cursor. */
.top .strap{display:flex;justify-content:space-between;width:100%;
  font-size:clamp(11px,1.45vw,15px);font-weight:700;text-transform:uppercase;
  color:var(--ink);margin-top:var(--s3);letter-spacing:0;line-height:1}
.top .strap .sp{flex:0 0 .34em}

.index{border-top:var(--hair)}
.row{display:grid;grid-template-columns:var(--s6) 1fr auto;gap:var(--s5);
  align-items:baseline;padding:var(--s5) 0;border-bottom:var(--hair);
  transition:padding var(--dur) var(--ease)}
.row:hover,.row:focus-visible{padding-left:var(--s3)}
.row .n{font-size:var(--fs-label);font-weight:500;color:var(--soft);letter-spacing:.08em}
.row .nm{display:block;font-family:var(--wm);font-weight:700;font-size:var(--fs-row);
  letter-spacing:var(--tr-row);line-height:var(--lh-tight)}
.row .ds{display:block;font-size:var(--fs-meta);font-weight:400;
  color:var(--soft);margin-top:var(--s1)}
.row .ar{font-size:var(--fs-body);color:var(--soft);
  transition:color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.row:hover .ar,.row:focus-visible .ar{color:var(--ink);transform:translateX(5px)}

.tail{padding:var(--s7) 0 var(--s8);display:flex;justify-content:space-between;
  gap:var(--s5) var(--s7);flex-wrap:wrap;align-items:flex-end}
.tail>div{flex:1 1 30rem;min-width:0}
.tail .lead{font-size:var(--fs-lead);font-weight:400;color:var(--ink);
  max-width:52ch;line-height:var(--lh-snug);letter-spacing:-.012em}
.tail .sub2{font-size:var(--fs-meta);font-weight:400;color:var(--soft);
  margin-top:var(--s3)}

/* ---------- BRANCH PAGES ----------
   Hierarchy runs eyebrow -> title -> descriptor -> lead -> body.
   The descriptor was previously 14px bold, competing with the
   larger tagline directly beneath it. */
.bh{padding:var(--s7) 0;border-bottom:var(--hair)}
.own{color:var(--soft);margin-bottom:var(--s4)}
.bh .nm{font-family:var(--wm);font-weight:700;font-size:var(--fs-title);
  letter-spacing:var(--tr-title);line-height:var(--lh-tight)}
.bh .ds{font-size:var(--fs-meta);font-weight:500;color:var(--soft);
  margin-top:var(--s3)}
.bh .tg{font-size:var(--fs-lead);margin-top:var(--s5);max-width:34ch;
  font-weight:400;line-height:var(--lh-snug);letter-spacing:-.012em}
.bh .ld{font-size:var(--fs-body);font-weight:400;color:var(--mid);
  max-width:52ch;margin-top:var(--s4)}

section{padding:var(--section-y) 0;border-bottom:var(--hair)}
.lbl{color:var(--ink);margin-bottom:var(--s5)}

.lst{list-style:none}
.lst li{padding:var(--s4) 0;border-bottom:var(--hair);
  display:grid;grid-template-columns:1fr auto;gap:var(--s5);align-items:baseline}
.lst li:last-child{border-bottom:none;padding-bottom:0}
.lst li .t{color:var(--ink);font-size:var(--fs-body)}
/* Meta reads as a taxonomy tag rather than a word competing with
   the service name beside it. */
.lst li .m{color:var(--soft);text-align:right}

/* Three columns at desktop. The old auto-fill produced four, which
   left Landscape's nine projects as 4+4+1 — one image alone in a
   three-quarters-empty row. */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.grid--wide{grid-template-columns:repeat(2,1fr)}
.ph{aspect-ratio:4/3;background:var(--fill);border:var(--hair);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover}
.ph i{font-style:normal;font-size:var(--fs-label);color:var(--soft)}
.media-link{display:block}
.it .cap{font-size:var(--fs-meta);font-weight:500;margin-top:var(--s3)}
.it .sc{font-size:var(--fs-caption);color:var(--soft);margin-top:var(--s1)}

/* ---------- PROCESS STEPS ----------
   A five-across band at desktop, each step opening under its own
   rule. Below 900px it folds into a numbered list rather than a
   narrow grid, so no step is ever left orphaned in a part row. */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s5)}
.step{border-top:1px solid var(--ink);padding-top:var(--s3)}
.step .k{display:block;font-family:var(--wm);font-weight:700;
  font-size:var(--fs-meta);color:var(--soft);letter-spacing:.08em}
.step .h{display:block;font-family:var(--wm);font-weight:700;
  font-size:var(--fs-lead);letter-spacing:var(--tr-row);
  line-height:var(--lh-tight);margin-top:var(--s4)}
.step .p{display:block;font-size:var(--fs-caption);color:var(--soft);
  line-height:var(--lh-body);margin-top:var(--s2)}
.steps-end{font-size:var(--fs-meta);color:var(--soft);margin-top:var(--s5)}

/* ---------- YOUTUBE PANEL ----------
   The one inverted block on the site. Watching the films is the
   page's primary action, so it gets the only tonal shift in the
   palette rather than a decorative treatment. */
.tube{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s5);background:var(--ink);color:var(--paper);
  padding:var(--s6);margin-top:var(--s5)}
.tube .th{display:block;font-family:var(--wm);font-weight:700;
  font-size:var(--fs-row);letter-spacing:var(--tr-row);line-height:var(--lh-tight)}
.tube .ta{display:block;font-size:var(--fs-caption);color:var(--on-ink);
  letter-spacing:.06em;margin-top:var(--s2)}
.tube .tgo{font-size:var(--fs-row);line-height:1;flex:none;
  transition:transform var(--dur) var(--ease)}
.tube:hover .tgo{transform:translateX(5px)}
/* The global focus ring is ink, which would vanish on this panel. */
.tube:focus-visible{outline-color:var(--paper);outline-offset:-6px}

.txt{max-width:56ch;font-size:var(--fs-body);font-weight:400;
  color:var(--mid);line-height:var(--lh-body)}
.txt p{margin-bottom:var(--s4)}
.txt p:last-child{margin-bottom:0}

.cta{padding:var(--s7) 0;border-bottom:var(--hair)}

/* ---------- CONTACT ---------- */
.cg{display:grid;grid-template-columns:1fr 1fr;gap:var(--s9)}
.fd{margin-bottom:var(--s5)}
.fd label{display:block;font-size:var(--fs-label);font-weight:600;
  letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--soft);margin-bottom:var(--s2)}
.fd input,.fd select,.fd textarea{width:100%;padding:var(--s3) 0;border:none;
  border-bottom:var(--hair);background:none;font-family:var(--sans);
  font-size:var(--fs-body);font-weight:400;color:var(--ink);border-radius:var(--radius)}
.fd input:focus-visible,.fd select:focus-visible,.fd textarea:focus-visible{
  outline:none;border-bottom-color:var(--ink);box-shadow:0 1px 0 0 var(--ink)}
.fd textarea{resize:vertical;line-height:var(--lh-body)}
.btn{margin-top:var(--s5)}
.hp{position:absolute;left:-9999px}      /* honeypot — spam trap */

/* ---------- TAP TO CALL ----------
   Large touch targets. tel: dials directly on a phone;
   wa.me opens WhatsApp. Both fall back to plain links on desktop. */
.call{border-top:1px solid var(--ink);margin-bottom:var(--s6)}
.call-row{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);padding:var(--s4) 0;border-bottom:var(--hair)}
.call-row .who{color:var(--soft);margin-bottom:var(--s2)}
/* The phone numbers are the primary action on a mobile visit, so
   they carry a full 44px target rather than the 24px minimum. */
.call-row .num{font-family:var(--wm);font-weight:700;font-size:clamp(19px,2.4vw,24px);
  letter-spacing:-.01em;color:var(--ink);line-height:var(--lh-tight);
  display:inline-flex;align-items:center;min-height:var(--tap);
  transition:color var(--dur) var(--ease)}
.call-row a.num:hover{color:var(--mid)}
.call-acts{display:flex;gap:var(--s2);flex-shrink:0}
.call-acts a{font-size:var(--fs-label);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;border:var(--hair);padding:0 var(--s4);
  white-space:nowrap;color:var(--mid);min-height:var(--tap);
  display:inline-flex;align-items:center;justify-content:center;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),
             background-color var(--dur) var(--ease)}
.call-acts a:hover{border-color:var(--ink);color:var(--ink)}
.call-acts a.pri{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.call-acts a.pri:hover{background:transparent;color:var(--ink)}

.ci{padding:var(--s4) 0;border-bottom:var(--hair)}
.ci b{font-weight:500;font-size:var(--fs-meta);display:block}
.ci span{font-size:var(--fs-caption);color:var(--soft)}
.ci a{transition:color var(--dur) var(--ease)}
.ci a:hover{color:var(--ink)}

/* ---------- FOOTER ---------- */
footer{padding:var(--s6) 0 var(--s7);font-size:var(--fs-caption);
  color:var(--soft);margin-top:auto;flex:none}
.fr{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  align-items:center}
/* Standalone links, so they owe the 24px minimum target (WCAG 2.5.8). */
.fr a{display:inline-flex;align-items:center;min-height:24px;
  transition:color var(--dur) var(--ease)}
.fr a:hover{color:var(--ink)}

.note{border-left:var(--hair);padding:0 0 0 var(--s4);font-size:var(--fs-caption);
  line-height:var(--lh-body);color:var(--soft);margin-top:var(--s5);max-width:60ch}

/* ============================================================
   RESPONSIVE — two breakpoints, each on the layout's own terms.
   900px: the 1080px canvas stops holding side-by-side content.
   560px: single column, stacked actions.
   ============================================================ */
@media(max-width:900px){
  :root{--gutter:var(--s5);--section-y:var(--s6)}
  .cg{grid-template-columns:1fr;gap:var(--s7)}
  .row{grid-template-columns:var(--s5) 1fr auto;gap:var(--s4)}
  .grid,.grid--wide{grid-template-columns:repeat(2,1fr);gap:var(--s4)}
  /* Steps fold into a numbered list — never a part-filled grid. */
  .steps{grid-template-columns:1fr;gap:0}
  .step{display:grid;grid-template-columns:var(--s6) 1fr;gap:var(--s4);
    border-top:none;border-bottom:var(--hair);padding:var(--s4) 0;
    align-items:baseline}
  .step:first-child{border-top:1px solid var(--ink)}
  .step .h{margin-top:0}
  .tube{padding:var(--s5);gap:var(--s4)}
  .bh{padding:var(--s6) 0}
  .top{padding:var(--s6) 0 var(--s5)}
  .tail{padding:var(--s6) 0 var(--s7)}
  .nav .rt{gap:var(--s4)}
}

/* The strapline is stretched flush to the wordmark on desktop. On a
   narrow screen a 30-character line cannot fit that width, so it
   falls back to normal tracked text that wraps. */
@media(max-width:700px){
  .top .strap{flex-wrap:wrap;justify-content:flex-start;font-size:var(--fs-label);
    letter-spacing:.09em;line-height:var(--lh-snug)}
  .top .strap .sp{flex:0 0 .5em}
}

@media(max-width:560px){
  /* The wordmark already links home, so the separate "Home" link is
     a second link to the same destination. Drop it here to buy back
     header width instead of letting the nav overflow.
     Selector must outrank `.nav .rt a`, hence the full path. */
  .nav .rt .back{display:none}
  .nav{gap:var(--s3)}
  .nav .rt{gap:var(--s3)}
  /* Narrower but still a compliant target: 32x44 clears the 24x24
     minimum on both axes. */
  .lang button{min-width:30px}
  /* 'IDESIGN Landscape' is the longest wordmark; at 320px it is what
     pushes the nav wide. Step it down rather than overflow. */
  .nav .mk{font-size:var(--fs-caption)}

  .call-row{flex-direction:column;align-items:flex-start;gap:var(--s3)}
  .call-acts{width:100%}
  .call-acts a{flex:1}
  .lst li{grid-template-columns:1fr;gap:var(--s1)}
  .lst li .m{text-align:left}
  .tail{align-items:flex-start}
}

/* ---------- PRINT ---------- */
@media print{
  header,.cta,.lang,.back{display:none}
  body{background:#fff;display:block}
  section,.bh{border:none;padding:var(--s4) 0}
}

/* ---------- MOTION ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}