/* Self-hosted fonts (SIL Open Font License, see OFL.txt in each fonts/ subfolder).
   Variable fonts: one file covers the whole weight range.
   Latin subset: covers English, Dutch and Spanish, including € and curly quotes. */
@font-face{
  font-family:"Cormorant Garamond";
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url("fonts/cormorant-garamond/cormorant-garamond-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Karla";
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url("fonts/karla/karla-latin.woff2") format("woff2");
}

:root{
  /* Perspective Catering brand identity */
  --red:#94391A;       /* Pantone 174 C */
  --gold:#AD860F;      /* Pantone 118 C - light background only */
  --gold-light:#D3B14A;/* brightened gold for text on dark green */
  --petrol:#0F3132;    /* Pantone 5467 C */
  --olive:#5A653A;     /* Pantone 5753 C */

  --paper:#FCFAF6;
  --paper-lift:#F5F1E8;
  --ink:var(--petrol);
  --ink-soft:#4A5B58;
  --rule:#D9D0BC;
  --footer-text:#D8DDD6;
  --measure:36rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Karla",Helvetica,Arial,sans-serif;
  font-size:1.0625rem;
  line-height:1.7;
}

h1,h2,h3{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:500;
  line-height:1.15;
  margin:0;
}

p{margin:0 0 1rem;max-width:var(--measure)}

a{color:var(--red)}
a:focus-visible,button:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

.wrap{width:100%;max-width:56rem;margin:0 auto;padding:0 1.5rem}

section{padding:3.5rem 0}
section + section{border-top:1px solid var(--rule)}

/* ---------- Header with logo ---------- */

.brand{padding:2.5rem 0 0;text-align:center}
.brand img{width:min(20rem,80vw);height:auto}

/* ---------- Hero ---------- */

.hero{
  padding:2.5rem 0 3.5rem;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero .wrap{position:relative;z-index:1}

/* Decorative olive branch, derived from the logo.
   One drawing, mirrored/rotated/scaled differently per spot. */
.has-branch{position:relative;overflow:hidden}
.has-branch > .wrap{position:relative;z-index:1}

.branch{
  position:absolute;
  height:auto;
  color:var(--olive);
  pointer-events:none;
  z-index:0;
}

.branch-hero{top:-2.5rem;right:-5rem;width:24rem;max-width:60vw;opacity:.10}
.branch-services{bottom:-3rem;left:-6rem;width:20rem;max-width:52vw;opacity:.07;transform:scaleX(-1)}
.branch-footer{bottom:-5rem;right:-3rem;width:19rem;max-width:50vw;opacity:.14;color:var(--gold-light);transform:scaleX(-1) rotate(10deg)}

@media(max-width:40rem){
  .branch-hero{width:16rem;right:-4.5rem;top:-1.5rem;opacity:.09}
  .branch-services{width:13rem;left:-4.5rem;opacity:.06}
  .branch-footer{width:12rem;opacity:.12}
}

.hero h1{
  font-size:clamp(2rem,7vw,3.25rem);
  max-width:22ch;
  margin:0 auto;
}

.hero .lede{
  margin:1.25rem auto 0;
  max-width:34ch;
  font-size:1.1rem;
  color:var(--ink-soft);
}

.ornament{
  display:block;
  width:9rem;
  height:auto;
  margin:1.75rem auto;
  color:var(--gold);
}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  justify-content:center;
  margin-top:2rem;
}

.btn{
  font-family:"Karla",Arial,sans-serif;
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.85rem 1.6rem;
  border:1px solid var(--petrol);
  border-radius:16px;
  color:var(--petrol);
  background:transparent;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.btn:hover{background:var(--petrol);color:var(--paper)}

.btn-fill{background:var(--petrol);border-color:var(--petrol);color:var(--paper)}
.btn-fill:hover{background:transparent;color:var(--petrol)}

/* Row of contact icons under the hero button. 2.75rem = 44px tap target. */
.icon-links{
  list-style:none;
  margin:1.5rem 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  justify-content:center;
}
.icon-links a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.75rem;
  height:2.75rem;
  border:1px solid var(--petrol);
  border-radius:16px;
  color:var(--petrol);
  transition:background .15s ease,color .15s ease;
}
.icon-links a:hover{background:var(--petrol);color:var(--paper)}
.icon-links svg{
  width:1.4rem;
  height:1.4rem;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ---------- Reassurances ---------- */

.facts{
  list-style:none;
  margin:2.5rem 0 0;
  padding:0;
  display:grid;
  gap:.5rem;
  justify-content:center;
  text-align:center;
  font-size:.95rem;
  color:var(--ink-soft);
}
@media(min-width:44rem){
  .facts{grid-auto-flow:column;gap:2.5rem}
}

/* ---------- Headings ---------- */

h2{
  font-size:clamp(1.75rem,5vw,2.5rem);
  margin-bottom:1.5rem;
}

/* ---------- Contact ---------- */

.contact dl{margin:0;display:grid;gap:1.25rem}
@media(min-width:40rem){
  .contact dl{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.contact dt{
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--olive);
}
.contact dd{margin:.15rem 0 0;font-size:1.15rem}

footer{
  background:var(--petrol);
  color:var(--footer-text);
  padding:2.5rem 0;
  font-size:.9rem;
  margin-top:0;
}
footer p{margin:0 0 .4rem;max-width:none}
footer a{color:var(--gold-light)}

@media(prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* ---------- Language switcher ---------- */

.lang-switch{
  list-style:none;
  margin:0;
  padding:.75rem 1.5rem 0;
  display:flex;
  gap:.25rem;
  justify-content:flex-end;
}
.lang-switch a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:2.75rem;
  min-height:2.75rem;
  padding:0 .5rem;
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.1em;
  text-decoration:none;
  color:var(--ink-soft);
  border-bottom:2px solid transparent;
}
.lang-switch a:hover{color:var(--red)}
.lang-switch a[aria-current]{
  color:var(--petrol);
  border-bottom-color:var(--red);
}