/* ─────────────────────────────────────────────────────────────
   Loghan Travel — shuffle-hero layout.
   Monochrome by design; the logo carries the only colour.
   ───────────────────────────────────────────────────────────── */

@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/archivo-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+2074,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:100 900;font-display:swap;
  src:url(/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:100 900;font-display:swap;
  src:url(/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}

:root[data-theme="light"]{
  --bg:#ffffff;
  --fg:#0a0a0a;
  --muted:#6b6b6b;        /* 5.6:1 on white */
  --border:#e6e6e6;
  --tile:#f1f1f1;
  --accent:#4C6D16;       /* the chevron's deep green, 6.0:1 on white */
  --accent-ring:rgba(76,109,22,.45);
  --tile-line:rgba(0,0,0,.09);
  --btn-shadow:rgba(76,109,22,.45);
  --btn-bg:#4C6D16;
  --btn-fg:#ffffff;       /* 6.0:1 on the button */
  --btn-bg-hover:#3F5B12;
  --ring:#4C6D16;
}
:root[data-theme="dark"]{
  --bg:#0a0a0a;
  --fg:#fafafa;
  --muted:#a1a1a1;        /* 7.4:1 on #0a0a0a */
  --border:#262626;
  --tile:#1a1a1a;
  --accent:#93BA3C;       /* the chevron's highlight, 8.8:1 on #0a0a0a */
  --accent-ring:rgba(147,186,60,.4);
  --tile-line:rgba(255,255,255,.10);
  --btn-shadow:rgba(147,186,60,.28);
  --btn-bg:#93BA3C;
  --btn-fg:#0a0a0a;       /* 8.8:1 on the button */
  --btn-bg-hover:#A3C94A;
  --ring:#93BA3C;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--fg);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  transition:background-color .25s ease,color .25s ease;
}
img{display:block;max-width:100%}
a{color:inherit}
:where(a,button):focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:1152px;margin-inline:auto;padding-inline:clamp(20px,4vw,32px)}

/* ── header ───────────────────────────────────────────────── */
.site-head{padding-top:max(20px,env(safe-area-inset-top));padding-bottom:8px}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{height:clamp(66px,7.5vw,96px);width:auto}
:root[data-theme="light"] .logo-dark{display:none}
:root[data-theme="dark"]  .logo-light{display:none}

.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;
  border:1px solid var(--border);border-radius:10px;
  background:transparent;color:var(--fg);cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease;
}
.theme-toggle:hover{background:var(--tile);border-color:var(--muted)}
.theme-toggle svg{width:19px;height:19px;pointer-events:none}
:root[data-theme="light"] .icon-moon{display:none}
:root[data-theme="dark"]  .icon-sun{display:none}

/* ── hero ─────────────────────────────────────────────────── */
main{flex:1;display:flex;align-items:center;padding-block:clamp(16px,3vw,32px)}
.hero{
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
  gap:36px;
  width:100%;
}
@media (min-width:900px){ .hero{grid-template-columns:1fr 1fr;gap:48px} }

.eyebrow{
  display:block;margin:0 0 14px;
  font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--fg);
}
/* A live status, not an apology for an absent site: the dot says work is
   under way and the company is reachable today. */
.eyebrow.status{
  display:inline-flex;align-items:center;gap:9px;
  margin-bottom:18px;padding:6px 15px 6px 12px;
  border:1px solid var(--border);border-radius:999px;
  background:var(--tile);
  font-size:12.5px;font-weight:500;
}
.status .dot{
  width:7px;height:7px;flex:none;border-radius:50%;
  background:var(--accent);
  animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 var(--accent-ring)}
  70%{box-shadow:0 0 0 8px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
h1{
  margin:0;
  font-family:Archivo,Inter,system-ui,sans-serif;
  font-size:clamp(38px,5.4vw,62px);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.03em;
  text-wrap:balance;
}
.accent{color:var(--accent)}

/* ── entrance: the left column rises in, one line after another ─────────
   Animates `translate`, not `transform`, so the button keeps its own
   :active scale (an animation's fill would otherwise win the cascade). */
@keyframes rise{
  from{opacity:0;translate:0 18px}
  to{opacity:1;translate:0 0}
}
.copy>*,.error>*{animation:rise .7s cubic-bezier(.2,.7,.3,1) both}
.copy>*:nth-child(1),.error>*:nth-child(1){animation-delay:.05s}
.copy>*:nth-child(2),.error>*:nth-child(2){animation-delay:.14s}
.copy>*:nth-child(3),.error>*:nth-child(3){animation-delay:.23s}
.copy>*:nth-child(4),.error>*:nth-child(4){animation-delay:.32s}
.copy>*:nth-child(5),.error>*:nth-child(5){animation-delay:.41s}

.lede{
  margin:18px 0 26px;
  font-size:clamp(15.5px,1.5vw,18px);
  line-height:1.6;
  color:var(--muted);
  max-width:46ch;
}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;padding:0 20px;
  border:0;border-radius:8px;
  background:var(--btn-bg);color:var(--btn-fg);
  font:inherit;font-size:15px;font-weight:500;
  text-decoration:none;cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 10px 22px -12px var(--btn-shadow);
  transition:background-color .18s ease,transform .1s ease,box-shadow .18s ease;
}
.btn:hover{background:var(--btn-bg-hover);box-shadow:0 1px 2px rgba(0,0,0,.06),0 14px 26px -12px var(--btn-shadow)}
.btn:active{transform:scale(.97)}
.btn svg{width:15px;height:15px;pointer-events:none;transition:transform .18s ease}
.btn:hover svg{transform:translateX(3px)}
.call{margin:18px 0 0;font-size:14px;color:var(--muted)}
.call a{font-weight:500;color:var(--fg);text-decoration:none;border-bottom:1px solid var(--border)}
.call a:hover{border-bottom-color:var(--fg)}

/* ── shuffle grid ─────────────────────────────────────────── */
.shuffle-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(4,1fr);
  gap:4px;
  height:clamp(320px,44vw,450px);
}
.shuffle-grid .tile{
  position:relative;
  width:100%;height:100%;
  border-radius:6px;
  overflow:hidden;
  background-color:var(--tile);
  background-size:cover;
  background-position:center;
  box-shadow:inset 0 0 0 1px var(--tile-line);
  will-change:transform;
}
/* the photos are the work; name them */
.shuffle-grid .cap{
  position:absolute;inset:auto 0 0 0;
  padding:26px 10px 9px;
  font-size:11px;font-weight:500;line-height:1.25;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.4) 52%,transparent);
  opacity:0;translate:0 8px;
  transition:opacity .22s ease,translate .22s ease;
}
.shuffle-grid .tile:hover .cap{opacity:1;translate:0 0}

/* ── footer ───────────────────────────────────────────────── */
.site-foot{
  border-top:1px solid var(--border);
  margin-top:clamp(20px,3vw,32px);
  padding-block:18px max(18px,env(safe-area-inset-bottom));
  font-size:12px;color:var(--muted);
}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 22px}
.services{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;padding:0;
  font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.locator{white-space:nowrap}
.foot-links a{text-decoration:none;transition:color .18s ease}
.foot-links a:hover{color:var(--fg)}
.foot-links .mail{display:inline-flex;align-items:center;gap:7px}
.foot-links .mail svg{width:14px;height:14px}

/* short desktops (1280x720 and friends): reclaim the height from padding
   rather than from the logo or the grid */
@media (min-width:900px) and (max-height:800px){
  main{padding-block:16px}
  .site-head{padding-top:16px;padding-bottom:2px}
  .site-foot{margin-top:16px;padding-block:14px}
  .eyebrow.status{margin-bottom:12px}
  .lede{margin:14px 0 20px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms!important}
  .copy>*,.error>*{animation:none;opacity:1;translate:none}
  .status .dot{animation:none}
  .shuffle-grid .cap{transition:none}
}

/* ── error page ───────────────────────────────────────────────
   Same rhythm as the hero: label, heading, lede, button. */
.error{max-width:36rem}
.error .eyebrow{color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.08em;
  text-transform:uppercase}