/*
Theme Name: Island Canvas
Theme URI: https://islandcanvas.ca
Author: Island Canvas Inc.
Description: Responsive custom WordPress theme for Island Canvas Inc.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: island-canvas
*/
:root{
  --navy:#07223a;
  --navy2:#0d3453;
  --gold:#c3a04d;
  --cream:#f5f1e8;
  --ink:#102436;
  --muted:#63717c;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:white}
a{text-decoration:none}
.top{
 display:flex;align-items:center;justify-content:space-between;gap:28px;
 padding:15px 5vw;background:white;border-bottom:1px solid #d8dde1
}
.logo{width:min(315px,42vw);height:auto;display:block}
.contactTop{font-family:Georgia,serif;font-size:20px;line-height:1.35;color:var(--navy)}
.contactTop small{display:block;font-family:Arial,sans-serif;font-size:13px;color:#526473;margin-top:5px}
.tagline{text-align:right;font-family:Georgia,serif;color:#9a772c;font-style:italic;font-size:18px}
.tagline small{display:block;color:var(--navy);font-family:Arial,sans-serif;font-style:normal;font-size:12px;margin-top:4px}
.nav{
 position:sticky;top:0;z-index:20;
 display:flex;justify-content:center;gap:28px;flex-wrap:wrap;
 padding:13px 4vw;background:var(--navy);box-shadow:0 2px 8px rgba(0,0,0,.18)
}
.nav a{color:#fff;font-size:12px;letter-spacing:1px;font-weight:bold}
.nav a:hover{color:#e6c36d}
.hero{position:relative;min-height:600px;display:flex;align-items:center;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,20,35,.94) 0%,rgba(3,20,35,.62) 44%,rgba(3,20,35,.08) 78%)}
.heroCopy{position:relative;z-index:2;color:#fff;padding:70px 6vw;max-width:720px}
.eyebrow{font-size:12px;letter-spacing:3px;font-weight:bold;color:#e0bf68;text-transform:uppercase}
.hero h1{font:normal clamp(46px,6vw,82px)/.98 Georgia,serif;margin:12px 0 20px}
.hero p{font-size:18px;line-height:1.6;color:#ecf1f4;max-width:610px}
.btn{display:inline-block;background:var(--gold);color:#fff;font-weight:bold;font-size:12px;letter-spacing:1px;padding:14px 22px;margin-top:10px}
.area{background:#fff;color:var(--navy);text-align:center;font-weight:bold;letter-spacing:1.5px;padding:18px 15px;border-bottom:1px solid #e1e5e8}
.section{padding:70px 6vw}
.section.alt{background:var(--cream)}
.sectionHead{text-align:center;max-width:850px;margin:0 auto 38px}
.sectionHead h2{font:normal 42px/1.1 Georgia,serif;color:var(--navy);margin:10px 0}
.sectionHead p{line-height:1.7;color:#526473;font-size:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.showcasePair{max-width:1050px;margin:0 auto}
.service{border:1px solid #dde3e7;background:white;overflow:hidden}
.service img{width:100%;height:260px;object-fit:cover;display:block}
.service .copy{padding:26px}
.service h3{font:normal 28px Georgia,serif;color:var(--navy);margin:4px 0 10px}
.service p{color:#596a76;line-height:1.55}
.linkbtn{display:inline-block;border:1px solid var(--navy);color:var(--navy);font-size:11px;font-weight:bold;padding:11px 15px;margin-top:8px;letter-spacing:.8px}
.feature{background:var(--navy);color:white;display:grid;grid-template-columns:36% 64%;margin-top:22px}
.featureText{padding:45px}
.featureText h3{font:normal 38px Georgia,serif;margin:8px 0 15px}
.featureText p{line-height:1.6;color:#d4e0e8}
.featurePhotos{display:grid;grid-template-columns:1.45fr 1fr;gap:4px;padding:4px}
.featurePhotos img{width:100%;height:100%;object-fit:cover;min-height:310px}
.featurePhotos .stack{display:grid;grid-template-rows:1fr 1fr;gap:4px}
.featurePhotos.twoPhotos{grid-template-columns:1.45fr 1fr}
.aboutGrid{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center}
.aboutGrid h2{font:normal 44px Georgia,serif;color:var(--navy);margin:6px 0 20px}
.aboutGrid p{line-height:1.75;color:#526473}
.factRow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
.fact{background:var(--navy);color:#fff;padding:24px 18px;text-align:center}
.fact strong{font:normal 31px Georgia,serif;color:#e0bf68;display:block}
.awards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.awardCard{background:#fff;border:1px solid #dde3e7;padding:15px;text-align:center}
.awardCard img{width:100%;height:240px;object-fit:contain;background:#f7f7f7}
.awardCard h4{font:normal 21px Georgia,serif;color:var(--navy);margin:14px 0 4px}
.awardCard p{font-size:13px;color:#63717c;line-height:1.45}
.projectNote{text-align:center;font-weight:bold;color:var(--navy);margin:0 0 30px}
.testimonials{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.quote{background:#fff;border-left:4px solid var(--gold);padding:30px;box-shadow:0 4px 18px rgba(0,0,0,.06)}
.quote p{font:italic 18px/1.65 Georgia,serif;color:#334a5b;margin:0}
.quote .who{font:700 12px Arial,sans-serif;letter-spacing:.7px;color:var(--navy);margin-top:18px;font-style:normal}
.quoteFeature{display:grid;grid-template-columns:1fr 1fr;gap:0;background:white;border:1px solid #dde3e7;margin-bottom:24px}
.quoteFeature .photos{display:grid;grid-template-columns:1.6fr 1fr;gap:4px;padding:4px}
.quoteFeature img{width:100%;height:100%;min-height:250px;object-fit:cover}
.quoteFeature .review{padding:34px}
.quoteFeature .review h3{font:normal 28px Georgia,serif;color:var(--navy);margin-top:0}
.quoteFeature .review p{line-height:1.65;color:#526473}
.quoteFeature blockquote{font:italic 17px/1.55 Georgia,serif;margin:18px 0;color:#243d50}
.contactSection{background:var(--navy);color:#fff;padding:70px 6vw}
.contactGrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px}
.contactGrid h2{font:normal 44px Georgia,serif;margin:6px 0 18px}
.contactGrid p{line-height:1.7;color:#d2dfe7}
.contactList{line-height:2.0}
.contactList a{color:#fff}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form input,.form select,.form textarea{width:100%;border:1px solid #66809a;background:#fff;color:#102436;padding:13px;font:14px Arial}
.form textarea{grid-column:1/-1;min-height:125px}
.form .wide{grid-column:1/-1}
.form button{background:var(--gold);border:0;color:white;font-weight:bold;padding:14px 20px;letter-spacing:.8px;cursor:pointer}
.footer{background:#041728;color:#cbd7df;text-align:center;padding:24px;font-size:12px}
@media(max-width:900px){
 .top{align-items:flex-start}.tagline{display:none}.contactTop{font-size:16px}
 .nav{gap:16px}
 .hero{min-height:560px}.hero img{object-position:62% center}
 .grid3,.grid2,.awards{grid-template-columns:1fr}
 .feature,.aboutGrid,.quoteFeature,.contactGrid{grid-template-columns:1fr}
 .featurePhotos{grid-template-columns:1fr 1fr}
 .testimonials{grid-template-columns:1fr}
 .factRow{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:600px){
 .top{padding:11px 4vw;gap:10px}.logo{width:47vw}.contactTop{font-size:13px}.contactTop small{font-size:10px}
 .nav{justify-content:flex-start;overflow:auto;flex-wrap:nowrap;padding:12px 4vw}
 .nav a{white-space:nowrap}
 .hero{min-height:560px}.heroCopy{padding:54px 7vw}.hero h1{font-size:52px}.hero p{font-size:16px}
 .section{padding:52px 5vw}.sectionHead h2,.aboutGrid h2,.contactGrid h2{font-size:35px}
 .service img{height:230px}.featureText{padding:32px}.featureText h3{font-size:32px}
 .featurePhotos{grid-template-columns:1fr}.featurePhotos .stack{grid-template-columns:1fr 1fr;grid-template-rows:none}
 .factRow{grid-template-columns:1fr}.quoteFeature .photos{grid-template-columns:1fr 1fr}.quoteFeature img{min-height:180px}
 .form{grid-template-columns:1fr}.form textarea,.form .wide{grid-column:1}
}