/* =============================================================================
   Florest Services — styles.css
   -----------------------------------------------------------------------------
   One design system, reused everywhere. Every colour, size, gap and radius on
   this site comes from a token below. If you need a new value, add a token —
   don't hard-code it in a rule. That discipline is what keeps the site coherent
   as it grows.

   Register: institutional quiet. Precision over decoration.
   Palette source: the company business card (navy + gold).
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */
:root{
  /* Brand */
  --navy:        #333F6E;
  --navy-deep:   #28325C;
  --navy-ink:    #1B2340;   /* deepest — footer, hero */
  --gold:        #E8A33D;
  --gold-light:  #F2C55C;   /* the only gold that may carry text, and only on navy */
  --gold-deep:   #C4832A;

  /* Neutrals — never pure black or pure white */
  --ink:         #12151C;
  --ink-2:       #4E5666;
  --ink-3:       #7B8494;
  --line:        #E3E5EA;
  --line-soft:   #EFF1F4;
  --page:        #F7F8FA;
  --surface:     #FFFFFF;

  /* Type */
  --display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --t-xs:  0.75rem;   /* 12 — labels */
  --t-sm:  0.875rem;  /* 14 — captions, meta */
  --t-base:1rem;      /* 16 — body */
  --t-md:  1.125rem;  /* 18 — lead body */
  --t-lg:  1.375rem;  /* 22 — h3 */
  --t-xl:  1.875rem;  /* 30 — h2 */
  --t-2xl: 2.625rem;  /* 42 — page title */
  --t-3xl: 3.625rem;  /* 58 — hero */

  /* Space — 8px base */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10:128px;

  /* Shape — sharp. Property is precision, not softness. */
  --r-sm: 2px;
  --r:    4px;
  --r-lg: 8px;

  /* One shadow, reused */
  --shadow: 0 1px 2px rgba(18,21,28,.05), 0 8px 24px rgba(18,21,28,.05);

  --maxw: 1140px;
  --ease: cubic-bezier(.2,.6,.35,1);
}

/* ------------------------------------------------------------- 2. Baseline */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  font-family:var(--body);
  font-size:var(--t-base);
  line-height:1.65;
  color:var(--ink);
  background:var(--page);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum" 0;
}

img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }

h1,h2,h3,h4{ font-family:var(--display); font-weight:600; letter-spacing:-.02em; line-height:1.12 }
h1{ font-size:clamp(2.125rem, 5.5vw, var(--t-3xl)) }
h2{ font-size:clamp(1.625rem, 3.4vw, var(--t-xl)) }
h3{ font-size:var(--t-lg); letter-spacing:-.01em }
h4{ font-size:var(--t-base); letter-spacing:0 }

p{ max-width:66ch }
strong{ font-weight:600 }

/* Visible keyboard focus, everywhere. Non-negotiable. */
:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; border-radius:var(--r-sm) }
.on-navy :focus-visible{ outline-color:var(--gold-light) }

.skip{
  position:absolute; left:var(--s-4); top:-100px; z-index:200;
  background:var(--navy); color:#fff; padding:var(--s-3) var(--s-5);
  border-radius:var(--r); font-size:var(--t-sm); font-weight:600;
  transition:top .18s var(--ease);
}
.skip:focus{ top:var(--s-4) }

/* ---------------------------------------------------------- 3. Layout util */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--s-5) }
.section{ padding-block:var(--s-9) }
.section--tight{ padding-block:var(--s-8) }
.stack > * + *{ margin-top:var(--s-4) }
.muted{ color:var(--ink-2) }
.faint{ color:var(--ink-3) }
.hidden{ display:none !important }
.rule{ height:1px; background:var(--line); border:0 }

/* Section label — small caps + a hairline that drops like a root.
   This is the structural motif, echoing the roots in the logo mark. */
.label{
  display:flex; align-items:center; gap:var(--s-3);
  font-family:var(--display);
  font-size:var(--t-xs); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-deep);
  margin-bottom:var(--s-5);
}
.label::before{
  content:""; width:26px; height:1px; background:var(--gold); flex:none;
}
.on-navy .label{ color:var(--gold-light) }

/* ------------------------------------------------------------- 4. Wordmark */
.mark{ display:flex; align-items:center; gap:var(--s-3) }
.mark svg{ width:26px; height:26px; flex:none }
.mark-text{
  font-family:var(--display); font-weight:600; font-size:1.0625rem;
  letter-spacing:.14em; text-transform:uppercase;
}
.mark-text small{
  display:block; font-size:.5rem; font-weight:400; letter-spacing:.34em;
  color:var(--ink-3); margin-top:1px;
}
.on-navy .mark-text small{ color:rgba(255,255,255,.55) }

/* ------------------------------------------------------------- 5. Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  font-family:var(--display); font-size:var(--t-sm); font-weight:600;
  letter-spacing:.01em;
  padding:13px var(--s-5); border-radius:var(--r);
  border:1px solid transparent;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn--primary{ background:var(--navy); color:#fff }
.btn--primary:hover{ background:var(--navy-deep) }
.btn--gold{ background:var(--gold); color:#221703 }      /* dark ink on gold: 6.5:1 */
.btn--gold:hover{ background:var(--gold-light) }
.btn--quiet{ border-color:var(--line); color:var(--ink); background:var(--surface) }
.btn--quiet:hover{ border-color:var(--navy); }
.on-navy .btn--quiet{ background:transparent; border-color:rgba(255,255,255,.28); color:#fff }
.on-navy .btn--quiet:hover{ border-color:var(--gold-light) }

/* Text link — underline on a gold offset, never gold text on light */
.tlink{
  border-bottom:1px solid var(--gold);
  padding-bottom:1px; font-weight:500;
  transition:border-color .18s var(--ease), color .18s var(--ease);
}
.tlink:hover{ border-color:var(--navy); color:var(--navy) }
.on-navy .tlink{ color:#fff; border-color:var(--gold) }
.on-navy .tlink:hover{ color:var(--gold-light); border-color:var(--gold-light) }

/* --------------------------------------------------------------- 6. Header */
.site-head{
  position:sticky; top:0; z-index:100;
  background:rgba(247,248,250,.86);
  backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--line);
}
.head-in{ display:flex; align-items:center; gap:var(--s-6); height:70px }
.nav{ margin-left:auto; display:flex; align-items:center; gap:var(--s-6) }
.nav a{
  font-size:var(--t-sm); color:var(--ink-2); font-weight:500;
  padding-block:var(--s-2); position:relative;
  transition:color .16s var(--ease);
}
.nav a:hover{ color:var(--ink) }
.nav a[aria-current="page"]{ color:var(--ink); font-weight:600 }
.nav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--gold);
}
.nav-cta{ margin-left:var(--s-2) }
.burger{ display:none; margin-left:auto; width:42px; height:42px; align-items:center; justify-content:center; border-radius:var(--r) }
.burger:hover{ background:var(--line-soft) }
.burger span{ display:block; width:18px; height:1.5px; background:var(--ink); position:relative }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--ink) }
.burger span::before{ top:-6px } .burger span::after{ top:6px }

/* ----------------------------------------------------------------- 7. Hero */
.hero{
  background:var(--navy-ink); color:#fff;
  position:relative; overflow:hidden;
  padding-block:var(--s-10) var(--s-9);
}
.hero::after{
  /* the "root" hairlines — the logo's talons, abstracted. Very quiet. */
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to bottom, transparent 62%, rgba(232,163,61,.10) 62.05%, transparent 62.4%),
    radial-gradient(58% 80% at 84% 12%, rgba(232,163,61,.14), transparent 62%);
  pointer-events:none;
}
.hero .wrap{ position:relative; z-index:1 }

/* Hero watermark — the mark at scale, barely there. It anchors the empty
   right-hand column without competing with the headline. */
.hero-emblem-wrap{
  position:absolute; right:-4%; top:50%; transform:translateY(-50%);
  width:min(46%,460px); aspect-ratio:1; color:var(--gold);
  opacity:.14; pointer-events:none; z-index:0;
}
.hero-emblem{ width:100%; height:100% }
.hero h1{ max-width:16ch; margin-bottom:var(--s-5) }
.hero .lead{ font-size:var(--t-md); color:rgba(255,255,255,.76); max-width:52ch }
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-7) }

.page-head{ background:var(--navy-ink); color:#fff; padding-block:var(--s-8) }
.page-head h1{ font-size:clamp(1.875rem,4.4vw,var(--t-2xl)) }
.page-head .lead{ color:rgba(255,255,255,.72); font-size:var(--t-md); margin-top:var(--s-4); max-width:56ch }

/* ----------------------------------------------- 8. Signature: tenure bar */
/* A leasehold is a countdown. This is the one place the design raises
   its voice, because it carries the most important fact about the asset. */
.tenure{ margin-top:var(--s-8); max-width:640px }
.tenure-figs{ display:flex; align-items:baseline; gap:var(--s-3); margin-bottom:var(--s-5) }
.tenure-num{
  font-family:var(--display); font-size:var(--t-2xl); font-weight:600;
  letter-spacing:-.03em; line-height:1; color:var(--gold-light);
  font-variant-numeric:tabular-nums;
}
.tenure-cap{ font-size:var(--t-sm); color:rgba(255,255,255,.66) }

.tenure-track{ position:relative; height:1px; background:rgba(255,255,255,.22) }
.tenure-fill{
  position:absolute; left:0; top:0; height:1px; background:var(--gold);
  width:0; transition:width 1.4s var(--ease);
}
.tenure-now{
  position:absolute; top:-5px; width:1px; height:11px; background:var(--gold-light);
  transform:translateX(-.5px); opacity:0; transition:opacity .5s .9s var(--ease);
}
.tenure-now.on{ opacity:1 }
.tenure-ends{
  display:flex; justify-content:space-between; margin-top:var(--s-3);
  font-size:var(--t-xs); letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.52); font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------------- 9. Data tables */
/* A property company's most useful page element: a plain, honest fact table. */
.facts{ width:100%; border-collapse:collapse; max-width:640px }
.facts th,.facts td{
  text-align:left; padding:var(--s-4) 0; border-bottom:1px solid var(--line);
  vertical-align:top; font-size:var(--t-base);
}
.facts th{ font-weight:400; color:var(--ink-3); width:40%; font-size:var(--t-sm); padding-top:calc(var(--s-4) + 2px) }
.facts td{ font-weight:500; font-variant-numeric:tabular-nums }
.facts tr:last-child th,.facts tr:last-child td{ border-bottom:0 }

/* ------------------------------------------------------------- 10. Panels */
.grid{ display:grid; gap:var(--s-6) }
.grid--2{ grid-template-columns:repeat(2,1fr) }
.grid--3{ grid-template-columns:repeat(3,1fr) }
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:var(--s-9); align-items:start }

.panel{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s-6);
}
.panel h3{ margin-bottom:var(--s-3) }
.panel p{ color:var(--ink-2); font-size:var(--t-base) }

/* A quiet numbered list where order actually matters (the enquiry route). */
.steps{ counter-reset:s; list-style:none; max-width:660px }
.steps li{
  counter-increment:s; position:relative;
  padding:var(--s-5) 0 var(--s-5) var(--s-7);
  border-bottom:1px solid var(--line);
}
.steps li:last-child{ border-bottom:0 }
.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute; left:0; top:calc(var(--s-5) + 3px);
  font-family:var(--display); font-size:var(--t-xs); font-weight:600;
  letter-spacing:.1em; color:var(--gold-deep); font-variant-numeric:tabular-nums;
}
.steps h4{ margin-bottom:var(--s-1) }
.steps p{ color:var(--ink-2); font-size:var(--t-sm) }

/* People */
.person{ padding-block:var(--s-5); border-bottom:1px solid var(--line) }
.person:last-child{ border-bottom:0 }
.person h3{ font-size:var(--t-md) }
.person .role{
  font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-deep); font-family:var(--display); font-weight:600;
  margin-bottom:var(--s-2);
}
.person p{ color:var(--ink-2); font-size:var(--t-sm); margin-top:var(--s-1) }

/* ------------------------------------------------------------- 11. Map/loc */
.loc{
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface);
}
.loc iframe{ width:100%; height:340px; border:0; display:block; filter:grayscale(.35) contrast(1.02) }
.loc-foot{ padding:var(--s-5); border-top:1px solid var(--line); font-size:var(--t-sm); color:var(--ink-2) }

/* Placeholder for photography that doesn't exist yet. Honest, not decorative. */
.photo-slot{
  aspect-ratio:3/2; border:1px dashed var(--line);
  border-radius:var(--r-lg); background:var(--surface);
  display:grid; place-items:center; text-align:center; padding:var(--s-5);
  color:var(--ink-3); font-size:var(--t-sm);
}

/* --------------------------------------------------------------- 12. Forms */
.field{ margin-bottom:var(--s-5) }
.field label{ display:block; font-size:var(--t-sm); font-weight:500; margin-bottom:var(--s-2) }
.field input,.field textarea,.field select{
  width:100%; font:inherit; font-size:var(--t-base); color:var(--ink);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:12px var(--s-4);
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(51,63,110,.12);
}
.field .hint{ font-size:var(--t-xs); color:var(--ink-3); margin-top:var(--s-2) }
.field textarea{ resize:vertical; min-height:132px }

/* --------------------------------------------------------------- 13. Footer */
.site-foot{ background:var(--navy-ink); color:#fff; padding-block:var(--s-8) var(--s-6); margin-top:var(--s-9) }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:var(--s-7) }
.foot-grid h5{
  font-family:var(--display); font-size:var(--t-xs); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-bottom:var(--s-4);
}
.foot-grid a{ display:block; font-size:var(--t-sm); color:rgba(255,255,255,.78); margin-bottom:var(--s-3) }
.foot-grid a:hover{ color:var(--gold-light) }
.foot-blurb{ font-size:var(--t-sm); color:rgba(255,255,255,.62); margin-top:var(--s-4); max-width:34ch }
.foot-bottom{
  display:flex; flex-wrap:wrap; gap:var(--s-4); justify-content:space-between;
  margin-top:var(--s-8); padding-top:var(--s-5);
  border-top:1px solid rgba(255,255,255,.12);
  font-size:var(--t-xs); color:rgba(255,255,255,.5);
}

/* --------------------------------------------------------------- 14. Prose */
.prose h2{ margin-top:var(--s-8); margin-bottom:var(--s-4) }
.prose h2:first-child{ margin-top:0 }
.prose h3{ margin-top:var(--s-6); margin-bottom:var(--s-3) }
.prose p{ margin-bottom:var(--s-4); color:var(--ink-2) }
.prose ul{ margin:0 0 var(--s-4) var(--s-5); color:var(--ink-2) }
.prose li{ margin-bottom:var(--s-2) }

/* ------------------------------------------------------ 15. Reveal on scroll */
.reveal{ opacity:0; transform:translateY(8px); transition:opacity .55s var(--ease), transform .55s var(--ease) }
.reveal.in{ opacity:1; transform:none }

/* --------------------------------------------------------- 16. Responsive */
@media (max-width:900px){
  .split{ grid-template-columns:1fr; gap:var(--s-7) }
  .grid--3{ grid-template-columns:repeat(2,1fr) }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:var(--s-6) }
}
@media (max-width:680px){
  :root{ --s-9:64px; --s-10:80px }
  .burger{ display:flex }
  .nav{
    display:none; position:absolute; left:0; right:0; top:70px;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--page); border-bottom:1px solid var(--line);
    padding:var(--s-3) var(--s-5) var(--s-5);
  }
  .nav.open{ display:flex }
  .nav a{ padding-block:var(--s-4); border-bottom:1px solid var(--line-soft) }
  .nav a[aria-current="page"]::after{ display:none }
  .nav a[aria-current="page"]{ color:var(--navy) }
  .nav-cta{ margin:var(--s-4) 0 0 }
  .btn{ width:100% }
  .hero-actions .btn{ width:100% }
  .grid--2,.grid--3{ grid-template-columns:1fr }
  .hero-emblem-wrap{ width:74%; right:-24%; opacity:.09 }
  .foot-grid{ grid-template-columns:1fr }
  .facts th{ width:46% }
  .tenure-figs{ flex-direction:column; gap:var(--s-1) }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation:none !important; transition:none !important }
  .reveal{ opacity:1; transform:none }
  .tenure-fill{ transition:none }
  .tenure-now{ opacity:1 }
}

@media print{
  .site-head,.site-foot,.btn,.burger{ display:none }
  body{ background:#fff; color:#000 }
  .hero,.page-head{ background:#fff; color:#000 }
}